mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
refactoring slider component by creating mixin for base box properties - radius, border, shaddow
This commit is contained in:
parent
7ec68ebc98
commit
62c726fb24
@ -1,4 +1,4 @@
|
|||||||
# `<RangeSlider>`
|
# `<RangeSlider> `
|
||||||
|
|
||||||
## demo
|
## demo
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user