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

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions
Download patch file Download diff file Expand all files Collapse all files

252
scss/components/_accordion.scss
View file

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

180
scss/components/_card.scss
View file

@ -1,90 +1,90 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/card") or map.get($modules, "components/modal") {
/**
* Card (<article>, role="article")
*/
#{$parent-selector} article:not(:has(> form)),
#{$parent-selector} [role="article"]:not(:has(> form)),
#{$parent-selector} article > form,
#{$parent-selector} [role="article"] > form {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}card-background-color);
box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header,
> footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
}
> header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-bottom: 0;
}
> hgroup {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-bottom: 0;
}
}
}
> footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
// https://github.com/picocss/pico/issues/557#issuecomment-2393213110
[type="submit"],
[type="reset"],
[type="button"],
[role="group"],
p,
nav,
ul,
ol {
margin-bottom: 0px;
&:last-child {
margin-bottom: 0px;
}
/* Also remove if next input after button is a hidden input */
&:has(+ [type="hidden"]) {
margin-bottom: 0px;
}
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/card") or map.get($modules, "components/modal") {
/**
* Card (<article>, role="article")
*/
#{$parent-selector} article:not(:has(> form)),
#{$parent-selector} [role="article"]:not(:has(> form)),
#{$parent-selector} article > form,
#{$parent-selector} [role="article"] > form {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}card-background-color);
box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header,
> footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
}
> header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-bottom: 0;
}
> hgroup {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-bottom: 0;
}
}
}
> footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
// https://github.com/picocss/pico/issues/557#issuecomment-2393213110
[type="submit"],
[type="reset"],
[type="button"],
[role="group"],
p,
nav,
ul,
ol {
margin-bottom: 0px;
&:last-child {
margin-bottom: 0px;
}
/* Also remove if next input after button is a hidden input */
&:has(+ [type="hidden"]) {
margin-bottom: 0px;
}
}
}
}
}

590
scss/components/_dropdown.scss
View file

