mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 19:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve scss: [type=range]

Browse source
This commit is contained in:
Lucas Larroche 2021-10-23 16:51:44 +07:00
parent 10ae20608a
commit 3c58a9c44d
7 changed files with 17 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

69
scss/content/_form-alt-input-types.scss
View file

@ -10,7 +10,7 @@
@mixin color-wrapper {
padding: 0;
}
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
@ -133,7 +133,7 @@
background: transparent;
// Slider Track
&::-webkit-slider-runnable-track {
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(--border-radius);
@ -146,38 +146,20 @@
}
}
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
width: 100%;
height:$height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
@if $enable-transitions {
transition:
background-color var(--transition),
box-shadow var(--transition);
}
@include slider-track;
}
&::-ms-track {
width: 100%;
height: $height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
@if $enable-transitions {
transition:
background-color var(--transition),
box-shadow var(--transition);
}
}
&::-ms-fill-lower {
background-color: var(--border-radius);
@include slider-track;
}
// Slider Thumb
&::-webkit-slider-thumb {
@mixin slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
@ -193,39 +175,16 @@
transform var(--transition);
}
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
transform var(--transition);
}
@include slider-thumb;
}
&::-ms-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
transform var(--transition);
}
@include slider-thumb;
}
&:hover,