mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
69 lines
1.4 KiB
SCSS
69 lines
1.4 KiB
SCSS
|
|
/**
|
|
* Range
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
input[type="range"] {
|
|
display: inline-block;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
width: auto;
|
|
height: $range-track-height;
|
|
outline: none;
|
|
border-radius: $range-track-height;
|
|
background-color: $range-track-color;
|
|
-webkit-appearance: none !important;
|
|
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
color-stop(0.0, blue),
|
|
color-stop(0.0, $range-track-color)
|
|
);
|
|
|
|
&::-webkit-slider-thumb {
|
|
position: relative;
|
|
width: $range-slider-width;
|
|
height: $range-slider-height;
|
|
border-radius: $range-slider-border-radius;
|
|
background-color: $toggle-handle-off-bg-color;
|
|
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
|
|
cursor: pointer;
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
&::-webkit-slider-thumb:after {
|
|
/* create a larger (but hidden) hit area */
|
|
position: absolute;
|
|
top: -15px;
|
|
left: -15px;
|
|
padding: 25px;
|
|
content: ' ';
|
|
}
|
|
|
|
}
|
|
|
|
.range {
|
|
@include display-flex();
|
|
@include align-items(center);
|
|
padding: 4px;
|
|
max-width: $range-max-width;
|
|
}
|
|
|
|
.range .icon {
|
|
@include flex(0, 1, $range-icon-size);
|
|
font-size: $range-icon-size;
|
|
min-width: $range-icon-size;
|
|
text-align: center;
|
|
}
|
|
|
|
.range input {
|
|
@include flex(0, 1, $range-max-width - ($range-icon-size * 2));
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
width: 100%;
|
|
max-width: $range-max-width;
|
|
}
|