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