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

refactor: modules and css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-23 10:47:50 +07:00
parent 2e4d6c66ec
commit ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,94 +1,98 @@
@use "sass:map";
@use "../settings" as *;
/**
* Input type range
*/
// Config
$height-track: 0.25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
[type="range"] {
// Config
$height-track: 0.25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// Slider Track
@mixin slider-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);
}
}
// Slider Thumb
@mixin slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
background: none;
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;
// Slider Track
@mixin slider-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);
}
@if $enable-transitions {
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
}
}
&::-webkit-slider-runnable-track {
@include slider-track;
}
@if map.get($modules, "forms/input-range") {
/**
* Input type range
*/
&::-moz-range-track {
@include slider-track;
}
&::-ms-track {
@include slider-track;
}
// Slider Thumb
@mixin slider-thumb {
[type="range"] {
// Styles
-webkit-appearance: none;
width: $height-thumb;
-moz-appearance: none;
appearance: none;
width: 100%;
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;
background: none;
@if $enable-transitions {
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
&::-webkit-slider-runnable-track {
@include slider-track;
}
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb {
@include slider-thumb;
}
&::-moz-range-track {
@include slider-track;
}
&::-ms-thumb {
@include slider-thumb;
}
&::-ms-track {
@include slider-track;
}
&:hover,
&:focus {
#{$✨}range-border-color: var(#{$✨}range-active-border-color);
#{$✨}range-thumb-color: var(#{$✨}range-thumb-hover-color);
}
&:active {
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
@include slider-thumb;
}
&::-moz-range-thumb {
transform: scale(1.25);
@include slider-thumb;
}
&::-ms-thumb {
transform: scale(1.25);
@include slider-thumb;
}
&:hover,
&:focus {
#{$✨}range-border-color: var(#{$✨}range-active-border-color);
#{$✨}range-thumb-color: var(#{$✨}range-thumb-hover-color);
}
&:active {
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
}
&::-moz-range-thumb {
transform: scale(1.25);
}
&::-ms-thumb {
transform: scale(1.25);
}
}
}
}