bulma/sass/elements/form.sass
2017-03-15 22:14:42 +00:00

315 lines
6.4 KiB
Sass

$input: $grey-darker !default
$input-background: $white !default
$input-border: $grey-lighter !default
$input-hover: $grey-darker !default
$input-hover-border: $grey-light !default
$input-focus: $grey-darker !default
$input-focus-border: $link !default
$input-disabled: $text-light !default
$input-disabled-background: $background !default
$input-disabled-border: $background !default
$input-arrow: $link !default
$input-icon: $grey-lighter !default
$input-icon-active: $grey !default
$input-radius: $radius !default
=input
+control
background-color: $input-background
border: 1px solid $input-border
color: $input
&:hover,
&.is-hovered
border-color: $input-hover-border
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border
&[disabled],
&.is-disabled
background-color: $input-disabled-background
border-color: $input-disabled-border
box-shadow: none
color: $input-disabled
+placeholder
color: rgba($input, 0.3)
.input,
.textarea
+input
box-shadow: inset 0 1px 2px rgba($black, 0.1)
max-width: 100%
width: 100%
&[type="search"]
border-radius: 290486px
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.textarea
display: block
line-height: 1.25
max-height: 600px
max-width: 100%
min-height: 120px
min-width: 100%
padding: 0.625em
resize: vertical
.checkbox,
.radio
align-items: center
cursor: pointer
display: inline-flex
flex-wrap: wrap
justify-content: flex-start
position: relative
vertical-align: top
input
cursor: pointer
margin-right: 0.5em
&:hover
color: $input-hover
&.is-disabled
color: $input-disabled
pointer-events: none
input
pointer-events: none
.radio
& + .radio
margin-left: 0.5em
.select
display: inline-block
height: 2.25em
position: relative
vertical-align: top
&:after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
z-index: 4
select
+input
cursor: pointer
display: block
font-size: 1em
outline: none
padding-right: 2.5em
&:hover
border-color: $input-hover-border
&::ms-expand
display: none
// States
&:hover
&:after
border-color: $input-hover
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
width: 100%
select
width: 100%
.label
color: $input
display: block
font-weight: bold
&:not(:last-child)
margin-bottom: 0.5em
.help
display: block
font-size: $size-small
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
.select select
line-height: 1
// Containers
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
margin-right: -1px
&:first-child
.button,
.input,
.select select
border-bottom-left-radius: $input-radius
border-top-left-radius: $input-radius
&:last-child
.button,
.input,
.select select
border-bottom-right-radius: $input-radius
border-top-right-radius: $input-radius
.button,
.input,
.select select
border-radius: 0
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
&.is-expanded
flex-grow: 1
flex-shrink: 0
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-basis: 0
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-horizontal
+tablet
display: flex
.field-label
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5rem
padding-top: 0.375em
text-align: right
.field-body
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
.control
font-size: $size-normal
position: relative
text-align: left
// Modifiers
&.has-icon
.icon
color: $input-icon
height: 2.25em
pointer-events: none
position: absolute
top: 0
width: 2.25em
z-index: 4
.input
&:focus
& + .icon
color: $input-icon-active
&.is-small
& + .icon
font-size: $size-small
&.is-medium
& + .icon
font-size: $size-medium
&.is-large
& + .icon
font-size: $size-large
&:not(.has-icon-right)
.icon
left: 0
// transform: translateX(-50%) translateY(-50%)
.input
padding-left: 2.25em
// &.is-small
// & + .icon
// left: ($size-small * 2.5) / 2
// &.is-medium
// & + .icon
// left: ($size-medium * 2.5) / 2
// &.is-large
// & + .icon
// left: ($size-large * 2.5) / 2
&.has-icon-right
.icon
right: 0
// transform: translateX(50%) translateY(-50%)
.input
padding-right: 2.25em
// &.is-small
// & + .icon
// right: ($size-small * 2.5) / 2
// &.is-medium
// & + .icon
// right: ($size-medium * 2.5) / 2
// &.is-large
// & + .icon
// right: ($size-large * 2.5) / 2
&.is-loading
&:after
+loader
position: absolute !important
right: 0.625em
top: 0.625em