Solving requested changes by rodrigok and karlprieb at PR #7517
parent
a95087b7fa
commit
5ae0f43f95
@ -1,112 +0,0 @@ |
||||
$shade-10: #04436a !default; |
||||
$shade-1: #d7dcdf !default; |
||||
$shade-0: #ffffff !default; |
||||
$teal: #1abc9c !default; |
||||
|
||||
* { |
||||
&, |
||||
&::before, |
||||
&::after { |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
|
||||
$range-width: 100% !default; |
||||
|
||||
.range-slider { |
||||
margin: 0 0 0 0%; |
||||
width: $range-width; |
||||
} |
||||
|
||||
$range-handle-color: $shade-10 !default; |
||||
$range-handle-color-hover: $teal !default; |
||||
$range-handle-size: 20px !default; |
||||
|
||||
$range-track-color: $shade-1 !default; |
||||
$range-track-height: 10px !default; |
||||
|
||||
$range-label-color: $shade-10 !default; |
||||
$range-label-width: 60px !default; |
||||
|
||||
.range-slider__range { |
||||
-webkit-appearance: none; |
||||
width: calc(100% - (#{$range-label-width + 13px})); |
||||
height: $range-track-height; |
||||
border-radius: 5px; |
||||
background: $range-track-color; |
||||
outline: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
|
||||
// Range Handle |
||||
&::-webkit-slider-thumb { |
||||
appearance: none; |
||||
width: $range-handle-size; |
||||
height: $range-handle-size; |
||||
border-radius: 50%; |
||||
background: $range-handle-color; |
||||
cursor: pointer; |
||||
transition: background 0.15s ease-in-out; |
||||
|
||||
&:hover { |
||||
background: $range-handle-color-hover; |
||||
} |
||||
} |
||||
|
||||
&:active::-webkit-slider-thumb { |
||||
background: $range-handle-color-hover; |
||||
} |
||||
|
||||
&::-moz-range-thumb { |
||||
width: $range-handle-size; |
||||
height: $range-handle-size; |
||||
border: 0; |
||||
border-radius: 50%; |
||||
background: $range-handle-color; |
||||
cursor: pointer; |
||||
transition: background 0.15s ease-in-out; |
||||
|
||||
&:hover { |
||||
background: $range-handle-color-hover; |
||||
} |
||||
} |
||||
|
||||
&:active::-moz-range-thumb { |
||||
background: $range-handle-color-hover; |
||||
} |
||||
} |
||||
|
||||
.range-slider__value { |
||||
display: inline-block; |
||||
position: relative; |
||||
width: $range-label-width; |
||||
color: $shade-0; |
||||
line-height: 20px; |
||||
text-align: center; |
||||
border-radius: 3px; |
||||
background: $range-label-color; |
||||
padding: 5px 10px; |
||||
margin-left: 8px; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
top: 8px; |
||||
left: -7px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 7px solid transparent; |
||||
border-right: 7px solid $range-label-color; |
||||
border-bottom: 7px solid transparent; |
||||
content: ''; |
||||
} |
||||
} |
||||
|
||||
::-moz-range-track { |
||||
background: $range-track-color; |
||||
border: 0; |
||||
} |
||||
|
||||
input::-moz-focus-inner, |
||||
input::-moz-focus-outer { |
||||
border: 0; |
||||
} |
@ -0,0 +1,72 @@ |
||||
*, |
||||
*::before, |
||||
*::after { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.range-slider { |
||||
margin: 0 0 0 0%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.range-slider__range { |
||||
-webkit-appearance: none; |
||||
width: calc(100% - (73px)); |
||||
height: 10px; |
||||
border-radius: 5px; |
||||
outline: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.range-slider__range::-webkit-slider-thumb { |
||||
-webkit-appearance: none; |
||||
width: 20px; |
||||
height: 20px; |
||||
border-radius: 50%; |
||||
cursor: pointer; |
||||
-webkit-transition: background 0.15s ease-in-out; |
||||
transition: background 0.15s ease-in-out; |
||||
} |
||||
|
||||
.range-slider__range::-moz-range-thumb { |
||||
width: 20px; |
||||
height: 20px; |
||||
border: 0; |
||||
border-radius: 50%; |
||||
cursor: pointer; |
||||
-webkit-transition: background 0.15s ease-in-out; |
||||
transition: background 0.15s ease-in-out; |
||||
} |
||||
|
||||
.range-slider__value { |
||||
display: inline-block; |
||||
position: relative; |
||||
width: 60px; |
||||
line-height: 20px; |
||||
text-align: center; |
||||
border-radius: 3px; |
||||
padding: 5px 10px; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.range-slider__value::after { |
||||
position: absolute; |
||||
top: 8px; |
||||
left: -7px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 7px solid; |
||||
border-right: 7px solid; |
||||
border-bottom: 7px solid; |
||||
content: ''; |
||||
} |
||||
|
||||
::-moz-range-track { |
||||
border: 0; |
||||
} |
||||
|
||||
input::-moz-focus-inner, |
||||
input::-moz-focus-outer { |
||||
border: 0; |
||||
} |
Loading…
Reference in new issue