@ -1,295 +1,295 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/dropdown") and $enable-classes {
/**
* Dropdown (details.dropdown)
*/
// Container
// ––––––––––––––––––––
#{$parent-selector} details.dropdown {
position: relative;
border-bottom: none;
@if $enable-transitions {
&[open] {
> summary,
> button,
> a {
&::after {
transform: rotate(0deg);
}
}
}
}
// Marker
// ––––––––––––––––––––
> summary,
> button,
> a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
margin-inline-start: 0.25rem;
float: right;
// TODO: find out why we need this magic number (0.2 rem)
// for the marker to be aligned with the regular select
//transform: rotate(0deg) translateX(0.2rem);
transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
// Button as a select
// inside container type accordion
// ––––––––––––––––––––
> summary {
&:not([role]) {
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
);
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}form-element-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
user-select: none;
@if $enable-transitions {
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);
}
&:active,
&:focus {
border-color: var(#{$css-var-prefix}form-element-active-border-color);
background-color: var(#{$css-var-prefix}form-element-active-background-color);
}
&:focus {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
// Reset focus visible from accordion component
&:focus-visible {
outline: none;
}
// Aria-invalid
&[aria-invalid="false"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-valid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
}
&[aria-invalid="true"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
}
}
// Submenu
// ––––––––––––––––––––
+ ul {
display: flex;
z-index: 99;
position: absolute;
left: 0;
flex-direction: column;
width: 100%;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}dropdown-background-color);
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
color: var(#{$css-var-prefix}dropdown-color);
white-space: nowrap;
opacity: 0;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 1s;
}
&[dir="rtl"] {
right: 0;
left: auto;
}
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
details {
margin-bottom: 0;
> summary {
line-height: var(#{$css-var-prefix}line-height);
}
}
a {
display: block;
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
overflow: hidden;
border-radius: 0;
color: var(#{$css-var-prefix}dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover,
&:focus,
&:active,
&:focus-visible,
&[aria-current]:not([aria-current="false"]) {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
label {
width: 100%;
}
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
&:has(label):hover {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
}
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
&[open] > summary {
// Button opened
// inside container type accordion
// ––––––––––––––––––––
margin-bottom: 0;
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
&::before {
display: block;
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
background: none;
content: "";
cursor: default;
}
+ ul {
transform: scaleY(1);
opacity: 1;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 0s;
}
}
}
}
// Container type accordion
// inside a nav
// ––––––––––––––––––––
// Dropdown inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
// Override height
margin-bottom: 0;
> summary {
&:not([role]) {
// Override height
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
}
}
}
}
// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/dropdown") and $enable-classes {
/**
* Dropdown (details.dropdown)
*/
// Container
// ––––––––––––––––––––
#{$parent-selector} details.dropdown {
position: relative;
border-bottom: none;
@if $enable-transitions {
&[open] {
> summary,
> button,
> a {
&::after {
transform: rotate(0deg);
}
}
}
}
// Marker
// ––––––––––––––––––––
> summary,
> button,
> a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
margin-inline-start: 0.25rem;
float: right;
// TODO: find out why we need this magic number (0.2 rem)
// for the marker to be aligned with the regular select
//transform: rotate(0deg) translateX(0.2rem);
transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
// Button as a select
// inside container type accordion
// ––––––––––––––––––––
> summary {
&:not([role]) {
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
);
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}form-element-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
user-select: none;
@if $enable-transitions {
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);
}
&:active,
&:focus {
border-color: var(#{$css-var-prefix}form-element-active-border-color);
background-color: var(#{$css-var-prefix}form-element-active-background-color);
}
&:focus {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
// Reset focus visible from accordion component
&:focus-visible {
outline: none;
}
// Aria-invalid
&[aria-invalid="false"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-valid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
}
&[aria-invalid="true"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
}
}
// Submenu
// ––––––––––––––––––––
+ ul {
display: flex;
z-index: 99;
position: absolute;
left: 0;
flex-direction: column;
width: 100%;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}dropdown-background-color);
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
color: var(#{$css-var-prefix}dropdown-color);
white-space: nowrap;
opacity: 0;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 1s;
}
&[dir="rtl"] {
right: 0;
left: auto;
}
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
details {
margin-bottom: 0;
> summary {
line-height: var(#{$css-var-prefix}line-height);
}
}
a {
display: block;
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
overflow: hidden;
border-radius: 0;
color: var(#{$css-var-prefix}dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover,
&:focus,
&:active,
&:focus-visible,
&[aria-current]:not([aria-current="false"]) {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
label {
width: 100%;
}
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
&:has(label):hover {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
}
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
&[open] > summary {
// Button opened
// inside container type accordion
// ––––––––––––––––––––
margin-bottom: 0;
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
&::before {
display: block;
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
background: none;
content: "";
cursor: default;
}
+ ul {
transform: scaleY(1);
opacity: 1;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 0s;
}
}
}
}
// Container type accordion
// inside a nav
// ––––––––––––––––––––
// Dropdown inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
// Override height
margin-bottom: 0;
> summary {
&:not([role]) {
// Override height
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
}
}
}
}
// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}

420
scss/components/_group.scss
View file

@ -1,210 +1,210 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/group") {
/**
* Group ([role="group"], [role="search"])
*/
#{$parent-selector} fieldset[role="group"] > legend {
float: left;
}
#{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] {
display: inline-flex;
position: relative;
width: 100%;
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(#{$css-var-prefix}transition);
> label,
> legend {
border-color: var(#{$css-var-prefix}secondary-background);
background-color: var(#{$css-var-prefix}secondary-background);
color: var(#{$css-var-prefix}secondary-inverse);
}
> *,
input:not([type="checkbox"], [type="radio"]),
select,
> label,
> legend,
> details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:focus {
z-index: 2;
}
}
> details {
&:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> summary,
> summary:not([role]) {
height: 100% !important;
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select,
> label,
> legend,
> details > summary {
&:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
> label,
> legend,
> details > summary {
width: auto;
}
@supports selector(:has(*)) {
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button
);
input:not([type="checkbox"], [type="radio"]),
select,
> label,
> legend,
> details > summary {
border-color: transparent;
}
}
// Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$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"],
label,
> legend,
> details > summary {
#{$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);
}
}
// Remove button box shadow if we have a group box shadow
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
label,
> legend,
> details > summary {
&:focus {
box-shadow: none;
}
}
}
}
#{$parent-selector} [role="search"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
}
}
[dir="rtl"] {
#{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] {
> *,
input:not([type="checkbox"], [type="radio"]),
select,
label,
> legend,
> details > summary {
&:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
border-top-left-radius: var(#{$css-var-prefix}border-radius);
border-bottom-right-radius: 0;
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
}
&:not(:last-child) {
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: 0;
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: 0;
}
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select,
label,
> legend,
> details > summary {
&:not(:first-child) {
margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
margin-left: auto;
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/group") {
/**
* Group ([role="group"], [role="search"])
*/
#{$parent-selector} fieldset[role="group"] > legend {
float: left;
}
#{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] {
display: inline-flex;
position: relative;
width: 100%;
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(#{$css-var-prefix}transition);
> label,
> legend {
border-color: var(#{$css-var-prefix}secondary-background);
background-color: var(#{$css-var-prefix}secondary-background);
color: var(#{$css-var-prefix}secondary-inverse);
}
> *,
input:not([type="checkbox"], [type="radio"]),
select,
> label,
> legend,
> details {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:focus {
z-index: 2;
}
}
> details {
&:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> summary,
> summary:not([role]) {
height: 100% !important;
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select,
> label,
> legend,
> details > summary {
&:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
> label,
> legend,
> details > summary {
width: auto;
}
@supports selector(:has(*)) {
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button
);
input:not([type="checkbox"], [type="radio"]),
select,
> label,
> legend,
> details > summary {
border-color: transparent;
}
}
// Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$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"],
label,
> legend,
> details > summary {
#{$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);
}
}
// Remove button box shadow if we have a group box shadow
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
label,
> legend,
> details > summary {
&:focus {
box-shadow: none;
}
}
}
}
#{$parent-selector} [role="search"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
}
}
[dir="rtl"] {
#{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] {
> *,
input:not([type="checkbox"], [type="radio"]),
select,
label,
> legend,
> details > summary {
&:not(:first-child) {
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
border-top-left-radius: var(#{$css-var-prefix}border-radius);
border-bottom-right-radius: 0;
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
}
&:not(:last-child) {
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: 0;
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: 0;
}
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select,
label,
> legend,
> details > summary {
&:not(:first-child) {
margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
margin-left: auto;
}
}
}
}

92
scss/components/_loading.scss
View file

@ -1,46 +1,46 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/loading") {
/**
* Loading ([aria-busy=true])
*/
// Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
white-space: nowrap;
&::before {
display: inline-block;
width: 1em;
height: 1em;
background-image: var(#{$css-var-prefix}icon-loading);
background-size: 1em auto;
background-repeat: no-repeat;
content: "";
vertical-align: -0.125em; // Visual alignment
}
&:not(:empty) {
&::before {
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="button"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [role="button"],
#{$parent-selector} a {
&[aria-busy="true"] {
pointer-events: none;
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/loading") {
/**
* Loading ([aria-busy=true])
*/
// Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
white-space: nowrap;
&::before {
display: inline-block;
width: 1em;
height: 1em;
background-image: var(#{$css-var-prefix}icon-loading);
background-size: 1em auto;
background-repeat: no-repeat;
content: "";
vertical-align: -0.125em; // Visual alignment
}
&:not(:empty) {
&::before {
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="button"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [role="button"],
#{$parent-selector} a {
&[aria-busy="true"] {
pointer-events: none;
}
}
}

380
scss/components/_modal.scss
View file

@ -1,190 +1,190 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/modal") {
/**
* Modal (<dialog>)
*/
:root,
:host {
#{$css-var-prefix}scrollbar-width: 0px;
}
#{$parent-selector} dialog {
display: grid;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: var(#{$css-var-prefix}spacing);
border: 0;
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$css-var-prefix}color);
@if $enable-transitions {
transform: scale(1);
transition: transform var(#{$css-var-prefix}transition);
}
// Content
> article:not(:has(> form)),
> article > form {
$close-selector: if(
$enable-classes,
".close, :is(a, button)[rel=prev]",
":is(a, button)[rel=prev]"
);
width: 100%;
@if map.get($breakpoints, "sm") {
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "sm"), "viewport");
}
}
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "md"), "viewport");
}
}
> header {
> * {
margin-bottom: 0;
}
#{$close-selector} {
margin: 0;
margin-left: var(#{$css-var-prefix}spacing);
padding: 0;
float: right;
}
}
> footer {
text-align: right;
button,
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
}
// Close icon
#{$close-selector} {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$css-var-prefix}spacing);
margin-left: auto;
border: none;
background-image: var(#{$css-var-prefix}icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
background-color: transparent;
opacity: 0.5;
@if $enable-transitions {
transition: opacity var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
opacity: 1;
}
}
}
// Closed state
&:not([open]),
&[open="false"] {
visibility: hidden;
opacity: 0;
& article {
transform: scale(0.7);
}
}
}
// Utilities
@if $enable-classes {
.modal-is-open {
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;
touch-action: auto;
}
}
}
// Prevent scrolling body when modal is open
body:has(dialog[open]) {
overflow: hidden;
}
// Animations
@if $enable-classes and $enable-transitions {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
dialog {
animation-duration: ($animation-duration * 4);
animation-name: modal-overlay;
> article {
animation-delay: $animation-duration;
animation-name: modal;
}
}
}
.modal-is-closing {
dialog,
dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
}
@keyframes modal-overlay {
from {
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/modal") {
/**
* Modal (<dialog>)
*/
:root,
:host {
#{$css-var-prefix}scrollbar-width: 0px;
}
#{$parent-selector} dialog {
display: grid;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: var(#{$css-var-prefix}spacing);
border: 0;
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$css-var-prefix}color);
@if $enable-transitions {
transform: scale(1);
transition: transform var(#{$css-var-prefix}transition);
}
// Content
> article:not(:has(> form)),
> article > form {
$close-selector: if(
$enable-classes,
".close, :is(a, button)[rel=prev]",
":is(a, button)[rel=prev]"
);
width: 100%;
@if map.get($breakpoints, "sm") {
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "sm"), "viewport");
}
}
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "md"), "viewport");
}
}
> header {
> * {
margin-bottom: 0;
}
#{$close-selector} {
margin: 0;
margin-left: var(#{$css-var-prefix}spacing);
padding: 0;
float: right;
}
}
> footer {
text-align: right;
button,
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
}
// Close icon
#{$close-selector} {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$css-var-prefix}spacing);
margin-left: auto;
border: none;
background-image: var(#{$css-var-prefix}icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
background-color: transparent;
opacity: 0.5;
@if $enable-transitions {
transition: opacity var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
opacity: 1;
}
}
}
// Closed state
&:not([open]),
&[open="false"] {
visibility: hidden;
opacity: 0;
& article {
transform: scale(0.7);
}
}
}
// Utilities
@if $enable-classes {
.modal-is-open {
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;
touch-action: auto;
}
}
}
// Prevent scrolling body when modal is open
body:has(dialog[open]) {
overflow: hidden;
}
// Animations
@if $enable-classes and $enable-transitions {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
dialog {
animation-duration: ($animation-duration * 4);
animation-name: modal-overlay;
> article {
animation-delay: $animation-duration;
animation-name: modal;
}
}
}
.modal-is-closing {
dialog,
dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
}
@keyframes modal-overlay {
from {
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
}
}

