feat(extra-features): A bunch of improvements

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -1,4 +1,5 @@
-// To customize text colors per button, use this map
+// To customize text colors per button, use this map and below function
+
 $btn-color: (
     "primary": $white,
     "secondary": $white,
@@ -6,7 +7,6 @@ $btn-color: (
     "dark": $white,
 );
 
-// Generate button color overrides from the map
 @each $name, $color in $btn-color {
     .btn-#{$name},
     .btn-lg-#{$name},
@@ -15,33 +15,21 @@ $btn-color: (
     }
 }
 
-// bootstrap touchspin. Edit icons under js/theme/components/product.js
+// Bootstrap touchspin
 .bootstrap-touchspin {
-    min-width: 100px;
     flex-wrap: nowrap;
 
-    > input {
-        border-left: 0px;
-        color: $primary;
-        &:focus {
-            box-shadow: none;
-        }
-    }
-
-    .btn {
-        height: 50%;
-        width: 100%;
-        border-radius: 0px;
-        &:first-child {
-            border-bottom: 1px solid $border-color;
-        }
-    }
-
     .input-touchspin {
-        min-width: rem-calc(66px);
+        height: rem-calc(50px);
+        min-width: rem-calc(75px);
+        border-left: 0px;
     }
 
     .input-group-btn-vertical {
-        min-width: rem-calc(33px);
+        display: flex;
+        flex-direction: column;
+        button {
+            border-radius: 0px;
+        }
     }
 }

falcon/_dev/css/theme/custom/components/_forms.scss

@@ -1,12 +1,10 @@
-.field-password-policy .input-group.js-parent-focus {
-    > * {
-        max-height: rem-calc(39px);
-    }
-    .form-control {
-        height: unset;
-    }
+.input-group.js-parent-focus {
     .input-group-append .btn {
         border-top-right-radius: $border-radius !important;
         border-bottom-right-radius: $border-radius !important;
     }
 }
+
+.input-group.js-parent-focus {
+    height: $input-height;
+}