mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -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

25
scss/components/_group.scss
View file

@ -31,11 +31,11 @@
[role="group"] {
display: inline-flex;
position: relative;
margin-bottom: var(#{$✨}spacing);
border-radius: var(#{$✨}border-radius);
box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
margin-bottom: var(#{$css-var-prefix}spacing);
border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
transition: box-shadow var(#{$✨}transition);
transition: box-shadow var(#{$css-var-prefix}transition);
> *,
input:not([type="checkbox"], [type="radio"]),
@ -68,7 +68,7 @@
input:not([type="checkbox"], [type="radio"]),
select {
&:not(:first-child) {
margin-left: calc(var(#{$✨}border-width) * -1);
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
}
}
@ -83,7 +83,9 @@
@supports selector(:has(*)) {
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button);
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button
);
input:not([type="checkbox"], [type="radio"]),
select {
@ -93,16 +95,19 @@
// Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-input);
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-input
);
// Adapt box shadow for buttons
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
#{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
var(#{$✨}primary-hover-border);
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-hover-border);
}
}