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

Merge branch 'dev' into feat-modal

Browse source
This commit is contained in:
Lucas Larroche 2021-10-31 08:50:55 +07:00
commit 41ef519d32
35 changed files with 2121 additions and 2262 deletions
Download patch file Download diff file Expand all files Collapse all files

112
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.4.0 (https://picocss.com) * Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -495,8 +495,8 @@ html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
@ -645,7 +645,7 @@ a {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
-webkit-text-decoration: var(--text-decoration); -webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration); text-decoration: var(--text-decoration);
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
@ -780,9 +780,9 @@ ol {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-end: 0; -webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
-webkit-padding-start: var(--spacing); -webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
} }
ul li, ul li,
ol li { ol li {
@ -807,9 +807,9 @@ blockquote {
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none; -webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
-webkit-border-start: 0.25rem solid var(--blockquote-border-color); -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5); margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@ -1069,7 +1069,7 @@ textarea {
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) ); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
fieldset { fieldset {
@ -1095,8 +1095,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle; vertical-align: middle;
} }
@ -1148,24 +1148,33 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input:not([type=checkbox]):not([type=radio])[aria-invalid],
select[aria-invalid], select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea[aria-invalid] { textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-webkit-padding-start: var(--form-element-spacing-horizontal) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(--form-element-spacing-horizontal) !important;
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
} }
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false], input[aria-invalid=false],
select[aria-invalid=false], select[aria-invalid=false],
textarea[aria-invalid=false] { textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color); --border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
} }
input[aria-invalid=false]:active, input[aria-invalid=false]:focus, input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active, select[aria-invalid=false]:active,
@ -1180,7 +1189,6 @@ input[aria-invalid=true],
select[aria-invalid=true], select[aria-invalid=true],
textarea[aria-invalid=true] { textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color); --border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
} }
input[aria-invalid=true]:active, input[aria-invalid=true]:focus, input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active, select[aria-invalid=true]:active,
@ -1221,9 +1229,9 @@ select:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1263,9 +1271,9 @@ label > input, label > select, label > textarea {
margin-right: 0.375em; margin-right: 0.375em;
margin-left: 0; margin-left: 0;
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1346,9 +1354,25 @@ label > input, label > select, label > textarea {
margin-right: 0; margin-right: 0;
margin-left: calc(1.125em - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
-webkit-margin-end: 0; -webkit-margin-end: 0;
margin-inline-end: 0; margin-inline-end: 0;
-webkit-margin-start: calc(1.125em - var(--border-width)); -webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} }
/** /**
@ -1409,9 +1433,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1434,9 +1458,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1466,9 +1490,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1603,7 +1627,7 @@ label > input, label > select, label > textarea {
[type=search] { [type=search] {
border-radius: 5rem; border-radius: 5rem;
padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important; padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1972,7 +1996,7 @@ progress::-moz-progress-bar {
progress:indeterminate { progress:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
-webkit-animation: progressIndeterminate 1s linear infinite; -webkit-animation: progressIndeterminate 1s linear infinite;
animation: progressIndeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -2016,7 +2040,7 @@ progress::-moz-progress-bar {
vertical-align: text-bottom; vertical-align: text-bottom;
vertical-align: -0.125em; vertical-align: -0.125em;
-webkit-animation: spinner 0.75s linear infinite; -webkit-animation: spinner 0.75s linear infinite;
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
content: ""; content: "";
opacity: var(--loading-spinner-opacity); opacity: var(--loading-spinner-opacity);
} }
@ -2024,9 +2048,9 @@ progress::-moz-progress-bar {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5); -webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
[aria-busy=true]:not(input):not(select):not(textarea):empty { [aria-busy=true]:not(input):not(select):not(textarea):empty {
text-align: center; text-align: center;
@ -2098,13 +2122,13 @@ a[aria-busy=true] {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
-webkit-animation-name: slide; -webkit-animation-name: slide;
animation-name: slide; animation-name: slide;
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: slideCaret;
animation-name: slideCaret; animation-name: slideCaret;
} }
@-webkit-keyframes slide { @-webkit-keyframes slide {
@ -2200,13 +2224,15 @@ textarea,
:not([aria-busy=true])::after { :not([aria-busy=true])::after {
background-attachment: initial !important; background-attachment: initial !important;
-webkit-animation-duration: 1ms !important; -webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important; animation-duration: 1ms !important;
-webkit-animation-delay: -1ms !important; -webkit-animation-delay: -1ms !important;
animation-delay: -1ms !important; animation-delay: -1ms !important;
-webkit-animation-iteration-count: 1 !important; -webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
transition-delay: 0s !important; transition-delay: 0s !important;
transition-duration: 0s !important; transition-duration: 0s !important;
} }
} }
/*# sourceMappingURL=pico.classless.css.map */

1
css/pico.classless.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.classless.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

112
css/pico.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.4.0 (https://picocss.com) * Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -495,8 +495,8 @@ html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
@ -670,7 +670,7 @@ a {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
-webkit-text-decoration: var(--text-decoration); -webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration); text-decoration: var(--text-decoration);
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
@ -823,9 +823,9 @@ ol {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-end: 0; -webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
-webkit-padding-start: var(--spacing); -webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
} }
ul li, ul li,
ol li { ol li {
@ -850,9 +850,9 @@ blockquote {
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none; -webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
-webkit-border-start: 0.25rem solid var(--blockquote-border-color); -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5); margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@ -1248,7 +1248,7 @@ textarea {
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) ); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
fieldset { fieldset {
@ -1274,8 +1274,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle; vertical-align: middle;
} }
@ -1327,24 +1327,33 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input:not([type=checkbox]):not([type=radio])[aria-invalid],
select[aria-invalid], select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea[aria-invalid] { textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-webkit-padding-start: var(--form-element-spacing-horizontal) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(--form-element-spacing-horizontal) !important;
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
} }
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false], input[aria-invalid=false],
select[aria-invalid=false], select[aria-invalid=false],
textarea[aria-invalid=false] { textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color); --border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
} }
input[aria-invalid=false]:active, input[aria-invalid=false]:focus, input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active, select[aria-invalid=false]:active,
@ -1359,7 +1368,6 @@ input[aria-invalid=true],
select[aria-invalid=true], select[aria-invalid=true],
textarea[aria-invalid=true] { textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color); --border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
} }
input[aria-invalid=true]:active, input[aria-invalid=true]:focus, input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active, select[aria-invalid=true]:active,
@ -1400,9 +1408,9 @@ select:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1442,9 +1450,9 @@ label > input, label > select, label > textarea {
margin-right: 0.375em; margin-right: 0.375em;
margin-left: 0; margin-left: 0;
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1525,9 +1533,25 @@ label > input, label > select, label > textarea {
margin-right: 0; margin-right: 0;
margin-left: calc(1.125em - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
-webkit-margin-end: 0; -webkit-margin-end: 0;
margin-inline-end: 0; margin-inline-end: 0;
-webkit-margin-start: calc(1.125em - var(--border-width)); -webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} }
/** /**
@ -1588,9 +1612,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1613,9 +1637,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1645,9 +1669,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1782,7 +1806,7 @@ label > input, label > select, label > textarea {
[type=search] { [type=search] {
border-radius: 5rem; border-radius: 5rem;
padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important; padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -2151,7 +2175,7 @@ progress::-moz-progress-bar {
progress:indeterminate { progress:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
-webkit-animation: progressIndeterminate 1s linear infinite; -webkit-animation: progressIndeterminate 1s linear infinite;
animation: progressIndeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -2195,7 +2219,7 @@ progress::-moz-progress-bar {
vertical-align: text-bottom; vertical-align: text-bottom;
vertical-align: -0.125em; vertical-align: -0.125em;
-webkit-animation: spinner 0.75s linear infinite; -webkit-animation: spinner 0.75s linear infinite;
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
content: ""; content: "";
opacity: var(--loading-spinner-opacity); opacity: var(--loading-spinner-opacity);
} }
@ -2203,9 +2227,9 @@ progress::-moz-progress-bar {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5); -webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
[aria-busy=true]:not(input):not(select):not(textarea):empty { [aria-busy=true]:not(input):not(select):not(textarea):empty {
text-align: center; text-align: center;
@ -2277,13 +2301,13 @@ a[aria-busy=true] {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
-webkit-animation-name: slide; -webkit-animation-name: slide;
animation-name: slide; animation-name: slide;
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: slideCaret;
animation-name: slideCaret; animation-name: slideCaret;
} }
@-webkit-keyframes slide { @-webkit-keyframes slide {
@ -2379,13 +2403,15 @@ textarea,
:not([aria-busy=true])::after { :not([aria-busy=true])::after {
background-attachment: initial !important; background-attachment: initial !important;
-webkit-animation-duration: 1ms !important; -webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important; animation-duration: 1ms !important;
-webkit-animation-delay: -1ms !important; -webkit-animation-delay: -1ms !important;
animation-delay: -1ms !important; animation-delay: -1ms !important;
-webkit-animation-iteration-count: 1 !important; -webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
transition-delay: 0s !important; transition-delay: 0s !important;
transition-duration: 0s !important; transition-duration: 0s !important;
} }
} }
/*# sourceMappingURL=pico.css.map */

1
css/pico.css.map Normal file
View file

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.4.0 (https://picocss.com) * Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -495,8 +495,8 @@ html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
@ -615,7 +615,7 @@ a {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
-webkit-text-decoration: var(--text-decoration); -webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration); text-decoration: var(--text-decoration);
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
@ -750,9 +750,9 @@ ol {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-end: 0; -webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
-webkit-padding-start: var(--spacing); -webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
} }
ul li, ul li,
ol li { ol li {
@ -777,9 +777,9 @@ blockquote {
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none; -webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
-webkit-border-start: 0.25rem solid var(--blockquote-border-color); -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5); margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@ -1039,7 +1039,7 @@ textarea {
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) ); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
fieldset { fieldset {
@ -1065,8 +1065,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle; vertical-align: middle;
} }
@ -1118,24 +1118,33 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input:not([type=checkbox]):not([type=radio])[aria-invalid],
select[aria-invalid], select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea[aria-invalid] { textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important; padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-webkit-padding-start: var(--form-element-spacing-horizontal) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(--form-element-spacing-horizontal) !important;
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
} }
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false], input[aria-invalid=false],
select[aria-invalid=false], select[aria-invalid=false],
textarea[aria-invalid=false] { textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color); --border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
} }
input[aria-invalid=false]:active, input[aria-invalid=false]:focus, input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active, select[aria-invalid=false]:active,
@ -1150,7 +1159,6 @@ input[aria-invalid=true],
select[aria-invalid=true], select[aria-invalid=true],
textarea[aria-invalid=true] { textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color); --border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
} }
input[aria-invalid=true]:active, input[aria-invalid=true]:focus, input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active, select[aria-invalid=true]:active,
@ -1191,9 +1199,9 @@ select:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1233,9 +1241,9 @@ label > input, label > select, label > textarea {
margin-right: 0.375em; margin-right: 0.375em;
margin-left: 0; margin-left: 0;
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1316,9 +1324,25 @@ label > input, label > select, label > textarea {
margin-right: 0; margin-right: 0;
margin-left: calc(1.125em - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
-webkit-margin-end: 0; -webkit-margin-end: 0;
margin-inline-end: 0; margin-inline-end: 0;
-webkit-margin-start: calc(1.125em - var(--border-width)); -webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} }
/** /**
@ -1379,9 +1403,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1404,9 +1428,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1436,9 +1460,9 @@ label > input, label > select, label > textarea {
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(--spacing) / 2);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) / 2); -webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(--spacing) / 2);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -1573,7 +1597,7 @@ label > input, label > select, label > textarea {
[type=search] { [type=search] {
border-radius: 5rem; border-radius: 5rem;
padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important; padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1942,7 +1966,7 @@ progress::-moz-progress-bar {
progress:indeterminate { progress:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
-webkit-animation: progressIndeterminate 1s linear infinite; -webkit-animation: progressIndeterminate 1s linear infinite;
animation: progressIndeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -1986,7 +2010,7 @@ progress::-moz-progress-bar {
vertical-align: text-bottom; vertical-align: text-bottom;
vertical-align: -0.125em; vertical-align: -0.125em;
-webkit-animation: spinner 0.75s linear infinite; -webkit-animation: spinner 0.75s linear infinite;
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
content: ""; content: "";
opacity: var(--loading-spinner-opacity); opacity: var(--loading-spinner-opacity);
} }
@ -1994,9 +2018,9 @@ progress::-moz-progress-bar {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5); -webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
-webkit-margin-start: 0; -webkit-margin-start: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
[aria-busy=true]:not(input):not(select):not(textarea):empty { [aria-busy=true]:not(input):not(select):not(textarea):empty {
text-align: center; text-align: center;
@ -2068,13 +2092,13 @@ a[aria-busy=true] {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
-webkit-animation-name: slide; -webkit-animation-name: slide;
animation-name: slide; animation-name: slide;
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: slideCaret;
animation-name: slideCaret; animation-name: slideCaret;
} }
@-webkit-keyframes slide { @-webkit-keyframes slide {
@ -2170,13 +2194,15 @@ textarea,
:not([aria-busy=true])::after { :not([aria-busy=true])::after {
background-attachment: initial !important; background-attachment: initial !important;
-webkit-animation-duration: 1ms !important; -webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important; animation-duration: 1ms !important;
-webkit-animation-delay: -1ms !important; -webkit-animation-delay: -1ms !important;
animation-delay: -1ms !important; animation-delay: -1ms !important;
-webkit-animation-iteration-count: 1 !important; -webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
transition-delay: 0s !important; transition-delay: 0s !important;
transition-duration: 0s !important; transition-duration: 0s !important;
} }
} }
/*# sourceMappingURL=pico.fluid.classless.css.map */

1
css/pico.fluid.classless.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.fluid.classless.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

50
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.4.0 (https://picocss.com) * Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example
@ -419,8 +419,8 @@ html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
@ -594,7 +594,7 @@ a {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
-webkit-text-decoration: var(--text-decoration); -webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration); text-decoration: var(--text-decoration);
} }
a:hover, a:active, a:focus { a:hover, a:active, a:focus {
--color: var(--primary-hover); --color: var(--primary-hover);
@ -744,9 +744,9 @@ ol {
padding-right: 0; padding-right: 0;
padding-left: var(--spacing); padding-left: var(--spacing);
-webkit-padding-end: 0; -webkit-padding-end: 0;
padding-inline-end: 0; padding-inline-end: 0;
-webkit-padding-start: var(--spacing); -webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing); padding-inline-start: var(--spacing);
} }
ul li, ul li,
ol li { ol li {
@ -771,9 +771,9 @@ blockquote {
border-right: none; border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color); border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none; -webkit-border-end: none;
border-inline-end: none; border-inline-end: none;
-webkit-border-start: 0.25rem solid var(--blockquote-border-color); -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color); border-inline-start: 0.25rem solid var(--blockquote-border-color);
} }
blockquote footer { blockquote footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5); margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@ -1168,7 +1168,7 @@ textarea {
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) ); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
fieldset { fieldset {
@ -1194,8 +1194,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle; vertical-align: middle;
} }
@ -1246,24 +1246,33 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input:not([type=checkbox]):not([type=radio])[aria-invalid],
select[aria-invalid], select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea[aria-invalid] { textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
} }
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false], input[aria-invalid=false],
select[aria-invalid=false], select[aria-invalid=false],
textarea[aria-invalid=false] { textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color); --border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
} }
input[aria-invalid=false]:active, input[aria-invalid=false]:focus, input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active, select[aria-invalid=false]:active,
@ -1276,7 +1285,6 @@ input[aria-invalid=true],
select[aria-invalid=true], select[aria-invalid=true],
textarea[aria-invalid=true] { textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color); --border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
} }
input[aria-invalid=true]:active, input[aria-invalid=true]:focus, input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active, select[aria-invalid=true]:active,
@ -1315,9 +1323,9 @@ select:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1408,3 +1416,5 @@ textarea,
[dir=rtl] { [dir=rtl] {
direction: rtl; direction: rtl;
} }
/*# sourceMappingURL=pico.slim.css.map */

