mirror of
https://github.com/dzeiocom/markblog.git
synced 2025-04-22 02:42:14 +00:00
104 lines
1.7 KiB
Stylus
104 lines
1.7 KiB
Stylus
$color = #4285F4
|
|
|
|
.input
|
|
position relative
|
|
|
|
*:not(input)
|
|
display inline
|
|
|
|
&.inline
|
|
display inline-block
|
|
|
|
&:not(:last-of-type)
|
|
margin-right 10px
|
|
input, select
|
|
display block
|
|
border-radius 10px
|
|
background-color #EEE
|
|
border none
|
|
padding 15px 20px
|
|
margin 3px
|
|
box-shadow inset 0 0 0 2px #BDBDBD
|
|
transition-property background-color, box-shadow, border
|
|
transition-duration 200ms
|
|
transition-timing-function cubic-bezier(.2, 0, .6, 1)
|
|
|
|
// Make input follow .input size
|
|
width: inherit
|
|
max-width calc(100% - 46px) // padding * 2 + margin * 2
|
|
|
|
&::placeholder
|
|
text-transform: lowercase
|
|
color #666
|
|
|
|
:disabled
|
|
background-color #EFEFEF
|
|
box-shadow none
|
|
|
|
&:not([readonly]):not([disabled])
|
|
|
|
&:hover
|
|
background-color #DDD
|
|
|
|
&:focus
|
|
background-color #FFF
|
|
box-shadow inset 0 0 0 2px $color, 0 0 0 3px rgba(204,204,204, .75)
|
|
|
|
|
|
select
|
|
-webkit-appearance none
|
|
-moz-appearance none
|
|
appearance none
|
|
display inline-flex
|
|
|
|
label
|
|
text-transform uppercase
|
|
margin auto
|
|
font-weight 700
|
|
|
|
.helper
|
|
text-transform lowercase
|
|
font-weight 300
|
|
|
|
.status
|
|
float right
|
|
text-transform lowercase
|
|
font-weight 300
|
|
font-style italic
|
|
|
|
// Icons
|
|
i
|
|
width 24px
|
|
height 24px
|
|
position absolute
|
|
left 20px
|
|
top 18px
|
|
// pointer-events none
|
|
color #666
|
|
transition color 200ms cubic-bezier(.2,0,.6,1)
|
|
|
|
&.icon-right i
|
|
left initial
|
|
right 20px
|
|
|
|
&.icon-left input,
|
|
&.icon-left select
|
|
padding-left 50px
|
|
|
|
&.icon-right input,
|
|
&.icon-right select
|
|
padding-right 50px
|
|
|
|
|
|
&.icon-right input, &.icon-left input,
|
|
&.icon-right select, &.icon-left select
|
|
max-width calc(100% - 76px)
|
|
|
|
&.icon-right select, &.icon-left select
|
|
max-width 100%
|
|
|
|
|
|
input:focus:not([readonly]) + i,
|
|
select:focus:not([readonly]) + i
|
|
color $color
|