Merge pull request #10 from picocss/dev

Minor Release (v1.2.1)

README.md

@@ -19,6 +19,7 @@
 [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
 [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
 
+
 - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
 
 - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
@@ -54,7 +55,7 @@ npm install @picocss/pico
 
 Minimalist templates to discover Pico in action:
 
-[![Examples](https://picocss.com/img/examples.jpg?version=1.2.0)](https://picocss.com/#examples)
+[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
 
 - **[Preview](https://picocss.com/examples/preview/)**  
   A starter example with all elements and components used in Pico
@@ -96,15 +97,29 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
 - [Typography](https://picocss.com/docs/#typography)
 - [Buttons](https://picocss.com/docs/#buttons)
 - [Forms](https://picocss.com/docs/#forms)
-- [Tables](https://picocss.com/docs/#tables)
 
 **Components**
 - [Accordions](https://picocss.com/docs/#accordions)
 - [Cards](https://picocss.com/docs/#cards)
 - [Navs](https://picocss.com/docs/#navs)
-- [Progress](https://picocss.com/docs/#progress)
 - [Tooltips](https://picocss.com/docs/#tooltips)
 
+## Variations
+
+| Variation | Minified CSS | Source | Example |
+|:-----|:-----|:-----|:-----|
+| Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) |
+| Classless<br>(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss)  | [Classless](https://picocss.com/examples/classless/) |
+| Classless<br>(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - |
+| Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - |
+| Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) |
+| Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) |
+
+## Contributing
+
+- [dev/](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
+- Do not edit [/css](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [scss/](https://github.com/picocss/pico/tree/master/scss).
+
 ## Copyright and license
 
 Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).

css/pico.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 /**
@@ -1035,6 +1035,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
@@ -1067,7 +1088,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

css/pico.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 /**
@@ -977,7 +977,7 @@ a[role="button"].contrast:focus {
 
 button.outline,
 input[type="submit"].outline,
-a.outline[role="button"] {
+a[role="button"].outline {
   border: var(--button-border-width) solid var(--primary-border);
   background-color: transparent;
   color: var(--primary);
@@ -987,9 +987,9 @@ button.outline:hover, button.outline:active, button.outline:focus,
 input[type="submit"].outline:hover,
 input[type="submit"].outline:active,
 input[type="submit"].outline:focus,
-a.outline[role="button"]:hover,
-a.outline[role="button"]:active,
-a.outline[role="button"]:focus {
+a[role="button"].outline:hover,
+a[role="button"].outline:active,
+a[role="button"].outline:focus {
   border: var(--button-border-width) solid var(--primary-hover-border);
   color: var(--primary-hover);
 }
@@ -1230,26 +1230,33 @@ textarea[disabled] {
   opacity: .66;
 }
 
-input.valid, input.invalid,
-select.valid,
-select.invalid,
-textarea.valid,
-textarea.invalid {
+input .valid,
+input .invalid, input[aria-invalid],
+select .valid,
+select .invalid,
+select[aria-invalid],
+textarea .valid,
+textarea .invalid,
+textarea[aria-invalid] {
   padding-right: 2rem;
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
-input.valid,
-select.valid,
-textarea.valid {
+input .valid, input[aria-invalid="false"],
+select .valid,
+select[aria-invalid="false"],
+textarea .valid,
+textarea[aria-invalid="false"] {
   background-image: var(--icon-valid);
 }
 
-input.invalid,
-select.invalid,
-textarea.invalid {
+input .invalid, input[aria-invalid="true"],
+select .invalid,
+select[aria-invalid="true"],
+textarea .invalid,
+textarea[aria-invalid="true"] {
   background-image: var(--icon-invalid);
 }
 
@@ -1285,7 +1292,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

css/pico.fluid.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  */
 /**
@@ -1031,6 +1031,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
@@ -1063,7 +1084,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

css/pico.slim.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.2.0 (https://picocss.com)
+ * Pico.css v1.2.1 (https://picocss.com)
  * Copyright 2020 - Licensed under MIT
  *
  * Slim version example
@@ -1038,6 +1038,36 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input .valid,
+input .invalid, input[aria-invalid],
+select .valid,
+select .invalid,
+select[aria-invalid],
+textarea .valid,
+textarea .invalid,
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input .valid, input[aria-invalid="false"],
+select .valid,
+select[aria-invalid="false"],
+textarea .valid,
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input .invalid, input[aria-invalid="true"],
+select .invalid,
+select[aria-invalid="true"],
+textarea .invalid,
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
@@ -1070,7 +1100,7 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: calc(var(--spacing-typography) * -0.5);
+  margin-top: calc(var(--spacing-typography) * -0.75);
   margin-bottom: var(--spacing-typography);
 }
 

docs/css/pico.docs.css

@@ -124,6 +124,10 @@ form.grid > button {
   margin-bottom: 0;
 }
 
+svg {
+  height: 1rem;
+}
+
 /**
  * Docs: Aside
  */
@@ -402,7 +406,7 @@ body > nav a {
   border-radius: 0;
 }
 
-body > nav a svg {
+body > nav svg {
   vertical-align: text-bottom;
 }
 
@@ -415,6 +419,10 @@ body > nav ul:first-of-type li:first-of-type a {
   color: var(--background);
 }
 
+body > nav ul:first-of-type li:first-of-type a svg {
+  height: 3.5rem;
+}
+
 body > nav ul:first-of-type li:nth-of-type(2) {
   display: none;
   margin-left: var(--spacing-gutter);