mirror of
https://github.com/Aviortheking/next-template.git
synced 2025-06-07 12:19:55 +00:00
166 lines
2.5 KiB
Stylus
166 lines
2.5 KiB
Stylus
@import '../config'
|
|
|
|
.parent
|
|
position relative
|
|
margin 16px
|
|
|
|
label
|
|
font-size 1rem
|
|
font-weight 600
|
|
color black
|
|
display inline-block
|
|
margin-bottom .5rem
|
|
transition all $transition
|
|
position absolute
|
|
top 16px
|
|
pointer-events none
|
|
left 16px
|
|
|
|
svg
|
|
position absolute
|
|
color #AAA
|
|
top 14px
|
|
left 16px // input padding-left
|
|
transition color $transition
|
|
|
|
~ label
|
|
left 16px + 24px + 16px
|
|
|
|
select
|
|
appearance none
|
|
|
|
input
|
|
select
|
|
padding 14px 16px
|
|
max-width 100%
|
|
height 56px
|
|
border 2px solid rgba(black, .3)
|
|
border-radius 4px
|
|
box-sizing border-box
|
|
font-size .875rem
|
|
outline none
|
|
background transparent
|
|
transition all $transition
|
|
color black
|
|
&:hover
|
|
border-color black
|
|
|
|
+ svg
|
|
color black
|
|
|
|
&:not(:placeholder-shown)
|
|
&:focus
|
|
&:not([placeholder=" "])
|
|
~ label
|
|
top -8px
|
|
left 16px - 4px // .input/padding-left label/padding-left
|
|
background white
|
|
padding 0 4px
|
|
|
|
&:invalid
|
|
border-color $danger
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
&:focus
|
|
border-color $default
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.primary
|
|
border-color $primary
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.secondary
|
|
border-color $secondary
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.info
|
|
border-color $info
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.success
|
|
border-color $success
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.danger
|
|
border-color $danger
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.warning
|
|
border-color $warning
|
|
|
|
~ label
|
|
color @border-color
|
|
|
|
~ svg
|
|
color @border-color
|
|
|
|
&.hasIcon
|
|
padding-left 16px + 24px + 16px
|
|
|
|
&.filled
|
|
border none
|
|
background rgba(gray, .1)
|
|
border-radius @border-radius @border-radius 0 0
|
|
border-bottom 2px solid rgba(black,.4)
|
|
|
|
&:hover
|
|
background rgba(gray, .2)
|
|
|
|
&:focus
|
|
background rgba(gray, .3)
|
|
|
|
&:not(:placeholder-shown)
|
|
&:focus
|
|
&:not([placeholder=" "])
|
|
~ label
|
|
top 3px
|
|
left 16px - 4px // .input/padding-left label/padding-left
|
|
background transparent
|
|
padding 0
|
|
font-size .75rem
|
|
~ svg ~ label
|
|
left 16px + 24px + 16px // .input/padding-left label/padding-left
|
|
|
|
div
|
|
display flex
|
|
justify-content space-between
|
|
padding 0 16px
|
|
font-size .9em
|
|
|
|
&.block input
|
|
width 100%
|