168
scss/components/_nav-hamburger.scss
View file

@ -1,84 +1,84 @@
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav hamburger menu
* modified from https: //codepen.io/brentarias/pen/gOQybod
*/
#{$parent-selector} nav[role="navigation"] {
z-index: 1;
align-items: center;
width: 100%;
overflow: hidden;
&[data-position="start"] {
/* remove the 'flex-direction' to move menu to the right */
flex-direction: row-reverse;
}
> input[type="checkbox"] {
display: none;
user-select: none;
}
> label {
display: none;
cursor: pointer;
user-select: none;
}
}
@each $breakpoint, $values in $breakpoints {
$databp: 'nav[role="navigation"]';
@if $breakpoint != sm {
$databp: #{$databp} + "[data-breakpoint='" + $breakpoint + "']";
}
$viewport: map.get($values, "viewport");
@media (max-width: $viewport) {
#{$parent-selector} #{$databp} {
flex-wrap: wrap;
& label {
display: block;
}
& > [role="list"] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color); //muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
& li {
width: calc(100% - calc(var(--pico-nav-link-spacing-vertical) * 2));
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5)
var(--pico-nav-link-spacing-vertical);
padding: 0;
}
& a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition:
border-color var(--pico-transition),
color var(--pico-transition);
}
& a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
//background-color: var(--pico-primary-background) !important;
//color: var(--pico-primary-inverse);
}
}
& input[type="checkbox"]:checked ~ [role="list"] {
max-height: 100vh;
}
}
}
}
}
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav hamburger menu
* modified from https: //codepen.io/brentarias/pen/gOQybod
*/
#{$parent-selector} nav[role="navigation"] {
z-index: 1;
align-items: center;
width: 100%;
overflow: hidden;
&[data-position="start"] {
/* remove the 'flex-direction' to move menu to the right */
flex-direction: row-reverse;
}
> input[type="checkbox"] {
display: none;
user-select: none;
}
> label {
display: none;
cursor: pointer;
user-select: none;
}
}
@each $breakpoint, $values in $breakpoints {
$databp: 'nav[role="navigation"]';
@if $breakpoint != sm {
$databp: #{$databp} + "[data-breakpoint='" + $breakpoint + "']";
}
$viewport: map.get($values, "viewport");
@media (max-width: $viewport) {
#{$parent-selector} #{$databp} {
flex-wrap: wrap;
& label {
display: block;
}
& > [role="list"] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color); //muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
& li {
width: calc(100% - calc(var(--pico-nav-link-spacing-vertical) * 2));
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5)
var(--pico-nav-link-spacing-vertical);
padding: 0;
}
& a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition:
border-color var(--pico-transition),
color var(--pico-transition);
}
& a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
//background-color: var(--pico-primary-background) !important;
//color: var(--pico-primary-inverse);
}
}
& input[type="checkbox"]:checked ~ [role="list"] {
max-height: 100vh;
}
}
}
}
}

