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

81
scss/components/_dropdown.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Dropdown ([role="list"])
@ -21,42 +21,43 @@ li[role="list"] > ul {
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
border-radius: var(#{$✨}border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
background-color: var(#{$✨}dropdown-background-color);
box-shadow: var(#{$✨}card-box-shadow);
color: var(#{$✨}dropdown-color);
white-space: nowrap;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
var(#{$✨}form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
margin-top: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
margin-bottom: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
margin: calc(var(#{$✨}form-element-spacing-vertical) * -0.5)
calc(var(#{$✨}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
var(#{$✨}form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
color: var(#{$✨}dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover {
background-color: var(--dropdown-hover-background-color);
background-color: var(#{$✨}dropdown-hover-background-color);
}
}
}
@ -68,7 +69,7 @@ li[role="list"] > a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
height: calc(1rem * var(#{$✨}line-height, 1.5));
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
@ -90,30 +91,30 @@ details[role="list"] {
&:not([role]) {
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
);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
border-radius: var(#{$✨}border-radius);
background-color: var(#{$✨}form-element-background-color);
color: var(#{$✨}form-element-placeholder-color);
line-height: inherit;
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);
}
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
border-color: var(#{$✨}form-element-active-border-color);
background-color: var(#{$✨}form-element-active-background-color);
}
&: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);
}
}
}
@ -148,7 +149,7 @@ nav li[role="list"] a {
nav details[role="list"] summary + ul,
nav li[role="list"] > ul {
min-width: fit-content;
border-radius: var(--border-radius);
border-radius: var(#{$✨}border-radius);
li a {
border-radius: 0;
@ -160,25 +161,25 @@ nav details[role="list"] {
summary,
summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
}
&[open] summary {
border-radius: var(--border-radius);
border-radius: var(#{$✨}border-radius);
}
summary + ul {
margin-top: var(--outline-width);
margin-top: var(#{$✨}outline-width);
margin-inline-start: 0;
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
margin-bottom: calc(var(#{$✨}nav-link-spacing-vertical) * -1);
line-height: var(#{$✨}line-height);
+ ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
}
}
}
@ -195,13 +196,13 @@ li[role="list"] {
> ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
var(#{$✨}nav-element-spacing-horizontal) - var(#{$✨}nav-link-spacing-horizontal)
);
}
> a::after {
background-image: var(--icon-chevron);
background-image: var(#{$✨}icon-chevron);
}
}