open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style disabled checkboxes, and use currentColor for select text/arrows

Browse Source 
Select text color needs to be specified to override system color in Linux. Also got rid of he stupid dotted line around focused element text which still occurs in Linux FF.
This commit is contained in:
narcolepticinsomniac 2017-12-05 06:23:07 -05:00 committed by GitHub
parent 2b22494f3f
commit e61877b9f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
global.css
View File

@ -42,6 +42,19 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
pointer-events: none; pointer-events: none;
} }
input[type="checkbox"]:not(.slider):disabled {
background-color: transparent;
border-color: hsl(0, 0%, 50%);
}
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
fill: hsl(0, 0%, 50%);
}
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
color: hsl(0, 0%, 50%);
}
label { label {
transition: color .1s; transition: color .1s;
} }
@ -50,6 +63,7 @@ select {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
height: 22px; height: 22px;
color: currentColor;
background-color: transparent; background-color: transparent;
border: 1px solid hsl(0, 0%, 66%); border: 1px solid hsl(0, 0%, 66%);
padding: 0 20px 0 6px; padding: 0 20px 0 6px;
@ -72,13 +86,17 @@ select {
display: inline-flex; display: inline-flex;
height: 14px; height: 14px;
width: 14px; width: 14px;
fill: #000; fill: currentColor;
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
transition: fill .5s; transition: fill .5s;
} }
::-moz-focus-inner {
border: 0;
}
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {
.moz-appearance-bug .svg-icon.checked { .moz-appearance-bug .svg-icon.checked {
display: none !important; display: none !important;