326
scss/components/_nav.scss
View file

@ -1,163 +1,163 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
// https://github.com/picocss/pico/issues/634#issuecomment-2541600508
:where(nav li)::before {
float: none; // fixes safari bug in dropdowns. Previously was: left
content: " "; //\200B"; // makes voice overs realize its a list item
//@use "sass:string"; // if we want to use the original \200B content value, we need to add this line to the top.
//content: string.unquote('"\\200B"'); // created a big gap between list items
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} nav,
#{$parent-selector} nav ul {
display: flex;
}
#{$parent-selector} nav {
justify-content: space-between;
overflow: visible;
ol,
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
&:not(:hover) {
text-decoration: none;
}
}
// Minimal support for buttons and forms elements
button,
[role="button"],
[type="button"],
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
}
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: start;
& ul li {
&:not(:first-child) {
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
a {
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
}
&:not(:last-child) {
&::after {
display: inline-block;
position: absolute;
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
color: var(#{$css-var-prefix}muted-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
}
// Minimal support for aria-current
& a[aria-current]:not([aria-current="false"]) {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
}
}
// Vertical Nav
#{$parent-selector} aside {
nav,
ol,
ul,
li {
display: block;
}
li {
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
a {
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}
// Breadcrumb RTL
[dir="rtl"] {
#{$parent-selector} nav {
&[aria-label="breadcrumb"] {
& ul li {
&:not(:last-child) {
::after {
content: "\\";
}
}
}
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
// https://github.com/picocss/pico/issues/634#issuecomment-2541600508
:where(nav li)::before {
float: none; // fixes safari bug in dropdowns. Previously was: left
content: " "; //\200B"; // makes voice overs realize its a list item
//@use "sass:string"; // if we want to use the original \200B content value, we need to add this line to the top.
//content: string.unquote('"\\200B"'); // created a big gap between list items
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} nav,
#{$parent-selector} nav ul {
display: flex;
}
#{$parent-selector} nav {
justify-content: space-between;
overflow: visible;
ol,
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
&:not(:hover) {
text-decoration: none;
}
}
// Minimal support for buttons and forms elements
button,
[role="button"],
[type="button"],
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
}
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: start;
& ul li {
&:not(:first-child) {
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
a {
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
}
&:not(:last-child) {
&::after {
display: inline-block;
position: absolute;
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
color: var(#{$css-var-prefix}muted-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
}
// Minimal support for aria-current
& a[aria-current]:not([aria-current="false"]) {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
}
}
// Vertical Nav
#{$parent-selector} aside {
nav,
ol,
ul,
li {
display: block;
}
li {
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
a {
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}
// Breadcrumb RTL
[dir="rtl"] {
#{$parent-selector} nav {
&[aria-label="breadcrumb"] {
& ul li {
&:not(:last-child) {
::after {
content: "\\";
}
}
}
}
}
}
}

102
scss/components/_notification.scss
View file

@ -1,51 +1,51 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/notification") {
/**
* Notification (<dialog>)
*/
#{$parent-selector} dialog[role="alert"] {
position: fixed;
top: unset;
right: var(#{$css-var-prefix}spacing);
bottom: var(#{$css-var-prefix}spacing);
left: unset;
width: auto;
min-width: unset;
height: auto;
min-height: unset;
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}primary-background);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}primary-inverse);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height);
opacity: 0;
transition: opacity var(#{$css-var-prefix}transition);
user-select: none;
//> p, > h1, > h2, > h3, > h4, > h5, > h6 {
* {
color: var(#{$css-var-prefix}primary-inverse);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height);
}
}
#{$parent-selector} dialog[data-backdrop="false"][role="alert"]::backdrop {
display: none;
}
#{$parent-selector} dialog[role="alert"][open] {
opacity: 1;
transition: opacity var(#{$css-var-prefix}transition);
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/notification") {
/**
* Notification (<dialog>)
*/
#{$parent-selector} dialog[role="alert"] {
position: fixed;
top: unset;
right: var(#{$css-var-prefix}spacing);
bottom: var(#{$css-var-prefix}spacing);
left: unset;
width: auto;
min-width: unset;
height: auto;
min-height: unset;
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}primary-background);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}primary-inverse);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height);
opacity: 0;
transition: opacity var(#{$css-var-prefix}transition);
user-select: none;
//> p, > h1, > h2, > h3, > h4, > h5, > h6 {
* {
color: var(#{$css-var-prefix}primary-inverse);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height);
}
}
#{$parent-selector} dialog[data-backdrop="false"][role="alert"]::backdrop {
display: none;
}
#{$parent-selector} dialog[role="alert"][open] {
opacity: 1;
transition: opacity var(#{$css-var-prefix}transition);
}
}

