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

style: range

Browse source
This commit is contained in:
Lucas Larroche 2023-03-18 08:22:05 +07:00
parent 7b84bad669
commit e8b71d0998
4 changed files with 8 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scss/forms/_basics.scss
View file

@ -237,7 +237,8 @@
[type="datetime-local"], [type="datetime-local"],
[type="month"], [type="month"],
[type="time"], [type="time"],
[type="week"] [type="week"],
[type="range"]
) { ) {
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {

10
scss/forms/_input-range.scss
View file

@ -2,7 +2,7 @@
@use "../settings" as *; @use "../settings" as *;
// Config // Config
$height-track: 0.25rem; $height-track: 0.375rem;
$height-thumb: 1.25rem; $height-thumb: 1.25rem;
$border-thumb: 2px; $border-thumb: 2px;
@ -72,15 +72,13 @@ $border-thumb: 2px;
@include slider-thumb; @include slider-thumb;
} }
&:hover, &:active,
&:focus { &:focus-within {
#{$✨}range-border-color: var(#{$✨}range-active-border-color); #{$✨}range-border-color: var(#{$✨}range-active-border-color);
#{$✨}range-thumb-color: var(#{$✨}range-thumb-hover-color); #{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
} }
&:active { &:active {
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
// Slider Thumb // Slider Thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
transform: scale(1.25); transform: scale(1.25);

3
scss/themes/default/_dark.scss
View file

@ -148,8 +148,7 @@
#{$✨}range-active-border-color: #{$slate-800}; #{$✨}range-active-border-color: #{$slate-800};
#{$✨}range-thumb-border-color: var(#{$✨}background-color); #{$✨}range-thumb-border-color: var(#{$✨}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary-background); #{$✨}range-thumb-color: var(#{$✨}secondary-background);
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-background-hover); #{$✨}range-thumb-active-color: var(#{$✨}primary-background);
#{$✨}range-thumb-active-color: var(#{$✨}primary);
} }
// Accordion (<details>) // Accordion (<details>)

3
scss/themes/default/_light.scss
View file

@ -148,8 +148,7 @@
#{$✨}range-active-border-color: #{$slate-200}; #{$✨}range-active-border-color: #{$slate-200};
#{$✨}range-thumb-border-color: var(#{$✨}background-color); #{$✨}range-thumb-border-color: var(#{$✨}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary-background); #{$✨}range-thumb-color: var(#{$✨}secondary-background);
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-background-hover); #{$✨}range-thumb-active-color: var(#{$✨}primary-background);
#{$✨}range-thumb-active-color: var(#{$✨}primary);
} }
// Accordion (<details>) // Accordion (<details>)