fix(doc): add small sizes for input-group form-control and form-select

Orange-OpenSource · Jun 9, 2022 · defa839 · defa839
1 parent 1ad2db0
commit defa839
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1004,7 +1004,7 @@ $input-height-inner:                    add($input-line-height * 1em, $input-pad
 // Boosted mod: no $input-height-inner-quarter
 
 $input-height:                          2.5rem !default;
-// Boosted mod: no $input-height-sm
+$input-height-sm:                       2rem !default;
 $input-height-lg:                       3.125rem !default;
 $input-line-height-lg:                  $h5-line-height !default; // Boosted mod
 
@@ -1122,7 +1122,10 @@ $form-select-box-shadow:          $box-shadow-inset !default;
 $form-select-focus-border-color:  $input-color !default; // Boosted mod: for border to show in Firefox
 $form-select-focus-box-shadow:    null !default;
 
-// Boosted mod: no .form-select-sm
+$form-select-padding-y-sm:        $input-padding-y-sm !default;
+$form-select-padding-x-sm:        $input-padding-x-sm !default;
+$form-select-font-size-sm:        $input-font-size-sm !default;
+$form-select-border-radius-sm:    $input-border-radius-sm !default;
 
 $form-select-padding-y-lg:        $spacer * .5 !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -118,6 +118,7 @@
   border: solid transparent;
   border-width: $input-border-width 0;
 
+  &.form-control-sm,
   &.form-control-lg {
     padding-right: 0;
     padding-left: 0;
@@ -131,7 +132,18 @@
 //
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
-// Boosted mod: no .form-control-sm
+.form-control-sm {
+  min-height: $input-height-sm;
+  padding: $input-padding-y-sm $input-padding-x-sm add($input-padding-y-sm, 1px); // Boosted mod
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
+
+  &::file-selector-button {
+    padding: add($input-padding-y-sm, 1px) $input-padding-x-sm add($input-padding-y-sm, 3px); // Boosted mod
+    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+    margin-inline-end: $input-padding-x-sm;
+  }
+}
 
 .form-control-lg {
   min-height: $input-height-lg;
@@ -154,6 +166,10 @@ textarea {
     min-height: $input-height;
   }
 
+  &.form-control-sm {
+    min-height: $input-height-sm;
+  }
+
   &.form-control-lg {
     min-height: $input-height-lg;
   }

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -55,10 +55,16 @@
   }
 }
 
-// Boosted mod: no .form-select-sm
+.form-select-sm {
+  padding-top: $form-select-padding-y-sm;
+  padding-bottom: add($form-select-padding-y-sm, 1px); // Boosted mod
+  padding-left: $form-select-padding-x-sm;
+  @include font-size($form-select-font-size-sm);
+  @include border-radius($form-select-border-radius-sm);
+}
 
 .form-select-lg {
-  padding-top: subtract($form-select-padding-y-lg, 1px); // Boosted mod
+  padding-top: $form-select-padding-y-lg;
   padding-bottom: $form-select-padding-y-lg;
   padding-left: $form-select-padding-x-lg;
   @include font-size($form-select-font-size-lg);