74
scss/components/_popover-toast.scss
View file

@ -1,37 +1,37 @@
@use "sass:map";
@use "../settings" as *;
// TODO: Complete this
// https://mdn.github.io/dom-examples/popover-api/toast-popovers/
// --pico-ins-color // success
// --pico-del-color // error
@if map.get($modules, "components/popover-toast") {
#{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary);
&[data-status="success"] {
border-color: var(--pico-ins-color);
}
&[data-status="failure"] {
border-color: var(--pico-del-color);
}
&:popover-open {
position: absolute;
right: 5px;
bottom: 5px;
inset: unset;
}
&::backdrop {
background: rgba(0, 0, 0, 0.7);
}
button {
margin-top: -10px;
padding: 0;
border: 0 none;
background: transparent;
color: var(#{$css-var-prefix}primary);
font-size: 1.5em;
opacity: 0.8;
}
}
}
@use "sass:map";
@use "../settings" as *;
// TODO: Complete this
// https://mdn.github.io/dom-examples/popover-api/toast-popovers/
// --pico-ins-color // success
// --pico-del-color // error
@if map.get($modules, "components/popover-toast") {
#{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary);
&[data-status="success"] {
border-color: var(--pico-ins-color);
}
&[data-status="failure"] {
border-color: var(--pico-del-color);
}
&:popover-open {
position: absolute;
right: 5px;
bottom: 5px;
inset: unset;
}
&::backdrop {
background: rgba(0, 0, 0, 0.7);
}
button {
margin-top: -10px;
padding: 0;
border: 0 none;
background: transparent;
color: var(#{$css-var-prefix}primary);
font-size: 1.5em;
opacity: 0.8;
}
}
}

52
scss/components/_popover.scss
View file

