172 lines
6.2 KiB
Stylus
172 lines
6.2 KiB
Stylus
@import "../constants.styl"
|
|
|
|
[data-component-input]
|
|
position : relative
|
|
margin-bottom : SPACE
|
|
input, textarea, label
|
|
font-size : FONT_SIZE_NORMAL
|
|
font-weight : FONT_WEIGHT_NORMAL
|
|
|
|
// -- Style
|
|
RADIUS = (SPACE / 8)
|
|
&.touch
|
|
// -- Children
|
|
input
|
|
pointer-events : all
|
|
z-index : 2
|
|
position : absolute
|
|
left : 0
|
|
width : 100%
|
|
height : 100%
|
|
opacity : 0
|
|
.bar, label
|
|
position : relative
|
|
display : inline-block
|
|
vertical-align : middle
|
|
.bar
|
|
width : SPACE
|
|
height : SPACE
|
|
margin-right : (SPACE / 1.32)
|
|
border-radius : RADIUS
|
|
box-shadow : inset 0 0 0 RADIUS TEXT
|
|
transition-property background-color, box-shadow
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
&:before
|
|
z-index : -1
|
|
position : absolute
|
|
left : -(SPACE)
|
|
top : -(SPACE)
|
|
display : block
|
|
content : ""
|
|
width : SIZE = (3 * SPACE)
|
|
height : SIZE
|
|
border-radius : 50%
|
|
opacity : 0
|
|
&:after
|
|
display : block
|
|
width : SPACE
|
|
color : WHITE
|
|
text-align : center
|
|
transform scale(0)
|
|
transition transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
|
|
label
|
|
font-size : FONT_SIZE_SMALL
|
|
color : TEXT
|
|
// -- Style
|
|
&:not(.radio) .bar:after
|
|
content : "✓"
|
|
&.radio .bar
|
|
border-radius : 50%
|
|
&.disabled .bar
|
|
box-shadow inset 0 0 0 RADIUS DIVIDER
|
|
&.checked
|
|
&.radio .bar
|
|
box-shadow : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
|
|
&:not(.radio) .bar
|
|
box-shadow : none
|
|
.bar
|
|
background-color : ACCENT
|
|
&:before
|
|
background-color : alpha(ACCENT, .5)
|
|
animation-name ripple-touch
|
|
animation-iteration-count 1
|
|
animation-timing-function ANIMATION_EASE
|
|
animation-duration (2 * ANIMATION_DURATION)
|
|
&:after
|
|
transform scale(1)
|
|
|
|
&:not(.touch)
|
|
// -- Stylesheets
|
|
&.focus
|
|
input, textarea
|
|
outline : none
|
|
~ .bar:before, ~ .bar:after
|
|
width : 50%
|
|
&:invalid
|
|
& ~ label
|
|
color : CANCEL
|
|
& ~ .bar:before, & ~ .bar:after
|
|
background-color : CANCEL
|
|
&.focus , &.valid
|
|
input, textarea
|
|
& ~ label
|
|
top : -(SPACE / 2)
|
|
font-size : FONT_SIZE_TINY
|
|
color : PRIMARY
|
|
input[type="date"]
|
|
& ~ label
|
|
top : -(SPACE / 2)
|
|
font-size : FONT_SIZE_TINY
|
|
color : PRIMARY
|
|
&:not(.focus)
|
|
input, textarea
|
|
&:invalid:not(:required)
|
|
border-bottom-color : CANCEL
|
|
&.error
|
|
input, textarea
|
|
border-bottom-color : CANCEL
|
|
|
|
// -- Children
|
|
input, textarea
|
|
display : block
|
|
padding : (SPACE / 2) 0
|
|
width : 100%
|
|
color : TEXT
|
|
background-color : transparent
|
|
border : none
|
|
border-bottom : 1px solid DIVIDER
|
|
// -- Attributes
|
|
&:disabled
|
|
color : TEXT_SECONDARY
|
|
border-bottom-style : dotted
|
|
|
|
label
|
|
position : absolute
|
|
left : 0
|
|
top : (SPACE / 2)
|
|
color : TEXT_SECONDARY
|
|
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 : PRIMARY
|
|
transition-property width, background-color
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
&:before
|
|
left : 50%
|
|
&:after
|
|
right : 50%
|
|
|
|
&.hidden
|
|
display : none
|
|
|
|
// -- Children
|
|
label
|
|
pointer-events : none
|
|
.error
|
|
position : absolute
|
|
right : (SPACE / 4)
|
|
bottom : -(SPACE / 1.25)
|
|
font-size : (FONT_SIZE_TINY * 0.9)
|
|
color : CANCEL
|
|
|
|
@keyframes ripple-touch
|
|
0%
|
|
transform scale(0)
|
|
opacity : 1
|
|
100%
|
|
transform scale(1)
|
|
opacity : 0
|