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

refactor: modules and css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-23 10:47:50 +07:00
parent 2e4d6c66ec
commit ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
Download patch file Download diff file Expand all files Collapse all files

179
scss/components/_accordion.scss
View file

@ -1,117 +1,120 @@
@use "sass:map";
@use "../settings" as *;
/**
* Accordion (<details>)
*/
@if map.get($modules, "components/accordion") {
/**
* Accordion (<details>)
*/
details {
display: block;
margin-bottom: var(#{$✨}spacing);
padding-bottom: var(#{$✨}spacing);
border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
details {
display: block;
margin-bottom: var(#{$✨}spacing);
padding-bottom: var(#{$✨}spacing);
border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role]) {
color: var(#{$✨}accordion-close-summary-color);
}
@if $enable-transitions {
transition: color var(#{$✨}transition);
}
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
summary {
line-height: 1rem;
list-style-type: none;
}
cursor: pointer;
// Marker
&::after {
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(#{$✨}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
&:not([role]) {
color: var(#{$✨}accordion-close-summary-color);
}
@if $enable-transitions {
transition: transform var(#{$✨}transition);
transition: color var(#{$✨}transition);
}
}
&:focus {
outline: none;
&:not([role="button"]) {
color: var(#{$✨}accordion-active-summary-color);
// Reset marker
&::-webkit-details-marker {
display: none;
}
}
// Type button
&[role="button"] {
width: 100%;
text-align: left;
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
height: calc(1rem * var(#{$✨}line-height, 1.5));
background-image: var(#{$✨}icon-chevron-button);
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(#{$✨}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@if $enable-transitions {
transition: transform var(#{$✨}transition);
}
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(#{$✨}icon-chevron-button-inverse);
&:focus {
outline: none;
&:not([role="button"]) {
color: var(#{$✨}accordion-active-summary-color);
}
}
// Type button
&[role="button"] {
width: 100%;
text-align: left;
// Marker
&::after {
height: calc(1rem * var(#{$✨}line-height, 1.5));
background-image: var(#{$✨}icon-chevron-button);
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(#{$✨}icon-chevron-button-inverse);
}
}
}
}
}
}
// Open
&[open] {
> summary {
margin-bottom: calc(var(#{$✨}spacing));
// Open
&[open] {
> summary {
margin-bottom: calc(var(#{$✨}spacing));
&:not([role]) {
&:not(:focus) {
color: var(#{$✨}accordion-open-summary-color);
&:not([role]) {
&:not(:focus) {
color: var(#{$✨}accordion-open-summary-color);
}
}
&::after {
transform: rotate(0);
}
}
}
}
&::after {
transform: rotate(0);
}
}
}
}
[dir="rtl"] {
details {
summary {
text-align: right;
&::after {
float: left;
background-position: left center;
[dir="rtl"] {
details {
summary {
text-align: right;
&::after {
float: left;
background-position: left center;
}
}
}
}