sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-22 00:04:36 -05:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/picocss/pico into dev

Browse Source
This commit is contained in:
KiranMantha 2022-01-20 18:29:34 +05:30
commit 30ff7bc212
39 changed files with 1631 additions and 4738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -38,6 +38,7 @@ Shipped with two beautiful color themes, automatically enabled according to the
- [Usage](#usage)
- [Class-less version](#class-less-version)
- [Examples](#examples)
- [Limitations](#limitations)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Copyright and license](#copyright-and-license)
@ -134,6 +135,10 @@ Minimalist templates to discover Pico in action:
All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
## Limitations
Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
## Documentation
**Getting started**

83
css/pico.classless.css
View File

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -168,11 +168,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -907,7 +909,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -916,7 +918,7 @@ button,
input[type=submit],
input[type=button],
input[type=reset],
a[role=button] {
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -945,18 +947,19 @@ input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
a[role=button]:hover,
a[role=button]:active,
a[role=button]:focus {
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
@ -981,7 +984,7 @@ input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
}
@ -1353,12 +1356,9 @@ label > input, label > select, label > textarea {
background-image: none;
}
[type=checkbox][role=switch]:checked::before {
margin-right: 0;
margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[type=checkbox][aria-invalid=false],
@ -1397,25 +1397,36 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[type=file] {
@ -1628,14 +1639,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
@ -1663,12 +1675,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**
@ -1772,7 +1786,6 @@ details summary {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
list-style-type: none;
cursor: pointer;
transition: color var(--transition);
}
@ -1876,6 +1889,10 @@ dialog {
border: none;
background-color: var(--modal-overlay-background-color);
}
dialog article {
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;

2
css/pico.classless.css.map
View File

File diff suppressed because one or more lines are too long

4
css/pico.classless.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View File

File diff suppressed because one or more lines are too long

158
css/pico.css
View File

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -173,11 +173,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -958,7 +960,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -967,7 +969,7 @@ button,
input[type=submit],
input[type=button],
input[type=reset],
a[role=button] {
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -996,42 +998,28 @@ input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
a[role=button]:hover,
a[role=button]:active,
a[role=button]:focus {
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset].secondary,
a[role=button].secondary {
input[type=reset],
[role=button].secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
@ -1044,28 +1032,30 @@ input[type=submit].secondary:focus,
input[type=button].secondary:hover,
input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset].secondary:hover,
input[type=reset].secondary:active,
input[type=reset].secondary:focus,
a[role=button].secondary:hover,
a[role=button].secondary:active,
a[role=button].secondary:focus {
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button].secondary:hover,
[role=button].secondary:active,
[role=button].secondary:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
button.secondary:focus,
input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset].secondary:focus,
a[role=button].secondary:focus {
input[type=reset]:focus,
[role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
a[role=button].contrast {
[role=button].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
@ -1080,25 +1070,27 @@ input[type=button].contrast:focus,
input[type=reset].contrast:hover,
input[type=reset].contrast:active,
input[type=reset].contrast:focus,
a[role=button].contrast:hover,
a[role=button].contrast:active,
a[role=button].contrast:focus {
[role=button].contrast:hover,
[role=button].contrast:active,
[role=button].contrast:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
button.contrast:focus,
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
a[role=button].contrast:focus {
[role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
a[role=button].outline {
[role=button].outline {
--background-color: transparent;
--color: var(--primary);
}
@ -1112,17 +1104,18 @@ input[type=button].outline:focus,
input[type=reset].outline:hover,
input[type=reset].outline:active,
input[type=reset].outline:focus,
a[role=button].outline:hover,
a[role=button].outline:active,
a[role=button].outline:focus {
[role=button].outline:hover,
[role=button].outline:active,
[role=button].outline:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
button.outline.secondary,
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
a[role=button].outline.secondary {
[role=button].outline.secondary {
--color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@ -1135,16 +1128,17 @@ input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus,
a[role=button].outline.secondary:hover,
a[role=button].outline.secondary:active,
a[role=button].outline.secondary:focus {
[role=button].outline.secondary:hover,
[role=button].outline.secondary:active,
[role=button].outline.secondary:focus {
--color: var(--secondary-hover);
}
button.outline.contrast,
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
a[role=button].outline.contrast {
[role=button].outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@ -1157,9 +1151,9 @@ input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus,
a[role=button].outline.contrast:hover,
a[role=button].outline.contrast:active,
a[role=button].outline.contrast:focus {
[role=button].outline.contrast:hover,
[role=button].outline.contrast:active,
[role=button].outline.contrast:focus {
--color: var(--contrast-hover);
}
@ -1168,7 +1162,7 @@ input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
}
@ -1540,12 +1534,9 @@ label > input, label > select, label > textarea {
background-image: none;
}
[type=checkbox][role=switch]:checked::before {
margin-right: 0;
margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[type=checkbox][aria-invalid=false],
@ -1584,25 +1575,36 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[type=file] {
@ -1815,14 +1817,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
@ -1850,12 +1853,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**
@ -1959,7 +1964,6 @@ details summary {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
list-style-type: none;
cursor: pointer;
transition: color var(--transition);
}
@ -2063,6 +2067,10 @@ dialog {
border: none;
background-color: var(--modal-overlay-background-color);
}
dialog article {
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;

2
css/pico.css.map
View File

File diff suppressed because one or more lines are too long

83
css/pico.fluid.classless.css
View File

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -168,11 +168,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -877,7 +879,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -886,7 +888,7 @@ button,
input[type=submit],
input[type=button],
input[type=reset],
a[role=button] {
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -915,18 +917,19 @@ input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
a[role=button]:hover,
a[role=button]:active,
a[role=button]:focus {
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
@ -951,7 +954,7 @@ input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
}
@ -1323,12 +1326,9 @@ label > input, label > select, label > textarea {
background-image: none;
}
[type=checkbox][role=switch]:checked::before {
margin-right: 0;
margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
-webkit-margin-end: 0;
margin-inline-end: 0;
}
[type=checkbox][aria-invalid=false],
@ -1367,25 +1367,36 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[type=file] {
@ -1598,14 +1609,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
@ -1633,12 +1645,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**
@ -1742,7 +1756,6 @@ details summary {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
list-style-type: none;
cursor: pointer;
transition: color var(--transition);
}
@ -1846,6 +1859,10 @@ dialog {
border: none;
background-color: var(--modal-overlay-background-color);
}
dialog article {
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;

2
css/pico.fluid.classless.css.map
View File

File diff suppressed because one or more lines are too long

4
css/pico.fluid.classless.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View File

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View File

File diff suppressed because one or more lines are too long

106
css/pico.slim.css
View File

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example
@ -105,11 +105,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -887,7 +889,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -896,7 +898,7 @@ button,
input[type=submit],
input[type=button],
input[type=reset],
a[role=button] {
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -924,42 +926,28 @@ input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
a[role=button]:hover,
a[role=button]:active,
a[role=button]:focus {
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset].secondary,
a[role=button].secondary {
input[type=reset],
[role=button].secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
@ -972,28 +960,30 @@ input[type=submit].secondary:focus,
input[type=button].secondary:hover,
input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset].secondary:hover,
input[type=reset].secondary:active,
input[type=reset].secondary:focus,
a[role=button].secondary:hover,
a[role=button].secondary:active,
a[role=button].secondary:focus {
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button].secondary:hover,
[role=button].secondary:active,
[role=button].secondary:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
button.secondary:focus,
input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset].secondary:focus,
a[role=button].secondary:focus {
input[type=reset]:focus,
[role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
a[role=button].contrast {
[role=button].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
@ -1008,25 +998,27 @@ input[type=button].contrast:focus,
input[type=reset].contrast:hover,
input[type=reset].contrast:active,
input[type=reset].contrast:focus,
a[role=button].contrast:hover,
a[role=button].contrast:active,
a[role=button].contrast:focus {
[role=button].contrast:hover,
[role=button].contrast:active,
[role=button].contrast:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
button.contrast:focus,
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
a[role=button].contrast:focus {
[role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
a[role=button].outline {
[role=button].outline {
--background-color: transparent;
--color: var(--primary);
}
@ -1040,17 +1032,18 @@ input[type=button].outline:focus,
input[type=reset].outline:hover,
input[type=reset].outline:active,
input[type=reset].outline:focus,
a[role=button].outline:hover,
a[role=button].outline:active,
a[role=button].outline:focus {
[role=button].outline:hover,
[role=button].outline:active,
[role=button].outline:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
button.outline.secondary,
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
a[role=button].outline.secondary {
[role=button].outline.secondary {
--color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@ -1063,16 +1056,17 @@ input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus,
a[role=button].outline.secondary:hover,
a[role=button].outline.secondary:active,
a[role=button].outline.secondary:focus {
[role=button].outline.secondary:hover,
[role=button].outline.secondary:active,
[role=button].outline.secondary:focus {
--color: var(--secondary-hover);
}
button.outline.contrast,
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
a[role=button].outline.contrast {
[role=button].outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@ -1085,9 +1079,9 @@ input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus,
a[role=button].outline.contrast:hover,
a[role=button].outline.contrast:active,
a[role=button].outline.contrast:focus {
[role=button].outline.contrast:hover,
[role=button].outline.contrast:active,
[role=button].outline.contrast:focus {
--color: var(--contrast-hover);
}
@ -1096,7 +1090,7 @@ input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
}
@ -1393,12 +1387,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**

2
css/pico.slim.css.map
View File

File diff suppressed because one or more lines are too long

4
css/pico.slim.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View File

File diff suppressed because one or more lines are too long

6
css/themes/default.css
View File

@ -169,11 +169,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}

2
css/themes/default.css.map
View File

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/buttons.html
View File

File diff suppressed because one or more lines are too long

4
docs/modal.html
View File

@ -35,7 +35,7 @@
&lt;<b>dialog</b> <i>id</i>=<u>"modal-example"</u>&gt;
&lt;<b>article</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#close"</u>
<i>aria-label</i>=<u>"Close"</u>&gt;
<i>aria-label</i>=<u>"Close"</u>
<i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
@ -48,7 +48,7 @@
&lt;/<b>p</b>&gt;
&lt;<b>footer</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#cancel"</u>
<i>role</i>=<u>"button"</u>&gt;
<i>role</i>=<u>"button"</u>
<i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;

2
docs/src/buttons.html
View File

@ -30,7 +30,7 @@
</footer>
</article>
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code>&lt;<b>a</b> <i>role</i>=<u>"button"&gt;</u></code> if you need an inline element.</p>
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><i>role</i>=<u>"button"</code> on an inline element if you need an inline button.</p>
<article aria-label="Inline buttons examples">
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
<a href="#" onclick="event.preventDefault()" role="button">Link</a>

4
docs/src/modal.html
View File

@ -106,7 +106,7 @@
&lt;<b>dialog</b> <i>id</i>=<u>"modal-example"</u>&gt;
&lt;<b>article</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#close"</u>
<i>aria-label</i>=<u>"Close"</u>&gt;
<i>aria-label</i>=<u>"Close"</u>
<i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
@ -119,7 +119,7 @@
&lt;/<b>p</b>&gt;
&lt;<b>footer</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#cancel"</u>
<i>role</i>=<u>"button"</u>&gt;
<i>role</i>=<u>"button"</u>
<i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;

20
docs/src/tables.html
View File

@ -58,6 +58,16 @@
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">#</th>
<td>Total</td>
<td>Total</td>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
</tfoot>
</table>
</figure>
@ -98,6 +108,16 @@
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>tbody</b>&gt;
&lt;<b>tfoot</b>&gt;
&lt;<b>tr</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>tfoot</b>&gt;
&lt;/<b>table</b>&gt;</code></pre>
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>

12
docs/tables.html
View File

File diff suppressed because one or more lines are too long

2384
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@picocss/pico",
"version": "1.4.2",
"version": "1.4.4",
"description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",
@ -79,20 +79,20 @@
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
},
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"autoprefixer": "^10.4.0",
"@babel/preset-env": "^7.16.8",
"autoprefixer": "^10.4.2",
"clean-css-cli": "^5.5.0",
"css-declaration-sorter": "^6.1.3",
"css-declaration-sorter": "^6.1.4",
"html-includes": "^4.4.1",
"nodemon": "^2.0.15",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0",
"postcss-scss": "^4.0.2",
"rollup": "^2.61.1",
"sass": "^1.45.0",
"postcss-scss": "^4.0.3",
"rollup": "^2.64.0",
"sass": "^1.48.0",
"uglify-js": "^3.14.5"
},
"browserslist": [

1
scss/components/_accordion.scss
View File

@ -12,7 +12,6 @@ details {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
list-style-type: none;
cursor: pointer;
@if $enable-transitions {

3
scss/components/_modal.scss
View File

@ -26,6 +26,9 @@ dialog {
// Content
article {
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');

209
scss/content/_button.scss
View File

@ -43,7 +43,7 @@ button {
margin-bottom: var(--spacing);
}
a[role="button"] {
[role="button"] {
display: inline-block;
text-decoration: none;
}
@ -52,7 +52,7 @@ button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
[role="button"] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -83,6 +83,7 @@ a[role="button"] {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
&:focus {
@ -91,116 +92,136 @@ a[role="button"] {
}
}
// Secondary button without .class
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
// .secondary, .contrast & .outline
@if $enable-classes {
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
// Secondary
button.secondary,
input[type="submit"].secondary,
input[type="button"].secondary,
input[type="reset"],
[role="button"].secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
// Contrast
button.contrast,
input[type="submit"].contrast,
input[type="button"].contrast,
input[type="reset"].contrast,
[role="button"].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
button.outline,
input[type="submit"].outline,
input[type="button"].outline,
input[type="reset"].outline,
[role="button"].outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="button"].outline.secondary,
input[type="reset"].outline.secondary,
[role="button"].outline.secondary {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="button"].outline.contrast,
input[type="reset"].outline.contrast,
[role="button"].outline.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
--color: var(--contrast-hover);
}
}
}
// .secondary, .contrast & .outline
@if $enable-classes {
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
// Secondary
&.secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
@else {
// Secondary button without .class
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
// Contrast
&.contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
&.outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
&.outline.secondary {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
&.outline.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
--color: var(--contrast-hover);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
}
// Button [disabled]
// 1. Links without href are disabled by default
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"]:not([href]),
a[role="button"][disabled] {
a[role="button"]:not([href]), // 1
[role="button"][disabled] {
opacity: 0.5;
pointer-events: none;
}

68
scss/content/_form-alt-input-types.scss
View File

@ -34,25 +34,49 @@
}
// Date & Time
:not([dir="rtl"]) {
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
&[type="date"],
&[type="datetime-local"],
&[type="month"],
&[type="time"],
&[type="week"] {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(--icon-time);
}
}
// Calendar picker
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0;
}
}
[dir="rtl"] {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
&::-webkit-calendar-picker-indicator {
opacity: 0;
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
text-align: right;
}
}
@ -213,20 +237,20 @@
}
// Search
[type="search"] {
border-radius: 5rem;
@if $enable-important {
padding-left: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
&[type="search"] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
}
// Cancel button
// Cancel button
[type="search"] {
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;

2
scss/content/_form-checkbox-radio.scss
View File

@ -114,10 +114,8 @@
background-image: none;
&::before {
margin-right: 0;
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-end: 0;
}
}
}

12
scss/content/_table.scss
View File

@ -33,16 +33,20 @@ td {
text-align: start;
}
// Rows
tr {
background-color: var(--background-color);
// Footer
tfoot {
th,
td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
}
// Striped
table {
&[role="grid"] {
tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
}
}

2
scss/pico.scss
View File

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/

2
scss/pico.slim.scss
View File

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example

5
scss/themes/default/_styles.scss
View File

@ -211,14 +211,15 @@ h5 {
}
// Table
thead {
thead,
tfoot {
th,
td {
--border-width: 3px;
}
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}

3142
yarn.lock
View File

File diff suppressed because it is too large Load Diff