Merge pull request #460 from picocss/ll/fix-form-element-margin-bottom-in-grid

fix: form element margin bottom in .grid

css/pico.amber.css

@@ -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,7 +1521,6 @@ 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]) {

css/pico.blue.css

@@ -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,7 +1521,6 @@ 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]) {

css/pico.classless.amber.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.blue.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.amber.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.blue.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.cyan.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.fuchsia.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.green.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.grey.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.indigo.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.jade.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.lime.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.orange.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.pink.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.pumpkin.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.purple.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.red.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.sand.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.slate.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.violet.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.yellow.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.conditional.zinc.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.cyan.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.fuchsia.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.green.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.grey.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.indigo.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.jade.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.lime.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.orange.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.pink.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.pumpkin.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.purple.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.red.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.sand.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.slate.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.violet.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.yellow.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.classless.zinc.css

@@ -1345,7 +1345,6 @@ 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]) {

css/pico.conditional.amber.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.blue.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.cyan.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.fuchsia.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.green.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.grey.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.indigo.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.jade.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {

css/pico.conditional.lime.css

@@ -708,6 +708,16 @@ main {
   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,7 +1521,6 @@ 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]) {