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

Browse Source
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 ## demo

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

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