mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
adding variables and rem functions to slider css
This commit is contained in:
parent
cc0c7896ea
commit
1d334d2a76
@ -5,12 +5,15 @@
|
|||||||
--primary-background: ~colors.brandPrimary;
|
--primary-background: ~colors.brandPrimary;
|
||||||
--box-shaddow: ~boxes.bottomShaddow;
|
--box-shaddow: ~boxes.bottomShaddow;
|
||||||
--box-border: ~boxes.border.unchecked;
|
--box-border: ~boxes.border.unchecked;
|
||||||
|
--box-radius: ~boxes.borderRadius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input[type="range"] {
|
.input[type="range"] {
|
||||||
-webkit-appearance: none;
|
border: none;
|
||||||
margin: 10px 0;
|
box-shadow:none;
|
||||||
|
margin: remCalc(10 0);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
|
||||||
// Try and figure out why display none is being set in doc.css
|
// Try and figure out why display none is being set in doc.css
|
||||||
display: block;
|
display: block;
|
||||||
@ -23,22 +26,23 @@
|
|||||||
animate: 0.2s;
|
animate: 0.2s;
|
||||||
background: var(--primary-background);
|
background: var(--primary-background);
|
||||||
border: var(--box-border);
|
border: var(--box-border);
|
||||||
border-radius: 25px;
|
border-radius: renCalc(25);
|
||||||
box-shadow: var(--box-shaddow);
|
box-shadow: var(--box-shaddow);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 12.8px;
|
height: remCalc(6);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
&::-webkit-slider-thumb {
|
&::-webkit-slider-thumb {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: solid 1px #d8d8d8;
|
border: var(--box-border);
|
||||||
border-radius: 4px;
|
border-radius: var(--box-radius);
|
||||||
box-shadow: var(--box-shaddow);
|
box-shadow: var(--box-shaddow);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 24px;
|
height: remCalc(24);
|
||||||
margin-top: -3.6px;
|
position: relative;
|
||||||
width: 36px;
|
top: -10px;
|
||||||
|
width: remCalc(36);
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
&:focus::-webkit-slider-runnable-track {
|
&:focus::-webkit-slider-runnable-track {
|
||||||
@ -48,10 +52,10 @@
|
|||||||
animate: 0.2s;
|
animate: 0.2s;
|
||||||
background: var(--primary-background);
|
background: var(--primary-background);
|
||||||
border: var(--box-border);
|
border: var(--box-border);
|
||||||
border-radius: 25px;
|
border-radius: remCalc(25);
|
||||||
box-shadow: var(--box-shaddow);
|
box-shadow: var(--box-shaddow);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 12.8px;
|
height: remCalc(6);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
@ -60,39 +64,39 @@
|
|||||||
border: 0px solid #000000;
|
border: 0px solid #000000;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 20px;
|
height: remCalc(24);
|
||||||
width: 39px;
|
width: remCalc(39);
|
||||||
}
|
}
|
||||||
&::-ms-track {
|
&::-ms-track {
|
||||||
animate: 0.2s;
|
animate: 0.2s;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
borded: transparent;
|
borded: transparent;
|
||||||
border-width: 39px 0;
|
border-width: remCalc(39 0);
|
||||||
color: transparent;
|
color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 12.8px;
|
height: remCalc(6);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
&::-ms-fill-lower {
|
&::-ms-fill-lower {
|
||||||
background: var(--primary-background);
|
background: var(--primary-background);
|
||||||
border: var(--box-border);
|
border: var(--box-border);
|
||||||
border-radius: 50px;
|
border-radius: remCalc(50);
|
||||||
box-shadow: var(--box-shaddow);
|
box-shadow: var(--box-shaddow);
|
||||||
}
|
}
|
||||||
&::-ms-fill-upper {
|
&::-ms-fill-upper {
|
||||||
background: #e6e6e6;
|
background: #e6e6e6;
|
||||||
border: var(--box-border);
|
border: var(--box-border);
|
||||||
border-radius: 50px;
|
border-radius: remCalc(50);
|
||||||
box-shadow: var(--box-shaddow);
|
box-shadow: var(--box-shaddow);
|
||||||
}
|
}
|
||||||
&::-ms-thumb {
|
&::-ms-thumb {
|
||||||
background: #65001c;
|
background: #65001c;
|
||||||
border: 0px solid #000000;
|
border: var(--box-border);
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
box-shadow: var(--box-shaddow);
|
box-shadow: var(--box-shaddow);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 20px;
|
height: remCalc(20);
|
||||||
width: 39px;
|
width: remCalc(39);
|
||||||
}
|
}
|
||||||
&:focus::-ms-fill-lower {
|
&:focus::-ms-fill-lower {
|
||||||
background: var(--primary-background);
|
background: var(--primary-background);
|
||||||
|
Loading…
Reference in New Issue
Block a user