Merge pull request #478 from picocss/dev

v2.0.4
picocss · Mar 3, 2024 · d610bd3 · d610bd3
2 parents f714a51 + 990c930
commit d610bd3
Show file tree

Hide file tree

Showing 246 changed files with 1,164 additions and 639 deletions.
diff --git a/README.md b/README.md
@@ -25,8 +25,8 @@ Pico v2.0 features better accessibility, easier customization with SASS, a compl
 
 [Read more](https://picocss.com/docs/v2)
 
-
 ## A Superpowered HTML Reset
+
 With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
 
 - Class-light and Semantic

diff --git a/css/pico.amber.css b/css/pico.amber.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -708,6 +708,16 @@ section {
  display: grid;
  grid-template-columns: 1fr;
 }
+@media (max-width: calc(768px - 1px)) {
+ .grid input:not([type=checkbox], [type=radio]),
+ .grid select,
+ .grid textarea,
+ .grid fieldset,
+ .grid fieldset legend,
+ .grid label {
+ margin-bottom: 0;
+ }
+}
 @media (min-width: 768px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
@@ -1511,6 +1521,7 @@ select:not([multiple], [size]) {
 }
 select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] select:not([multiple], [size]) {
@@ -1644,7 +1655,7 @@ label:has([type=checkbox], [type=radio]) {
  background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -2284,7 +2295,7 @@ label > details.dropdown {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.amber.min.css b/css/pico.amber.min.css
diff --git a/css/pico.blue.css b/css/pico.blue.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -708,6 +708,16 @@ section {
  display: grid;
  grid-template-columns: 1fr;
 }
+@media (max-width: calc(768px - 1px)) {
+ .grid input:not([type=checkbox], [type=radio]),
+ .grid select,
+ .grid textarea,
+ .grid fieldset,
+ .grid fieldset legend,
+ .grid label {
+ margin-bottom: 0;
+ }
+}
 @media (min-width: 768px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
@@ -1511,6 +1521,7 @@ select:not([multiple], [size]) {
 }
 select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] select:not([multiple], [size]) {
@@ -1644,7 +1655,7 @@ label:has([type=checkbox], [type=radio]) {
  background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -2284,7 +2295,7 @@ label > details.dropdown {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.blue.min.css b/css/pico.blue.min.css
diff --git a/css/pico.classless.amber.css b/css/pico.classless.amber.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ select:not([multiple], [size]) {
 }
 select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ label:has([type=checkbox], [type=radio]) {
  background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ article > footer {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.amber.min.css b/css/pico.classless.amber.min.css
diff --git a/css/pico.classless.blue.css b/css/pico.classless.blue.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ select:not([multiple], [size]) {
 }
 select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ label:has([type=checkbox], [type=radio]) {
  background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ article > footer {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.blue.min.css b/css/pico.classless.blue.min.css
diff --git a/css/pico.classless.conditional.amber.css b/css/pico.classless.conditional.amber.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ main {
 }
 .pico select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] .pico select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ main {
  background-image: none;
 }
 .pico [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 .pico [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ main {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.conditional.amber.min.css b/css/pico.classless.conditional.amber.min.css
diff --git a/css/pico.classless.conditional.blue.css b/css/pico.classless.conditional.blue.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ main {
 }
 .pico select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] .pico select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ main {
  background-image: none;
 }
 .pico [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 .pico [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ main {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.conditional.blue.min.css b/css/pico.classless.conditional.blue.min.css
diff --git a/css/pico.classless.conditional.cyan.css b/css/pico.classless.conditional.cyan.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ main {
 }
 .pico select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] .pico select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ main {
  background-image: none;
 }
 .pico [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 .pico [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ main {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.conditional.cyan.min.css b/css/pico.classless.conditional.cyan.min.css
diff --git a/css/pico.classless.conditional.fuchsia.css b/css/pico.classless.conditional.fuchsia.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ main {
 }
 .pico select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] .pico select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ main {
  background-image: none;
 }
 .pico [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 .pico [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ main {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.conditional.fuchsia.min.css b/css/pico.classless.conditional.fuchsia.min.css
diff --git a/css/pico.classless.conditional.green.css b/css/pico.classless.conditional.green.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ main {
 }
 .pico select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] .pico select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ main {
  background-image: none;
 }
 .pico [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 .pico [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ main {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.conditional.green.min.css b/css/pico.classless.conditional.green.min.css
diff --git a/css/pico.classless.conditional.grey.css b/css/pico.classless.conditional.grey.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.3 (https://picocss.com)
+ * Pico CSS ✨ v2.0.4 (https://picocss.com)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1345,6 +1345,7 @@ main {
 }
 .pico select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
+ color: var(--pico-form-element-color);
 }
 
 [dir=rtl] .pico select:not([multiple], [size]) {
@@ -1478,7 +1479,7 @@ main {
  background-image: none;
 }
 .pico [type=checkbox][role=switch]:checked::before {
- margin-inline-start: calc(1.125em - var(--pico-border-width));
+ margin-inline-start: calc(2.25em - 1.25em / 2 - var(--pico-border-width) * 3);
 }
 .pico [type=checkbox][role=switch][disabled] {
  --pico-background-color: var(--pico-border-color);
@@ -1958,7 +1959,7 @@ main {
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
- background-size: 1rem auto;
+ background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;

diff --git a/css/pico.classless.conditional.grey.min.css b/css/pico.classless.conditional.grey.min.css