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

134
scss/forms/_basics.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Basics form elements
@ -17,7 +17,7 @@ select,
textarea {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(--line-height); // 1
line-height: var(#{$✨}line-height); // 1
font-family: inherit; // 1
letter-spacing: inherit; // 2
}
@ -113,15 +113,15 @@ textarea {
// Force height for alternatives input types
input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
(1rem * var(#{$✨}line-height)) + (var(#{$✨}form-element-spacing-vertical) * 2) +
(var(#{$✨}border-width) * 2)
);
}
// Fieldset
fieldset {
margin: 0;
margin-bottom: var(--spacing);
margin-bottom: var(#{$✨}spacing);
padding: 0;
border: 0;
}
@ -130,8 +130,8 @@ fieldset {
label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
margin-bottom: calc(var(#{$✨}spacing) * 0.25);
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
}
// Blocks, 100%
@ -146,28 +146,28 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
}
// Commons styles
input,
select,
textarea {
--background-color: var(--form-element-background-color);
--border-color: var(--form-element-border-color);
--color: var(--form-element-color);
--box-shadow: none;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
#{$✨}background-color: var(#{$✨}form-element-background-color);
#{$✨}border-color: var(#{$✨}form-element-border-color);
#{$✨}color: var(#{$✨}form-element-color);
#{$✨}box-shadow: none;
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(#{$✨}border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
background-color: var(#{$✨}background-color);
box-shadow: var(#{$✨}box-shadow);
color: var(#{$✨}color);
font-weight: var(#{$✨}font-weight);
@if settings.$enable-transitions {
transition: background-color var(--transition), border-color var(--transition),
color var(--transition), box-shadow var(--transition);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
}
@ -175,7 +175,7 @@ textarea {
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
:where(select, textarea) {
&:is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
#{$✨}background-color: var(#{$✨}form-element-active-background-color);
}
}
@ -183,7 +183,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
:where(select, textarea) {
&:is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
#{$✨}border-color: var(#{$✨}form-element-active-border-color);
}
}
@ -192,7 +192,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [typ
select,
textarea {
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
}
}
@ -202,9 +202,9 @@ select[disabled],
textarea[disabled],
:where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
#{$✨}border-color: var(#{$✨}form-element-disabled-border-color);
opacity: var(#{$✨}form-element-disabled-opacity);
pointer-events: none;
}
@ -212,16 +212,16 @@ textarea[disabled],
:where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
&[aria-invalid] {
@if settings.$enable-important {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@if $enable-important {
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(#{$✨}form-element-spacing-horizontal);
padding-inline-start: var(#{$✨}form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
} @else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$✨}form-element-spacing-horizontal);
padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
}
background-position: center right 0.75rem;
background-size: 1rem auto;
@ -229,38 +229,50 @@ textarea[disabled],
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
background-image: var(#{$✨}icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-invalid);
background-image: var(#{$✨}icon-invalid);
}
}
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
&:is(:active, :focus) {
@if settings.$enable-important {
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
@if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-valid-focus-color);
}
}
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
&:is(:active, :focus) {
@if settings.$enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
@if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color);
}
}
}
@ -282,7 +294,7 @@ input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
color: var(--form-element-placeholder-color);
color: var(#{$✨}form-element-placeholder-color);
opacity: 1;
}
@ -290,7 +302,7 @@ select:invalid {
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
margin-bottom: var(--spacing);
margin-bottom: var(#{$✨}spacing);
}
// Select
@ -302,11 +314,11 @@ select {
}
&:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron);
padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$✨}form-element-spacing-horizontal);
padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$✨}icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
@ -326,15 +338,15 @@ select {
+ small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
margin-bottom: var(--spacing);
color: var(--muted-color);
margin-top: calc(var(#{$✨}spacing) * -0.75);
margin-bottom: var(#{$✨}spacing);
color: var(#{$✨}muted-color);
}
}
// Styles for Input inside a label
label {
> :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
margin-top: calc(var(#{$✨}spacing) * 0.25);
}
}

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);
}
}

4
scss/forms/_input-color.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Input type color
*/
@ -19,7 +21,7 @@
// Swatch
@mixin color-swatch {
border: 0;
border-radius: calc(var(--border-radius) * 0.5);
border-radius: calc(var(#{$✨}border-radius) * 0.5);
}
&::-webkit-color-swatch {

22
scss/forms/_input-date.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Input type datetime
*/
@ -5,18 +7,18 @@
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
#{$✨}icon-position: 0.75rem;
#{$✨}icon-width: 1rem;
padding-right: calc(var(#{$✨}icon-width) + var(#{$✨}icon-position));
background-image: var(#{$✨}icon-date);
background-position: center right var(#{$✨}icon-position);
background-size: var(#{$✨}icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(--icon-time);
background-image: var(#{$✨}icon-time);
}
}
@ -27,9 +29,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
[type="time"],
[type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
width: var(#{$✨}icon-width);
margin-right: calc(var(#{$✨}icon-width) * -1);
margin-left: var(#{$✨}icon-position);
opacity: 0;
}
}

44
scss/forms/_input-file.scss
View file

@ -1,46 +1,46 @@
@use "../settings";
@use "../settings" as *;
/**
* Input type file
*/
[type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
#{$✨}color: var(#{$✨}muted-color);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
border: 0;
border-radius: 0;
background: none;
@mixin file-selector-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
#{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary);
#{$✨}color: var(#{$✨}secondary-inverse);
margin-right: calc(var(#{$✨}spacing) / 2);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
margin-inline-end: calc(var(#{$✨}spacing) / 2);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
calc(var(#{$✨}form-element-spacing-horizontal) * 0.5);
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(#{$✨}border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
background-color: var(#{$✨}background-color);
box-shadow: var(#{$✨}box-shadow);
color: var(#{$✨}color);
font-weight: var(#{$✨}font-weight);
font-size: 1rem;
line-height: var(--line-height);
line-height: var(#{$✨}line-height);
text-align: center;
cursor: pointer;
@if settings.$enable-transitions {
transition: background-color var(--transition), border-color var(--transition),
color var(--transition), box-shadow var(--transition);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
&:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
#{$✨}background-color: var(#{$✨}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover);
}
}

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

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Input type range
@ -22,11 +22,11 @@
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
border-radius: var(#{$✨}border-radius);
background-color: var(#{$✨}range-border-color);
@if settings.$enable-transitions {
transition: background-color var(--transition), box-shadow var(--transition);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
}
@ -48,13 +48,13 @@
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: $border-thumb solid var(#{$✨}range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
background-color: var(#{$✨}range-thumb-color);
cursor: pointer;
@if settings.$enable-transitions {
transition: background-color var(--transition), transform var(--transition);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
}
}
&::-webkit-slider-thumb {
@ -71,12 +71,12 @@
&:hover,
&:focus {
--range-border-color: var(--range-active-border-color);
--range-thumb-color: var(--range-thumb-hover-color);
#{$✨}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);
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
// Slider Thumb
&::-webkit-slider-thumb {

16
scss/forms/_input-search.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Input type search
@ -7,28 +7,28 @@
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
background-image: var(--icon-search);
background-image: var(#{$✨}icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
&[aria-invalid] {
@if settings.$enable-important {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
@if $enable-important {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem) !important;
} @else {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
}
background-position: center left 1.125rem, center right 0.75rem;
}
&[aria-invalid="false"] {
background-image: var(--icon-search), var(--icon-valid);
background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-search), var(--icon-invalid);
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
}
}
}