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

further refactoring of styles for range slider

Browse Source
This commit is contained in:
Alex Windett 2016-11-01 12:20:49 +00:00
parent fa841e0cee
commit 5b51ad01a0
1 changed files with 78 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,49 @@
--box-radius: ~boxes.borderRadius; --box-radius: ~boxes.borderRadius;
} }
/*
MIXINS - Defining Mixins for slider
*/
@define-mixin range-track {
animate: 0.2s;
background: var(--primary-background);
cursor: pointer;
height: remCalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25)
}
@define-mixin range-thumb {
background: #ffffff;
cursor: pointer;
height: remCalc(24);
position: relative;
top: -10px;
width: remCalc(36);
-webkit-appearance: none;
@add-mixin create-base-box-properties;
}
@define-mixin range-lower {
background: var(--primary-background);
@add-mixin create-base-box-properties remCalc(50);
}
@define-mixin range-upper {
background: var(--primary-background);
@add-mixin create-base-box-properties remCalc(50);
}
/*
SELECTORS - Styleing variou psuedo selectos
TODO: Complied incorrectly when selectors are in a comma seperated list
*/
.input[type="range"] { .input[type="range"] {
border: none; border: none;
box-shadow:none; box-shadow:none;
@ -24,79 +67,56 @@
&:focus { &:focus {
outline: none; outline: none;
} }
&::-moz-range-track {
@add-mixin range-track;
}
&::-ms-track {
@add-mixin range-track;
}
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
animate: 0.2s; @add-mixin range-track;
background: var(--primary-background);
cursor: pointer;
height: remCalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25);
} }
&::-moz-range-thumb {
@add-mixin range-thumb;
}
&::-ms-thumb {
@add-mixin range-thumb;
}
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
background: #ffffff; @add-mixin range-thumb;
cursor: pointer;
height: remCalc(24);
position: relative;
top: -10px;
width: remCalc(36);
-webkit-appearance: none;
@add-mixin create-base-box-properties;
} }
&:focus::-webkit-slider-runnable-track { &:focus::-webkit-slider-runnable-track {
background: var(--primary-background); background: var(--primary-background);
} }
&::-moz-range-track {
animate: 0.2s;
background: var(--primary-background);
cursor: pointer;
height: remCalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25); &::-moz-range-progress {
@add-mixin range-lower
} }
&::-moz-range-thumb {
background: #65001c;
cursor: pointer;
height: remCalc(24);
width: remCalc(39);
@add-mixin create-base-box-properties 7px, 0px solid #000000;
}
&::-ms-track {
animate: 0.2s;
background: transparent;
borded: transparent;
border-width: remCalc(39 0);
color: transparent;
cursor: pointer;
height: remCalc(6);
width: 100%;
}
&::-ms-fill-lower { &::-ms-fill-lower {
background: var(--primary-background); @add-mixin range-lower
@add-mixin create-base-box-properties remCalc(50);
} }
&::-ms-fill-upper {
background: #e6e6e6;
@add-mixin create-base-box-properties remCalc(50);
}
&::-ms-thumb {
background: #65001c;
cursor: pointer;
height: remCalc(20);
width: remCalc(39);
@add-mixin create-base-box-properties 7px;
}
&:focus::-ms-fill-lower { &:focus::-ms-fill-lower {
background: var(--primary-background); @add-mixin range-lower
} }
&::-moz-range-track {
@add-mixin range-upper;
}
&::-ms-fill-upper {
@add-mixin range-upper;
}
&:focus::-ms-fill-upper { &:focus::-ms-fill-upper {
background: #e6e6e6; @add-mixin range-upper;
} }
} }