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

refactoring slider component by creating mixin for base box properties - radius, border, shaddow

This commit is contained in:
Alex Windett 2016-11-01 11:09:11 +00:00
parent 7ec68ebc98
commit 62c726fb24
3 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/range-slider/readme.md
View File

@ -1,4 +1,4 @@
# `<RangeSlider>`
# `<RangeSlider> `
## demo

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

@ -1,3 +1,5 @@
@import '../../shared/mixins.css';
~colors: "../../shared/constants.js";
~boxes: "../../shared/constants.js";
@ -25,18 +27,15 @@
&::-webkit-slider-runnable-track {
animate: 0.2s;
background: var(--primary-background);
border: var(--box-border);
border-radius: renCalc(25);
box-shadow: var(--box-shaddow);
cursor: pointer;
height: remCalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25), var(--box-border), var(--box-shaddow);
}
&::-webkit-slider-thumb {
background: #ffffff;
border: var(--box-border);
border-radius: var(--box-radius);
box-shadow: var(--box-shaddow);
cursor: pointer;
display: inline-block;
height: remCalc(24);
@ -44,6 +43,8 @@
top: -10px;
width: remCalc(36);
-webkit-appearance: none;
@add-mixin create-base-box-properties var(--box-radius), var(--box-border), var(--box-shaddow);
}
&:focus::-webkit-slider-runnable-track {
background: var(--primary-background);
@ -51,21 +52,19 @@
&::-moz-range-track {
animate: 0.2s;
background: var(--primary-background);
border: var(--box-border);
border-radius: remCalc(25);
box-shadow: var(--box-shaddow);
cursor: pointer;
height: remCalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25), var(--box-border), var(--box-shaddow);
}
&::-moz-range-thumb {
background: #65001c;
box-shadow: var(--box-shaddow);
border: 0px solid #000000;
border-radius: 7px;
cursor: pointer;
height: remCalc(24);
width: remCalc(39);
@add-mixin create-base-box-properties 7px, 0px solid #000000, var(--box-shaddow);
}
&::-ms-track {
animate: 0.2s;
@ -79,24 +78,21 @@
}
&::-ms-fill-lower {
background: var(--primary-background);
border: var(--box-border);
border-radius: remCalc(50);
box-shadow: var(--box-shaddow);
@add-mixin create-base-box-properties remCalc(50), var(--box-border), var(--box-shaddow);
}
&::-ms-fill-upper {
background: #e6e6e6;
border: var(--box-border);
border-radius: remCalc(50);
box-shadow: var(--box-shaddow);
@add-mixin create-base-box-properties remCalc(50), var(--box-border), var(--box-shaddow);
}
&::-ms-thumb {
background: #65001c;
border: var(--box-border);
border-radius: 7px;
box-shadow: var(--box-shaddow);
cursor: pointer;
height: remCalc(20);
width: remCalc(39);
@add-mixin create-base-box-properties 7px, var(--box-border), var(--box-shaddow);
}
&:focus::-ms-fill-lower {
background: var(--primary-background);

8
ui/src/shared/mixins.css
View File

@ -1,3 +1,5 @@
~boxes: "./constants.js";
@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
position: relative;
@ -21,3 +23,9 @@
position: $position;
z-index: $amount;
}
@define-mixin create-base-box-properties $border-radius: ~boxes.borderRadius, $border: ~boxes.border.unchecked, $box-shadow: ~boxes.bottomShaddow {
border: $border;
border-radius: $border-radius;
box-shadow: $box-shadow;
}