Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding variables and rem functions to slider css

Browse Source
This commit is contained in:
Alex Windett 2016-10-31 17:57:38 +00:00
parent cc0c7896ea
commit 1d334d2a76
1 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/components/range-slider/style.css
View File

@ -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);