bulma/sass/elements/form.sass

603 lines
13 KiB
Sass
Raw Normal View History

2017-07-28 20:05:15 +00:00
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-height: $control-height !default
2017-07-28 20:05:15 +00:00
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-placeholder-color: rgba($input-color, 0.3) !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
2017-08-30 16:29:01 +00:00
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$input-arrow: $link !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$input-radius: $radius !default
2017-08-07 18:49:24 +00:00
$file-border-color: $border !default
2017-07-29 22:46:27 +00:00
$file-radius: $radius !default
2017-07-29 23:30:49 +00:00
$file-cta-background-color: $white-ter !default
2017-07-29 22:46:27 +00:00
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !default
2017-08-07 18:49:24 +00:00
$file-name-border-color: $border !default
2017-07-29 22:46:27 +00:00
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
2017-07-28 20:05:15 +00:00
$label-color: $grey-darker !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
2016-10-29 20:51:13 +00:00
=input
2018-10-02 06:04:19 +00:00
@extend %control
2017-07-28 20:05:15 +00:00
background-color: $input-background-color
border-color: $input-border-color
color: $input-color
+placeholder
color: $input-placeholder-color
2016-10-29 20:51:13 +00:00
&:hover,
&.is-hovered
2017-07-28 20:05:15 +00:00
border-color: $input-hover-border-color
2016-10-29 20:51:13 +00:00
&:focus,
&.is-focused,
&:active,
&.is-active
2017-07-28 20:05:15 +00:00
border-color: $input-focus-border-color
2017-08-30 16:29:01 +00:00
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled],
fieldset[disabled] &
2017-07-28 20:05:15 +00:00
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
2016-10-29 20:51:13 +00:00
box-shadow: none
2017-07-28 20:05:15 +00:00
color: $input-disabled-color
2016-10-29 20:51:13 +00:00
+placeholder
color: $input-disabled-placeholder-color
2016-09-22 21:03:22 +00:00
.input,
.textarea
2016-10-29 20:51:13 +00:00
+input
box-shadow: $input-shadow
2016-01-24 00:03:43 +00:00
max-width: 100%
width: 100%
2017-09-18 22:33:19 +00:00
&[readonly]
box-shadow: none
2016-10-29 20:51:13 +00:00
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
2017-08-30 21:21:30 +00:00
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
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
2017-09-18 22:33:19 +00:00
.input
2017-12-04 13:39:15 +00:00
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
2017-09-18 22:33:19 +00:00
&.is-static
background-color: transparent
border-color: transparent
box-shadow: none
padding-left: 0
padding-right: 0
2016-01-24 00:03:43 +00:00
.textarea
display: block
2016-01-24 00:03:43 +00:00
max-width: 100%
min-width: 100%
2017-03-12 14:13:08 +00:00
padding: 0.625em
2016-01-24 00:03:43 +00:00
resize: vertical
&:not([rows])
max-height: 600px
min-height: 120px
&[rows]
2018-02-02 15:23:34 +00:00
height: initial
// Modifiers
&.has-fixed-size
resize: none
2016-01-24 00:03:43 +00:00
2016-09-22 22:14:18 +00:00
.checkbox,
.radio
2016-01-24 00:03:43 +00:00
cursor: pointer
2017-04-15 13:51:59 +00:00
display: inline-block
line-height: 1.25
2016-01-24 00:03:43 +00:00
position: relative
input
cursor: pointer
&:hover
2017-07-28 20:05:15 +00:00
color: $input-hover-color
&[disabled],
fieldset[disabled] &
2017-07-28 20:05:15 +00:00
color: $input-disabled-color
cursor: not-allowed
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
max-width: 100%
2016-01-24 00:03:43 +00:00
position: relative
vertical-align: top
2017-07-17 18:17:57 +00:00
&:not(.is-multiple)
height: $input-height
2018-04-11 08:59:47 +00:00
&:not(.is-multiple):not(.is-loading)
2017-07-17 18:17:57 +00:00
&::after
2018-09-04 13:24:50 +00:00
@extend %arrow
border-color: $input-arrow
2017-07-17 18:17:57 +00:00
right: 1.125em
z-index: 4
2017-12-04 13:39:15 +00:00
&.is-rounded
select
border-radius: $radius-rounded
padding-left: 1em
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
max-width: 100%
2016-01-24 00:03:43 +00:00
outline: none
2017-04-02 13:18:19 +00:00
&::-ms-expand
2016-01-29 13:39:29 +00:00
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
2017-07-28 20:05:15 +00:00
border-color: $input-disabled-border-color
2017-07-17 18:17:57 +00:00
&:not([multiple])
padding-right: 2.5em
&[multiple]
height: auto
2017-07-17 18:17:57 +00:00
padding: 0
option
padding: 0.5em 1em
2016-10-29 20:51:13 +00:00
// States
2018-04-11 08:59:47 +00:00
&:not(.is-multiple):not(.is-loading):hover
2017-07-17 18:17:57 +00:00
&::after
2017-07-28 20:05:15 +00:00
border-color: $input-hover-color
2017-04-02 13:18:19 +00:00
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
2018-04-11 08:59:47 +00:00
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: darken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
2016-10-29 20:51:13 +00:00
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
2017-04-13 00:10:39 +00:00
&.is-disabled
2017-07-17 18:17:57 +00:00
&::after
2017-07-28 20:05:15 +00:00
border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
width: 100%
2017-04-13 00:10:39 +00:00
&.is-loading
2017-07-17 18:17:57 +00:00
&::after
2018-09-04 13:24:50 +00:00
@extend %loader
2017-04-13 00:10:39 +00:00
margin-top: 0
position: absolute
right: 0.625em
top: 0.625em
transform: none
2017-06-27 21:57:13 +00:00
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
2016-01-24 00:03:43 +00:00
2017-07-29 22:16:31 +00:00
.file
2018-09-04 13:24:50 +00:00
@extend %unselectable
2017-07-29 22:16:31 +00:00
align-items: stretch
display: flex
justify-content: flex-start
position: relative
2017-07-29 23:06:32 +00:00
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
.file-cta
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
.file-cta
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
2017-07-29 22:16:31 +00:00
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
.file-icon
.fa
font-size: 28px
2017-07-29 23:06:32 +00:00
// Modifiers
2017-07-29 22:46:27 +00:00
&.has-name
2017-07-29 22:16:31 +00:00
.file-cta
border-bottom-right-radius: 0
border-top-right-radius: 0
2017-07-29 22:46:27 +00:00
.file-name
2017-07-29 22:16:31 +00:00
border-bottom-left-radius: 0
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
.file-name
display: none
2017-08-07 18:49:24 +00:00
&.is-boxed
2017-07-29 22:16:31 +00:00
.file-label
flex-direction: column
.file-cta
flex-direction: column
height: auto
padding: 1em 3em
2017-07-29 22:46:27 +00:00
.file-name
2017-07-29 22:16:31 +00:00
border-width: 0 1px 1px
.file-icon
height: 1.5em
width: 1.5em
.fa
font-size: 21px
&.is-small
.file-icon .fa
font-size: 14px
&.is-medium
.file-icon .fa
font-size: 28px
&.is-large
.file-icon .fa
font-size: 35px
2017-07-29 22:46:27 +00:00
&.has-name
2017-07-29 22:16:31 +00:00
.file-cta
border-radius: $file-radius $file-radius 0 0
2017-07-29 22:46:27 +00:00
.file-name
2017-07-29 22:16:31 +00:00
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
2017-12-04 15:14:42 +00:00
&.is-centered
justify-content: center
2017-07-29 23:22:26 +00:00
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
2017-12-04 15:14:42 +00:00
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
2017-07-29 22:16:31 +00:00
.file-label
align-items: stretch
display: flex
cursor: pointer
justify-content: flex-start
overflow: hidden
position: relative
&:hover
.file-cta
background-color: darken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
2017-07-29 22:46:27 +00:00
.file-name
border-color: darken($file-name-border-color, 2.5%)
2017-07-29 22:16:31 +00:00
&:active
.file-cta
background-color: darken($file-cta-background-color, 5%)
color: $file-cta-active-color
2017-07-29 22:46:27 +00:00
.file-name
border-color: darken($file-name-border-color, 5%)
2017-07-29 22:16:31 +00:00
.file-input
height: 100%
2017-07-29 22:16:31 +00:00
left: 0
2018-10-07 15:58:42 +00:00
opacity: 0
2017-07-29 22:16:31 +00:00
outline: none
position: absolute
top: 0
width: 100%
2017-07-29 22:16:31 +00:00
.file-cta,
2017-07-29 22:46:27 +00:00
.file-name
2018-10-02 06:04:19 +00:00
@extend %control
2017-07-29 22:16:31 +00:00
border-color: $file-border-color
border-radius: $file-radius
font-size: 1em
padding-left: 1em
padding-right: 1em
white-space: nowrap
.file-cta
background-color: $file-cta-background-color
color: $file-cta-color
2017-07-29 22:46:27 +00:00
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
2017-07-29 22:16:31 +00:00
display: block
2017-07-29 22:46:27 +00:00
max-width: $file-name-max-width
2017-07-29 22:16:31 +00:00
overflow: hidden
text-align: left
text-overflow: ellipsis
.file-icon
align-items: center
display: flex
height: 1em
justify-content: center
margin-right: 0.5em
width: 1em
.fa
font-size: 14px
.label
2017-07-28 20:05:15 +00:00
color: $label-color
display: block
2017-03-14 23:19:43 +00:00
font-size: $size-normal
2017-07-28 20:05:15 +00:00
font-weight: $label-weight
&:not(:last-child)
2016-10-29 17:53:30 +00:00
margin-bottom: 0.5em
2017-04-15 14:49:38 +00:00
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
2016-03-26 15:38:33 +00:00
.help
display: block
2017-07-28 20:05:15 +00:00
font-size: $help-size
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
// 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
2017-07-17 14:05:39 +00:00
&:not(:last-child)
margin-right: -1px
2017-12-04 15:14:42 +00:00
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
2017-03-12 17:29:26 +00:00
.button,
.input,
2017-12-04 15:14:42 +00:00
.select select
border-bottom-right-radius: 0
border-top-right-radius: 0
&:last-child:not(:only-child)
2017-03-12 17:29:26 +00:00
.button,
.input,
2017-12-04 15:14:42 +00:00
.select select
border-bottom-left-radius: 0
border-top-left-radius: 0
2017-03-12 17:29:26 +00:00
.button,
.input,
.select select
Fixes #1992 - Disabled form elements hover state is overlapping, if control has add-ons elements (#1993) * <!-- PLEASE READ THE FOLLOWING INSTRUCTIONS --> <!-- DO NOT REBUILD THE CSS OUTPUT IN YOUR PR --> <!-- Choose one of the following: --> This is a bugfix <!-- New feature? Update the CHANGELOG.md too, and eventually the Docs. --> <!-- Improvement? Explain how and why. --> <!-- Bugfix? Reference that issue as well. --> If a form field is disabled and that form field uses has add-on element ( has-addons ), hover state is overlapping to add-on element. ### Proposed solution <!-- Which specific problem does this PR solve and how? --> <!-- If it fixes a particular Issue, add "Fixes #ISSUE_NUMBER" in your title --> This solution excludes disabled form elements hover state which is used within has-addons fields wrapper. Fixes #1992 ### Tradeoffs <!-- What are the drawbacks of this solution? Are there alternative ones? --> <!-- Think of performance, build time, usability, complexity, coupling…) --> No tradeoffs. ### Testing Done I checkout out master and changed the lines. * Disabled form elements hover state is overlapping, if control has add-ons elements If a form field is disabled and that form field uses has add-on element ( has-addons ), hover state is overlapping to add-on element. * Disabled form elements hover state is overlapping, if control has add-ons elements If a form field is disabled and that form field uses has add-on element ( has-addons ), hover state is overlapping to add-on element.
2018-07-18 12:09:20 +00:00
&:not([disabled])
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active
z-index: 3
&:hover
z-index: 4
2016-05-30 18:36:17 +00:00
&.is-expanded
2016-07-31 10:45:56 +00:00
flex-grow: 1
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-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
2017-07-24 13:44:24 +00:00
&.is-grouped-multiline
flex-wrap: wrap
& > .control
&:last-child,
&:not(:last-child)
margin-bottom: 0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
2017-03-12 17:29:26 +00:00
&.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
2017-07-17 14:05:39 +00:00
.field .field
margin-bottom: 0
2017-03-12 17:29:26 +00:00
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
2017-07-17 14:05:39 +00:00
margin-bottom: 0
& > .field
2017-03-12 17:29:26 +00:00
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
2017-03-12 17:29:26 +00:00
&:not(:last-child)
margin-right: 0.75rem
.control
2018-10-28 07:56:15 +00:00
box-sizing: border-box
2018-05-30 08:54:32 +00:00
clear: both //fixes the icon floating out of the input when help text is floated right
font-size: $size-normal
2017-03-12 17:29:26 +00:00
position: relative
text-align: left
// Modifiers
2017-04-15 14:49:38 +00:00
&.has-icons-left,
&.has-icons-right
2017-05-27 20:02:31 +00:00
.input,
2017-07-17 18:17:57 +00:00
.select
2017-04-15 14:49:38 +00:00
&:focus
& ~ .icon
2017-07-28 20:05:15 +00:00
color: $input-icon-active-color
2017-04-15 14:49:38 +00:00
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
2017-07-28 20:05:15 +00:00
color: $input-icon-color
height: $input-height
2017-04-15 14:49:38 +00:00
pointer-events: none
position: absolute
top: 0
width: $input-height
2017-04-15 14:49:38 +00:00
z-index: 4
&.has-icons-left
2017-05-27 20:02:31 +00:00
.input,
.select select
padding-left: $input-height
2017-04-15 14:49:38 +00:00
.icon.is-left
left: 0
&.has-icons-right
2017-05-27 20:02:31 +00:00
.input,
.select select
padding-right: $input-height
2017-04-15 14:49:38 +00:00
.icon.is-right
right: 0
2016-04-10 15:00:32 +00:00
&.is-loading
2017-07-17 18:17:57 +00:00
&::after
2018-09-04 13:24:50 +00:00
@extend %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
z-index: 4
2017-06-27 21:57:13 +00:00
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large