This commit is contained in:
Jeremy Thomas 2018-10-31 18:31:52 +00:00
parent e8f485e27a
commit ff8c4c18ac
3 changed files with 137 additions and 57 deletions

View File

@ -7,6 +7,7 @@
* #2145 Fix #372 -> New indeterminate progress bars
* #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element
* #592 -> Give arbitrary elements access to the image/ratio classes
* #1682 Fix #1681 -> Adds disabled styles for `<fieldset disabled>`
### Improvements

View File

@ -212,7 +212,18 @@
.file-name[disabled], .pagination-previous[disabled],
.pagination-next[disabled],
.pagination-link[disabled],
.pagination-ellipsis[disabled] {
.pagination-ellipsis[disabled],
fieldset[disabled] .button,
fieldset[disabled] .input,
fieldset[disabled] .textarea,
fieldset[disabled] .select select,
.select fieldset[disabled] select,
fieldset[disabled] .file-cta,
fieldset[disabled] .file-name,
fieldset[disabled] .pagination-previous,
fieldset[disabled] .pagination-next,
fieldset[disabled] .pagination-link,
fieldset[disabled] .pagination-ellipsis {
cursor: not-allowed;
}
@ -393,6 +404,10 @@ strong {
font-weight: 700;
}
fieldset {
border: none;
}
pre {
-webkit-overflow-scrolling: touch;
background-color: whitesmoke;
@ -1612,7 +1627,8 @@ a.box:active {
color: #363636;
}
.button.is-text[disabled] {
.button.is-text[disabled],
fieldset[disabled] .button.is-text {
background-color: transparent;
border-color: transparent;
box-shadow: none;
@ -1645,7 +1661,8 @@ a.box:active {
color: #0a0a0a;
}
.button.is-white[disabled] {
.button.is-white[disabled],
fieldset[disabled] .button.is-white {
background-color: white;
border-color: transparent;
box-shadow: none;
@ -1660,7 +1677,8 @@ a.box:active {
background-color: black;
}
.button.is-white.is-inverted[disabled] {
.button.is-white.is-inverted[disabled],
fieldset[disabled] .button.is-white.is-inverted {
background-color: #0a0a0a;
border-color: transparent;
box-shadow: none;
@ -1687,7 +1705,8 @@ a.box:active {
border-color: transparent transparent white white !important;
}
.button.is-white.is-outlined[disabled] {
.button.is-white.is-outlined[disabled],
fieldset[disabled] .button.is-white.is-outlined {
background-color: transparent;
border-color: white;
box-shadow: none;
@ -1705,7 +1724,8 @@ a.box:active {
color: white;
}
.button.is-white.is-inverted.is-outlined[disabled] {
.button.is-white.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-white.is-inverted.is-outlined {
background-color: transparent;
border-color: #0a0a0a;
box-shadow: none;
@ -1739,7 +1759,8 @@ a.box:active {
color: white;
}
.button.is-black[disabled] {
.button.is-black[disabled],
fieldset[disabled] .button.is-black {
background-color: #0a0a0a;
border-color: transparent;
box-shadow: none;
@ -1754,7 +1775,8 @@ a.box:active {
background-color: #f2f2f2;
}
.button.is-black.is-inverted[disabled] {
.button.is-black.is-inverted[disabled],
fieldset[disabled] .button.is-black.is-inverted {
background-color: white;
border-color: transparent;
box-shadow: none;
@ -1781,7 +1803,8 @@ a.box:active {
border-color: transparent transparent #0a0a0a #0a0a0a !important;
}
.button.is-black.is-outlined[disabled] {
.button.is-black.is-outlined[disabled],
fieldset[disabled] .button.is-black.is-outlined {
background-color: transparent;
border-color: #0a0a0a;
box-shadow: none;
@ -1799,7 +1822,8 @@ a.box:active {
color: #0a0a0a;
}
.button.is-black.is-inverted.is-outlined[disabled] {
.button.is-black.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-black.is-inverted.is-outlined {
background-color: transparent;
border-color: white;
box-shadow: none;
@ -1833,7 +1857,8 @@ a.box:active {
color: #363636;
}
.button.is-light[disabled] {
.button.is-light[disabled],
fieldset[disabled] .button.is-light {
background-color: whitesmoke;
border-color: transparent;
box-shadow: none;
@ -1848,7 +1873,8 @@ a.box:active {
background-color: #292929;
}
.button.is-light.is-inverted[disabled] {
.button.is-light.is-inverted[disabled],
fieldset[disabled] .button.is-light.is-inverted {
background-color: #363636;
border-color: transparent;
box-shadow: none;
@ -1875,7 +1901,8 @@ a.box:active {
border-color: transparent transparent whitesmoke whitesmoke !important;
}
.button.is-light.is-outlined[disabled] {
.button.is-light.is-outlined[disabled],
fieldset[disabled] .button.is-light.is-outlined {
background-color: transparent;
border-color: whitesmoke;
box-shadow: none;
@ -1893,7 +1920,8 @@ a.box:active {
color: whitesmoke;
}
.button.is-light.is-inverted.is-outlined[disabled] {
.button.is-light.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-light.is-inverted.is-outlined {
background-color: transparent;
border-color: #363636;
box-shadow: none;
@ -1927,7 +1955,8 @@ a.box:active {
color: whitesmoke;
}
.button.is-dark[disabled] {
.button.is-dark[disabled],
fieldset[disabled] .button.is-dark {
background-color: #363636;
border-color: transparent;
box-shadow: none;
@ -1942,7 +1971,8 @@ a.box:active {
background-color: #e8e8e8;
}
.button.is-dark.is-inverted[disabled] {
.button.is-dark.is-inverted[disabled],
fieldset[disabled] .button.is-dark.is-inverted {
background-color: whitesmoke;
border-color: transparent;
box-shadow: none;
@ -1969,7 +1999,8 @@ a.box:active {
border-color: transparent transparent #363636 #363636 !important;
}
.button.is-dark.is-outlined[disabled] {
.button.is-dark.is-outlined[disabled],
fieldset[disabled] .button.is-dark.is-outlined {
background-color: transparent;
border-color: #363636;
box-shadow: none;
@ -1987,7 +2018,8 @@ a.box:active {
color: #363636;
}
.button.is-dark.is-inverted.is-outlined[disabled] {
.button.is-dark.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
background-color: transparent;
border-color: whitesmoke;
box-shadow: none;
@ -2021,7 +2053,8 @@ a.box:active {
color: #fff;
}
.button.is-primary[disabled] {
.button.is-primary[disabled],
fieldset[disabled] .button.is-primary {
background-color: #00d1b2;
border-color: transparent;
box-shadow: none;
@ -2036,7 +2069,8 @@ a.box:active {
background-color: #f2f2f2;
}
.button.is-primary.is-inverted[disabled] {
.button.is-primary.is-inverted[disabled],
fieldset[disabled] .button.is-primary.is-inverted {
background-color: #fff;
border-color: transparent;
box-shadow: none;
@ -2063,7 +2097,8 @@ a.box:active {
border-color: transparent transparent #00d1b2 #00d1b2 !important;
}
.button.is-primary.is-outlined[disabled] {
.button.is-primary.is-outlined[disabled],
fieldset[disabled] .button.is-primary.is-outlined {
background-color: transparent;
border-color: #00d1b2;
box-shadow: none;
@ -2081,7 +2116,8 @@ a.box:active {
color: #00d1b2;
}
.button.is-primary.is-inverted.is-outlined[disabled] {
.button.is-primary.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
box-shadow: none;
@ -2115,7 +2151,8 @@ a.box:active {
color: #fff;
}
.button.is-link[disabled] {
.button.is-link[disabled],
fieldset[disabled] .button.is-link {
background-color: #3273dc;
border-color: transparent;
box-shadow: none;
@ -2130,7 +2167,8 @@ a.box:active {
background-color: #f2f2f2;
}
.button.is-link.is-inverted[disabled] {
.button.is-link.is-inverted[disabled],
fieldset[disabled] .button.is-link.is-inverted {
background-color: #fff;
border-color: transparent;
box-shadow: none;
@ -2157,7 +2195,8 @@ a.box:active {
border-color: transparent transparent #3273dc #3273dc !important;
}
.button.is-link.is-outlined[disabled] {
.button.is-link.is-outlined[disabled],
fieldset[disabled] .button.is-link.is-outlined {
background-color: transparent;
border-color: #3273dc;
box-shadow: none;
@ -2175,7 +2214,8 @@ a.box:active {
color: #3273dc;
}
.button.is-link.is-inverted.is-outlined[disabled] {
.button.is-link.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-link.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
box-shadow: none;
@ -2209,7 +2249,8 @@ a.box:active {
color: #fff;
}
.button.is-info[disabled] {
.button.is-info[disabled],
fieldset[disabled] .button.is-info {
background-color: #209cee;
border-color: transparent;
box-shadow: none;
@ -2224,7 +2265,8 @@ a.box:active {
background-color: #f2f2f2;
}
.button.is-info.is-inverted[disabled] {
.button.is-info.is-inverted[disabled],
fieldset[disabled] .button.is-info.is-inverted {
background-color: #fff;
border-color: transparent;
box-shadow: none;
@ -2251,7 +2293,8 @@ a.box:active {
border-color: transparent transparent #209cee #209cee !important;
}
.button.is-info.is-outlined[disabled] {
.button.is-info.is-outlined[disabled],
fieldset[disabled] .button.is-info.is-outlined {
background-color: transparent;
border-color: #209cee;
box-shadow: none;
@ -2269,7 +2312,8 @@ a.box:active {
color: #209cee;
}
.button.is-info.is-inverted.is-outlined[disabled] {
.button.is-info.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-info.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
box-shadow: none;
@ -2303,7 +2347,8 @@ a.box:active {
color: #fff;
}
.button.is-success[disabled] {
.button.is-success[disabled],
fieldset[disabled] .button.is-success {
background-color: #23d160;
border-color: transparent;
box-shadow: none;
@ -2318,7 +2363,8 @@ a.box:active {
background-color: #f2f2f2;
}
.button.is-success.is-inverted[disabled] {
.button.is-success.is-inverted[disabled],
fieldset[disabled] .button.is-success.is-inverted {
background-color: #fff;
border-color: transparent;
box-shadow: none;
@ -2345,7 +2391,8 @@ a.box:active {
border-color: transparent transparent #23d160 #23d160 !important;
}
.button.is-success.is-outlined[disabled] {
.button.is-success.is-outlined[disabled],
fieldset[disabled] .button.is-success.is-outlined {
background-color: transparent;
border-color: #23d160;
box-shadow: none;
@ -2363,7 +2410,8 @@ a.box:active {
color: #23d160;
}
.button.is-success.is-inverted.is-outlined[disabled] {
.button.is-success.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-success.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
box-shadow: none;
@ -2397,7 +2445,8 @@ a.box:active {
color: rgba(0, 0, 0, 0.7);
}
.button.is-warning[disabled] {
.button.is-warning[disabled],
fieldset[disabled] .button.is-warning {
background-color: #ffdd57;
border-color: transparent;
box-shadow: none;
@ -2412,7 +2461,8 @@ a.box:active {
background-color: rgba(0, 0, 0, 0.7);
}
.button.is-warning.is-inverted[disabled] {
.button.is-warning.is-inverted[disabled],
fieldset[disabled] .button.is-warning.is-inverted {
background-color: rgba(0, 0, 0, 0.7);
border-color: transparent;
box-shadow: none;
@ -2439,7 +2489,8 @@ a.box:active {
border-color: transparent transparent #ffdd57 #ffdd57 !important;
}
.button.is-warning.is-outlined[disabled] {
.button.is-warning.is-outlined[disabled],
fieldset[disabled] .button.is-warning.is-outlined {
background-color: transparent;
border-color: #ffdd57;
box-shadow: none;
@ -2457,7 +2508,8 @@ a.box:active {
color: #ffdd57;
}
.button.is-warning.is-inverted.is-outlined[disabled] {
.button.is-warning.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-warning.is-inverted.is-outlined {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.7);
box-shadow: none;
@ -2491,7 +2543,8 @@ a.box:active {
color: #fff;
}
.button.is-danger[disabled] {
.button.is-danger[disabled],
fieldset[disabled] .button.is-danger {
background-color: #ff3860;
border-color: transparent;
box-shadow: none;
@ -2506,7 +2559,8 @@ a.box:active {
background-color: #f2f2f2;
}
.button.is-danger.is-inverted[disabled] {
.button.is-danger.is-inverted[disabled],
fieldset[disabled] .button.is-danger.is-inverted {
background-color: #fff;
border-color: transparent;
box-shadow: none;
@ -2533,7 +2587,8 @@ a.box:active {
border-color: transparent transparent #ff3860 #ff3860 !important;
}
.button.is-danger.is-outlined[disabled] {
.button.is-danger.is-outlined[disabled],
fieldset[disabled] .button.is-danger.is-outlined {
background-color: transparent;
border-color: #ff3860;
box-shadow: none;
@ -2551,7 +2606,8 @@ a.box:active {
color: #ff3860;
}
.button.is-danger.is-inverted.is-outlined[disabled] {
.button.is-danger.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
box-shadow: none;
@ -2571,7 +2627,8 @@ a.box:active {
font-size: 1.5rem;
}
.button[disabled] {
.button[disabled],
fieldset[disabled] .button {
background-color: white;
border-color: #dbdbdb;
box-shadow: none;
@ -2962,7 +3019,10 @@ a.box:active {
}
.input[disabled],
.textarea[disabled] {
fieldset[disabled] .input,
.textarea[disabled],
fieldset[disabled]
.textarea {
background-color: whitesmoke;
border-color: whitesmoke;
box-shadow: none;
@ -2970,22 +3030,34 @@ a.box:active {
}
.input[disabled]::-moz-placeholder,
.textarea[disabled]::-moz-placeholder {
fieldset[disabled] .input::-moz-placeholder,
.textarea[disabled]::-moz-placeholder,
fieldset[disabled]
.textarea::-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]::-webkit-input-placeholder,
.textarea[disabled]::-webkit-input-placeholder {
fieldset[disabled] .input::-webkit-input-placeholder,
.textarea[disabled]::-webkit-input-placeholder,
fieldset[disabled]
.textarea::-webkit-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]:-moz-placeholder,
.textarea[disabled]:-moz-placeholder {
fieldset[disabled] .input:-moz-placeholder,
.textarea[disabled]:-moz-placeholder,
fieldset[disabled]
.textarea:-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]:-ms-input-placeholder,
.textarea[disabled]:-ms-input-placeholder {
fieldset[disabled] .input:-ms-input-placeholder,
.textarea[disabled]:-ms-input-placeholder,
fieldset[disabled]
.textarea:-ms-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
@ -3206,7 +3278,10 @@ a.box:active {
}
.checkbox[disabled],
.radio[disabled] {
fieldset[disabled] .checkbox,
.radio[disabled],
fieldset[disabled]
.radio {
color: #7a7a7a;
cursor: not-allowed;
}
@ -3273,26 +3348,31 @@ a.box:active {
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.select select[disabled] {
.select select[disabled],
fieldset[disabled] .select select {
background-color: whitesmoke;
border-color: whitesmoke;
box-shadow: none;
color: #7a7a7a;
}
.select select[disabled]::-moz-placeholder {
.select select[disabled]::-moz-placeholder,
fieldset[disabled] .select select::-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.select select[disabled]::-webkit-input-placeholder {
.select select[disabled]::-webkit-input-placeholder,
fieldset[disabled] .select select::-webkit-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.select select[disabled]:-moz-placeholder {
.select select[disabled]:-moz-placeholder,
fieldset[disabled] .select select:-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.select select[disabled]:-ms-input-placeholder {
.select select[disabled]:-ms-input-placeholder,
fieldset[disabled] .select select:-ms-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
@ -3300,7 +3380,8 @@ a.box:active {
display: none;
}
.select select[disabled]:hover {
.select select[disabled]:hover,
fieldset[disabled] .select select:hover {
border-color: whitesmoke;
}

View File

@ -43,7 +43,6 @@ $label-weight: $weight-bold !default
$help-size: $size-small !default
=input
@extend %control
background-color: $input-background-color
@ -504,7 +503,6 @@ $help-size: $size-small !default
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
&.is-horizontal
+tablet
display: flex