mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 11:16:15 -04:00
Version 2.2.1
This commit is contained in:
Yohn
parent
dbd9c5a44f
commit
e0abc58a64
272 changed files with 16279 additions and 13394 deletions
1976
docs/index.html
1976
docs/index.html
File diff suppressed because it is too large
Load diff
|
|
@ -1,3 +1,8 @@
|
|||
/*
|
||||
* Accordion JavaScript Removed.
|
||||
*
|
||||
*/
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll('details').forEach(el => {
|
||||
let anim = null, opening = false, closing = false
|
||||
|
|
|
|||
104
docs/js/PicoTabs.js
Normal file
104
docs/js/PicoTabs.js
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
/*
|
||||
// To not have any keypresses change the tabs use the following
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabs = document.querySelectorAll('[role="tab"]');
|
||||
const panels = document.querySelectorAll('[role="tabpanel"]');
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener("click", () => {
|
||||
// Reset all tabs and panels
|
||||
tabs.forEach((t, i) => {
|
||||
t.setAttribute("aria-selected", "false");
|
||||
t.setAttribute("tabindex", "-1");
|
||||
panels[i].setAttribute("hidden", true);
|
||||
});
|
||||
|
||||
// Activate the clicked tab
|
||||
tab.setAttribute("aria-selected", "true");
|
||||
tab.setAttribute("tabindex", "0");
|
||||
document
|
||||
.querySelector('[aria-labelledby="' + tab.id + '"]')
|
||||
.removeAttribute("hidden");
|
||||
|
||||
// Focus the activated tab
|
||||
tab.focus();
|
||||
});
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
class PicoTabs {
|
||||
constructor(tabListContainerSelector) {
|
||||
this.tabListContainer = document.querySelector(tabListContainerSelector);
|
||||
// Check if tablist element exists on the page
|
||||
if (!this.tabListContainer) {
|
||||
console.warn(
|
||||
`No element with ${tabListContainerSelector} found on the page.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.tabs = this.tabListContainer.querySelectorAll('[role="tab"]');
|
||||
this.panels = document.querySelectorAll('[role="tabpanel"]');
|
||||
|
||||
// Proceed only if tabs and panels are found
|
||||
if (this.tabs.length === 0 || this.panels.length === 0) {
|
||||
console.warn("No tabs or panels found, initialization aborted.");
|
||||
return;
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.tabs.forEach((tab, index) => {
|
||||
tab.addEventListener("click", () => this.activateTab(index));
|
||||
tab.addEventListener("keydown", (e) => this.handleKeyDown(e, index));
|
||||
});
|
||||
}
|
||||
|
||||
// Activate a tab and corresponding panel
|
||||
activateTab(index) {
|
||||
// Reset all tabs and panels
|
||||
this.tabs.forEach((tab, i) => {
|
||||
tab.setAttribute("aria-selected", "false");
|
||||
tab.setAttribute("tabindex", "-1");
|
||||
this.panels[i].setAttribute("hidden", "true");
|
||||
});
|
||||
|
||||
// Activate the specified tab
|
||||
this.tabs[index].setAttribute("aria-selected", "true");
|
||||
this.tabs[index].setAttribute("tabindex", "0");
|
||||
this.panels[index].removeAttribute("hidden");
|
||||
|
||||
// Focus the activated tab
|
||||
this.tabs[index].focus();
|
||||
}
|
||||
|
||||
// Handle keyboard navigation
|
||||
handleKeyDown(event, currentIndex) {
|
||||
switch (event.key) {
|
||||
case "ArrowLeft":
|
||||
event.preventDefault();
|
||||
this.activateTab((currentIndex - 1 + this.tabs.length) % this.tabs.length);
|
||||
break;
|
||||
case "ArrowRight":
|
||||
event.preventDefault();
|
||||
this.activateTab((currentIndex + 1) % this.tabs.length);
|
||||
break;
|
||||
case "Home":
|
||||
event.preventDefault();
|
||||
this.activateTab(0);
|
||||
break;
|
||||
case "End":
|
||||
event.preventDefault();
|
||||
this.activateTab(this.tabs.length - 1);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
//document.addEventListener("DOMContentLoaded", () => {
|
||||
// new PicoTabs('[role="tablist"]');
|
||||
//})
|
||||
2
docs/pico.colors.min.css
vendored
2
docs/pico.colors.min.css
vendored
File diff suppressed because one or more lines are too long
211
docs/pico.css
211
docs/pico.css
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* 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
|
||||
*/
|
||||
/**
|
||||
|
|
@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-form-element-spacing-horizontal: 2rem;
|
||||
}
|
||||
|
||||
[role=tablist] {
|
||||
--pico-tab-animation: showTab;
|
||||
}
|
||||
|
||||
/**
|
||||
* Color schemes
|
||||
*/
|
||||
|
|
@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-contrast-focus: rgba(93, 107, 137, 0.25);
|
||||
--pico-contrast-inverse: #fff;
|
||||
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
|
||||
--pico-accent-bg-color: var(--pico-background-color);
|
||||
--pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
|
||||
--pico-accent-border-color: var(--pico-muted-border-color);
|
||||
--pico-accent-box-shadow: var(--pico-box-shadow);
|
||||
--pico-h1-color: #2d3138;
|
||||
--pico-h2-color: #373c44;
|
||||
--pico-h3-color: #424751;
|
||||
|
|
@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
|
||||
--pico-contrast-inverse: #000;
|
||||
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
|
||||
--pico-accent-bg-color: #181c25;
|
||||
--pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
|
||||
--pico-accent-border-color: var(--pico-muted-border-color);
|
||||
--pico-accent-box-shadow: var(--pico-box-shadow);
|
||||
--pico-h1-color: #f0f1f3;
|
||||
--pico-h2-color: #e0e3e7;
|
||||
--pico-h3-color: #c2c7d0;
|
||||
|
|
@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
|
||||
--pico-contrast-inverse: #000;
|
||||
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
|
||||
--pico-accent-bg-color: #181c25;
|
||||
--pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
|
||||
--pico-accent-border-color: var(--pico-muted-border-color);
|
||||
--pico-accent-box-shadow: var(--pico-box-shadow);
|
||||
--pico-h1-color: #f0f1f3;
|
||||
--pico-h2-color: #e0e3e7;
|
||||
--pico-h3-color: #c2c7d0;
|
||||
|
|
@ -2806,7 +2822,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
|
|||
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;
|
||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
@ -2821,7 +2837,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
|||
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 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -3147,11 +3163,6 @@ details.dropdown > a::after {
|
|||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav details.dropdown {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details.dropdown > summary:not([role]) {
|
||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||
|
|
@ -3186,19 +3197,6 @@ details.dropdown > summary:not([role])[aria-invalid=true] {
|
|||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||
}
|
||||
|
||||
nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||
}
|
||||
nav details.dropdown > summary:not([role]) {
|
||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||
}
|
||||
nav details.dropdown > summary:not([role]):focus-visible {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
|
||||
details.dropdown > summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
|
|
@ -3261,17 +3259,9 @@ details.dropdown > summary + ul li label {
|
|||
details.dropdown > summary + ul li:has(label):hover {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
|
||||
details.dropdown[open] > summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details.dropdown[open] > summary + ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||
}
|
||||
|
||||
details.dropdown[open] > summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
|
|
@ -3283,6 +3273,24 @@ details.dropdown[open] > summary::before {
|
|||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
details.dropdown[open] > summary + ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||
}
|
||||
|
||||
nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
nav details.dropdown > summary:not([role]) {
|
||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||
}
|
||||
nav details.dropdown > summary:not([role]):focus-visible {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
|
||||
label > details.dropdown {
|
||||
margin-top: calc(var(--pico-spacing) * 0.25);
|
||||
|
|
@ -4192,57 +4200,78 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
|
||||
/**
|
||||
* Tab region
|
||||
* styling help from: https://github.com/picocss/pico/discussions/608
|
||||
* and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
|
||||
* Tabs
|
||||
* styling help from: https://codepen.io/mikestreety/pen/yVNNNm
|
||||
*/
|
||||
section[role=region] {
|
||||
@keyframes showTab {
|
||||
from {
|
||||
scale: 0.75;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
[role=tablist] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
section[role=region] details {
|
||||
display: contents;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
section[role=region] details summary {
|
||||
[role=tablist] button {
|
||||
flex-grow: 1;
|
||||
order: 0;
|
||||
margin: 0;
|
||||
padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(--pico-card-sectioning-background-color);
|
||||
list-style-type: none;
|
||||
touch-action: manipulation;
|
||||
transition: all var(--pico-transition);
|
||||
order: 1;
|
||||
padding: calc(var(--pico-spacing) * 0.625);
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--pico-primary-background);
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--pico-contrast);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--pico-transition);
|
||||
}
|
||||
section[role=region] details summary:hover {
|
||||
border-bottom-color: var(--pico-primary-border);
|
||||
background-color: var(--pico-card-background-color);
|
||||
[role=tablist] button[aria-selected=true] {
|
||||
background: var(--pico-primary-background);
|
||||
color: var(--pico-primary-inverse);
|
||||
}
|
||||
section[role=region] details summary::after {
|
||||
[role=tablist] button:hover {
|
||||
background: var(--pico-primary-hover-background);
|
||||
color: var(--pico-primary-inverse);
|
||||
}
|
||||
[role=tablist] [role=tabpanel] {
|
||||
flex-grow: 1;
|
||||
order: 99;
|
||||
width: 100%;
|
||||
padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
|
||||
background: var(--pico-accent-section-bg-color);
|
||||
animation: var(--pico-tab-animation) var(--pico-transition);
|
||||
}
|
||||
[role=tablist] [role=tabpanel]:not([hidden]) {
|
||||
display: block;
|
||||
}
|
||||
[role=tablist] [role=tabpanel][hidden] {
|
||||
display: none;
|
||||
}
|
||||
section[role=region] details > div {
|
||||
opacity: 0;
|
||||
}
|
||||
section[role=region] details[open] > summary {
|
||||
background-color: var(--pico-primary-background);
|
||||
color: var(--pico-primary-inverse) !important;
|
||||
}
|
||||
section[role=region] details[open] > summary:hover {
|
||||
background-color: var(--pico-primary-hover-background);
|
||||
}
|
||||
section[role=region] details[open] > div {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding: var(--pico-spacing);
|
||||
padding-bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition);
|
||||
[role=tablist] [role=tabpanel] > *:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 45em) {
|
||||
[role=tablist] [role=tabpanel],
|
||||
[role=tablist] button,
|
||||
[role=tablist] label {
|
||||
order: initial;
|
||||
}
|
||||
[role=tablist] label,
|
||||
[role=tablist] [role=tabpanel],
|
||||
[role=tablist] button {
|
||||
width: 100%;
|
||||
margin-top: 0.2rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
[popover] {
|
||||
border-color: var(--pico-primary);
|
||||
}
|
||||
|
|
@ -4264,52 +4293,6 @@ section[role=region] details[open] > div {
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/**
|
||||
* Notification (<dialog>)
|
||||
*/
|
||||
dialog[role=alert] {
|
||||
position: fixed;
|
||||
top: unset;
|
||||
right: var(--pico-spacing);
|
||||
bottom: var(--pico-spacing);
|
||||
left: unset;
|
||||
width: auto;
|
||||
min-width: unset;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||
border: var(--pico-border-width) solid var(--pico-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
|
||||
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
|
||||
background-color: var(--pico-primary-background);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
color: var(--pico-primary-inverse);
|
||||
font-weight: var(--pico-font-weight);
|
||||
font-size: var(--pico-font-size);
|
||||
line-height: var(--pico-line-height);
|
||||
opacity: 0;
|
||||
transition: opacity var(--pico-transition);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
dialog[role=alert] * {
|
||||
color: var(--pico-primary-inverse);
|
||||
font-weight: var(--pico-font-weight);
|
||||
font-size: var(--pico-font-size);
|
||||
line-height: var(--pico-line-height);
|
||||
}
|
||||
|
||||
dialog[data-backdrop=false][role=alert]::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
dialog[role=alert][open] {
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
|
|
|
|||
4
docs/pico.min.css
vendored
4
docs/pico.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue