feat(forms): get rid of form-*-sm things, forbidden by the brand

Orange-OpenSource · Jan 9, 2020 · 8d41b61 · 8d41b61
1 parent 5be3b52
commit 8d41b61
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 46 deletions.
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
@@ -401,13 +401,15 @@
   }
 }
 
-.custom-select-sm {
-  height: $custom-select-height-sm;
-  padding-top: $custom-select-padding-y-sm;
-  padding-bottom: $custom-select-padding-y-sm;
-  padding-left: $custom-select-padding-x-sm;
-  @include font-size($custom-select-font-size-sm);
-}
+// Boosted mod: not used
+//.custom-select-sm {
+//  height: $custom-select-height-sm;
+//  padding-top: $custom-select-padding-y-sm;
+//  padding-bottom: $custom-select-padding-y-sm;
+//  padding-left: $custom-select-padding-x-sm;
+//  @include font-size($custom-select-font-size-sm);
+//}
+// end mod
 
 .custom-select-lg {
   height: $custom-select-height-lg;

diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -120,12 +120,14 @@ select.form-control {
   line-height: $input-line-height-lg;
 }
 
-.col-form-label-sm {
-  padding-top: add($input-padding-y-sm, $input-border-width);
-  padding-bottom: add($input-padding-y-sm, $input-border-width);
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-}
+// Boosted mod: not used
+//.col-form-label-sm {
+//  padding-top: add($input-padding-y-sm, $input-border-width);
+//  padding-bottom: add($input-padding-y-sm, $input-border-width);
+//  @include font-size($input-font-size-sm);
+//  line-height: $input-line-height-sm;
+//}
+// end mod
 
 
 // Readonly controls as plain text
@@ -145,7 +147,7 @@ select.form-control {
   border: solid transparent;
   border-width: $input-border-width 0;
 
-  &.form-control-sm,
+  // &.form-control-sm, // Boosted mod: not used
   &.form-control-lg {
     padding-right: 0;
     padding-left: 0;
@@ -160,13 +162,15 @@ select.form-control {
 //
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
-.form-control-sm {
-  height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
-}
+// Boosted mod: not used
+//.form-control-sm {
+//  height: $input-height-sm;
+//  padding: $input-padding-y-sm $input-padding-x-sm;
+//  @include font-size($input-font-size-sm);
+//  line-height: $input-line-height-sm;
+//  @include border-radius($input-border-radius-sm);
+//}
+// end mod
 
 .form-control-lg {
   height: $input-height-lg;

diff --git a/scss/_o-forms.scss b/scss/_o-forms.scss
@@ -106,11 +106,6 @@ select.form-control {
       padding-top: .65625rem;
       padding-bottom: .65625rem;
     }
-
-    &.form-control-sm {
-      padding-top: .1875rem;
-      padding-bottom: .1875rem;
-    }
   }
 }
 

diff --git a/site/docs/4.4/components/forms.md b/site/docs/4.4/components/forms.md
@@ -88,12 +88,11 @@ For file inputs, swap the `.form-control` for `.form-control-file`.
 
 ### Sizing
 
-Set heights using classes like `.form-control-lg` and `.form-control-sm`.
+Set heights using classes like `.form-control-lg`.
 
 {% capture example %}
 <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 <input class="form-control" type="text" placeholder="Default input">
-<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
 {% endcapture %}
 {% include example.html content=example %}
 
@@ -104,9 +103,6 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 <select class="form-control">
   <option>Default select</option>
 </select>
-<select class="form-control form-control-sm">
-  <option>Small select</option>
-</select>
 {% endcapture %}
 {% include example.html content=example %}
 
@@ -447,16 +443,10 @@ At times, you maybe need to use margin or padding utilities to create that perfe
 
 ##### Horizontal form label sizing
 
-Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
+Be sure to use `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg`.
 
 {% capture example %}
 <form>
-  <div class="form-group row">
-    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
-    <div class="col-sm-10">
-      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
-    </div>
-  </div>
   <div class="form-group row">
     <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
@@ -1381,14 +1371,7 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
 You may also choose from small and large custom selects to match our similarly sized text inputs.
 
 {% capture example %}
-<select class="custom-select custom-select-lg mb-3">
-  <option selected>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</select>
-
-<select class="custom-select custom-select-sm">
+<select class="custom-select custom-select-lg">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>