mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -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

3
css/pico.classless.css
View file

@ -1447,9 +1447,6 @@ label > input, label > select, label > textarea {
-ms-transition: background-color var(--transition), box-shadow var(--transition); -ms-transition: background-color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), box-shadow var(--transition);
} }
[type=range]::-ms-fill-lower {
background-color: var(--border-radius);
}
[type=range]::-webkit-slider-thumb { [type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

3
css/pico.css
View file

@ -1624,9 +1624,6 @@ label > input, label > select, label > textarea {
-ms-transition: background-color var(--transition), box-shadow var(--transition); -ms-transition: background-color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), box-shadow var(--transition);
} }
[type=range]::-ms-fill-lower {
background-color: var(--border-radius);
}
[type=range]::-webkit-slider-thumb { [type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;

3
css/pico.fluid.classless.css
View file

@ -1417,9 +1417,6 @@ label > input, label > select, label > textarea {
-ms-transition: background-color var(--transition), box-shadow var(--transition); -ms-transition: background-color var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), box-shadow var(--transition);
} }
[type=range]::-ms-fill-lower {
background-color: var(--border-radius);
}
[type=range]::-webkit-slider-thumb { [type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.25rem; width: 1.25rem;

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

@ -133,7 +133,7 @@
background: transparent; background: transparent;
// Slider Track // Slider Track
&::-webkit-slider-runnable-track { @mixin slider-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -146,38 +146,20 @@
} }
} }
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track { &::-moz-range-track {
width: 100%; @include slider-track;
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-track { &::-ms-track {
width: 100%; @include slider-track;
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);
} }
// Slider Thumb // Slider Thumb
&::-webkit-slider-thumb { @mixin slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
@ -193,39 +175,16 @@
transform var(--transition); transform var(--transition);
} }
} }
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb { &::-moz-range-thumb {
-webkit-appearance: none; @include slider-thumb;
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);
}
} }
&::-ms-thumb { &::-ms-thumb {
-webkit-appearance: none; @include slider-thumb;
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);
}
} }
&:hover, &:hover,