bulma/sass/elements/form.sass

328 lines
6.7 KiB
Sass
Raw Normal View History

2016-10-29 20:51:13 +00:00
$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
2016-10-30 14:59:46 +00:00
$input-icon-active: $grey !default
2016-10-29 20:51:13 +00:00
$input-radius: $radius !default
=input
+control
2016-10-29 20:51:13 +00:00
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)
2016-09-22 21:03:22 +00:00
.input,
.textarea
2016-10-29 20:51:13 +00:00
+input
box-shadow: inset 0 1px 2px rgba($black, 0.1)
2016-01-24 00:03:43 +00:00
max-width: 100%
width: 100%
&[type="search"]
border-radius: 290486px
2016-10-29 20:51:13 +00:00
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
2016-04-10 15:00:32 +00:00
// Sizes
2016-01-24 00:03:43 +00:00
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
2016-04-10 15:00:32 +00:00
// Modifiers
2016-01-24 00:03:43 +00:00
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.textarea
display: block
2016-01-24 00:03:43 +00:00
max-height: 600px
max-width: 100%
min-height: 120px
min-width: 100%
2017-03-12 14:13:08 +00:00
padding: 0.625em
2016-01-24 00:03:43 +00:00
resize: vertical
2016-09-22 22:14:18 +00:00
.checkbox,
.radio
2016-10-29 20:51:13 +00:00
align-items: center
2016-01-24 00:03:43 +00:00
cursor: pointer
2016-10-29 20:51:13 +00:00
display: inline-flex
flex-wrap: wrap
justify-content: flex-start
2017-03-17 00:14:11 +00:00
line-height: 1.5
2016-01-24 00:03:43 +00:00
position: relative
vertical-align: top
input
cursor: pointer
2016-10-29 20:51:13 +00:00
margin-right: 0.5em
2016-01-24 00:03:43 +00:00
&:hover
2016-10-29 20:51:13 +00:00
color: $input-hover
2016-01-24 00:03:43 +00:00
&.is-disabled
2016-10-29 20:51:13 +00:00
color: $input-disabled
2016-04-10 15:00:32 +00:00
pointer-events: none
input
pointer-events: none
2016-01-24 00:03:43 +00:00
.radio
& + .radio
2016-10-29 17:53:30 +00:00
margin-left: 0.5em
2016-01-24 00:03:43 +00:00
.select
display: inline-block
2017-03-12 14:13:08 +00:00
height: 2.25em
2016-01-24 00:03:43 +00:00
position: relative
vertical-align: top
2016-10-29 20:51:13 +00:00
&:after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
z-index: 4
2016-01-24 00:03:43 +00:00
select
2016-10-29 20:51:13 +00:00
+input
2016-01-24 00:03:43 +00:00
cursor: pointer
display: block
2016-10-29 20:51:13 +00:00
font-size: 1em
2016-01-24 00:03:43 +00:00
outline: none
2016-10-29 17:53:30 +00:00
padding-right: 2.5em
2016-01-24 00:03:43 +00:00
&:hover
2016-10-29 20:51:13 +00:00
border-color: $input-hover-border
2016-01-29 13:39:29 +00:00
&::ms-expand
display: none
2016-10-29 20:51:13 +00:00
// 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%
2016-01-24 00:03:43 +00:00
.label
2016-10-29 20:51:13 +00:00
color: $input
display: block
2017-03-14 23:19:43 +00:00
font-size: $size-normal
font-weight: $weight-bold
&:not(:last-child)
2016-10-29 17:53:30 +00:00
margin-bottom: 0.5em
2016-03-26 15:38:33 +00:00
.help
display: block
2016-10-30 10:41:53 +00:00
font-size: $size-small
2017-03-12 17:29:26 +00:00
margin-top: 0.25rem
2016-03-26 15:38:33 +00:00
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
.select select
line-height: 1
2016-03-26 15:38:33 +00:00
// Containers
2017-03-12 17:29:26 +00:00
.field
2016-01-24 00:03:43 +00:00
&:not(:last-child)
2016-10-30 10:41:53 +00:00
margin-bottom: 0.75rem
2016-04-10 15:00:32 +00:00
// Modifiers
&.has-addons
2016-01-24 00:03:43 +00:00
display: flex
2016-04-10 15:00:32 +00:00
justify-content: flex-start
2017-03-12 17:29:26 +00:00
.control
2016-01-24 00:03:43 +00:00
margin-right: -1px
&:first-child
2017-03-12 17:29:26 +00:00
.button,
.input,
.select select
border-bottom-left-radius: $input-radius
border-top-left-radius: $input-radius
2016-01-24 00:03:43 +00:00
&:last-child
2017-03-12 17:29:26 +00:00
.button,
.input,
.select select
border-bottom-right-radius: $input-radius
border-top-right-radius: $input-radius
.button,
.input,
.select select
border-radius: 0
2017-03-13 12:33:34 +00:00
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
2016-05-30 18:36:17 +00:00
&.is-expanded
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
2016-04-10 15:00:32 +00:00
&.has-addons-centered
2016-01-24 00:03:43 +00:00
justify-content: center
2016-04-10 15:00:32 +00:00
&.has-addons-right
justify-content: flex-end
2016-05-30 18:36:17 +00:00
&.has-addons-fullwidth
2017-03-12 17:29:26 +00:00
.control
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
2017-03-12 17:29:26 +00:00
&.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
2017-03-17 00:14:11 +00:00
.label
font-size: inherit
2017-03-12 17:29:26 +00:00
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5rem
text-align: right
2017-03-17 00:14:11 +00:00
&.is-small
font-size: $size-small
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
padding-top: 0.375em
&.is-large
font-size: $size-large
padding-top: 0.375em
2017-03-12 17:29:26 +00:00
.field-body
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
2017-03-12 17:29:26 +00:00
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
.control
font-size: $size-normal
2017-03-12 17:29:26 +00:00
position: relative
text-align: left
// Modifiers
2016-04-10 15:00:32 +00:00
&.has-icon
2016-10-30 14:59:46 +00:00
.icon
2016-10-29 20:51:13 +00:00
color: $input-icon
2017-03-12 14:13:08 +00:00
height: 2.25em
2016-04-10 15:00:32 +00:00
pointer-events: none
position: absolute
2017-03-12 14:13:08 +00:00
top: 0
width: 2.25em
2016-04-10 15:00:32 +00:00
z-index: 4
.input
2016-10-30 14:59:46 +00:00
&:focus
& + .icon
color: $input-icon-active
&.is-small
& + .icon
2017-03-12 14:13:08 +00:00
font-size: $size-small
2016-10-30 14:59:46 +00:00
&.is-medium
& + .icon
2017-03-12 14:13:08 +00:00
font-size: $size-medium
2016-10-30 14:59:46 +00:00
&.is-large
& + .icon
2017-03-12 14:13:08 +00:00
font-size: $size-large
2016-04-10 15:00:32 +00:00
&:not(.has-icon-right)
2016-10-30 14:59:46 +00:00
.icon
2017-03-12 14:13:08 +00:00
left: 0
// transform: translateX(-50%) translateY(-50%)
2016-04-10 15:00:32 +00:00
.input
2017-03-12 14:13:08 +00:00
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
2016-04-10 15:00:32 +00:00
&.has-icon-right
2016-10-30 14:59:46 +00:00
.icon
2017-03-12 14:13:08 +00:00
right: 0
// transform: translateX(50%) translateY(-50%)
2016-04-10 15:00:32 +00:00
.input
2017-03-12 14:13:08 +00:00
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
2016-04-10 15:00:32 +00:00
&.is-loading
&:after
2016-09-22 22:14:18 +00:00
+loader
2016-04-10 15:00:32 +00:00
position: absolute !important
2017-03-12 17:29:26 +00:00
right: 0.625em
top: 0.625em