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

Merge branch 'picocss:master' into feat/add-issue-templates

Browse source
This commit is contained in:
Tushar Nankani 2022-01-16 22:27:57 +05:30 • committed by GitHub
commit 1812455ff2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 593 additions and 627 deletions
Download patch file Download diff file Expand all files Collapse all files

43
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.3 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -909,7 +909,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -918,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);
@ -947,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);
}
@ -983,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;
}
@ -1355,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],
@ -1400,10 +1398,12 @@ label > input, label > select, label > textarea {
}
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] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
--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;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
@ -1415,6 +1415,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[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;
}
@ -1425,13 +1428,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
--color: var(--muted-color);
@ -1790,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);
}
@ -1894,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

118
css/pico.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.3 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -960,7 +960,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -969,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);
@ -998,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);
@ -1046,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);
@ -1082,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);
}
@ -1114,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,
@ -1137,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,
@ -1159,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);
}
@ -1170,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;
}
@ -1542,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],
@ -1587,10 +1576,12 @@ label > input, label > select, label > textarea {
}
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] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
--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;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
@ -1602,6 +1593,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[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;
}
@ -1612,13 +1606,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
--color: var(--muted-color);
@ -1977,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);
}
@ -2081,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

43
css/pico.fluid.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.3 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -879,7 +879,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -888,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);
@ -917,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);
}
@ -953,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;
}
@ -1325,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],
@ -1370,10 +1368,12 @@ label > input, label > select, label > textarea {
}
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] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
--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;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
@ -1385,6 +1385,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[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;
}
@ -1395,13 +1398,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
--color: var(--muted-color);
@ -1760,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);
}
@ -1864,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

92
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.3 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example
@ -889,7 +889,7 @@ button {
margin-bottom: var(--spacing);
}
a[role=button] {
[role=button] {
display: inline-block;
text-decoration: none;
}
@ -898,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);
@ -926,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);
@ -974,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);
@ -1010,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);
}
@ -1042,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,
@ -1065,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,
@ -1087,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);
}
@ -1098,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;
}

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

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;

630
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.3",
"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;
}

15
scss/content/_form-alt-input-types.scss
View file

@ -41,10 +41,12 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
&[type="month"],
&[type="time"],
&[type="week"] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
--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;
}
@ -61,6 +63,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
[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;
}
}
@ -72,10 +77,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
[type="time"],
[type="week"] {
text-align: right;
&::-webkit-calendar-picker-indicator {
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;
}
}
}

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.3 (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.3 (https://picocss.com)
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example