1
css/pico.slim.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.slim.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.css
View file

@ -470,3 +470,5 @@ kbd {
--icon-valid: 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(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-valid: 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(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%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(183, 28, 28, 0.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"); --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(183, 28, 28, 0.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");
} }
/*# sourceMappingURL=default.css.map */

1
css/themes/default.css.map Normal file
View file

File diff suppressed because one or more lines are too long

3
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/themes/default.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.css
View file

@ -444,3 +444,5 @@ body > nav ul:first-of-type li:nth-of-type(2) {
right: var(--spacing); right: var(--spacing);
} }
} }
/*# sourceMappingURL=pico.docs.css.map */

1
docs/css/pico.docs.css.map Normal file
View file

File diff suppressed because one or more lines are too long

3
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/css/pico.docs.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/index.html
View file

@ -1325,6 +1325,7 @@
</main><!-- ./ Main --> </main><!-- ./ Main -->
<!-- JavaScript --> <!-- JavaScript -->
<script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script src="js/pico.docs.min.js"></script> <script src="js/pico.docs.min.js"></script>
</body> </body>

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

151
docs/js/src/most-visible.js
View file

@ -1,151 +0,0 @@
/**
* Most Visible v1.5.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
(function (root, factory) {
// Universal Module Definition
/* jshint strict:false */
/* global define: false, module: false */
if (typeof define === 'function' && define.amd) {
define([], function () {
return factory(root);
});
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(root);
} else {
root.mostVisible = factory(root);
}
})(typeof self !== 'undefined' ? self : this, function (window) {
/* jshint unused: vars */
'use strict';
/**
* MostVisible constructor
*
* @param {NodeList|string} elements
* @param {{}} options
* @constructor
*/
function MostVisible(elements, options) {
if (!(this instanceof MostVisible)) {
return new MostVisible(elements, options).getMostVisible();
}
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
this.elements = elements;
this.options = extend({}, MostVisible.defaults, options);
}
/**
* MostVisible default options
*
* @namespace
* @property {{}} defaults Default options hash.
* @property {boolean} defaults.percentage Whether to calculate visibility as a percentage of height.
* @property {number} defaults.offset An offset to take into account when calculating visibility.
*/
MostVisible.defaults = {
percentage: false,
offset: 0,
};
MostVisible.prototype = {
/**
* Returns the most visible element from the instance's NodeList.
*
* @returns {HTMLElement} Most visible element.
*/
getMostVisible: function () {
var _this = this;
var viewportHeight = document.documentElement.clientHeight;
return Array.prototype.reduce.call(
this.elements,
function (carry, element) {
var value = _this.getVisibleHeight(element, viewportHeight);
return value > carry[0] ? [value, element] : carry;
},
[0, null]
)[1];
},
/**
* Returns the visible height of an element.
*
* @param {HTMLElement} element Element to check the visibility of.
* @param {number} viewportHeight
* @returns {number} Visible height of the element in pixels or a percentage of the element's total height.
*/
getVisibleHeight: function (element, viewportHeight) {
var rect = element.getBoundingClientRect(),
rectTopOffset = rect.top - this.options.offset,
rectBottomOffset = rect.bottom - this.options.offset,
height = rect.bottom - rect.top,
visible = {
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
};
var visiblePx = 0;
if (visible.top && visible.bottom) {
// Whole element is visible
visiblePx = height;
} else if (visible.top) {
visiblePx = viewportHeight - rect.top;
} else if (visible.bottom) {
visiblePx = rectBottomOffset;
} else if (height > viewportHeight && rectTopOffset < 0) {
var absTop = Math.abs(rectTopOffset);
if (absTop < height) {
// Part of the element is visible
visiblePx = height - absTop;
}
}
if (this.options.percentage) {
return (visiblePx / height) * 100;
}
return visiblePx;
},
};
MostVisible.makeJQueryPlugin = function ($) {
if (!$) {
return;
}
$.fn.mostVisible = function (options) {
var instance = new MostVisible(this.get(), options);
return this.filter(instance.getMostVisible());
};
}; // Try adding the jQuery plugin to window.jQuery
MostVisible.makeJQueryPlugin(window.jQuery);
/**
* Extends obj by adding the properties of all other objects passed to the function.
*
* @param {...{}} obj
* @returns {{}} The extended object.
*/
function extend(obj) {
for (var i = 1; i < arguments.length; i++) {
for (var key in arguments[i]) {
obj[key] = arguments[i][key];
}
}
return obj;
}
return MostVisible;
});

