Added fieldset field and more form styling

rbouma · Jul 18, 2018 · 53bff5f · 53bff5f
1 parent e8d5c1e
commit 53bff5f
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss
@@ -46,6 +46,72 @@ input[type="checkbox"] {
   width: $input-choice-default-width;
 }
 
+/****
+** Form
+****/
+
+.form {
+
+  /****
+  ** Fieldset
+  ****/
+
+  .fieldset {
+    border: $form-fieldset-border;
+    margin: $form-fieldset-margin;
+    padding: $form-fieldset-padding;
+
+    > legend.legend {
+      color: $form-fieldset-legend-color;
+      font-size: $form-fieldset-legend-font-size;
+      font-family: $form-fieldset-legend-font-family;
+      font-weight: $form-fieldset-legend-font-weight;
+      font-style: $form-fieldset-legend-font-style;
+      line-height: $form-fieldset-legend-line-height;
+      margin: $form-fieldset-legend-margin;
+      padding: $form-fieldset-legend-padding;
+      width: $form-fieldset-legend-width;
+    }
+
+    > div.field {
+      margin: $form-fieldset-field-margin;
+      box-sizing: $form-fieldset-field-box-sizing;
+
+      &:not(.choice) {
+        > label.label {
+          padding: $form-fieldset-field-label-padding;
+          text-align: $form-fieldset-field-label-text-align;
+          width: $form-fieldset-field-label-width;
+          float: $form-fieldset-field-label-float;
+          font-weight: $form-fieldset-field-label-font-weight;
+        }
+        > div.control {
+          width: $form-fieldset-field-control-width;
+          float: $form-fieldset-field-control-float;
+        }
+      }
+
+      &.choice {
+        &:before {
+          width: $form-fieldset-field-choice-before-width;
+          padding: $form-fieldset-field-choice-before-padding;
+          height: $form-fieldset-field-choice-before-height;
+          float: $form-fieldset-field-choice-before-float;
+        }
+
+        label.label {
+          margin: $form-fieldset-field-choice-label-margin;
+        }
+      }
+    }
+  }
+
+  div.actions-toolbar {
+    margin-left: $form-action-toolbar-margin !important;
+  }
+}
+
+
 /****
 ** Sidebar input
 ****/

diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
@@ -130,4 +130,48 @@ $input-textarea-default-resize: vertical;
 /* Checkbox / Radio */
 $input-choice-default-width: auto;
 
+/*
+ * Fieldset / Fields
+ */
 
+/* Fieldset */
+$form-fieldset-border: 0;
+$form-fieldset-margin: 0;
+$form-fieldset-padding: 0;
+$form-fieldset-legend-color: $font-default-color;
+$form-fieldset-legend-font-size: 24px;
+$form-fieldset-legend-font-family: $font-default-font-family-secondary;
+$form-fieldset-legend-font-weight: 600;
+$form-fieldset-legend-font-style: normal;
+$form-fieldset-legend-line-height: 1.2;
+$form-fieldset-legend-margin: 20px 0;
+$form-fieldset-legend-padding: 0;
+$form-fieldset-legend-width: inherit;
+
+/* Field */
+
+$form-fieldset-field-type: block;
+$form-fieldset-field-margin: 0 0 20px;
+$form-fieldset-field-box-sizing: border-box;
+
+$form-fieldset-field-choice-before-width: auto;
+$form-fieldset-field-choice-before-padding: 0;
+$form-fieldset-field-choice-before-height: inherit;
+$form-fieldset-field-choice-before-float: none;
+
+
+/* Label */
+$form-fieldset-field-label-padding: 6px 15px 0 0;
+$form-fieldset-field-label-text-align: left;
+$form-fieldset-field-label-width: auto;
+$form-fieldset-field-label-float: none;
+$form-fieldset-field-label-font-weight: 600;
+
+$form-fieldset-field-choice-label-margin: 0 0 0 5px;
+
+/* Control */
+$form-fieldset-field-control-width: auto;
+$form-fieldset-field-control-float: none;
+
+/* Action toolbar */
+$form-action-toolbar-margin: 0;