bee-form-control
Version:
form-control ui component for react
75 lines (69 loc) • 1.75 kB
CSS
/* FormGroup */
/* Navlayout */
.u-form-control {
position: relative;
display: inline-block;
padding: 0 12px;
width: 100%;
height: 30px;
cursor: text;
font-size: 14px;
line-height: 1.5;
color: #424242;
background-color: #fff;
background-image: none;
border: 1px solid #bdbdbd;
border-radius: 3px;
transition: all .3s; }
.u-form-control:focus {
border-color: #66afe9;
outline: 0; }
.u-form-control[disabled] {
background: #eee;
border-color: #e0e0e0;
color: #BDBDBD;
cursor: not-allowed; }
.u-form-control.lg {
height: 38px;
font-size: 14px; }
.u-form-control.sm {
font-size: 12px;
height: 24px; }
.u-form-control-search-wrapper {
position: absolute;
top: 0;
left: 0;
height: 28px;
padding: 4px;
width: 100%; }
.u-form-control-search-wrapper .u-form-control-search-action {
color: #ccc;
position: absolute;
top: 2px;
right: 2px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 14px;
text-decoration: none; }
.u-form-control-search-wrapper .u-form-control-search-action .uf {
transition: all .3s;
font-size: 12px;
color: #ccc; }
.u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
content: "\e603"; }
.u-form-control-affix-wrapper {
position: relative;
display: inline-block;
width: 100%; }
.u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
line-height: 0;
right: 7px;
color: rgba(0, 0, 0, 0.65); }