restore disabled state dimming on buttons and selects
This commit is contained in:
parent
240ccc8309
commit
8a777b5d23
16
global.css
16
global.css
|
@ -12,13 +12,13 @@ button {
|
||||||
transition: background-color .25s, border-color .25s;
|
transition: background-color .25s, border-color .25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:not(:disabled):hover {
|
||||||
background-color: hsl(0, 0%, 95%);
|
background-color: hsl(0, 0%, 95%);
|
||||||
border-color: hsl(0, 0%, 52%);
|
border-color: hsl(0, 0%, 52%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
|
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
|
||||||
#message-box-buttons button:hover {
|
#message-box-buttons button:not(:disabled):hover {
|
||||||
background-color: hsl(0, 0%, 90%);
|
background-color: hsl(0, 0%, 90%);
|
||||||
border-color: hsl(0, 0%, 50%);
|
border-color: hsl(0, 0%, 50%);
|
||||||
}
|
}
|
||||||
|
@ -65,7 +65,7 @@ input[type="checkbox"]:not(.slider) {
|
||||||
transition: background-color .1s, border-color .1s;
|
transition: background-color .1s, border-color .1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:not(.slider):hover {
|
input[type="checkbox"]:not(.slider):not(:disabled):hover {
|
||||||
border-color: hsl(0, 0%, 32%);
|
border-color: hsl(0, 0%, 32%);
|
||||||
background-color: hsl(0, 0%, 82%);
|
background-color: hsl(0, 0%, 82%);
|
||||||
}
|
}
|
||||||
|
@ -157,6 +157,14 @@ input[type="radio"]:checked:after {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* restore disabled state dimming */
|
||||||
|
button:disabled,
|
||||||
|
select:disabled,
|
||||||
|
option:disabled,
|
||||||
|
select[disabled] > option {
|
||||||
|
color: graytext;
|
||||||
|
}
|
||||||
|
|
||||||
@supports (-moz-appearance: none) {
|
@supports (-moz-appearance: none) {
|
||||||
.moz-appearance-bug .svg-icon.checked,
|
.moz-appearance-bug .svg-icon.checked,
|
||||||
.moz-appearance-bug input[type="radio"]:after {
|
.moz-appearance-bug input[type="radio"]:after {
|
||||||
|
@ -189,7 +197,7 @@ input[type="radio"]:checked:after {
|
||||||
border: 1px solid hsl(0, 0%, 66%);
|
border: 1px solid hsl(0, 0%, 66%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.firefox.non-windows input[type="number"]:hover,
|
.firefox.non-windows input[type="number"]:not(:disabled):hover,
|
||||||
.firefox.non-windows input[type="number"]:focus {
|
.firefox.non-windows input[type="number"]:focus {
|
||||||
-moz-appearance: number-input;
|
-moz-appearance: number-input;
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,7 @@ function configDialog(style) {
|
||||||
|
|
||||||
buildConfigForm();
|
buildConfigForm();
|
||||||
renderValues();
|
renderValues();
|
||||||
|
vars.forEach(renderValueState);
|
||||||
|
|
||||||
return messageBox({
|
return messageBox({
|
||||||
title: `${style.name} v${data.version}`,
|
title: `${style.name} v${data.version}`,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user