1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-28 20:22:15 -05:00
kaiwa/public/css/components/forms.styl

99 lines
2.4 KiB
Stylus
Raw Normal View History

2013-10-24 18:07:43 -04:00
// Forms
2013-09-18 13:45:40 -04:00
2013-10-24 18:07:43 -04:00
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()
2013-10-24 18:07:43 -04:00
&.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
2013-10-24 18:07:43 -04:00
&: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
2013-10-24 18:07:43 -04:00
padding: 10px
resize: none
2013-10-24 18:07:43 -04:00
font-size: $font-size-small
2013-10-24 18:07:43 -04:00
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
2013-10-24 18:07:43 -04:00
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