diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss index 55314cc..00c2c76 100644 --- 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 index 4188a1b..0854cea 100644 --- 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;