Menaka Jayawardena
7 years ago
parent
60310d3ca1
commit
a64a32f0c3
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 443 KiB |
File diff suppressed because one or more lines are too long
@ -1,37 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
|
||||||
import './input.css';
|
|
||||||
|
|
||||||
class Input2 extends Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="custom-input">
|
|
||||||
<input type="text" required/>
|
|
||||||
<span className="highlight"></span>
|
|
||||||
<span className="under-line"></span>
|
|
||||||
<label>Name</label>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Input2;
|
|
||||||
@ -1,118 +0,0 @@
|
|||||||
/** {*/
|
|
||||||
/*box-sizing: border-box;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.custom-input {*/
|
|
||||||
/*position: relative;*/
|
|
||||||
/*margin-bottom: 45px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*input {*/
|
|
||||||
/*font-size: 18px;*/
|
|
||||||
/*padding: 10px 10px 10px 5px;*/
|
|
||||||
/*display: block;*/
|
|
||||||
/*width: 300px;*/
|
|
||||||
/*border: none;*/
|
|
||||||
/*border-bottom: 1px solid #757575;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*input:focus {*/
|
|
||||||
/*outline: none;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*label {*/
|
|
||||||
/*color: #999;*/
|
|
||||||
/*font-size: 18px;*/
|
|
||||||
/*font-weight: normal;*/
|
|
||||||
/*position: absolute;*/
|
|
||||||
/*pointer-events: none;*/
|
|
||||||
/*left: 5px;*/
|
|
||||||
/*top: 10px;*/
|
|
||||||
/*transition: 0.2s ease all;*/
|
|
||||||
/*-moz-transition: 0.2s ease all;*/
|
|
||||||
/*-webkit-transition: 0.2s ease all;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!* active state *!*/
|
|
||||||
/*input:focus ~ label, input:valid ~ label {*/
|
|
||||||
/*top: -20px;*/
|
|
||||||
/*font-size: 14px;*/
|
|
||||||
/*color: #5264AE;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.under-line {*/
|
|
||||||
/*position: relative;*/
|
|
||||||
/*display: block;*/
|
|
||||||
/*width: 300px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.under-line:before, .under-line:after {*/
|
|
||||||
/*content: '';*/
|
|
||||||
/*height: 2px;*/
|
|
||||||
/*width: 0;*/
|
|
||||||
/*bottom: 1px;*/
|
|
||||||
/*position: absolute;*/
|
|
||||||
/*background: #5264AE;*/
|
|
||||||
/*transition: 0.2s ease all;*/
|
|
||||||
/*-moz-transition: 0.2s ease all;*/
|
|
||||||
/*-webkit-transition: 0.2s ease all;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.under-line:before {*/
|
|
||||||
/*left: 50%;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.under-line:after {*/
|
|
||||||
/*right: 50%;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!* active state *!*/
|
|
||||||
/*input:focus ~ .under-line:before, input:focus ~ .under-line:after {*/
|
|
||||||
/*width: 50%;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.highlight {*/
|
|
||||||
/*position: absolute;*/
|
|
||||||
/*height: 60%;*/
|
|
||||||
/*width: 100px;*/
|
|
||||||
/*top: 25%;*/
|
|
||||||
/*left: 0;*/
|
|
||||||
/*pointer-events: none;*/
|
|
||||||
/*opacity: 0.5;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*input:focus ~ .highlight {*/
|
|
||||||
/*-webkit-animation: inputHighlighter 0.3s ease;*/
|
|
||||||
/*-moz-animation: inputHighlighter 0.3s ease;*/
|
|
||||||
/*animation: inputHighlighter 0.3s ease;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*@-webkit-keyframes inputHighlighter {*/
|
|
||||||
/*from {*/
|
|
||||||
/*background: #5264AE;*/
|
|
||||||
/*}*/
|
|
||||||
/*to {*/
|
|
||||||
/*width: 0;*/
|
|
||||||
/*background: transparent;*/
|
|
||||||
/*}*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*@-moz-keyframes inputHighlighter {*/
|
|
||||||
/*from {*/
|
|
||||||
/*background: #5264AE;*/
|
|
||||||
/*}*/
|
|
||||||
/*to {*/
|
|
||||||
/*width: 0;*/
|
|
||||||
/*background: transparent;*/
|
|
||||||
/*}*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*@keyframes inputHighlighter {*/
|
|
||||||
/*from {*/
|
|
||||||
/*background: #5264AE;*/
|
|
||||||
/*}*/
|
|
||||||
/*to {*/
|
|
||||||
/*width: 0;*/
|
|
||||||
/*background: transparent;*/
|
|
||||||
/*}*/
|
|
||||||
/*}*/
|
|
||||||
Loading…
Reference in new issue