7
docs/js/src/scrollspy.js
View file

@ -8,13 +8,8 @@
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
import * as MostVisible from './most-visible.js';
export const scrollspy = { export const scrollspy = {
mostVisible() {
new MostVisible();
},
// Config // Config
minWidth: '992px', minWidth: '992px',
interval: 75, interval: 75,

3647
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

49
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "@picocss/pico", "name": "@picocss/pico",
"version": "1.4.0", "version": "1.4.1",
"description": "Graceful & Minimal CSS design system in pure semantic HTML", "description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche", "author": "Lucas Larroche",
"main": "css/pico.min.css", "main": "css/pico.min.css",
"homepage": "https://picocss.com", "homepage": "https://picocss.com",
@ -27,33 +27,38 @@
"url": "https://github.com/picocss/pico/issues" "url": "https://github.com/picocss/pico/issues"
}, },
"scripts": { "scripts": {
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/", "watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs",
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/", "build": "npm-run-all build:css build:js info:postbuild",
"css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace", "build:css": "npm-run-all info:build:css css:compile css:compile:docs css:prefix info:css:minify css:minify",
"css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css", "build:js": "npm-run-all info:build:js js:bundle js:babel info:js:minify js:minify",
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife", "css:compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
"css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/",
"css:prefix": "postcss --config postcss.config.js --replace css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css",
"css:minify": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife --silent",
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env", "js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js", "js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
"build:js": "npm-run-all js:bundle js:babel js:minify",
"build": "npm-run-all build:css build:js",
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'", "watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
"watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'", "watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
"watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'", "watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs" "info:build:css": "echo '\\033[32m[picocss/pico] Compile .css files\\033[0m'",
"info:css:minify": "echo '\\033[32m[picocss/pico] Minify .css files\\033[0m'",
"info:build:js": "echo '\\033[32m[picocss/pico] Bundle .js files\\033[0m'",
"info:js:minify": "echo '\\033[32m[picocss/pico] Minify .js file\\033[0m'",
"info:postbuild": "echo '\\033[32m[picocss/pico] Done\\033[0m\n'"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.15.4", "@babel/cli": "^7.16.0",
"@babel/core": "^7.15.5", "@babel/core": "^7.16.0",
"@babel/preset-env": "^7.15.6", "@babel/preset-env": "^7.16.0",
"autoprefixer": "^10.3.4", "autoprefixer": "^10.4.0",
"clean-css-cli": "^5.3.3", "clean-css-cli": "^5.4.2",
"nodemon": "^2.0.12", "nodemon": "^2.0.14",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.3.6", "postcss": "^8.3.11",
"postcss-cli": "^8.3.1", "postcss-cli": "^9.0.1",
"rollup": "^2.56.3", "rollup": "^2.58.3",
"sass": "^1.39.0", "sass": "^1.43.4",
"uglify-js": "^3.14.1" "uglify-js": "^3.14.2"
} }
} }