@ -1,26 +1,26 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/popover") {
#{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary);
&:popover-open {
margin: auto auto;
}
&::backdrop {
backdrop-filter: blur(3px);
background: rgba(0, 0, 0, 0.7);
}
button {
margin-top: -10px;
padding: 0;
border: 0 none;
background: transparent;
color: var(#{$css-var-prefix}primary);
font-size: 1.5em;
opacity: 0.8;
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/popover") {
#{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary);
&:popover-open {
margin: auto auto;
}
&::backdrop {
backdrop-filter: blur(3px);
background: rgba(0, 0, 0, 0.7);
}
button {
margin-top: -10px;
padding: 0;
border: 0 none;
background: transparent;
color: var(#{$css-var-prefix}primary);
font-size: 1.5em;
opacity: 0.8;
}
}
}

204
scss/components/_progress.scss
View file

@ -1,102 +1,102 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/progress") {
/**
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
#{$parent-selector} progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border
border: 0;
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}progress-background-color);
// IE10 uses `color` to set the bar background-color
color: var(#{$css-var-prefix}progress-color);
&::-webkit-progress-bar {
border-radius: var(#{$css-var-prefix}border-radius);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(#{$css-var-prefix}progress-color);
@if $enable-transitions {
transition: inline-size var(#{$css-var-prefix}transition);
}
}
&::-moz-progress-bar {
background-color: var(#{$css-var-prefix}progress-color);
}
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(#{$css-var-prefix}progress-background-color)
linear-gradient(
to right,
var(#{$css-var-prefix}progress-color) 30%,
var(#{$css-var-prefix}progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
#{$parent-selector} progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/progress") {
/**
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
#{$parent-selector} progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border
border: 0;
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}progress-background-color);
// IE10 uses `color` to set the bar background-color
color: var(#{$css-var-prefix}progress-color);
&::-webkit-progress-bar {
border-radius: var(#{$css-var-prefix}border-radius);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(#{$css-var-prefix}progress-color);
@if $enable-transitions {
transition: inline-size var(#{$css-var-prefix}transition);
}
}
&::-moz-progress-bar {
background-color: var(#{$css-var-prefix}progress-color);
}
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(#{$css-var-prefix}progress-background-color)
linear-gradient(
to right,
var(#{$css-var-prefix}progress-color) 30%,
var(#{$css-var-prefix}progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
#{$parent-selector} progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
}

158
scss/components/_tab-region.scss
View file

@ -1,79 +1,79 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tab-region") {
/**
* Tab region
* styling help from: https://github.com/picocss/pico/discussions/608
* and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
*/
#{$parent-selector} section[role="region"] {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
details {
display: contents;
margin-bottom: 0;
padding-bottom: 0;
summary {
flex-grow: 1;
order: 0;
margin: 0;
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75)
calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5);
border-bottom: 1px solid transparent; //(#{$css-var-prefix}primary-background);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
list-style-type: none;
touch-action: manipulation;
transition: all var(#{$css-var-prefix}transition);
&:hover {
border-bottom-color: var(#{$css-var-prefix}primary-border);
background-color: var(#{$css-var-prefix}card-background-color);
}
&::after {
display: none;
// with the - icon instead of chevron
//transform: rotate(0deg);
//background-image: var(#{$css-var-prefix}icon-minus);
//background-position: center;
//background-size: .75em auto;
}
}
> div {
opacity: 0;
}
&[open] {
> summary {
background-color: var(#{$css-var-prefix}primary-background);
color: var(#{$css-var-prefix}primary-inverse) !important;
&:hover {
background-color: var(#{$css-var-prefix}primary-hover-background);
}
//&::after {
// black chevron icon
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
//}
}
// end for summary, keep here
> div {
order: 1;
width: 100%;
padding: var(#{$css-var-prefix}spacing);
padding-bottom: 0;
opacity: 1;
transition: opacity var(#{$css-var-prefix}transition);
}
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tab-region") {
/**
* Tab region
* styling help from: https://github.com/picocss/pico/discussions/608
* and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
*/
#{$parent-selector} section[role="region"] {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
details {
display: contents;
margin-bottom: 0;
padding-bottom: 0;
summary {
flex-grow: 1;
order: 0;
margin: 0;
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75)
calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5);
border-bottom: 1px solid transparent; //(#{$css-var-prefix}primary-background);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
list-style-type: none;
touch-action: manipulation;
transition: all var(#{$css-var-prefix}transition);
&:hover {
border-bottom-color: var(#{$css-var-prefix}primary-border);
background-color: var(#{$css-var-prefix}card-background-color);
}
&::after {
display: none;
// with the - icon instead of chevron
//transform: rotate(0deg);
//background-image: var(#{$css-var-prefix}icon-minus);
//background-position: center;
//background-size: .75em auto;
}
}
> div {
opacity: 0;
}
&[open] {
> summary {
background-color: var(#{$css-var-prefix}primary-background);
color: var(#{$css-var-prefix}primary-inverse) !important;
&:hover {
background-color: var(#{$css-var-prefix}primary-hover-background);
}
//&::after {
// black chevron icon
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
//}
}
// end for summary, keep here
> div {
order: 1;
width: 100%;
padding: var(#{$css-var-prefix}spacing);
padding-bottom: 0;
opacity: 1;
transition: opacity var(#{$css-var-prefix}transition);
}
}
}
}
}

200
scss/components/_tab.scss
View file

@ -1,100 +1,100 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tab") {
/**
* Tabs
* styling help from: https://codepen.io/mikestreety/pen/yVNNNm
*/
@if $enable-transitions {
@keyframes showTab {
from {
//transform: translateY(10px);
scale: 0.75;
opacity: 0;
}
to {
//transform: translateY(0);
scale: 1;
opacity: 1;
}
}
}
#{$parent-selector} [role="tablist"] {
display: flex;
flex-wrap: wrap; // make sure it wraps
padding-bottom: 0;
button {
flex-grow: 1;
order: 1; // Put the labels first
padding: calc(var(#{$css-var-prefix}spacing) * 0.625);
border: 0;
border-bottom: 1px solid var(#{$css-var-prefix}primary-background);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: transparent;
color: var(#{$css-var-prefix}contrast);
font-weight: bold;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(#{$css-var-prefix}transition);
}
&[aria-selected="true"] {
background: var(#{$css-var-prefix}primary-background);
color: var(#{$css-var-prefix}primary-inverse);
}
&:hover {
background: var(#{$css-var-prefix}primary-hover-background);
color: var(#{$css-var-prefix}primary-inverse);
}
}
[role="tabpanel"] {
flex-grow: 1;
order: 99; // Put the tabs last
width: 100%;
//calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 2)
//var(#{$css-var-prefix}form-element-spacing-horizontal);
padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
background: var(
#{$css-var-prefix}accent-section-bg-color
); //#{$css-var-prefix}card-sectioning-background-color);
@if $enable-transitions {
animation: var(#{$css-var-prefix}tab-animation) var(#{$css-var-prefix}transition);
}
&:not([hidden]) {
display: block;
}
&[hidden] {
display: none;
}
> *:last-of-type {
margin-bottom: 0;
}
}
}
@media (max-width: 45em) {
#{$parent-selector} [role="tablist"] {
[role="tabpanel"],
button,
label {
order: initial;
}
label,
[role="tabpanel"],
button {
width: 100%;
margin-top: 0.2rem;
margin-right: 0;
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tab") {
/**
* Tabs
* styling help from: https://codepen.io/mikestreety/pen/yVNNNm
*/
@if $enable-transitions {
@keyframes showTab {
from {
//transform: translateY(10px);
scale: 0.75;
opacity: 0;
}
to {
//transform: translateY(0);
scale: 1;
opacity: 1;
}
}
}
#{$parent-selector} [role="tablist"] {
display: flex;
flex-wrap: wrap; // make sure it wraps
padding-bottom: 0;
button {
flex-grow: 1;
order: 1; // Put the labels first
padding: calc(var(#{$css-var-prefix}spacing) * 0.625);
border: 0;
border-bottom: 1px solid var(#{$css-var-prefix}primary-background);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: transparent;
color: var(#{$css-var-prefix}contrast);
font-weight: bold;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(#{$css-var-prefix}transition);
}
&[aria-selected="true"] {
background: var(#{$css-var-prefix}primary-background);
color: var(#{$css-var-prefix}primary-inverse);
}
&:hover {
background: var(#{$css-var-prefix}primary-hover-background);
color: var(#{$css-var-prefix}primary-inverse);
}
}
[role="tabpanel"] {
flex-grow: 1;
order: 99; // Put the tabs last
width: 100%;
//calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 2)
//var(#{$css-var-prefix}form-element-spacing-horizontal);
padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
background: var(
#{$css-var-prefix}accent-section-bg-color
); //#{$css-var-prefix}card-sectioning-background-color);
@if $enable-transitions {
animation: var(#{$css-var-prefix}tab-animation) var(#{$css-var-prefix}transition);
}
&:not([hidden]) {
display: block;
}
&[hidden] {
display: none;
}
> *:last-of-type {
margin-bottom: 0;
}
}
}
@media (max-width: 45em) {
#{$parent-selector} [role="tablist"] {
[role="tabpanel"],
button,
label {
order: initial;
}
label,
[role="tabpanel"],
button {
width: 100%;
margin-top: 0.2rem;
margin-right: 0;
}
}
}
}

272
scss/components/_timeline.scss
View file

@ -1,136 +1,136 @@
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
@if map.get($modules, "components/timeline") {
// The actual timeline (the vertical ruler)
#{$parent-selector} .timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
&::after {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 6px;
margin-left: -3px;
background-color: var(#{$css-var-prefix}timeline-line-color);
content: "";
}
// Point around content
> .point {
position: relative;
width: 50%;
padding: 10px 25px;
background-color: inherit;
// circle
&::after {
z-index: 1;
position: absolute;
top: 13px;
right: -13px;
width: 25px;
height: 25px;
border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color);
border-radius: 50%;
background-color: var(#{$css-var-prefix}timeline-dot-background-color);
content: "";
}
// Place the container to the left
&.left {
left: 0;
&::before {
z-index: 1;
position: absolute;
top: 15px;
right: 15px;
width: 0;
height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 0 10px 10px;
border-color: transparent
transparent
transparent
var(#{$css-var-prefix}timeline-arrow-color);
content: " ";
}
}
// Place the container to the right
&.right {
left: 50%;
&::before {
z-index: 1;
position: absolute;
top: 15px;
left: 15px;
width: 0;
height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 10px 10px 0;
border-color: transparent
var(#{$css-var-prefix}timeline-arrow-color)
transparent
transparent;
content: " ";
}
&::after {
left: -13px;
}
}
}
}
// Media queries - Responsive timeline on screens less than 600px wide
@media screen and (max-width: 600px) {
// Place the timelime to the left
#{$parent-selector} .timeline {
// the line
&::after {
left: 13px;
}
// after = dot
// before = arrow
> .point {
// Full-width containers
width: 100%;
padding-right: 25px;
padding-left: 40px;
// Make all right containers behave like the left ones
&.right {
left: 0;
}
// after = dot
&::after,
&.left::after,
&.right::after {
left: 0;
}
// before = arrow
// Make sure that all arrows are pointing leftwards
// &::before,
&.left::before,
&.right::before {
//left: 60px;
top: 16px;
left: 30px;
border-width: 10px 10px 10px 0;
border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent
transparent;
}
}
}
}
}
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
@if map.get($modules, "components/timeline") {
// The actual timeline (the vertical ruler)
#{$parent-selector} .timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
&::after {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 6px;
margin-left: -3px;
background-color: var(#{$css-var-prefix}timeline-line-color);
content: "";
}
// Point around content
> .point {
position: relative;
width: 50%;
padding: 10px 25px;
background-color: inherit;
// circle
&::after {
z-index: 1;
position: absolute;
top: 13px;
right: -13px;
width: 25px;
height: 25px;
border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color);
border-radius: 50%;
background-color: var(#{$css-var-prefix}timeline-dot-background-color);
content: "";
}
// Place the container to the left
&.left {
left: 0;
&::before {
z-index: 1;
position: absolute;
top: 15px;
right: 15px;
width: 0;
height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 0 10px 10px;
border-color: transparent
transparent
transparent
var(#{$css-var-prefix}timeline-arrow-color);
content: " ";
}
}
// Place the container to the right
&.right {
left: 50%;
&::before {
z-index: 1;
position: absolute;
top: 15px;
left: 15px;
width: 0;
height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 10px 10px 0;
border-color: transparent
var(#{$css-var-prefix}timeline-arrow-color)
transparent
transparent;
content: " ";
}
&::after {
left: -13px;
}
}
}
}
// Media queries - Responsive timeline on screens less than 600px wide
@media screen and (max-width: 600px) {
// Place the timelime to the left
#{$parent-selector} .timeline {
// the line
&::after {
left: 13px;
}
// after = dot
// before = arrow
> .point {
// Full-width containers
width: 100%;
padding-right: 25px;
padding-left: 40px;
// Make all right containers behave like the left ones
&.right {
left: 0;
}
// after = dot
&::after,
&.left::after,
&.right::after {
left: 0;
}
// before = arrow
// Make sure that all arrows are pointing leftwards
// &::before,
&.left::before,
&.right::before {
//left: 60px;
top: 16px;
left: 30px;
border-width: 10px 10px 10px 0;
border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent
transparent;
}
}
}
}
}

438
scss/components/_tooltip.scss
View file

@ -1,219 +1,219 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tooltip") {
/**
* Tooltip ([data-tooltip])
*/
#{$parent-selector} [data-tooltip] {
position: relative;
&:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before,
&::after {
display: inline-block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
width: 250px;
max-width: 250px;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}tooltip-background-color);
content: attr(data-tooltip);
color: var(#{$css-var-prefix}tooltip-color);
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: normal;
opacity: 0;
pointer-events: none;
}
// Caret
&[data-placement="top"]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(#{$css-var-prefix}tooltip-background-color);
}
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
&:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
&:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
&:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
// Default (top)
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
}
}
// Bottom
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
}
}
}
// Left
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
// Right
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
}
@keyframes tooltip-slide {
to {
transform: var(#{$css-var-prefix}tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0;
}
to {
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1;
}
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tooltip") {
/**
* Tooltip ([data-tooltip])
*/
#{$parent-selector} [data-tooltip] {
position: relative;
&:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before,
&::after {
display: inline-block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
width: 250px;
max-width: 250px;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}tooltip-background-color);
content: attr(data-tooltip);
color: var(#{$css-var-prefix}tooltip-color);
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: normal;
opacity: 0;
pointer-events: none;
}
// Caret
&[data-placement="top"]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(#{$css-var-prefix}tooltip-background-color);
}
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
&:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
&:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
&:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
// Default (top)
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
}
}
// Bottom
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
}
}
}
// Left
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
// Right
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
}
@keyframes tooltip-slide {
to {
transform: var(#{$css-var-prefix}tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0;
}
to {
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1;
}
}
}
}
}