e61877b9f9
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.
114 lines
2.1 KiB
CSS
114 lines
2.1 KiB
CSS
.svg-icon.checked {
|
|
position: absolute;
|
|
height: 8px;
|
|
width: 8px;
|
|
display: none;
|
|
fill: #000;
|
|
margin: 2px 0 0 2px;
|
|
}
|
|
|
|
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
|
display: inline-flex;
|
|
transition: fill .1s;
|
|
}
|
|
|
|
input[type="checkbox"]:not(.slider) {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
pointer-events: none;
|
|
border: 1px solid hsl(0, 0%, 46%);
|
|
height: 12px;
|
|
width: 12px;
|
|
display: inline-flex;
|
|
border-radius: 2px;
|
|
background-color: hsla(0, 0%, 0%, .1);
|
|
outline: none;
|
|
margin: 0;
|
|
transition: background-color .1s, border-color .1s;
|
|
}
|
|
|
|
input[type="checkbox"]:not(.slider):hover {
|
|
border-color: hsl(0, 0%, 32%);
|
|
background-color: hsl(0, 0%, 82%);
|
|
}
|
|
|
|
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
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 {
|
|
transition: color .1s;
|
|
}
|
|
|
|
select {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
height: 22px;
|
|
color: currentColor;
|
|
background-color: transparent;
|
|
border: 1px solid hsl(0, 0%, 66%);
|
|
padding: 0 20px 0 6px;
|
|
transition: color .5s;
|
|
}
|
|
|
|
.firefox select {
|
|
padding: 0 20px 0 2px;
|
|
}
|
|
|
|
.select-resizer {
|
|
display: inline-flex!important;
|
|
cursor: default;
|
|
position: relative;
|
|
}
|
|
|
|
.svg-icon.select-arrow {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
display: inline-flex;
|
|
height: 14px;
|
|
width: 14px;
|
|
fill: currentColor;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
transition: fill .5s;
|
|
}
|
|
|
|
::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
@supports (-moz-appearance: none) {
|
|
.moz-appearance-bug .svg-icon.checked {
|
|
display: none !important;
|
|
}
|
|
|
|
.moz-appearance-bug input[type="checkbox"] {
|
|
-moz-appearance: checkbox !important;
|
|
}
|
|
|
|
.moz-appearance-bug button {
|
|
padding-left: .75ex;
|
|
padding-right: .75ex;
|
|
}
|
|
}
|