137 lines
2.5 KiB
Stylus
137 lines
2.5 KiB
Stylus
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
|
// Basic form controls: inputs, textareas, buttons
|
|
|
|
// Disabled form element
|
|
.is-disabled
|
|
cursor: default
|
|
pointer-events: none
|
|
text-shadow: none
|
|
|
|
|
|
// Bones
|
|
|
|
.field,
|
|
.button
|
|
display: block
|
|
vertical-align: middle
|
|
font-size: 1em
|
|
line-height: 1
|
|
outline: 0
|
|
transition: opacity .25 ease-out
|
|
|
|
&_inline
|
|
display: inline-block
|
|
|
|
&.is-disabled
|
|
opacity: .4
|
|
|
|
.field
|
|
// Hide IE10 clear button
|
|
&::-ms-clear
|
|
size: 0 // Not display:none because: http://bit.ly/1h3UlAH
|
|
|
|
.field_area
|
|
resize: vertical
|
|
|
|
.button
|
|
no-select()
|
|
position: relative // Fixes strange bugs in webkit
|
|
text-decoration: none
|
|
white-space: nowrap
|
|
cursor: pointer
|
|
|
|
// Fixing Mozilla's inner paddings
|
|
// https://github.com/nanoblocks/nanoblocks/blob/gh-pages/blocks/button/button.styl
|
|
&::-moz-focus-inner
|
|
padding: 0
|
|
border: none
|
|
|
|
.form
|
|
&_inline .field,
|
|
&_inline .button,
|
|
&_inline .select,
|
|
&_inline .password
|
|
display: inline-block
|
|
|
|
&_full .field,
|
|
&_full .button,
|
|
&_full .select,
|
|
&_full .password
|
|
width: 100%
|
|
|
|
&__group
|
|
space(2)
|
|
|
|
&__row
|
|
space()
|
|
&:last-child
|
|
space(0)
|
|
|
|
&__left
|
|
float: left
|
|
|
|
&__right
|
|
float: right
|
|
|
|
|
|
// Default skin
|
|
|
|
modules_default_skin ?= true
|
|
form_default_skin ?= false
|
|
|
|
|
|
if modules_default_skin or form_default_skin
|
|
|
|
.field,
|
|
.button
|
|
height: 2em
|
|
border-radius: form_border_radius
|
|
|
|
&:focus
|
|
outline: 0
|
|
border-color: form_focus_color
|
|
|
|
.field,
|
|
.button:active
|
|
transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out
|
|
|
|
.field
|
|
padding: .3em .4em
|
|
background: #fff
|
|
border: 1px solid #bbb
|
|
box-shadow: inset 0 .1em .2em black(.1)
|
|
|
|
&:focus
|
|
box-shadow: inset 0 .1em .2em black(.1), 0 0 .4em rgba(form_focus_color, .75)
|
|
|
|
&_area
|
|
height: auto
|
|
|
|
.button
|
|
height: 2em
|
|
padding: .45em 1.5em .35em;
|
|
background: #dfdfdf
|
|
background: linear-gradient(to bottom, #fefefe, #eaeaea)
|
|
border: 1px solid #bbb
|
|
border-bottom-color: #aaa
|
|
color: #555
|
|
border-radius: form_border_radius
|
|
box-shadow: 0 .1em .1em black(.05)
|
|
text-shadow: 0 1px 0 white(.4)
|
|
|
|
&:focus
|
|
box-shadow: 0 0 .4em rgba(form_focus_color, .75)
|
|
|
|
&:not(.is-disabled):hover
|
|
background: linear-gradient(to bottom, #fff, #f0f0f0)
|
|
color: #333
|
|
|
|
&:not(.is-disabled):active
|
|
padding-top: .55em
|
|
padding-bottom: .25em
|
|
background: #cacaca
|
|
background: linear-gradient(to bottom, #aaa, #dfdfdf)
|
|
box-shadow: 0 0 .4em rgba(form_focus_color, .75), inset 0 .1em .2em black(.2), 0 .025em .05em black(.05)
|
|
border-color: form_focus_color
|
|
border-top-color: #888
|