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

Merge branch 'dev' into pr/141

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 11:13:56 +07:00
commit f1bde7f7f7
69 changed files with 1999 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

51
scss/components/_accordion.scss
View file

@ -5,15 +5,18 @@
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing) * 0.5);
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role]) {
color: var(--accordion-close-summary-color);
}
@if $enable-transitions {
transition: color var(--transition);
}
@ -34,12 +37,12 @@ details {
// Marker
&::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -51,14 +54,31 @@ details {
&:focus {
outline: none;
color: var(--accordion-active-summary-color);
&:not([role="button"]) {
color: var(--accordion-active-summary-color);
}
}
~ * {
margin-top: calc(var(--spacing) * 0.5);
// Type button
&[role="button"] {
width: 100%;
text-align: left;
~ * {
margin-top: 0;
// Marker
&::after {
height: calc(1rem * var(--line-height));
background-image: var(--icon-chevron-button);
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(--icon-chevron-button-inverse);
}
}
}
}
}
@ -66,15 +86,17 @@ details {
// Open
&[open] {
> summary {
margin-bottom: calc(var(--spacing) * 0.25);
margin-bottom: calc(var(--spacing));
&:not(:focus) {
color: var(--accordion-open-summary-color);
&:not([role]) {
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
}
&::after {
transform: rotate(0);
}
}
}
}
}
@ -82,8 +104,11 @@ details {
[dir="rtl"] {
details {
summary {
text-align: right;
&::after {
float: left;
background-position: left;
}
}
}

1
scss/components/_card.scss
View file

@ -5,7 +5,6 @@
article {
margin: var(--block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
overflow: hidden;
border-radius: var(--border-radius);
background: var(--card-background-color);
box-shadow: var(--card-box-shadow);

208
scss/components/_dropdown.scss Normal file
View file

@ -0,0 +1,208 @@
/**
* Dropdown ([role="list"])
*/
// Menu
details[role="list"],
li[role="list"] {
position: relative;
summary + ul,
> ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
}
}
}
}
// Marker
details[role="list"] summary,
li[role="list"] > a {
&::after {
display: block;
width: 1.5rem;
height: calc(1rem * var(--line-height));
float: right;
transform: rotate(0deg);
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
// Global dropdown only
details[role="list"] {
padding: 0;
border-bottom: none;
// Style <summary> as <select>
summary {
margin-bottom: 0;
&:not([role]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
}
// Close for details[role="list"]
&[open] summary {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
&::before {
display: block;
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
content: "";
cursor: default;
}
}
}
// All Dropdowns inside <nav>
nav [role="list"] {
summary,
a {
display: flex;
direction: ltr;
}
summary + ul,
> ul {
min-width: fit-content;
border-radius: var(--border-radius);
li a {
border-radius: 0;
}
}
}
// Dropdowns inside <nav> as nested <details>
nav [role="list"] {
summary,
summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
&[open] summary {
border-radius: var(--border-radius);
}
summary + ul {
margin-top: var(--outline-width);
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
+ ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
}
}
// Dropdowns inside a <nav> without using <details>
li[role="list"] {
// Open on hover (for mobile)
// or on active/focus (for keyboard navigation)
&:hover > ul,
a:active ~ ul,
a:focus ~ ul {
display: flex;
}
> ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
}
> a::after {
background-image: var(--icon-chevron);
}
}

17
scss/components/_modal.scss
View file

@ -29,15 +29,15 @@ dialog {
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
@if map-get($breakpoints, 'sm') {
@media (min-width: map-get($breakpoints, 'sm')) {
max-width: map-get($viewports, 'sm');
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
}
}
@if map-get($breakpoints, 'md') {
@media (min-width: map-get($breakpoints, 'md')) {
max-width: map-get($viewports, 'md');
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@ -58,7 +58,7 @@ dialog {
> footer {
text-align: right;
[role='button'] {
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
@ -92,6 +92,7 @@ dialog {
transition: opacity var(--transition);
}
&[aria-current],
&:hover,
&:active,
&:focus {
@ -103,7 +104,7 @@ dialog {
// Closed state
&:not([open]),
&[open='false'] {
&[open="false"] {
display: none;
}
}

36
scss/components/_nav.scss
View file

@ -19,32 +19,35 @@ nav {
list-style: none;
&:first-of-type {
margin-left: calc(var(--spacing) * -0.5);
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5);
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
// Minimal support for buttons and forms elements
> * {
--spacing: 0;
}
}
a {
display: block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
a,
[role="link"] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
&[aria-current],
&:hover,
&:active,
&:focus {
@ -63,11 +66,16 @@ aside {
}
li {
padding: calc(var(--spacing) * 0.5);
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
a {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}

8
scss/components/_progress.scss
View file

@ -71,6 +71,14 @@ progress {
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progressIndeterminate {
0% {
background-position: 200% 0;

7
scss/content/_button.scss
View file

@ -77,6 +77,7 @@ input[type="reset"],
box-shadow var(--transition);
}
&[aria-current],
&:hover,
&:active,
&:focus {
@ -106,6 +107,7 @@ input[type="reset"],
--color: var(--secondary-inverse);
cursor: pointer;
&[aria-current],
&:hover,
&:active,
&:focus {
@ -130,6 +132,7 @@ input[type="reset"],
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -153,6 +156,7 @@ input[type="reset"],
--background-color: transparent;
--color: var(--primary);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -169,6 +173,7 @@ input[type="reset"],
[role="button"].outline.secondary {
--color: var(--secondary);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -184,6 +189,7 @@ input[type="reset"],
[role="button"].outline.contrast {
--color: var(--contrast);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -200,6 +206,7 @@ input[type="reset"],
--color: var(--secondary-inverse);
cursor: pointer;
&[aria-current],
&:hover,
&:active,
&:focus {

8
scss/content/_typography.scss
View file

@ -68,7 +68,8 @@ ul {
// Links
// 1. Remove the gray background on active links in IE 10
a {
a,
[role="link"] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -81,6 +82,7 @@ a {
text-decoration var(--transition), box-shadow var(--transition);
}
&[aria-current],
&:hover,
&:active,
&:focus {
@ -97,7 +99,7 @@ a {
&.secondary {
--color: var(--secondary);
&:is(:hover, :active, :focus) {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
@ -110,7 +112,7 @@ a {
&.contrast {
--color: var(--contrast);
&:is(:hover, :active, :focus) {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}

1
scss/pico.scss
View file

@ -34,6 +34,7 @@
@import "components/modal"; // dialog
@import "components/nav"; // nav
@import "components/progress"; // progress
@import "components/dropdown"; // dropdown
// Utilities
@import "utilities/loading"; // aria-busy=true

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

@ -112,6 +112,13 @@
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{$grey-900};
--dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
@ -129,6 +136,8 @@
// Icons
--icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: 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='#{rgba($grey-300, .999)}' 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");
--icon-chevron-button: 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='#{rgba($white, .999)}' 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");
--icon-chevron-button-inverse: 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='#{rgba($black, .999)}' 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");
--icon-close: 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='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: 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='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: 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='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

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

@ -112,6 +112,13 @@
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
--dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
@ -129,6 +136,8 @@
// Icons
--icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: 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='#{rgba($grey-700, .999)}' 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");
--icon-chevron-button: 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='#{rgba($white, .999)}' 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");
--icon-chevron-button-inverse: 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='#{rgba($white, .999)}' 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");
--icon-close: 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='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: 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='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: 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='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

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

@ -59,6 +59,12 @@
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Spacings for nav component
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.5rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
// Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight);

2
scss/utilities/_loading.scss
View file

@ -18,7 +18,7 @@
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: '';
content: "";
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;

2
scss/utilities/_tooltip.scss
View file

@ -44,7 +44,7 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: '';
content: "";
color: var(--tooltip-background-color);
}