//////////////////////////// // THEME / VARIABLES / FORMS //////////////////////////// @import '_variables.body'; @import '_variables.borders'; @import '_variables.color-palette'; @import '_variables.modular-scale'; @import '_variables.sizing'; // Background color $bg-color-input-light-mode: $white; // Field background color in light mode $bg-color-input-dark-mode: darken($darkest-gray,7%); // Field background color in dark mode $bg-color-input-disabled-light-mode: $lighter-gray; // Field background color in light mode $bg-color-input-disabled-dark-mode: $darkest-gray; // Field background color in dark mode // Border color $border-color-fieldset-light-mode: $light-gray; // Fieldset border-color in light mode $border-color-fieldset-dark-mode: $darker-gray; // Fieldset border-color in dark mode $border-color-input-light-mode: $gray; // Input field border-color in light mode $border-color-input-dark-mode: $dark-gray; // Input field border-color in dark mode $border-color-input-hover-light-mode: $dark-gray; // Input field border-color when hovered in light mode $border-color-input-hover-dark-mode: $gray; // Input field border-color when hovered in dark mode $border-color-input-focus-light-mode: $blue; // Input field border-color when focused in light mode $border-color-input-focus-dark-mode: $cerulean; // Input field border-color when focused in dark mode // Border radius $border-radius-input-roundrect: true; // Input field border-radius roundrect? True/false $border-radius-fieldset-roundrect: true; // Fieldset border-radius roundrect? True/false // Border style $border-style-input: solid; // Input field border-style // Border width $border-width-input: 1px; // Input field border-width // Color $color-form-help-light-mode: $color-light-text-light-mode; // Form help text color in light mode $color-form-help-dark-mode: $color-light-text-dark-mode; // Form help text color in dark mode $color-required-label-light-mode: $color-required; // Required label text color in light mode $color-required-label-dark-mode: $color-required; // Required label text color in dark mode // Font size $font-size-label: #{ms(-1)}em; // Label font-size: .84em $font-size-legend: #{ms(-1)}em; // Legend font-size: .84em $font-size-form-help: #{ms(-2)}em; // Form help font-size: .75em $font-size-required: #{ms(-2)}em; // Required label font-size: .75em // Font style $font-style-required-italic: true; // Italic font-style for required label? True/false // Line height $line-height-form-help: #{ms(2)}; // Form help line-height // Margin $margin-bottom-fieldset: $length-em-4; // Fieldset margin-bottom: 1em $margin-bottom-form-group: $length-em-4; // Form group margin-bottom: 1em $margin-bottom-form-label: #{ms(-10)}em; // Form label margin-bottom: .42em $margin-top-form-help: $length-em-1; // Form help margin-top: .42em $margin-right-form-controls-inline-label: $length-em-4; // Form controls inline label margin-right: 1em // Opacity $opacity-disabled: .75; // Opacity for disabled elements // Padding $padding-bottom-fieldset: $length-em-4; // Padding-bottom of fieldset: 1em $padding-left-fieldset: $length-vw-1; // Padding-left of fieldset: 3.16vw $padding-right-fieldset: $length-vw-1; // Padding-right of fieldset: 3.16vw $padding-top-fieldset: $length-em-4; // Padding-top of fieldset: 1em $padding-bottom-input: $length-em-2; // Padding-bottom of input field: .56em $padding-left-input: $length-em-3; // Padding-left of input field: .75em $padding-right-input: $length-em-3; // Padding-right of input field: .75em $padding-top-input: $length-em-2; // Padding-top of input field: .56em $padding-legend: $length-em-2; // Padding around legend $padding-left-required: $length-em-1; // Padding-left of required label: .42em