extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-28 11:03:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve disabled styles

Browse Source
This commit is contained in:
Kuldeep M 2019-08-30 09:05:36 +01:00
parent b4a4c33e91
commit 07183bbf32
3 changed files with 125 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/css/button.css
View File

@ -58,14 +58,14 @@ input[type="submit"]:active {
text-decoration: none;
}
button[disabled],
.button[disabled],
button[disabled]:hover,
.button[disabled]:hover,
button[disabled]:focus,
.button[disabled]:focus,
button[disabled]:active,
.button[disabled]:active {
button:disabled,
.button:disabled,
button:disabled:hover,
.button:disabled:hover,
button:disabled:focus,
.button:disabled:focus,
button:disabled:active,
.button:disabled:active {
background-color: rgb(var(--theme-gray-02));
border-color: transparent;
color: rgb(var(--button-text-disabled));
@ -142,14 +142,14 @@ button [class*=" button-"]:last-child,
color: rgb(var(--button-link-text-active));
}
.button-link[disabled] {
.button-link:disabled {
background-color: transparent;
color: transparent;
pointer-events: none;
}
.button-link:hover[disabled],
.button-link:focus[disabled] {
.button-link:hover:disabled,
.button-link:focus:disabled {
background-color: transparent;
color: transparent;
}

223
src/css/form.css
View File

@ -37,7 +37,7 @@ textarea:focus {
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
}
textarea[disabled] {
textarea:disabled {
background-color: transparent;
color: rgb(var(--form-input-text-disabled));
border-color: rgb(var(--form-input-text-disabled));
@ -45,8 +45,8 @@ textarea[disabled] {
box-shadow: none;
}
textarea[disabled]:hover,
textarea[disabled]:focus {
textarea:disabled:hover,
textarea:disabled:focus {
color: rgb(var(--form-input-text-disabled));
}
@ -63,8 +63,9 @@ textarea:focus::placeholder {
color: rgb(var(--form-input-placeholder-hover-focus));
}
textarea[disabled]:hover::placeholder,
textarea[disabled]:focus::placeholder {
textarea:disabled::placeholder,
textarea:disabled:hover::placeholder,
textarea:disabled:focus::placeholder {
color: rgb(var(--form-input-placeholder-disabled));
}
@ -129,12 +130,12 @@ input[type="text"]:focus {
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
}
input[type="email"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled] {
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled {
background-color: transparent;
color: rgb(var(--form-input-text-disabled));
border-color: rgb(var(--form-input-text-disabled));
@ -142,18 +143,18 @@ input[type="text"][disabled] {
box-shadow: none;
}
input[type="email"][disabled]:hover,
input[type="email"][disabled]:focus,
input[type="number"][disabled]:hover,
input[type="number"][disabled]:focus,
input[type="password"][disabled]:hover,
input[type="password"][disabled]:focus,
input[type="search"][disabled]:hover,
input[type="search"][disabled]:focus,
input[type="tel"][disabled]:hover,
input[type="tel"][disabled]:focus,
input[type="text"][disabled]:hover,
input[type="text"][disabled]:focus {
input[type="email"]:disabled:hover,
input[type="email"]:disabled:focus,
input[type="number"]:disabled:hover,
input[type="number"]:disabled:focus,
input[type="password"]:disabled:hover,
input[type="password"]:disabled:focus,
input[type="search"]:disabled:hover,
input[type="search"]:disabled:focus,
input[type="tel"]:disabled:hover,
input[type="tel"]:disabled:focus,
input[type="text"]:disabled:hover,
input[type="text"]:disabled:focus {
color: rgb(var(--form-input-text-disabled));
}
@ -185,24 +186,24 @@ input[type="text"]:focus::placeholder {
color: rgb(var(--form-input-placeholder-hover-focus));
}
input[type="email"][disabled]::placeholder,
input[type="email"][disabled]:hover::placeholder,
input[type="email"][disabled]:focus::placeholder,
input[type="number"][disabled]::placeholder,
input[type="number"][disabled]:hover::placeholder,
input[type="number"][disabled]:focus::placeholder,
input[type="password"][disabled]::placeholder,
input[type="password"][disabled]:hover::placeholder,
input[type="password"][disabled]:focus::placeholder,
input[type="search"][disabled]::placeholder,
input[type="search"][disabled]:hover::placeholder,
input[type="search"][disabled]:focus::placeholder,
input[type="tel"][disabled]::placeholder,
input[type="tel"][disabled]:hover::placeholder,
input[type="tel"][disabled]:focus::placeholder,
input[type="text"][disabled]::placeholder,
input[type="text"][disabled]:hover::placeholder,
input[type="text"][disabled]:focus::placeholder {
input[type="email"]:disabled::placeholder,
input[type="email"]:disabled:hover::placeholder,
input[type="email"]:disabled:focus::placeholder,
input[type="number"]:disabled::placeholder,
input[type="number"]:disabled:hover::placeholder,
input[type="number"]:disabled:focus::placeholder,
input[type="password"]:disabled::placeholder,
input[type="password"]:disabled:hover::placeholder,
input[type="password"]:disabled:focus::placeholder,
input[type="search"]:disabled::placeholder,
input[type="search"]:disabled:hover::placeholder,
input[type="search"]:disabled:focus::placeholder,
input[type="tel"]:disabled::placeholder,
input[type="tel"]:disabled:hover::placeholder,
input[type="tel"]:disabled:focus::placeholder,
input[type="text"]:disabled::placeholder,
input[type="text"]:disabled:hover::placeholder,
input[type="text"]:disabled:focus::placeholder {
color: rgb(var(--form-input-placeholder-disabled));
}
@ -320,10 +321,10 @@ input[type="radio"]:checked+label {
color: rgb(var(--form-checkbox-radio-checked-label));
}
input[type="checkbox"]:not([disabled]):hover:checked+label,
input[type="checkbox"]:not([disabled]):focus:checked+label,
input[type="radio"]:not([disabled]):hover:checked+label,
input[type="radio"]:not([disabled]):focus:checked+label {
input[type="checkbox"]:not(:disabled):hover:checked+label,
input[type="checkbox"]:not(:disabled):focus:checked+label,
input[type="radio"]:not(:disabled):hover:checked+label,
input[type="radio"]:not(:disabled):focus:checked+label {
color: rgb(var(--theme-style-text));
}
@ -337,20 +338,20 @@ input[type="radio"]:checked:focus+label:before {
transform: scale(1.2);
}
input[type="checkbox"][disabled]+label,
input[type="radio"][disabled]+label {
input[type="checkbox"]:disabled+label,
input[type="radio"]:disabled+label {
color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default;
}
input[type="checkbox"][disabled]+label:before,
input[type="radio"][disabled]+label:before {
input[type="checkbox"]:disabled+label:before,
input[type="radio"]:disabled+label:before {
color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default;
}
input[type="checkbox"][disabled]:active+label:before,
input[type="radio"][disabled]:active+label:before {
input[type="checkbox"]:disabled:active+label:before,
input[type="radio"]:disabled:active+label:before {
transform: none;
}
@ -381,13 +382,13 @@ input[type="color"]:focus {
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10));
}
input[type="color"][disabled] {
input[type="color"]:disabled {
opacity: 0.25;
cursor: default;
}
input[type="color"][disabled]:hover,
input[type="color"][disabled]:focus {
input[type="color"]:disabled:hover,
input[type="color"]:disabled:focus {
box-shadow: none;
}
@ -451,11 +452,11 @@ input[type="range"]:focus:before {
background-color: rgb(var(--theme-style-text));
}
input[type="range"][disabled] {
input[type="range"]:disabled {
cursor: default;
}
input[type="range"][disabled]:before {
input[type="range"]:disabled:before {
background-color: rgb(var(--theme-gray-04));
cursor: default;
}
@ -508,13 +509,13 @@ input[type="range"]::-webkit-slider-thumb:active {
text-decoration: none;
}
input[type="range"][disabled]::-webkit-slider-thumb {
input[type="range"]:disabled::-webkit-slider-thumb {
border-color: rgb(var(--theme-gray-04));
cursor: default;
}
input[type="range"][disabled]:active::-webkit-slider-thumb,
input[type="range"][disabled]:focus::-webkit-slider-thumb {
input[type="range"]:disabled:active::-webkit-slider-thumb,
input[type="range"]:disabled:focus::-webkit-slider-thumb {
transform: scale(1);
outline: none;
}
@ -586,22 +587,22 @@ input[type="range"]::-moz-range-progress {
border-radius: var(--theme-radius);
}
input[type="range"][disabled]::-moz-range-track {
input[type="range"]:disabled::-moz-range-track {
background-color: rgb(var(--theme-gray-04));
}
input[type="range"][disabled]::-moz-range-thumb {
input[type="range"]:disabled::-moz-range-thumb {
border-color: rgb(var(--theme-gray-04));
cursor: default;
}
input[type="range"][disabled]:active::-moz-range-thumb,
input[type="range"][disabled]:focus::-moz-range-thumb {
input[type="range"]:disabled:active::-moz-range-thumb,
input[type="range"]:disabled:focus::-moz-range-thumb {
transform: scale(1);
outline: none;
}
input[type="range"][disabled]::-moz-range-progress {
input[type="range"]:disabled::-moz-range-progress {
background-color: rgb(var(--theme-gray-04));
}
@ -696,22 +697,22 @@ input[type="range"][disabled]::-moz-range-progress {
transition: none;
}
.input-button input[type="checkbox"][disabled]+label,
.input-button input[type="checkbox"][disabled]:hover+label,
.input-button input[type="checkbox"][disabled]:focus+label,
.input-button input[type="checkbox"][disabled]:active+label,
.input-button input[type="radio"][disabled]+label,
.input-button input[type="radio"][disabled]:hover+label,
.input-button input[type="radio"][disabled]:focus+label,
.input-button input[type="radio"][disabled]:active+label,
.input-button input[type="color"][disabled]+label,
.input-button input[type="color"][disabled]:hover+label,
.input-button input[type="color"][disabled]:focus+label,
.input-button input[type="color"][disabled]:active+label,
.input-button input[type="file"][disabled]+label,
.input-button input[type="file"][disabled]:hover+label,
.input-button input[type="file"][disabled]:focus+label,
.input-button input[type="file"][disabled]:active+label {
.input-button input[type="checkbox"]:disabled+label,
.input-button input[type="checkbox"]:disabled:hover+label,
.input-button input[type="checkbox"]:disabled:focus+label,
.input-button input[type="checkbox"]:disabled:active+label,
.input-button input[type="radio"]:disabled+label,
.input-button input[type="radio"]:disabled:hover+label,
.input-button input[type="radio"]:disabled:focus+label,
.input-button input[type="radio"]:disabled:active+label,
.input-button input[type="color"]:disabled+label,
.input-button input[type="color"]:disabled:hover+label,
.input-button input[type="color"]:disabled:focus+label,
.input-button input[type="color"]:disabled:active+label,
.input-button input[type="file"]:disabled+label,
.input-button input[type="file"]:disabled:hover+label,
.input-button input[type="file"]:disabled:focus+label,
.input-button input[type="file"]:disabled:active+label {
background-color: rgb(var(--theme-gray-02));
border-color: transparent;
color: rgb(var(--button-text-disabled));
@ -751,23 +752,23 @@ input[type="range"][disabled]::-moz-range-progress {
color: rgb(var(--button-link-text-active));
}
.input-button-link input[disabled][type="checkbox"]+label,
.input-button-link input[disabled][type="radio"]+label,
.input-button-link input[disabled][type="color"]+label,
.input-button-link input[disabled][type="file"]+label {
.input-button-link input:disabled[type="checkbox"]+label,
.input-button-link input:disabled[type="radio"]+label,
.input-button-link input:disabled[type="color"]+label,
.input-button-link input:disabled[type="file"]+label {
background-color: transparent;
color: transparent;
pointer-events: none;
}
.input-button-link input[disabled][type="checkbox"]:hover+label,
.input-button-link input[disabled][type="checkbox"]:focus+label,
.input-button-link input[disabled][type="radio"]:hover+label,
.input-button-link input[disabled][type="radio"]:focus+label,
.input-button-link input[disabled][type="color"]:hover+label,
.input-button-link input[disabled][type="color"]:focus+label,
.input-button-link input[disabled][type="file"]:hover+label,
.input-button-link input[disabled][type="file"]:focus+label {
.input-button-link input:disabled[type="checkbox"]:hover+label,
.input-button-link input:disabled[type="checkbox"]:focus+label,
.input-button-link input:disabled[type="radio"]:hover+label,
.input-button-link input:disabled[type="radio"]:focus+label,
.input-button-link input:disabled[type="color"]:hover+label,
.input-button-link input:disabled[type="color"]:focus+label,
.input-button-link input:disabled[type="file"]:hover+label,
.input-button-link input:disabled[type="file"]:focus+label {
background-color: transparent;
color: transparent;
}
@ -918,27 +919,27 @@ input[type="range"][disabled]::-moz-range-progress {
border-color: rgb(var(--theme-accent));
}
.form-grid input[type="checkbox"][disabled]:focus+label,
.form-grid input[type="checkbox"][disabled]:hover+label,
.form-grid input[type="radio"][disabled]:focus+label,
.form-grid input[type="radio"][disabled]:hover+label {
.form-grid input[type="checkbox"]:disabled:focus+label,
.form-grid input[type="checkbox"]:disabled:hover+label,
.form-grid input[type="radio"]:disabled:focus+label,
.form-grid input[type="radio"]:disabled:hover+label {
border-color: transparent;
}
.form-grid input[type="checkbox"][disabled]:active+label,
.form-grid input[type="radio"][disabled]:active+label {
.form-grid input[type="checkbox"]:disabled:active+label,
.form-grid input[type="radio"]:disabled:active+label {
border-color: transparent;
}
.form-grid input[type="checkbox"][disabled]:checked+label,
.form-grid input[type="radio"][disabled]:checked+label {
.form-grid input[type="checkbox"]:disabled:checked+label,
.form-grid input[type="radio"]:disabled:checked+label {
border-color: rgb(var(--form-checkbox-radio-disabled-label));
}
.form-grid input[type="checkbox"]:not([disabled]):hover:checked+label,
.form-grid input[type="checkbox"]:not([disabled]):focus:checked+label,
.form-grid input[type="radio"]:not([disabled]):hover:checked+label,
.form-grid input[type="radio"]:not([disabled]):focus:checked+label {
.form-grid input[type="checkbox"]:not(:disabled):hover:checked+label,
.form-grid input[type="checkbox"]:not(:disabled):focus:checked+label,
.form-grid input[type="radio"]:not(:disabled):hover:checked+label,
.form-grid input[type="radio"]:not(:disabled):focus:checked+label {
border-color: rgb(var(--theme-accent));
}
@ -978,13 +979,13 @@ input[type="range"][disabled]::-moz-range-progress {
background-color: rgb(var(--theme-accent));
}
.form-grid input[type="checkbox"][disabled]+label,
.form-grid input[type="radio"][disabled]+label {
.form-grid input[type="checkbox"]:disabled+label,
.form-grid input[type="radio"]:disabled+label {
transform: scale(1);
}
.form-grid input[type="checkbox"][disabled]:checked+label:before,
.form-grid input[type="radio"][disabled]:checked+label:before {
.form-grid input[type="checkbox"]:disabled:checked+label:before,
.form-grid input[type="radio"]:disabled:checked+label:before {
background-color: rgb(var(--form-checkbox-radio-disabled-label));
}
@ -1089,15 +1090,15 @@ input[type="range"][disabled]::-moz-range-progress {
outline: none;
}
.form-group-text[disabled] {
.form-group-text:disabled {
background-color: rgb(var(--theme-gray-02));
color: rgb(var(--form-input-placeholder-disabled));
box-shadow: none;
cursor: default;
}
.form-group-text[disabled]:hover,
.form-group-text[disabled]:focus {
.form-group-text:disabled:hover,
.form-group-text:disabled:focus {
background-color: rgb(var(--theme-gray-02));
border-color: transparent;
}

4
src/css/link.css
View File

@ -542,12 +542,12 @@
transition: transform var(--layout-timing-extra-fast);
}
.link-form-text-icon:not([disabled]):hover .link-form-icon {
.link-form-text-icon:not(:disabled):hover .link-form-icon {
transform: scale(2) rotate(360deg);
z-index: 1;
}
.link-form-text-icon:not([disabled]):active .link-form-icon {
.link-form-text-icon:not(:disabled):active .link-form-icon {
transform: scale(4) rotate(360deg);
}