| 1 |
- .form-group{margin-bottom:20px;}.controls{text-align:left;position:relative;width:100%;margin-top:5px;margin-bottom:10px;}.controls input[type="text"],.controls input[type="email"],.controls input[type="number"],.controls input[type="date"],.controls input[type="tel"],.controls textarea,.controls button,.controls select{padding:18px 12px 10px;font-size:14px;border:1px solid #008b8b;width:100%;margin-bottom:18px;color:#02595a;font-family:'Lato','sans-serif';font-size:16px;font-weight:300;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;background:#f3fffe;}.controls input[type="text"]:focus,.controls input[type="text"]:hover,.controls input[type="email"]:focus,.controls input[type="email"]:hover,.controls input[type="number"]:focus,.controls input[type="number"]:hover,.controls input[type="date"]:focus,.controls input[type="date"]:hover,.controls input[type="tel"]:focus,.controls input[type="tel"]:hover,.controls textarea:focus,.controls textarea:hover,.controls button:focus,.controls button:hover,.controls select:focus,.controls select:hover{outline:none;border-color:#008b8b;}.controls input[type="text"]:focus+label,.controls input[type="text"]:hover+label,.controls input[type="email"]:focus+label,.controls input[type="email"]:hover+label,.controls input[type="number"]:focus+label,.controls input[type="number"]:hover+label,.controls input[type="date"]:focus+label,.controls input[type="date"]:hover+label,.controls input[type="tel"]:focus+label,.controls input[type="tel"]:hover+label,.controls textarea:focus+label,.controls textarea:hover+label,.controls button:focus+label,.controls button:hover+label,.controls select:focus+label,.controls select:hover+label{color:#008b8b;cursor:text;}.controls .fa-sort{position:absolute;right:10px;top:17px;color:#999;}.controls select{-moz-appearance:none;-webkit-appearance:none;cursor:pointer;}.controls label{position:absolute;left:8px;top:12px;width:auto;color:#02595a;font-size:16px;display:inline-block;padding:4px 10px;font-weight:400;background-color:transparent;-moz-transition:color .3s,top .3s,background-color .8s;-o-transition:color .3s,top .3s,background-color .8s;-webkit-transition:color .3s,top .3s,background-color .8s;transition:color .3s,top .3s,background-color .8s;}.controls label.active{top:-16px;color:#02595a;background-color:#f3fffe;width:auto;}.controls textarea{resize:none;height:200px;}.controls button{cursor:pointer;background-color:#02595a;border:none;color:#fff;padding:12px 0;float:right;}.controls button:hover{background-color:#224c60;}.clear:after{content:"";display:table;clear:both;}.inp{position:relative;margin:auto;width:100%;min-width:280px;border-radius:3px;overflow:hidden;margin-bottom:10px;}.inp .inp-label{position:absolute;top:18px;left:12px;font-size:18px;color:#008b8b;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:all .2s ease;transition:all .2s ease;pointer-events:none;background:transparent;}.inp .focus-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.05);z-index:-1;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left;transform-origin:left;}.inp input,.inp select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;font-family:inherit;padding:16px 12px 0 12px;height:56px;font-size:16px;font-weight:400;background:rgba(0,0,0,.05);color:#008b8b;-webkit-transition:all .15s ease;transition:all .15s ease;box-shadow:inset 0 -2px 0 #008b8b;}.inp input:hover,.inp select:hover{background:rgba(0,0,0,.08);box-shadow:inset 0 -1px 0 rgba(0,0,0,.5);}.inp input:not(:placeholder-shown)+.inp-label,.inp select:not(:placeholder-shown)+.inp-label{color:#008b8b;-webkit-transform:translate3d(0,-12px,0) scale(.9);transform:translate3d(0,-12px,0) scale(.9);}.inp input:focus,.inp select:focus{background:rgba(0,0,0,.1);outline:none;box-shadow:inset 0 -2px 0 #07f;}.inp input:focus+.inp-label,.inp select:focus+.inp-label{color:#07f;-webkit-transform:translate3d(0,-12px,0) scale(.85);transform:translate3d(0,-12px,0) scale(.85);}.inp input:focus+.inp-label+.focus-bg,.inp select:focus+.inp-label+.focus-bg{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition:all .1s ease;transition:all .1s ease;}
|
