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

refactor: update $css-var-prefix name

Browse source
This commit is contained in:
Lucas Larroche 2023-12-28 13:21:52 +07:00
parent 2c97dc3ae5
commit 3c96e6043b
41 changed files with 866 additions and 759 deletions
Download patch file Download diff file Expand all files Collapse all files

173
scss/forms/_basics.scss
View file

@ -21,7 +21,7 @@
textarea {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(#{$✨}line-height); // 1
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: inherit; // 1
letter-spacing: inherit; // 2
}
@ -117,16 +117,16 @@
// 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(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
}
// Fieldset
fieldset {
margin: 0;
margin-bottom: var(#{$✨}spacing);
margin-bottom: var(#{$css-var-prefix}spacing);
padding: 0;
border: 0;
}
@ -135,12 +135,12 @@
label,
fieldset legend {
display: block;
margin-bottom: calc(var(#{$✨}spacing) * 0.375);
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
}
fieldset legend {
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
// Blocks, 100%
@ -156,31 +156,32 @@
select,
textarea {
appearance: none;
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}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);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
#{$css-var-prefix}box-shadow: none;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}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(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
@if $enable-transitions {
transition:
background-color var(#{$✨}transition),
border-color var(#{$✨}transition),
color var(#{$✨}transition),
box-shadow var(#{$✨}transition);
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
}
@ -195,7 +196,9 @@
),
:where(select, textarea) {
&:is(:active, :focus) {
#{$✨}background-color: var(#{$✨}form-element-active-background-color);
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-active-background-color
);
}
}
@ -203,7 +206,7 @@
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);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
}
}
@ -218,7 +221,11 @@
),
:where(select, textarea) {
&:focus {
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
}
@ -229,9 +236,11 @@
label[aria-disabled="true"],
: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);
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-disabled-background-color
);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-disabled-border-color);
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
pointer-events: none;
}
@ -253,15 +262,19 @@
) {
&[aria-invalid] {
@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;
padding-right: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(#{$css-var-prefix}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(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
}
background-position: center right 0.75rem;
background-size: 1rem auto;
@ -269,65 +282,73 @@
}
&[aria-invalid="false"]:not(select) {
background-image: var(#{$✨}icon-valid);
background-image: var(#{$css-var-prefix}icon-valid);
}
&[aria-invalid="true"]:not(select) {
background-image: var(#{$✨}icon-invalid);
background-image: var(#{$css-var-prefix}icon-invalid);
}
}
&[aria-invalid="false"] {
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
&:is(:active, :focus) {
@if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color) !important;
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color) !important;
}
} @else {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color);
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color);
}
}
}
}
&[aria-invalid="true"] {
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
&:is(:active, :focus) {
@if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important;
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
}
} @else {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color);
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color);
}
}
}
@ -350,7 +371,7 @@
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
color: var(#{$✨}form-element-placeholder-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
@ -358,7 +379,7 @@
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
margin-bottom: var(#{$✨}spacing);
margin-bottom: var(#{$css-var-prefix}spacing);
}
// Select
@ -370,11 +391,11 @@
}
&: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(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
@ -383,7 +404,7 @@
&[multiple] {
option {
&:checked {
background: var(#{$✨}form-element-selected-background-color);
background: var(#{$css-var-prefix}form-element-selected-background-color);
}
}
}
@ -404,13 +425,13 @@
&[aria-invalid] {
@if $enable-important {
#{$✨}icon-height: calc(
(1rem * var(#{$✨}line-height)) +
(var(#{$✨}form-element-spacing-vertical) * 2) +
(var(#{$✨}border-width) * 2)
#{$css-var-prefix}icon-height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
background-position: top right 0.75rem !important;
background-size: 1rem var(#{$✨}icon-height) !important;
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
}
}
}
@ -422,18 +443,18 @@
+ small {
display: block;
width: 100%;
margin-top: calc(var(#{$✨}spacing) * -0.75);
margin-bottom: var(#{$✨}spacing);
color: var(#{$✨}muted-color);
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$css-var-prefix}spacing);
color: var(#{$css-var-prefix}muted-color);
}
&[aria-invalid="false"] {
+ small {
color: var(#{$✨}ins-color);
color: var(#{$css-var-prefix}ins-color);
}
}
&[aria-invalid="true"] {
+ small {
color: var(#{$✨}del-color);
color: var(#{$css-var-prefix}del-color);
}
}
}
@ -441,7 +462,7 @@
// Styles for Input inside a label
label {
> :where(input, select, textarea) {
margin-top: calc(var(#{$✨}spacing) * 0.25);
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
}

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

@ -24,7 +24,7 @@
height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em;
border-width: var(#{$✨}border-width);
border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle;
cursor: pointer;
@ -35,9 +35,9 @@
&:checked,
&:checked:active,
&:checked:focus {
#{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border);
background-image: var(#{$✨}icon-checkbox);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
@ -57,9 +57,9 @@
// Checkboxes
[type="checkbox"] {
&:indeterminate {
#{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border);
background-image: var(#{$✨}icon-minus);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
@ -73,7 +73,7 @@
&:checked,
&:checked:active,
&:checked:focus {
#{$✨}background-color: var(#{$✨}primary-inverse);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
border-width: 0.35em;
background-image: none;
}
@ -81,8 +81,8 @@
// Switchs
[type="checkbox"][role="switch"] {
#{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}color: var(#{$✨}switch-color);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
// Config
$switch-height: 1.25em;
@ -92,21 +92,21 @@
// Styles
width: $switch-width;
height: $switch-height;
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: $switch-height;
background-color: var(#{$✨}background-color);
background-color: var(#{$css-var-prefix}background-color);
line-height: $switch-height;
&:not([aria-invalid]) {
#{$✨}border-color: var(#{$✨}switch-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
}
&:before {
display: block;
width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
width: calc(#{$switch-height} - (var(#{$css-var-prefix}border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(#{$✨}color);
background-color: var(#{$css-var-prefix}color);
content: "";
@if $enable-transitions {
@ -115,22 +115,22 @@
}
&:focus {
#{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
}
&:checked {
#{$✨}background-color: var(#{$✨}switch-checked-background-color);
#{$✨}border-color: var(#{$✨}switch-checked-background-color);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
background-image: none;
&::before {
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$css-var-prefix}border-width));
}
}
&[disabled] {
#{$✨}background-color: var(#{$✨}border-color);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
}
}
@ -141,14 +141,16 @@
&:checked,
&:checked:active,
&:checked:focus {
#{$✨}background-color: var(#{$✨}form-element-valid-border-color);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$✨}background-color: var(#{$✨}form-element-invalid-border-color);
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
}
}
}
@ -160,14 +162,14 @@
&:checked,
&:checked:active,
&:checked:focus {
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
}
}

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

@ -9,7 +9,7 @@
// Swatch
@mixin color-swatch {
border: 0;
border-radius: calc(var(#{$✨}border-radius) * 0.5);
border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
}
@if map.get($modules, "forms/input-color") {

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

@ -9,18 +9,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;
#{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(#{$✨}icon-time);
background-image: var(#{$css-var-prefix}icon-time);
}
}
@ -31,9 +31,9 @@
[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(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0;
}
}
@ -46,7 +46,7 @@
[type="month"],
[type="time"],
[type="week"] {
padding-right: var(#{$✨}form-element-spacing-horizontal) !important;
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important;
}
}

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

@ -9,32 +9,32 @@
// 1. Hack to display the outline on the focused file selector button
// with the forced overflow hidden on the input[type="file"] element.
[type="file"] {
#{$✨}color: var(#{$✨}muted-color);
margin-left: calc(var(#{$✨}outline-width) * -1); // 1
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$✨}outline-width); // 1
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$css-var-prefix}outline-width); // 1
border: 0;
border-radius: 0;
background: none;
&::file-selector-button {
margin-right: calc(var(#{$✨}spacing) / 2);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
var(#{$✨}form-element-spacing-horizontal);
margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
}
&:is(:hover, :active, :focus) {
&::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-hover-background);
#{$✨}border-color: var(#{$✨}secondary-hover-border);
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
}
}
&:focus {
&::file-selector-button {
#{$✨}box-shadow:
var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
}

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

@ -10,13 +10,13 @@ $border-thumb: 2px;
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(#{$✨}border-radius);
background-color: var(#{$✨}range-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}range-border-color);
@if $enable-transitions {
transition:
background-color var(#{$✨}transition),
box-shadow var(#{$✨}transition);
background-color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
}
@ -26,15 +26,15 @@ $border-thumb: 2px;
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(#{$css-var-prefix}range-thumb-border-color);
border-radius: 50%;
background-color: var(#{$✨}range-thumb-color);
background-color: var(#{$css-var-prefix}range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(#{$✨}transition),
transform var(#{$✨}transition);
background-color var(#{$css-var-prefix}transition),
transform var(#{$css-var-prefix}transition);
}
}
@ -78,8 +78,8 @@ $border-thumb: 2px;
&:active,
&:focus-within {
#{$✨}range-border-color: var(#{$✨}range-active-border-color);
#{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
#{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
}
&:active {

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

@ -9,8 +9,8 @@
// :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);
background-image: var(#{$✨}icon-search);
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
background-image: var(#{$css-var-prefix}icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
@ -18,10 +18,12 @@
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(
var(#{$✨}form-element-spacing-horizontal) + 1.75rem
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
) !important;
} @else {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
);
}
background-position:
center left 1.125rem,
@ -29,11 +31,11 @@
}
&[aria-invalid="false"] {
background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
}
&[aria-invalid="true"] {
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
}
}
}