Rework .form-control generator

conedevelopment · Mar 15, 2022 · 362116c · 362116c
1 parent a6845e4
commit 362116c
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 71 deletions.
diff --git a/css/spruce.css b/css/spruce.css
@@ -949,6 +949,18 @@ html[dir=rtl] .form-control--valid, html[dir=rtl] .form-control--invalid {
   padding: 0.75em 1em;
 }
 
+select.form-control:not([multiple]):not([size]) {
+  background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.692l-5.203,-5.203c-0.234,-0.234 -0.614,-0.234 -0.849,0l-1.272,1.273c-0.235,0.234 -0.235,0.614 -0,0.849l6.9,6.9c0.234,0.234 0.614,0.234 0.848,-0l6.9,-6.9c0.235,-0.235 0.235,-0.615 0,-0.849l-1.272,-1.273c-0.235,-0.234 -0.615,-0.234 -0.849,0l-5.203,5.203Z" style="fill:%238660cd;"/%3e%3c/svg%3e');
+  background-position: center right 0.5em;
+  background-repeat: no-repeat;
+  background-size: 1.25em auto;
+  -webkit-padding-end: 2em;
+          padding-inline-end: 2em;
+}
+html[dir=rtl] select.form-control:not([multiple]):not([size]) {
+  background-position: center left 0.5em;
+}
+
 .form-description {
   color: var(--spruce-form-color-text);
   display: block;
@@ -1033,18 +1045,6 @@ legend {
   flex: 1 1 var(--col-width);
 }
 
-select.form-control:not([multiple]):not([size]) {
-  background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.692l-5.203,-5.203c-0.234,-0.234 -0.614,-0.234 -0.849,0l-1.272,1.273c-0.235,0.234 -0.235,0.614 -0,0.849l6.9,6.9c0.234,0.234 0.614,0.234 0.848,-0l6.9,-6.9c0.235,-0.235 0.235,-0.615 0,-0.849l-1.272,-1.273c-0.235,-0.234 -0.615,-0.234 -0.849,0l-5.203,5.203Z" style="fill:%238660cd;"/%3e%3c/svg%3e');
-  background-position: center right 0.5em;
-  background-repeat: no-repeat;
-  background-size: 1.25em auto;
-  -webkit-padding-end: 2em;
-          padding-inline-end: 2em;
-}
-html[dir=rtl] select.form-control:not([multiple]):not([size]) {
-  background-position: center left 0.5em;
-}
-
 .field-feedback {
   display: block;
 }

diff --git a/css/spruce.min.css b/css/spruce.min.css
diff --git a/scss/form/_control.scss b/scss/form/_control.scss
@@ -3,8 +3,15 @@
 @use '../mixin' as *;
 @use '../config' as *;
 
-@mixin generate-form-control {
-  .form-control {
+@mixin generate-form-control(
+  $input,
+  $has-states: false,
+  $has-sizes: false,
+  $has-select: true
+) {
+  #{$input} {
+    $this: &;
+
     appearance: none;
     background-color: color(background, form);
     border: $form-control-border-width solid color(border, form);
@@ -38,51 +45,73 @@
       );
     }
 
-    &--valid,
-    &--invalid {
-      background-position: center right $select-icon-right-offset;
-      background-repeat: no-repeat;
-      background-size: $select-icon-width auto;
-      padding-inline-end: $select-padding-right;
+    // Validation states
+    @if ($has-states) {
+      &--valid,
+      &--invalid {
+        background-position: center right $select-icon-right-offset;
+        background-repeat: no-repeat;
+        background-size: $select-icon-width auto;
+        padding-inline-end: $select-padding-right;
 
-      html[dir='rtl'] & {
-        background-position: center left $select-icon-right-offset;
+        html[dir='rtl'] & {
+          background-position: center left $select-icon-right-offset;
+        }
       }
-    }
 
-    &--valid {
-      @include field-icon($form-valid-image, map.get($colors, alert, success));
-      border-color: color(success, alert);
+      &--valid {
+        @include field-icon($form-valid-image, map.get($colors, alert, success));
+        border-color: color(success, alert);
 
-      &:focus {
-        @include field-focus(
-          $border: color(valid, form),
-          $box-shadow: color(valid-shadow, form)
-        );
+        &:focus {
+          @include field-focus(
+            $border: color(valid, form),
+            $box-shadow: color(valid-shadow, form)
+          );
+        }
       }
-    }
 
-    &--invalid {
-      @include field-icon($form-invalid-image, map.get($colors, alert, danger));
-      border-color: color(danger, alert);
+      &--invalid {
+        @include field-icon($form-invalid-image, map.get($colors, alert, danger));
+        border-color: color(danger, alert);
 
-      &:focus {
-        @include field-focus(
-          $border: color(invalid, form),
-          $box-shadow: color(invalid-shadow, form)
-        );
+        &:focus {
+          @include field-focus(
+            $border: color(invalid, form),
+            $box-shadow: color(invalid-shadow, form)
+          );
+        }
       }
     }
 
-    //Sizes
-    &--sm {
-      font-size: $form-control-font-size-sm;
-      padding: $form-control-padding-sm;
+    // Sizes
+    @if ($has-sizes) {
+      &--sm {
+        font-size: $form-control-font-size-sm;
+        padding: $form-control-padding-sm;
+      }
+
+      &--lg {
+        font-size: $form-control-font-size-lg;
+        padding: $form-control-padding-lg;
+      }
     }
+  }
 
-    &--lg {
-      font-size: $form-control-font-size-lg;
-      padding: $form-control-padding-lg;
+  // Generate select styling
+  @if ($has-select) {
+    select#{$input} {
+      &:not([multiple]):not([size]) {
+        @include field-icon($select-image, map.get($colors, form, select-foreground));
+        background-position: center right $select-icon-right-offset;
+        background-repeat: no-repeat;
+        background-size: $select-icon-width auto;
+        padding-inline-end: $select-padding-right;
+
+        html[dir='rtl'] & {
+          background-position: center left $select-icon-right-offset;
+        }
+      }
     }
   }
 }
diff --git a/scss/form/_index.scss b/scss/form/_index.scss
@@ -6,5 +6,4 @@
 @forward 'group';
 @forward 'row';
 @forward 'check';
-@forward 'select';
 @forward 'validation';
diff --git a/scss/form/_select.scss b/scss/form/_select.scss
diff --git a/scss/mixin/_generator.scss b/scss/mixin/_generator.scss
@@ -24,12 +24,16 @@
     '.form-check__label',
     true
   );
-  @include generate-form-control;
+  @include generate-form-control(
+    '.form-control',
+    true,
+    true,
+    true
+  );
   @include generate-form-description;
   @include generate-fieldset;
   @include generate-form-group;
   @include generate-form-label;
   @include generate-form-row;
-  @include generate-form-select;
   @include generate-field-feedback;
 }