12
postcss.config.js Normal file
View file

@ -0,0 +1,12 @@
module.exports = {
map: {
inline: false,
annotation: true,
sourcesContent: true
},
plugins: {
autoprefixer: {
cascade: false
}
}
}

31
scss/content/_form-checkbox-radio.scss
View file

@ -119,4 +119,35 @@
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width)); margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
} }
} }
// Aria-invalid
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-valid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
}
}
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
}
}
}
} }

51
scss/content/_form.scss
View file

@ -211,34 +211,44 @@ textarea {
} }
} }
// Aria-valid // Aria-invalid
input, input,
select, select,
textarea { textarea {
&[aria-invalid] {
@if $enable-important { &:not([type="checkbox"]):not([type="radio"]) {
padding-right: calc( &[aria-invalid] {
var(--form-element-spacing-horizontal) + 1.5rem @if $enable-important {
) !important; padding-right: calc(
padding-left: var(--form-element-spacing-horizontal); var(--form-element-spacing-horizontal) + 1.5rem
padding-inline-end: calc( ) !important;
var(--form-element-spacing-horizontal) + 1.5rem padding-left: var(--form-element-spacing-horizontal);
) !important; padding-inline-end: calc(
padding-inline-start: var(--form-element-spacing-horizontal) !important; var(--form-element-spacing-horizontal) + 1.5rem
} @else { ) !important;
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-start: var(--form-element-spacing-horizontal) !important;
padding-left: var(--form-element-spacing-horizontal); } @else {
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
}
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-invalid);
} }
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color); --border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
&:active, &:active,
&:focus { &:focus {
@ -254,7 +264,6 @@ textarea {
&[aria-invalid="true"] { &[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color); --border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
&:active, &:active,
&:focus { &:focus {

2
scss/pico.scss
View file

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

2
scss/pico.slim.scss
View file

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