stylus/global.css

113 lines
2.1 KiB
CSS
Raw Normal View History

.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 {
2017-12-05 12:50:49 +00:00
border: 0;
}
2017-12-05 18:01:10 +00:00
svg {
transform: scale(1); /* de-blur */
}
}