react-jam-ui
Version:
React JAM UI components
103 lines (97 loc) • 2.44 kB
text/stylus
input-material($params) {
.input {
border-radius: 0;
border: none;
padding: 0;
&::-webkit-input-placeholder {
color:#777777;
opacity: 0.6;
transition: opacity 0.3s ease;
}
&::-moz-placeholder {
color:#777777;
opacity: 0.6;
transition: opacity 0.3s ease;
}
&:focus {
position: relative;
z-index: 3;
&::-webkit-input-placeholder {
opacity: 0;
}
&::-moz-placeholder {
opacity: 0;
}
}
}
.input {
background: $params.default.bg;
color: $params.default.color;
border-radius: $params.default.radius;
border-bottom: 1px solid $params.default.border;
}
&:after {
display: block;
left: 50%;
width: 0;
background: $params.default.border;
height: 1px;
bottom: 0;
position: absolute;
transition: left 0.2s ease, width 0.2s ease;
content: "";
z-index: 4;
}
&.focus {
.input {
background: $params.focus.bg;
color: $params.focus.color;
border-radius: $params.focus.radius;
}
&:after {
width: 100%;
left: 0;
background: $params.focus.border
}
}
&.valid {
.input {
background: $params.valid.bg;
color: $params.valid.color;
border-radius: $params.valid.radius;
}
&:after {
width: 100%;
left: 0;
background: $params.valid.border
}
.input-msg {
border-left: 2px solid $params.valid.border;
}
}
&.error {
.input {
background: $params.error.bg;
color: $params.error.color;
border-radius: $params.error.radius;
}
&:after {
width: 100%;
left: 0;
background: $params.error.border
}
.input-msg {
border-left: 2px solid $params.error.border;
color: $params.error.border;
}
}
.input-msg {
position: absolute;
left: 100%;
margin: 0 0 0 15px;
bottom: 0;
padding: 15px;
background: #FFFFFF;
z-index: 20;
}
}