fieldset disabled styles (#1682)

* fieldset disabled styles

* Added disabled styles to button elements included inside a disabled fieldset

* Added comma, and fieldset element reset

* fieldset doesn't need display block
This commit is contained in:
Sam Featherstone
2018-11-01 05:29:55 +11:00
committed by Jeremy Thomas
parent c50cc06e5a
commit e8f485e27a
4 changed files with 24 additions and 10 deletions

View File

@@ -103,6 +103,9 @@ strong
// Block
fieldset
border: none
pre
+overflow-touch
background-color: $pre-background

View File

@@ -104,7 +104,8 @@ $button-static-border-color: $grey-lighter !default
&.is-active
background-color: darken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: transparent
box-shadow: none
@@ -131,7 +132,8 @@ $button-static-border-color: $grey-lighter !default
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: $color
border-color: transparent
box-shadow: none
@@ -140,7 +142,8 @@ $button-static-border-color: $grey-lighter !default
color: $color
&:hover
background-color: darken($color-invert, 5%)
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: $color-invert
border-color: transparent
box-shadow: none
@@ -160,7 +163,8 @@ $button-static-border-color: $grey-lighter !default
&.is-loading
&::after
border-color: transparent transparent $color $color !important
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color
box-shadow: none
@@ -173,7 +177,8 @@ $button-static-border-color: $grey-lighter !default
&:focus
background-color: $color-invert
color: $color
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color-invert
box-shadow: none
@@ -186,7 +191,8 @@ $button-static-border-color: $grey-lighter !default
&.is-large
+button-large
// Modifiers
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: $button-disabled-background-color
border-color: $button-disabled-border-color
box-shadow: $button-disabled-shadow

View File

@@ -43,6 +43,7 @@ $label-weight: $weight-bold !default
$help-size: $size-small !default
=input
@extend %control
background-color: $input-background-color
@@ -59,7 +60,8 @@ $help-size: $size-small !default
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
@@ -137,7 +139,8 @@ $help-size: $size-small !default
cursor: pointer
&:hover
color: $input-hover-color
&[disabled]
&[disabled],
fieldset[disabled] &
color: $input-disabled-color
cursor: not-allowed
@@ -171,7 +174,8 @@ $help-size: $size-small !default
outline: none
&::-ms-expand
display: none
&[disabled]:hover
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
padding-right: 2.5em

View File

@@ -33,7 +33,8 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
&:active,
&.is-active
outline: none
&[disabled]
&[disabled],
fieldset[disabled] &
cursor: not-allowed
%control