1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-15 22:05:09 -05:00
kaiwa/public/css/components/forms.styl
2013-10-25 12:05:03 +02:00

99 lines
2.4 KiB
Stylus

// Forms
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea, .main .status
width: 100%
borderbox()
&.inline
display: inline-block
width: auto
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=url], input[type=file], textarea, select, input[type=checkbox], input[type=radio]
&:disabled
cursor: not-allowed
.invalid
label
color: $red
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea
background: $red-lighter
border: 1px solid $red-light
color: $red-light
&:focus
border: 1px solid $red-light
box-shadow: 0 0 5px $red-light
.valid
label
color: $green
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea
background: $green-lighter
border: 1px solid $green-light
color: $green-light
&:focus
border: 1px solid $green-light
box-shadow: 0 0 5px $green-light
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea, select, .main .status
display: block
border-radius: 3px
border: 1px solid $gray-lighter
&:focus
outline: none
border: 1px solid $blue-light
box-shadow: 0 0 5px $blue-light
transition: all .3s ease-in
-webkit-transition: all .3s ease-in
&:disabled
background: lighten($gray-lighter, 60%)
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], .main .status
height: 35px
padding: 7px 10px
textarea
padding: 10px
resize: none
font-size: $font-size-small
input[type=file]
padding: 15px
background: lighten($gray-lighter, 70%)
font-size: $font-size-small
color: $gray-light
label
display: block
margin-bottom: 5px
font-weight: $font-weight-bold
font-size: $font-size-small
.has-icon
position: relative
.ss-icon
position: absolute
top: 31px
right: 10px
font-size: $font-size-small
transition: all .3s ease-in
&.ss-delete
color: $red-light
&.ss-check
color: $green-light
&.ss-search
color: $gray-lighter