Styles reordering for better slim version

css/pico.classless.css

@@ -817,7 +817,7 @@ textarea {
   border-width: 0;
 }
 
-input:not([type="checkbox"]):not([type="radio"]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   height: calc(1.5rem + 1.5rem + 2px);
 }
 
@@ -828,6 +828,13 @@ fieldset {
   border: 0;
 }
 
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea,
@@ -836,13 +843,6 @@ form small {
   width: 100%;
 }
 
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: 0.125rem;
-  vertical-align: middle;
-}
-
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
@@ -853,12 +853,6 @@ textarea {
   vertical-align: middle;
 }
 
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  margin-bottom: 1.5rem;
-}
-
 input,
 select,
 textarea {
@@ -888,12 +882,6 @@ textarea:focus {
   border-color: var(--primary);
 }
 
-input:focus,
-select:focus,
-textarea:focus {
-  box-shadow: 0 0 0 0.2rem var(--primary-focus);
-}
-
 input[readonly], input[disabled],
 select[readonly],
 select[disabled],
@@ -924,6 +912,18 @@ textarea[disabled] {
   opacity: .5;
 }
 
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+}
+
+input:not([type="range"]):not([type="file"]):focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;
@@ -1160,6 +1160,7 @@ label > textarea {
   border: 2px solid var(--background);
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1171,6 +1172,7 @@ label > textarea {
   border: 0;
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1182,6 +1184,7 @@ label > textarea {
   border: 0;
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1224,7 +1227,7 @@ label > textarea {
   box-shadow: none;
 }
 
-input[type="search"] {
+[type="search"] {
   padding-left: 2.5rem !important;
   border-radius: 3rem;
   background-image: 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(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
@@ -1233,7 +1236,7 @@ input[type="search"] {
   background-size: 1rem auto;
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
 }

css/pico.css

@@ -1038,7 +1038,7 @@ textarea {
   border-width: 0;
 }
 
-input:not([type="checkbox"]):not([type="radio"]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   height: calc(1.5rem + 1.5rem + 2px);
 }
 
@@ -1049,6 +1049,13 @@ fieldset {
   border: 0;
 }
 
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea,
@@ -1057,13 +1064,6 @@ form small {
   width: 100%;
 }
 
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: 0.125rem;
-  vertical-align: middle;
-}
-
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
@@ -1074,12 +1074,6 @@ textarea {
   vertical-align: middle;
 }
 
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  margin-bottom: 1.5rem;
-}
-
 input,
 select,
 textarea {
@@ -1109,12 +1103,6 @@ textarea:focus {
   border-color: var(--primary);
 }
 
-input:focus,
-select:focus,
-textarea:focus {
-  box-shadow: 0 0 0 0.2rem var(--primary-focus);
-}
-
 input[readonly], input[disabled],
 select[readonly],
 select[disabled],
@@ -1168,6 +1156,18 @@ textarea.invalid {
   background-image: 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(185, 70, 70, 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");
 }
 
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+}
+
+input:not([type="range"]):not([type="file"]):focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;
@@ -1404,6 +1404,7 @@ label > textarea {
   border: 2px solid var(--background);
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1415,6 +1416,7 @@ label > textarea {
   border: 0;
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1426,6 +1428,7 @@ label > textarea {
   border: 0;
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1468,7 +1471,7 @@ label > textarea {
   box-shadow: none;
 }
 
-input[type="search"] {
+[type="search"] {
   padding-left: 2.5rem !important;
   border-radius: 3rem;
   background-image: 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(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
@@ -1477,7 +1480,7 @@ input[type="search"] {
   background-size: 1rem auto;
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
 }

css/pico.fluid.classless.css

@@ -813,7 +813,7 @@ textarea {
   border-width: 0;
 }
 
-input:not([type="checkbox"]):not([type="radio"]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   height: calc(1.5rem + 1.5rem + 2px);
 }
 
@@ -824,6 +824,13 @@ fieldset {
   border: 0;
 }
 
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea,
@@ -832,13 +839,6 @@ form small {
   width: 100%;
 }
 
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: 0.125rem;
-  vertical-align: middle;
-}
-
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
@@ -849,12 +849,6 @@ textarea {
   vertical-align: middle;
 }
 
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  margin-bottom: 1.5rem;
-}
-
 input,
 select,
 textarea {
@@ -884,12 +878,6 @@ textarea:focus {
   border-color: var(--primary);
 }
 
-input:focus,
-select:focus,
-textarea:focus {
-  box-shadow: 0 0 0 0.2rem var(--primary-focus);
-}
-
 input[readonly], input[disabled],
 select[readonly],
 select[disabled],
@@ -920,6 +908,18 @@ textarea[disabled] {
   opacity: .5;
 }
 
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+}
+
+input:not([type="range"]):not([type="file"]):focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;
@@ -1156,6 +1156,7 @@ label > textarea {
   border: 2px solid var(--background);
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1167,6 +1168,7 @@ label > textarea {
   border: 0;
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1178,6 +1180,7 @@ label > textarea {
   border: 0;
   border-radius: 50%;
   background-color: var(--text);
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
@@ -1220,7 +1223,7 @@ label > textarea {
   box-shadow: none;
 }
 
-input[type="search"] {
+[type="search"] {
   padding-left: 2.5rem !important;
   border-radius: 3rem;
   background-image: 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(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
@@ -1229,7 +1232,7 @@ input[type="search"] {
   background-size: 1rem auto;
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
 }

css/pico.slim.css

@@ -837,7 +837,7 @@ textarea {
   border-width: 0;
 }
 
-input:not([type="checkbox"]):not([type="radio"]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   height: calc(1.5rem + 1.5rem + 2px);
 }
 
@@ -848,6 +848,13 @@ fieldset {
   border: 0;
 }
 
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea,
@@ -856,13 +863,6 @@ form small {
   width: 100%;
 }
 
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: 0.125rem;
-  vertical-align: middle;
-}
-
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
@@ -873,12 +873,6 @@ textarea {
   vertical-align: middle;
 }
 
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  margin-bottom: 1.5rem;
-}
-
 input,
 select,
 textarea {
@@ -907,12 +901,6 @@ textarea:focus {
   border-color: var(--primary);
 }
 
-input:focus,
-select:focus,
-textarea:focus {
-  box-shadow: 0 0 0 0.2rem var(--primary-focus);
-}
-
 input[readonly], input[disabled],
 select[readonly],
 select[disabled],
@@ -943,6 +931,18 @@ textarea[disabled] {
   opacity: .5;
 }
 
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+}
+
+input:not([type="range"]):not([type="file"]):focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;

scss/content/_form-alt-input-types.scss

@@ -150,6 +150,7 @@
     border: $border-thumb solid var(--background);
     border-radius: 50%;
     background-color: var(--text);
+    cursor: pointer;
 
     @if $enable-transitions {
       transition:
@@ -166,6 +167,7 @@
     border: 0;
     border-radius: 50%;
     background-color: var(--text);
+    cursor: pointer;
 
     @if $enable-transitions {
       transition:
@@ -182,6 +184,7 @@
     border: 0;
     border-radius: 50%;
     background-color: var(--text);
+    cursor: pointer;
 
     @if $enable-transitions {
       transition:
@@ -239,7 +242,7 @@
 }
 
 // Search
-input[type="search"] {
+[type="search"] {
   padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
   border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
   // Source: https://feathericons.com/

scss/content/_form.scss

@@ -117,7 +117,7 @@ textarea {
 // ––––––––––––––––––––
 
 // Force height for alternatives input types
-input:not([type="checkbox"]):not([type="radio"]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
 }
 
@@ -129,15 +129,6 @@ fieldset {
   border: 0;
 }
 
-// Layout
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea,
-form small {
-  display: block;
-  width: 100%;
-}
-
 // Spacing beteen label and input
 $spacing-label-input: $spacing-typography/12;
 
@@ -149,7 +140,16 @@ fieldset legend {
   vertical-align: middle;
 }
 
-// Inputs (Not Checkboxes, Radios, Range, File)
+// Global layout
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea,
+form small {
+  display: block;
+  width: 100%;
+}
+
+// Reset appearance (Not Checkboxes, Radios, Range and File)
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
@@ -160,14 +160,7 @@ textarea {
   vertical-align: middle;
 }
 
-// Inputs (Not Checkboxes, Radios)
+// Commons styles
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  margin-bottom: $spacing-typography;
-}
-
-// Inputs (Commons styles)
 input,
 select,
 textarea {
@@ -198,10 +191,6 @@ textarea {
     border-color: var(--primary);
   }
 
-  &:focus  {
-    box-shadow: 0 0 0 0.2rem var(--primary-focus);
-  }
-
   &[readonly],
   &[disabled] {
     border-color: var(--muted-border);
@@ -220,13 +209,8 @@ textarea {
     cursor: not-allowed;
     opacity: .5;
   }
-}
-
-// Validation states for Text, Select & Textarea
-input,
-select,
-textarea {
 
+  // Validation states
   @if $enable-input-states and $enable-classes {
 
     // Validation states
@@ -250,6 +234,22 @@ textarea {
   }
 }
 
+// Margin bottom (Not Checkboxes andRadios)
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: $spacing-typography;
+}
+
+// Focus styles (Not Range and File)
+input:not([type="range"]):not([type="file"]),
+select,
+textarea {
+  &:focus  {
+    box-shadow: 0 0 0 0.2rem var(--primary-focus);
+ }
+}
+
 // Select
 select {
 
@@ -274,6 +274,7 @@ form small {
   color: var(--muted-text);
 }
 
+// Helper: padding
 input,
 select,
 textarea {