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

Version 2.2.1

Browse source
This commit is contained in:
Yohn 2024-12-21 05:48:33 -05:00
parent dbd9c5a44f
commit e0abc58a64
272 changed files with 16279 additions and 13394 deletions
Download patch file Download diff file Expand all files Collapse all files

1
scss/_index.scss
View file

@ -47,6 +47,7 @@
@use "components/nav-hamburger"; // role="navigation" for hamburger-menu for the nav component
@use "components/progress"; // progress
@use "components/tooltip"; // data-tooltip
@use "components/tab"; // [role="tablist"] // classless tabs
@use "components/tab-region"; // section[role="region"] // tabs
@use "components/popover"; // dialog[role="alert"]
// V3 Remove notification in favor of popovers..

7
scss/_settings.scss
View file

@ -176,8 +176,11 @@ $modules: map.merge(
// incorperate the <menu> tag into navigations.
"components/nav": true,
"components/progress": true,
"components/tab": true,
// [role=tablist]
// I wish role="tablist|tab|tabpanel" could be used on <details> and <summary> tag.
"components/tab-region": true,
"components/tab-region": false,
// DOES NOT WORK IN CHROME
"components/tooltip": true,
// V3 Notes
// might find a new way to do this, I'll wait to hear feedback on this approach.
@ -185,7 +188,7 @@ $modules: map.merge(
// V3 Notes
// Notification should be redone to be more in line with Pico's design
"components/notification": true,
"components/notification": false,
"components/popover": true,
// V3 Notes
// timeline disabled by default because its more out of the scope of this project,

418
scss/components/_dropdown.scss
View file

@ -46,102 +46,222 @@
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
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
// Override height
margin-bottom: 0;
}
// Button as a select
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown > 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
);
}
}
// Dropdown inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
//&[open] > summary::after {
// transform: rotate(-90deg) translateX(0rem);
//}
// Override height
margin-bottom: 0;
> summary {
&:not([role]) {
@ -167,132 +287,6 @@
}
}
// Submenu
// ––––––––––––––––––––
#{$parent-selector} details.dropdown > summary + 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);
}
}
}
// Button opened
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] > summary {
margin-bottom: 0;
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
#{$parent-selector} details.dropdown[open] > summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 0s;
}
}
}
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] > summary {
&::before {
display: block;
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
background: none;
content: "";
cursor: default;
}
}
// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {

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

@ -23,7 +23,7 @@
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;
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;

100
scss/components/_tab.scss Normal file
View file

@ -0,0 +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;
}
}
}
}

2
scss/forms/_floating.scss
View file

@ -54,7 +54,7 @@
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
transform: translateY(-50%) scale(0.85);
color: var(--pico-form-element-active-border-color);
font-size: calc(var(--pico-font-size) * 0.75);
font-size: calc(var(--pico-font-size) * 0.85);
line-height: 1.25;
transition: all $transition-fast;
}

2
scss/helpers/_copyright.scss
View file

@ -1,4 +1,4 @@
/*!
* Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
* Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2024 - Licensed under MIT
*/

7
scss/pico.fluid.classless.conditional.scss Normal file
View file

@ -0,0 +1,7 @@
// Pico fluid classless conditional version
@use "../scss" with (
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false,
$parent-selector: ".pico"
);

2
scss/pico.fluid.classless.scss
View file

@ -1,4 +1,4 @@
// Pico classless version
// Pico fluid classless version
@use "index" with (
$enable-semantic-container: true,
$enable-viewport: false,

8
scss/themes/default/_dark.scss
View file

@ -59,6 +59,14 @@
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
// Make Accent Colors
// colors used in: dropdowns, modals, cards,
// blockquote, tabs, timeline, ect
#{$css-var-prefix}accent-bg-color: #{$slate-900};
#{$css-var-prefix}accent-section-bg-color: #{color.mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}accent-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accent-box-shadow: var(#{$css-var-prefix}box-shadow);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors

8
scss/themes/default/_light.scss
View file

@ -59,6 +59,14 @@
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow($slate-400);
// Make Accent Colors
// colors used in: dropdowns, modals, cards,
// blockquote, tabs, timeline, ect
#{$css-var-prefix}accent-bg-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}accent-section-bg-color: #{color.mix($slate-50, $white, 25%)};
#{$css-var-prefix}accent-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accent-box-shadow: var(#{$css-var-prefix}box-shadow);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors

34
scss/themes/default/_styles.scss
View file

@ -59,8 +59,12 @@
// Spacings for form elements and button
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
#{$css-var-prefix}form-element-spacing-vertical: calc(var(--pico-spacing) * 0.5); // 0.75rem
#{$css-var-prefix}form-element-spacing-horizontal: calc(var(--pico-spacing) * 0.75); // 1rem
#{$css-var-prefix}form-element-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * 0.5
); // 0.75rem
#{$css-var-prefix}form-element-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * 0.75
); // 1rem
}
// Font weight for form labels & fieldsets legend
@ -394,4 +398,30 @@
}
}
}
@if map.get($modules, "components/tab") {
[role="tablist"] {
#{$css-var-prefix}tab-animation: showTab;
// will fine tune these next release
//button {
// #{$css-var-prefix}form-element-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 0.5); // 0.75rem
// #{$css-var-prefix}form-element-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 0.75); // 1rem
// #{$css-var-prefix}tab-padding-vertical: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 1.25);
// #{$css-var-prefix}tab-padding-horizontal: var(#{$css-var-prefix}form-element-spacing-horizontal);
// #{$css-var-prefix}tab-border-color: var(#{$css-var-prefix}primary-background);
// #{$css-var-prefix}tab-background: transparent;
// #{$css-var-prefix}tab-color: var(#{$css-var-prefix}contrast);
// &[aria-selected="true"] {
// #{$css-var-prefix}tab-selected-background: var(#{$css-var-prefix}primary-background);
// #{$css-var-prefix}tab-selected-color: var(#{$css-var-prefix}primary-inverse);
// }
// &:hover {
// #{$css-var-prefix}tab-hover-background: var(#{$css-var-prefix}primary-hover-background);
// #{$css-var-prefix}tab-hover-color: var(#{$css-var-prefix}primary-inverse);
// }
//}
}
}
}