66 lines
2.3 KiB
Stylus
66 lines
2.3 KiB
Stylus
[data-component-input]
|
|
position : relative
|
|
margin-bottom : SPACE
|
|
|
|
input, label
|
|
font-size : FONT_SIZE_NORMAL
|
|
font-weight : FONT_WEIGHT_NORMAL
|
|
|
|
input
|
|
display : block
|
|
padding : (SPACE / 2) 0
|
|
width : 100%
|
|
color : COLOR
|
|
border : none
|
|
border-bottom : 1px solid lighten(COLOR, 75%)
|
|
// -- Attributes
|
|
&:focus
|
|
outline : none
|
|
~ .bar:before, ~ .bar:after
|
|
width : 50%
|
|
&:focus ~ label, &:valid ~ label
|
|
top : -(SPACE / 2)
|
|
font-size : FONT_SIZE_TINY
|
|
color : THEME
|
|
&:disabled
|
|
border-bottom-style : dotted
|
|
&:invalid
|
|
border-bottom-color : CANCEL
|
|
~ .bar:before, ~ .bar:after
|
|
background-color : CANCEL
|
|
|
|
label
|
|
position : absolute
|
|
left : 0
|
|
top : (SPACE / 2)
|
|
color : lighten(COLOR, 75%)
|
|
pointer-events : none
|
|
transition-property top, font-size, color
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
|
|
.bar
|
|
position : relative
|
|
display : block
|
|
width : 100%
|
|
&:before, &:after
|
|
content : ''
|
|
position : absolute
|
|
height : 2px
|
|
width : 0
|
|
bottom : 0
|
|
background-color : THEME
|
|
transition-property width, background-color
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
&:before
|
|
left : 50%
|
|
&:after
|
|
right : 50%
|
|
|
|
.error
|
|
position : absolute
|
|
bottom : -(SPACE)
|
|
font-size : FONT_SIZE_TINY
|
|
color : CANCEL
|