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

refactor: prefix css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 13:11:51 +07:00
parent cba8f385c2
commit c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
Download patch file Download diff file Expand all files Collapse all files

50
scss/forms/_checkbox-radio-switch.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Checkboxes, Radios and Switches
@ -16,7 +16,7 @@
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: 0.375em;
border-width: var(--border-width);
border-width: var(#{$✨}border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;
@ -28,9 +28,9 @@
&:checked,
&:checked:active,
&:checked:focus {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-checkbox);
#{$✨}background-color: var(#{$✨}primary);
#{$✨}border-color: var(#{$✨}primary);
background-image: var(#{$✨}icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
@ -47,9 +47,9 @@
// Checkboxes
[type="checkbox"] {
&:indeterminate {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-minus);
#{$✨}background-color: var(#{$✨}primary);
#{$✨}border-color: var(#{$✨}primary);
background-image: var(#{$✨}icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
@ -63,7 +63,7 @@
&:checked,
&:checked:active,
&:checked:focus {
--background-color: var(--primary-inverse);
#{$✨}background-color: var(#{$✨}primary-inverse);
border-width: 0.35em;
background-image: none;
}
@ -71,9 +71,9 @@
// Switchs
[type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
#{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color);
#{$✨}color: var(#{$✨}switch-color);
// Config
$switch-height: 1.25em;
@ -83,30 +83,30 @@
// Styles
width: $switch-width;
height: $switch-height;
border: var(--border-width) solid var(--border-color);
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: $switch-height;
background-color: var(--background-color);
background-color: var(#{$✨}background-color);
line-height: $switch-height;
&:focus {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
#{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color);
}
&:checked {
--background-color: var(--switch-checked-background-color);
--border-color: var(--switch-checked-background-color);
#{$✨}background-color: var(#{$✨}switch-checked-background-color);
#{$✨}border-color: var(#{$✨}switch-checked-background-color);
}
&:before {
display: block;
width: calc(#{$switch-height} - (var(--border-width) * 2));
width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--color);
background-color: var(#{$✨}color);
content: "";
@if settings.$enable-transitions {
@if $enable-transitions {
transition: margin $switch-transition;
}
}
@ -115,8 +115,8 @@
background-image: none;
&::before {
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
margin-left: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
}
}
}
@ -129,10 +129,10 @@
[type="checkbox"][role="switch"],
[type="checkbox"][role="switch"]:checked {
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
}
}