113 lines
2.1 KiB
CSS
113 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;
|
|
}
|
|
|
|
@supports (-moz-appearance: none) {
|
|
.moz-appearance-bug .svg-icon.checked {
|
|
display: none !important;
|
|
}
|
|
|
|
.moz-appearance-bug input[type="checkbox"] {
|
|
-moz-appearance: checkbox !important;
|
|
}
|
|
|
|
::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
svg {
|
|
transform: scale(1); /* de-blur */
|
|
}
|
|
}
|