Merge pull request #2 from tmorehouse/tmorehouse/legend-size

feat(css): add .col-form-legend-lg and .col-form-legend-sm classes
tmorehouse · Dec 1, 2017 · b0643d6 · b0643d6
2 parents ccf3fb2 + 901902d
commit b0643d6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
@@ -425,7 +425,7 @@ 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 to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
+Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`. For `<legend>`s, use the `.col-form-legend-sm` or `.col-form-legend-lg` to control sizing.
 
 {% example html %}
 <form>

diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -120,6 +120,20 @@ select.form-control {
   font-size: $font-size-base;
 }
 
+.col-form-legend-lg {
+  padding-top: $input-padding-y-lg;
+  padding-bottom: $input-padding-y-lg;
+  font-size: $font-size-lg;
+  line-height: $input-line-height-lg;
+}
+
+.col-form-legend-sm {
+  padding-top: $input-padding-y-sm;
+  padding-bottom: $input-padding-y-sm;
+  font-size: $font-size-sm;
+  line-height: $input-line-height-sm;
+}
+
 
 // Readonly controls as plain text
 //