refactor(slider): sass refactor
This commit is contained in:
perry-C
parent
fcd3a64c63
commit
e03291ba1f
|
|
@ -65,7 +65,9 @@
|
|||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
}
|
||||
.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {
|
||||
.o-button.is-disabled,
|
||||
.o-button.is-disabled:focus,
|
||||
.o-button.is-disabled:hover {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
|
|
@ -81,22 +83,23 @@
|
|||
background-color: var(--o-primary, #07c160);
|
||||
border-color: var(--o-primary, #07c160);
|
||||
}
|
||||
.o-button-primary:disabled, .o-button-primary:disabled:hover {
|
||||
background-color: var(--o-primary-fade-lot, );
|
||||
.o-button-primary:disabled,
|
||||
.o-button-primary:disabled:hover {
|
||||
background-color: var(--o-primary-fade-lot);
|
||||
}
|
||||
.o-button-primary.is-plain {
|
||||
color: var(--o-primary, #07c160);
|
||||
background-color: var(--o-primary-fade-lot, );
|
||||
border-color: var(--o-primary-fade-some, );
|
||||
background-color: var(--o-primary-fade-lot);
|
||||
border-color: var(--o-primary-fade-some);
|
||||
}
|
||||
.o-button-primary:hover {
|
||||
background-color: var(--o-primary-fade-little, );
|
||||
border-color: var(--o-primary-fade-little, );
|
||||
background-color: var(--o-primary-fade-little);
|
||||
border-color: var(--o-primary-fade-little);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-primary:active {
|
||||
background-color: var(--o-primary-active, );
|
||||
border-color: var(--o-primary-active, );
|
||||
background-color: var(--o-primary-active);
|
||||
border-color: var(--o-primary-active);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-success {
|
||||
|
|
@ -104,22 +107,23 @@
|
|||
background-color: var(--o-success, #07c160);
|
||||
border-color: var(--o-success, #07c160);
|
||||
}
|
||||
.o-button-success:disabled, .o-button-success:disabled:hover {
|
||||
background-color: var(--o-success-fade-lot, );
|
||||
.o-button-success:disabled,
|
||||
.o-button-success:disabled:hover {
|
||||
background-color: var(--o-success-fade-lot);
|
||||
}
|
||||
.o-button-success.is-plain {
|
||||
color: var(--o-success, #07c160);
|
||||
background-color: var(--o-success-fade-lot, );
|
||||
border-color: var(--o-success-fade-some, );
|
||||
background-color: var(--o-success-fade-lot);
|
||||
border-color: var(--o-success-fade-some);
|
||||
}
|
||||
.o-button-success:hover {
|
||||
background-color: var(--o-success-fade-little, );
|
||||
border-color: var(--o-success-fade-little, );
|
||||
background-color: var(--o-success-fade-little);
|
||||
border-color: var(--o-success-fade-little);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-success:active {
|
||||
background-color: var(--o-success-active, );
|
||||
border-color: var(--o-success-active, );
|
||||
background-color: var(--o-success-active);
|
||||
border-color: var(--o-success-active);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-warning {
|
||||
|
|
@ -127,22 +131,23 @@
|
|||
background-color: var(--o-warning, #f2711c);
|
||||
border-color: var(--o-warning, #f2711c);
|
||||
}
|
||||
.o-button-warning:disabled, .o-button-warning:disabled:hover {
|
||||
background-color: var(--o-warning-fade-lot, );
|
||||
.o-button-warning:disabled,
|
||||
.o-button-warning:disabled:hover {
|
||||
background-color: var(--o-warning-fade-lot);
|
||||
}
|
||||
.o-button-warning.is-plain {
|
||||
color: var(--o-warning, #f2711c);
|
||||
background-color: var(--o-warning-fade-lot, );
|
||||
border-color: var(--o-warning-fade-some, );
|
||||
background-color: var(--o-warning-fade-lot);
|
||||
border-color: var(--o-warning-fade-some);
|
||||
}
|
||||
.o-button-warning:hover {
|
||||
background-color: var(--o-warning-fade-little, );
|
||||
border-color: var(--o-warning-fade-little, );
|
||||
background-color: var(--o-warning-fade-little);
|
||||
border-color: var(--o-warning-fade-little);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-warning:active {
|
||||
background-color: var(--o-warning-active, );
|
||||
border-color: var(--o-warning-active, );
|
||||
background-color: var(--o-warning-active);
|
||||
border-color: var(--o-warning-active);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-danger {
|
||||
|
|
@ -150,22 +155,23 @@
|
|||
background-color: var(--o-danger, #fa5151);
|
||||
border-color: var(--o-danger, #fa5151);
|
||||
}
|
||||
.o-button-danger:disabled, .o-button-danger:disabled:hover {
|
||||
background-color: var(--o-danger-fade-lot, );
|
||||
.o-button-danger:disabled,
|
||||
.o-button-danger:disabled:hover {
|
||||
background-color: var(--o-danger-fade-lot);
|
||||
}
|
||||
.o-button-danger.is-plain {
|
||||
color: var(--o-danger, #fa5151);
|
||||
background-color: var(--o-danger-fade-lot, );
|
||||
border-color: var(--o-danger-fade-some, );
|
||||
background-color: var(--o-danger-fade-lot);
|
||||
border-color: var(--o-danger-fade-some);
|
||||
}
|
||||
.o-button-danger:hover {
|
||||
background-color: var(--o-danger-fade-little, );
|
||||
border-color: var(--o-danger-fade-little, );
|
||||
background-color: var(--o-danger-fade-little);
|
||||
border-color: var(--o-danger-fade-little);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-danger:active {
|
||||
background-color: var(--o-danger-active, );
|
||||
border-color: var(--o-danger-active, );
|
||||
background-color: var(--o-danger-active);
|
||||
border-color: var(--o-danger-active);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-info {
|
||||
|
|
@ -173,22 +179,23 @@
|
|||
background-color: var(--o-info, #42b8dd);
|
||||
border-color: var(--o-info, #42b8dd);
|
||||
}
|
||||
.o-button-info:disabled, .o-button-info:disabled:hover {
|
||||
background-color: var(--o-info-fade-lot, );
|
||||
.o-button-info:disabled,
|
||||
.o-button-info:disabled:hover {
|
||||
background-color: var(--o-info-fade-lot);
|
||||
}
|
||||
.o-button-info.is-plain {
|
||||
color: var(--o-info, #42b8dd);
|
||||
background-color: var(--o-info-fade-lot, );
|
||||
border-color: var(--o-info-fade-some, );
|
||||
background-color: var(--o-info-fade-lot);
|
||||
border-color: var(--o-info-fade-some);
|
||||
}
|
||||
.o-button-info:hover {
|
||||
background-color: var(--o-info-fade-little, );
|
||||
border-color: var(--o-info-fade-little, );
|
||||
background-color: var(--o-info-fade-little);
|
||||
border-color: var(--o-info-fade-little);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-info:active {
|
||||
background-color: var(--o-info-active, );
|
||||
border-color: var(--o-info-active, );
|
||||
background-color: var(--o-info-active);
|
||||
border-color: var(--o-info-active);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,14 @@
|
|||
<img src="//alloyteam.github.io/github.png" alt="" />
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
const sliders = document.querySelectorAll('o-slider')
|
||||
sliders.forEach((slider) => {
|
||||
slider.style.padding = '20px'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<div style="text-align: center">basic slider</div>
|
||||
<o-slider min="0" max="100" value="20" id="single-range-demo"></o-slider>
|
||||
<div style="text-align: center">reversed slider</div>
|
||||
|
|
@ -70,6 +78,24 @@
|
|||
shape="square"
|
||||
id="square-single-range-demo"
|
||||
></o-slider>
|
||||
<div style="text-align: center">square slider</div>
|
||||
<o-slider
|
||||
min="0"
|
||||
max="100"
|
||||
value="20"
|
||||
shape="square"
|
||||
size="large"
|
||||
id="square-single-range-demo"
|
||||
></o-slider>
|
||||
<div style="text-align: center">square slider</div>
|
||||
<o-slider
|
||||
min="0"
|
||||
max="100"
|
||||
value="20"
|
||||
shape="square"
|
||||
size="small"
|
||||
id="square-single-range-demo"
|
||||
></o-slider>
|
||||
<div style="text-align: center">disabled slider</div>
|
||||
<o-slider
|
||||
min="0"
|
||||
|
|
|
|||
|
|
@ -6,14 +6,26 @@
|
|||
.slider-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
}
|
||||
.slider-container .o-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slider-container .slider-track {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -28,334 +40,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
.slider-container .o-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.slider-container .o-slider::-ms-track {
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.slider-container .o-slider::-ms-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
appearance: none;
|
||||
}
|
||||
.slider-container .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.slider-container .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-square .slider-track {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.is-square .o-slider::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 0%;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-square .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-square .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-square .o-slider::-moz-range-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 0%;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-square .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-square .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-square .o-slider::-ms-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 0%;
|
||||
appearance: none;
|
||||
}
|
||||
.is-square .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-square .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-disabled .slider-track {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.is-disabled .o-slider::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-disabled .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-disabled .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
appearance: none;
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-large .slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.is-large .o-slider::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border: 4px solid #07c160;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -12.5px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border: 4px solid #07c160;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -12.5px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border: 4px solid #07c160;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -12.5px;
|
||||
appearance: none;
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
.slider-container.is-small {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.is-small .slider-track {
|
||||
height: 2px;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.is-small .o-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -366,7 +64,6 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-small .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
|
|
@ -374,12 +71,30 @@
|
|||
.is-small .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-small .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -390,7 +105,6 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-small .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
|
|
@ -398,12 +112,30 @@
|
|||
.is-small .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-small .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 2;
|
||||
margin-top: -7px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -414,7 +146,6 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
appearance: none;
|
||||
}
|
||||
.is-small .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
|
|
@ -422,5 +153,460 @@
|
|||
.is-small .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-small .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-small .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
.is-small.is-round .slider-track {
|
||||
height: 2px;
|
||||
}
|
||||
.is-small.is-square .slider-track {
|
||||
border-radius: 0;
|
||||
height: 2px;
|
||||
}
|
||||
.is-small.is-square .o-slider::-webkit-slider-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-small.is-square .o-slider::-moz-range-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-small.is-square .o-slider::-ms-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.is-small.is-progress .slider-track {
|
||||
height: 2px;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-webkit-slider-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-moz-range-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-moz-range-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-ms-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-small.is-progress .o-slider::-ms-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.slider-container.is-normal {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.is-normal .slider-track {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.is-normal .o-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
.is-normal .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-normal .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-normal .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
.is-normal .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-normal .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-normal .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
.is-normal .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-normal .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-normal .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.is-normal.is-round .slider-track {
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal.is-square .slider-track {
|
||||
border-radius: 0;
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal.is-square .o-slider::-webkit-slider-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-normal.is-square .o-slider::-moz-range-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-normal.is-square .o-slider::-ms-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.is-normal.is-progress .slider-track {
|
||||
height: 4px;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-webkit-slider-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-moz-range-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-moz-range-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-ms-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-normal.is-progress .o-slider::-ms-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.slider-container.is-large {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.is-large .slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.is-large .o-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -12.5px;
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -12.5px;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -12.5px;
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.is-large .o-slider::-ms-track {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.is-large.is-round .slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
.is-large.is-square .slider-track {
|
||||
border-radius: 0;
|
||||
height: 6px;
|
||||
}
|
||||
.is-large.is-square .o-slider::-webkit-slider-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-large.is-square .o-slider::-moz-range-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-large.is-square .o-slider::-ms-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.is-large.is-progress .slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-webkit-slider-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-moz-range-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-moz-range-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-ms-thumb {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
.is-large.is-progress .o-slider::-ms-thumb:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.is-disabled .o-slider {
|
||||
pointer-events: none;
|
||||
}
|
||||
.is-disabled .o-slider::-webkit-slider-thumb {
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
.is-disabled .o-slider {
|
||||
pointer-events: none;
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb {
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
.is-disabled .o-slider {
|
||||
pointer-events: none;
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb {
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AA4EA;EACE;EACA;;;AAKF;EACE;EACA;EACA;;;AAGF;EAnBE;EACA;EACA;EACA,QApEa;EAsFb;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;IACE;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA,QAxHW;;AA2Hb;EACE;EACA,QA7HW;;AAgIb;EACE;EACA,QAlIW;;AAqIb;EAtHA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EA6GE;;AA1GF;EACE;;AAGF;EACE,cClCe;;ADyIjB;EA1HA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiHE;;AA9GF;EACE;;AAGF;EACE,cClCe;;AD6IjB;EA9HA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAqHE;;AAlHF;EACE;;AAGF;EACE,cClCe;;;ADqJnB;EACE;;;AAIA;EA3IA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAoBA;EA8GE;;AA/HF;EACE;;AAGF;EACE,cClCe;;AD+JjB;EAhJA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAoBA;EAmHE;;AApIF;EACE;;AAGF;EACE,cClCe;;ADoKjB;EArJA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAoBA;EAwHE;;AAzIF;EACE;;AAGF;EACE,cClCe;;;AD4KnB;EACE;;;AAIA;EAlKA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAcA;EACA;EA0IE;;AAtJF;EACE;;AAGF;EACE,cClCe;;ADsLjB;EAvKA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAcA;EACA;EA+IE;;AA3JF;EACE;;AAGF;EACE,cClCe;;AD0LjB;EA3KA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAcA;EACA;EAmJE;;AA/JF;EACE;;AAGF;EACE,cClCe;;;ADiMnB;EACE;;;AAGA;EAtLA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAyBA;EACA,OA/CmB;EAgDnB,QAhDmB;EAiDnB;EAiJE;;AA1KF;EACE;;AAGF;EACE,cClCe;;AD0MjB;EA3LA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAyBA;EACA,OA/CmB;EAgDnB,QAhDmB;EAiDnB;EAsJE;;AA/KF;EACE;;AAGF;EACE,cClCe;;AD8MjB;EA/LA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAyBA;EACA,OA/CmB;EAgDnB,QAhDmB;EAiDnB;EA0JE;;AAnLF;EACE;;AAGF;EACE,cClCe;;;ADqNnB;EACE;EACA;;;AAGA;EA3MA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiCA,OAzDmB;EA0DnB,QA1DmB;EA2DnB;EA+JE;;AA/LF;EACE;;AAGF;EACE,cClCe;;AD+NjB;EAhNA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiCA,OAzDmB;EA0DnB,QA1DmB;EA2DnB;EAoKE;;AApMF;EACE;;AAGF;EACE,cClCe;;ADmOjB;EApNA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiCA,OAzDmB;EA0DnB,QA1DmB;EA2DnB;EAwKE;;AAxMF;EACE;;AAGF;EACE,cClCe","file":"index.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAmDA;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;IACE;;;;AAMN;EACE;;;AAGF;EACE;;;AAKE;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AA2DI;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AA2DI;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;;AA2EI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AA7Cd;EACE;;;AAGF;EACE;;;AAKE;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AA2DI;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AA2DI;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;;AA2EI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AA7Cd;EACE;;;AAGF;EACE;;;AAKE;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AA2DI;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AA2DI;EApFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCDU;EDEV;EACA;EACA;EACA;EA2EM;EACA;EACA;;AA3EN;EACE;;AAEF;EACE,cCnCe;;AD6GX;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;AAkEM;EArEN;EACA;EACA;EACA;;;AA2EI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AAWZ;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA","file":"index.css"}
|
||||
|
|
@ -1,77 +1,52 @@
|
|||
@use 'sass:math';
|
||||
@use "sass:map";
|
||||
|
||||
@import '../../common/theme.scss';
|
||||
|
||||
$thumb-height: 14px;
|
||||
$track-height: 4px;
|
||||
$shapes: 'round' 'square' 'progress';
|
||||
$sizes: 'small' 'normal' 'large';
|
||||
$browser-thumbs: '-webkit-slider-thumb' '-moz-range-thumb' '-ms-thumb';
|
||||
$browser-tracks: '-webkit-slider-runnable-track' '-moz-range-track' '-ms-track';
|
||||
|
||||
$thumb-small-height: 10px;
|
||||
$track-small-height: 2px;
|
||||
$thumb-sizes: (
|
||||
'small': 10px,
|
||||
'normal': 14px,
|
||||
'large': 25px,
|
||||
);
|
||||
|
||||
$thumb-large-height: 25px;
|
||||
$track-large-height: 6px;
|
||||
|
||||
// colours
|
||||
$upper-color: $o-surface;
|
||||
$lower-color: $o-primary;
|
||||
$thumb-color: $o-surface;
|
||||
$hover-thumb-color: $o-primary-fade-lot;
|
||||
$track-sizes: (
|
||||
'small': 2px,
|
||||
'normal': 4px,
|
||||
'large': 6px,
|
||||
);
|
||||
|
||||
@mixin thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: $thumb-height;
|
||||
height: $thumb-height;
|
||||
z-index: 2;
|
||||
margin-top: $thumb-height / -2;
|
||||
border: 2px solid $o-primary;
|
||||
border-radius: 50%;
|
||||
background-color: $thumb-color;
|
||||
background-color: $o-surface;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s,
|
||||
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 0 5px $hover-thumb-color;
|
||||
box-shadow: 0 0 0 5px $o-primary-fade-lot;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $o-primary-active;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumb-disabled {
|
||||
@include thumb;
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
@mixin thumb-square {
|
||||
@include thumb;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
@mixin thumb-large {
|
||||
@include thumb;
|
||||
border: 4px solid $o-primary;
|
||||
width: $thumb-large-height;
|
||||
height: $thumb-large-height;
|
||||
margin-top: math.div($thumb-large-height, -2);
|
||||
}
|
||||
|
||||
@mixin thumb-small {
|
||||
@include thumb;
|
||||
width: $thumb-small-height;
|
||||
height: $thumb-small-height;
|
||||
margin-top: math.div($thumb-small-height, -2);
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
height: $track-height;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
:host {
|
||||
|
|
@ -79,159 +54,111 @@ $hover-thumb-color: $o-primary-fade-lot;
|
|||
display: grid;
|
||||
}
|
||||
|
||||
//===============================base-slider=========================================
|
||||
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.slider-container .slider-track {
|
||||
@include track; // width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
outline: none;
|
||||
margin: auto;
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
@supports (-moz-appearance: none) {
|
||||
& {
|
||||
top: 4px;
|
||||
& .o-slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
// pointer-events: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .slider-track {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
outline: none;
|
||||
margin: auto;
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
@supports (-moz-appearance: none) {
|
||||
& {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
@each $size in $sizes {
|
||||
.slider-container.is-#{$size} {
|
||||
height: map.get($thumb-sizes, $size);
|
||||
}
|
||||
|
||||
//*--------------track-----------------
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
height: $track-height;
|
||||
.is-#{$size} .slider-track {
|
||||
height: map.get($track-sizes, $size);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
height: $track-height;
|
||||
.is-#{$size} .o-slider {
|
||||
@each $thumb in $browser-thumbs {
|
||||
&::#{$thumb} {
|
||||
@include thumb;
|
||||
width: map.get($thumb-sizes, $size);
|
||||
height: map.get($thumb-sizes, $size);
|
||||
margin-top: math.div(map.get($thumb-sizes, $size), -2);
|
||||
}
|
||||
@each $track in $browser-tracks {
|
||||
&::#{$track} {
|
||||
@include track;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
appearance: none;
|
||||
height: $track-height;
|
||||
}
|
||||
//*--------------thumb-----------------
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
@include thumb;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumb;
|
||||
appearance: none;
|
||||
@each $shape in $shapes {
|
||||
.is-#{$size}.is-#{$shape} {
|
||||
& .slider-track {
|
||||
@if $shape == 'square' {
|
||||
border-radius: 0;
|
||||
}
|
||||
height: map.get($track-sizes, $size);
|
||||
}
|
||||
& .o-slider {
|
||||
@each $thumb in $browser-thumbs {
|
||||
&::#{$thumb} {
|
||||
@if $shape == 'square' {
|
||||
border-radius: 0;
|
||||
}
|
||||
@if $shape == 'progress' {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
&:active {
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//===============================square-slider=========================================
|
||||
|
||||
.is-square .slider-track {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.is-square .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-square;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-square;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include thumb-square;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
//===============================disabled-slider=========================================
|
||||
|
||||
.is-disabled .slider-track {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.is-disabled .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-disabled;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-disabled;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumb-disabled;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
//===============================large-slider=========================================
|
||||
.is-large .slider-track {
|
||||
height: 6px;
|
||||
}
|
||||
.is-large .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-large;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-large;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumb-large;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
//===============================small-slider=========================================
|
||||
.is-small .slider-track {
|
||||
height: 2px;
|
||||
border-radius: 0%;
|
||||
}
|
||||
.is-small .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-small;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-small;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumb-small;
|
||||
appearance: none;
|
||||
.is-disabled {
|
||||
@each $thumb in $browser-thumbs {
|
||||
& .o-slider {
|
||||
pointer-events: none;
|
||||
}
|
||||
& .o-slider::#{$thumb} {
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue