From 10479148eb430d8be5612fec0afa5bbd47e52faf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 28 Apr 2021 18:43:18 +0200 Subject: [PATCH] Override Foundation variables everywhere We were loading all Foundation variables and then overriding them. This is problematic because we were overriding variables after using them. For instance, we had this code in `_settings.scss`: ``` $black: #0a0a0a; $white: #fefefe; $body-background: $white; $body-font-color: $black; ``` That meant we were setting `$body-background` to `#fefefe`, and `$body-font-color` to `#0a0a0a`. Even if we changed the values of `$black` and `$white` later, `$body-background` and `$body-font-color` were not affected by this change. So now we're overriding `$black` and `$white` before setting `$body-background` and `$body-font-color`. In order to keep our custom values instead of overriding them, we're using the `!default` flag in the `_settings.scss` file. This way of defining variables in the `_settings.scss` file with the `!default` flag is recommended in the documentation regarding the settings file [1]. There's also a disadvantage to this approach. Now that we're loading the `_consul_settings.scss` file first, we can no longer use Foundation variables inside the `_consul_settings.scss` file unless we define them in this file as well. [1] https://get.foundation/sites/docs/sass.html#the-settings-file --- app/assets/stylesheets/_settings.scss | 942 +++++++++--------- .../stylesheets/foundation_and_overrides.scss | 3 +- 2 files changed, 472 insertions(+), 473 deletions(-) diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 305ca3d64..9192029e6 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -60,44 +60,42 @@ // 55. Top Bar // 56. Xy Grid -@import "util/util"; - // 1. Global // --------- -$global-font-size: 100%; -$global-width: rem-calc(1200); -$global-lineheight: 1.5; +$global-font-size: 100% !default; +$global-width: rem-calc(1200) !default; +$global-lineheight: 1.5 !default; $foundation-palette: ( primary: #1779ba, secondary: #767676, success: #3adb76, warning: #ffae00, alert: #cc4b37, -); -$light-gray: #e6e6e6; -$medium-gray: #cacaca; -$dark-gray: #8a8a8a; -$black: #0a0a0a; -$white: #fefefe; -$body-background: $white; -$body-font-color: $black; -$body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; -$body-antialiased: true; -$global-margin: 1rem; -$global-padding: 1rem; -$global-position: 1rem; -$global-weight-normal: normal; -$global-weight-bold: bold; -$global-radius: 0; -$global-menu-padding: 0.7rem 1rem; -$global-menu-nested-margin: 1rem; -$global-text-direction: ltr; -$global-flexbox: true; -$global-prototype-breakpoints: false; -$global-button-cursor: auto; -$global-color-pick-contrast-tolerance: 0; -$print-transparent-backgrounds: true; +) !default; +$light-gray: #e6e6e6 !default; +$medium-gray: #cacaca !default; +$dark-gray: #8a8a8a !default; +$black: #0a0a0a !default; +$white: #fefefe !default; +$body-background: $white !default; +$body-font-color: $black !default; +$body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default; +$body-antialiased: true !default; +$global-margin: 1rem !default; +$global-padding: 1rem !default; +$global-position: 1rem !default; +$global-weight-normal: normal !default; +$global-weight-bold: bold !default; +$global-radius: 0 !default; +$global-menu-padding: 0.7rem 1rem !default; +$global-menu-nested-margin: 1rem !default; +$global-text-direction: ltr !default; +$global-flexbox: true !default; +$global-prototype-breakpoints: false !default; +$global-button-cursor: auto !default; +$global-color-pick-contrast-tolerance: 0 !default; +$print-transparent-backgrounds: true !default; @include add-foundation-colors; @@ -110,33 +108,33 @@ $breakpoints: ( large: 1024px, xlarge: 1200px, xxlarge: 1440px, -); -$print-breakpoint: large; -$breakpoint-classes: (small medium large); +) !default; +$print-breakpoint: large !default; +$breakpoint-classes: (small medium large) !default; // 3. The Grid // ----------- -$grid-row-width: $global-width; -$grid-column-count: 12; +$grid-row-width: $global-width !default; +$grid-column-count: 12 !default; $grid-column-gutter: ( small: 20px, medium: 30px, -); -$grid-column-align-edge: true; -$grid-column-alias: "columns"; -$block-grid-max: 8; +) !default; +$grid-column-align-edge: true !default; +$grid-column-alias: "columns" !default; +$block-grid-max: 8 !default; // 4. Base Typography // ------------------ -$header-font-family: $body-font-family; -$header-font-weight: $global-weight-normal; -$header-font-style: normal; -$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; -$header-color: inherit; -$header-lineheight: 1.4; -$header-margin-bottom: 0.5rem; +$header-font-family: $body-font-family !default; +$header-font-weight: $global-weight-normal !default; +$header-font-style: normal !default; +$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default; +$header-color: inherit !default; +$header-lineheight: 1.4 !default; +$header-margin-bottom: 0.5rem !default; $header-styles: ( small: ( "h1": ("font-size": 24), @@ -154,406 +152,406 @@ $header-styles: ( "h5": ("font-size": 20), "h6": ("font-size": 16), ), -); -$header-text-rendering: optimizeLegibility; -$small-font-size: 80%; -$header-small-font-color: $medium-gray; -$paragraph-lineheight: 1.6; -$paragraph-margin-bottom: 1rem; -$paragraph-text-rendering: optimizeLegibility; -$code-color: $black; -$code-font-family: $font-family-monospace; -$code-font-weight: $global-weight-normal; -$code-background: $light-gray; -$code-border: 1px solid $medium-gray; -$code-padding: rem-calc(2 5 1); -$anchor-color: $primary-color; -$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); -$anchor-text-decoration: none; -$anchor-text-decoration-hover: none; -$hr-width: $global-width; -$hr-border: 1px solid $medium-gray; -$hr-margin: rem-calc(20) auto; -$list-lineheight: $paragraph-lineheight; -$list-margin-bottom: $paragraph-margin-bottom; -$list-style-type: disc; -$list-style-position: outside; -$list-side-margin: 1.25rem; -$list-nested-side-margin: 1.25rem; -$defnlist-margin-bottom: 1rem; -$defnlist-term-weight: $global-weight-bold; -$defnlist-term-margin-bottom: 0.3rem; -$blockquote-color: $dark-gray; -$blockquote-padding: rem-calc(9 20 0 19); -$blockquote-border: 1px solid $medium-gray; -$cite-font-size: rem-calc(13); -$cite-color: $dark-gray; -$cite-pseudo-content: "\2014 \0020"; -$keystroke-font: $font-family-monospace; -$keystroke-color: $black; -$keystroke-background: $light-gray; -$keystroke-padding: rem-calc(2 4 0); -$keystroke-radius: $global-radius; -$abbr-underline: 1px dotted $black; +) !default; +$header-text-rendering: optimizeLegibility !default; +$small-font-size: 80% !default; +$header-small-font-color: $medium-gray !default; +$paragraph-lineheight: 1.6 !default; +$paragraph-margin-bottom: 1rem !default; +$paragraph-text-rendering: optimizeLegibility !default; +$code-color: $black !default; +$code-font-family: $font-family-monospace !default; +$code-font-weight: $global-weight-normal !default; +$code-background: $light-gray !default; +$code-border: 1px solid $medium-gray !default; +$code-padding: rem-calc(2 5 1) !default; +$anchor-color: $primary-color !default; +$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default; +$anchor-text-decoration: none !default; +$anchor-text-decoration-hover: none !default; +$hr-width: $global-width !default; +$hr-border: 1px solid $medium-gray !default; +$hr-margin: rem-calc(20) auto !default; +$list-lineheight: $paragraph-lineheight !default; +$list-margin-bottom: $paragraph-margin-bottom !default; +$list-style-type: disc !default; +$list-style-position: outside !default; +$list-side-margin: 1.25rem !default; +$list-nested-side-margin: 1.25rem !default; +$defnlist-margin-bottom: 1rem !default; +$defnlist-term-weight: $global-weight-bold !default; +$defnlist-term-margin-bottom: 0.3rem !default; +$blockquote-color: $dark-gray !default; +$blockquote-padding: rem-calc(9 20 0 19) !default; +$blockquote-border: 1px solid $medium-gray !default; +$cite-font-size: rem-calc(13) !default; +$cite-color: $dark-gray !default; +$cite-pseudo-content: "\2014 \0020" !default; +$keystroke-font: $font-family-monospace !default; +$keystroke-color: $black !default; +$keystroke-background: $light-gray !default; +$keystroke-padding: rem-calc(2 4 0) !default; +$keystroke-radius: $global-radius !default; +$abbr-underline: 1px dotted $black !default; // 5. Typography Helpers // --------------------- -$lead-font-size: $global-font-size * 1.25; -$lead-lineheight: 1.6; -$subheader-lineheight: 1.4; -$subheader-color: $dark-gray; -$subheader-font-weight: $global-weight-normal; -$subheader-margin-top: 0.2rem; -$subheader-margin-bottom: 0.5rem; -$stat-font-size: 2.5rem; +$lead-font-size: $global-font-size * 1.25 !default; +$lead-lineheight: 1.6 !default; +$subheader-lineheight: 1.4 !default; +$subheader-color: $dark-gray !default; +$subheader-font-weight: $global-weight-normal !default; +$subheader-margin-top: 0.2rem !default; +$subheader-margin-bottom: 0.5rem !default; +$stat-font-size: 2.5rem !default; // 6. Abide // -------- -$abide-inputs: true; -$abide-labels: true; -$input-background-invalid: get-color(alert); -$form-label-color-invalid: get-color(alert); -$input-error-color: get-color(alert); -$input-error-font-size: rem-calc(12); -$input-error-font-weight: $global-weight-bold; +$abide-inputs: true !default; +$abide-labels: true !default; +$input-background-invalid: get-color(alert) !default; +$form-label-color-invalid: get-color(alert) !default; +$input-error-color: get-color(alert) !default; +$input-error-font-size: rem-calc(12) !default; +$input-error-font-weight: $global-weight-bold !default; // 7. Accordion // ------------ -$accordion-background: $white; -$accordion-plusminus: true; -$accordion-title-font-size: rem-calc(12); -$accordion-item-color: $primary-color; -$accordion-item-background-hover: $light-gray; -$accordion-item-padding: 1.25rem 1rem; -$accordion-content-background: $white; -$accordion-content-border: 1px solid $light-gray; -$accordion-content-color: $body-font-color; -$accordion-content-padding: 1rem; +$accordion-background: $white !default; +$accordion-plusminus: true !default; +$accordion-title-font-size: rem-calc(12) !default; +$accordion-item-color: $primary-color !default; +$accordion-item-background-hover: $light-gray !default; +$accordion-item-padding: 1.25rem 1rem !default; +$accordion-content-background: $white !default; +$accordion-content-border: 1px solid $light-gray !default; +$accordion-content-color: $body-font-color !default; +$accordion-content-padding: 1rem !default; // 8. Accordion Menu // ----------------- -$accordionmenu-padding: $global-menu-padding; -$accordionmenu-nested-margin: $global-menu-nested-margin; -$accordionmenu-submenu-padding: $accordionmenu-padding; -$accordionmenu-arrows: true; -$accordionmenu-arrow-color: $primary-color; -$accordionmenu-item-background: null; -$accordionmenu-border: null; -$accordionmenu-submenu-toggle-background: null; -$accordion-submenu-toggle-border: $accordionmenu-border; -$accordionmenu-submenu-toggle-width: 40px; -$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; -$accordionmenu-arrow-size: 6px; +$accordionmenu-padding: $global-menu-padding !default; +$accordionmenu-nested-margin: $global-menu-nested-margin !default; +$accordionmenu-submenu-padding: $accordionmenu-padding !default; +$accordionmenu-arrows: true !default; +$accordionmenu-arrow-color: $primary-color !default; +$accordionmenu-item-background: null !default; +$accordionmenu-border: null !default; +$accordionmenu-submenu-toggle-background: null !default; +$accordion-submenu-toggle-border: $accordionmenu-border !default; +$accordionmenu-submenu-toggle-width: 40px !default; +$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default; +$accordionmenu-arrow-size: 6px !default; // 9. Badge // -------- -$badge-background: $primary-color; -$badge-color: $white; -$badge-color-alt: $black; -$badge-palette: $foundation-palette; -$badge-padding: 0.3em; -$badge-minwidth: 2.1em; -$badge-font-size: 0.6rem; +$badge-background: $primary-color !default; +$badge-color: $white !default; +$badge-color-alt: $black !default; +$badge-palette: $foundation-palette !default; +$badge-padding: 0.3em !default; +$badge-minwidth: 2.1em !default; +$badge-font-size: 0.6rem !default; // 10. Breadcrumbs // --------------- -$breadcrumbs-margin: 0 0 $global-margin 0; -$breadcrumbs-item-font-size: rem-calc(11); -$breadcrumbs-item-color: $primary-color; -$breadcrumbs-item-color-current: $black; -$breadcrumbs-item-color-disabled: $medium-gray; -$breadcrumbs-item-margin: 0.75rem; -$breadcrumbs-item-uppercase: true; -$breadcrumbs-item-separator: true; -$breadcrumbs-item-separator-item: "/"; -$breadcrumbs-item-separator-item-rtl: "\\"; -$breadcrumbs-item-separator-color: $medium-gray; +$breadcrumbs-margin: 0 0 $global-margin 0 !default; +$breadcrumbs-item-font-size: rem-calc(11) !default; +$breadcrumbs-item-color: $primary-color !default; +$breadcrumbs-item-color-current: $black !default; +$breadcrumbs-item-color-disabled: $medium-gray !default; +$breadcrumbs-item-margin: 0.75rem !default; +$breadcrumbs-item-uppercase: true !default; +$breadcrumbs-item-separator: true !default; +$breadcrumbs-item-separator-item: "/" !default; +$breadcrumbs-item-separator-item-rtl: "\\" !default; +$breadcrumbs-item-separator-color: $medium-gray !default; // 11. Button // ---------- -$button-font-family: inherit; -$button-padding: 0.85em 1em; -$button-margin: 0 0 $global-margin 0; -$button-fill: solid; -$button-background: $primary-color; -$button-background-hover: scale-color($button-background, $lightness: -15%); -$button-color: $white; -$button-color-alt: $black; -$button-radius: $global-radius; -$button-hollow-border-width: 1px; +$button-font-family: inherit !default; +$button-padding: 0.85em 1em !default; +$button-margin: 0 0 $global-margin 0 !default; +$button-fill: solid !default; +$button-background: $primary-color !default; +$button-background-hover: scale-color($button-background, $lightness: -15%) !default; +$button-color: $white !default; +$button-color-alt: $black !default; +$button-radius: $global-radius !default; +$button-hollow-border-width: 1px !default; $button-sizes: ( tiny: 0.6rem, small: 0.75rem, default: 0.9rem, large: 1.25rem, -); -$button-palette: $foundation-palette; -$button-opacity-disabled: 0.25; -$button-background-hover-lightness: -20%; -$button-hollow-hover-lightness: -50%; -$button-transition: background-color 0.25s ease-out, color 0.25s ease-out; +) !default; +$button-palette: $foundation-palette !default; +$button-opacity-disabled: 0.25 !default; +$button-background-hover-lightness: -20% !default; +$button-hollow-hover-lightness: -50% !default; +$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default; // 12. Button Group // ---------------- -$buttongroup-margin: 1rem; -$buttongroup-spacing: 1px; -$buttongroup-child-selector: ".button"; -$buttongroup-expand-max: 6; -$buttongroup-radius-on-each: true; +$buttongroup-margin: 1rem !default; +$buttongroup-spacing: 1px !default; +$buttongroup-child-selector: ".button" !default; +$buttongroup-expand-max: 6 !default; +$buttongroup-radius-on-each: true !default; // 13. Callout // ----------- -$callout-background: $white; -$callout-background-fade: 85%; -$callout-border: 1px solid rgba($black, 0.25); -$callout-margin: 0 0 1rem 0; -$callout-padding: 1rem; -$callout-font-color: $body-font-color; -$callout-font-color-alt: $body-background; -$callout-radius: $global-radius; -$callout-link-tint: 30%; +$callout-background: $white !default; +$callout-background-fade: 85% !default; +$callout-border: 1px solid rgba($black, 0.25) !default; +$callout-margin: 0 0 1rem 0 !default; +$callout-padding: 1rem !default; +$callout-font-color: $body-font-color !default; +$callout-font-color-alt: $body-background !default; +$callout-radius: $global-radius !default; +$callout-link-tint: 30% !default; // 14. Card // -------- -$card-background: $white; -$card-font-color: $body-font-color; -$card-divider-background: $light-gray; -$card-border: 1px solid $light-gray; -$card-shadow: none; -$card-border-radius: $global-radius; -$card-padding: $global-padding; -$card-margin-bottom: $global-margin; +$card-background: $white !default; +$card-font-color: $body-font-color !default; +$card-divider-background: $light-gray !default; +$card-border: 1px solid $light-gray !default; +$card-shadow: none !default; +$card-border-radius: $global-radius !default; +$card-padding: $global-padding !default; +$card-margin-bottom: $global-margin !default; // 15. Close Button // ---------------- -$closebutton-position: right top; +$closebutton-position: right top !default; $closebutton-offset-horizontal: ( small: 0.66rem, medium: 1rem, -); +) !default; $closebutton-offset-vertical: ( small: 0.33em, medium: 0.5rem, -); +) !default; $closebutton-size: ( small: 1.5em, medium: 2em, -); -$closebutton-lineheight: 1; -$closebutton-color: $dark-gray; -$closebutton-color-hover: $black; +) !default; +$closebutton-lineheight: 1 !default; +$closebutton-color: $dark-gray !default; +$closebutton-color-hover: $black !default; // 16. Drilldown // ------------- -$drilldown-transition: transform 0.15s linear; -$drilldown-arrows: true; -$drilldown-padding: $global-menu-padding; -$drilldown-nested-margin: 0; -$drilldown-background: $white; -$drilldown-submenu-padding: $drilldown-padding; -$drilldown-submenu-background: $white; -$drilldown-arrow-color: $primary-color; -$drilldown-arrow-size: 6px; +$drilldown-transition: transform 0.15s linear !default; +$drilldown-arrows: true !default; +$drilldown-padding: $global-menu-padding !default; +$drilldown-nested-margin: 0 !default; +$drilldown-background: $white !default; +$drilldown-submenu-padding: $drilldown-padding !default; +$drilldown-submenu-background: $white !default; +$drilldown-arrow-color: $primary-color !default; +$drilldown-arrow-size: 6px !default; // 17. Dropdown // ------------ -$dropdown-padding: 1rem; -$dropdown-background: $body-background; -$dropdown-border: 1px solid $medium-gray; -$dropdown-font-size: 1rem; -$dropdown-width: 300px; -$dropdown-radius: $global-radius; +$dropdown-padding: 1rem !default; +$dropdown-background: $body-background !default; +$dropdown-border: 1px solid $medium-gray !default; +$dropdown-font-size: 1rem !default; +$dropdown-width: 300px !default; +$dropdown-radius: $global-radius !default; $dropdown-sizes: ( tiny: 100px, small: 200px, large: 400px, -); +) !default; // 18. Dropdown Menu // ----------------- -$dropdownmenu-arrows: true; -$dropdownmenu-arrow-color: $anchor-color; -$dropdownmenu-arrow-size: 6px; -$dropdownmenu-arrow-padding: 1.5rem; -$dropdownmenu-min-width: 200px; -$dropdownmenu-background: $white; -$dropdownmenu-submenu-background: $dropdownmenu-background; -$dropdownmenu-padding: $global-menu-padding; -$dropdownmenu-nested-margin: 0; -$dropdownmenu-submenu-padding: $dropdownmenu-padding; -$dropdownmenu-border: 1px solid $medium-gray; -$dropdown-menu-item-color-active: get-color(primary); -$dropdown-menu-item-background-active: transparent; +$dropdownmenu-arrows: true !default; +$dropdownmenu-arrow-color: $anchor-color !default; +$dropdownmenu-arrow-size: 6px !default; +$dropdownmenu-arrow-padding: 1.5rem !default; +$dropdownmenu-min-width: 200px !default; +$dropdownmenu-background: $white !default; +$dropdownmenu-submenu-background: $dropdownmenu-background !default; +$dropdownmenu-padding: $global-menu-padding !default; +$dropdownmenu-nested-margin: 0 !default; +$dropdownmenu-submenu-padding: $dropdownmenu-padding !default; +$dropdownmenu-border: 1px solid $medium-gray !default; +$dropdown-menu-item-color-active: get-color(primary) !default; +$dropdown-menu-item-background-active: transparent !default; // 19. Flexbox Utilities // --------------------- -$flex-source-ordering-count: 6; -$flexbox-responsive-breakpoints: true; +$flex-source-ordering-count: 6 !default; +$flexbox-responsive-breakpoints: true !default; // 20. Forms // --------- -$fieldset-border: 1px solid $medium-gray; -$fieldset-padding: rem-calc(20); -$fieldset-margin: rem-calc(18 0); -$legend-padding: rem-calc(0 3); -$form-spacing: rem-calc(16); -$helptext-color: $black; -$helptext-font-size: rem-calc(13); -$helptext-font-style: italic; -$input-prefix-color: $black; -$input-prefix-background: $light-gray; -$input-prefix-border: 1px solid $medium-gray; -$input-prefix-padding: 1rem; -$form-label-color: $black; -$form-label-font-size: rem-calc(14); -$form-label-font-weight: $global-weight-normal; -$form-label-line-height: 1.8; -$select-background: $white; -$select-triangle-color: $dark-gray; -$select-radius: $global-radius; -$input-color: $black; -$input-placeholder-color: $medium-gray; -$input-font-family: inherit; -$input-font-size: rem-calc(16); -$input-font-weight: $global-weight-normal; -$input-line-height: $global-lineheight; -$input-background: $white; -$input-background-focus: $white; -$input-background-disabled: $light-gray; -$input-border: 1px solid $medium-gray; -$input-border-focus: 1px solid $dark-gray; -$input-padding: $form-spacing / 2; -$input-shadow: inset 0 1px 2px rgba($black, 0.1); -$input-shadow-focus: 0 0 5px $medium-gray; -$input-cursor-disabled: not-allowed; -$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -$input-number-spinners: true; -$input-radius: $global-radius; -$form-button-radius: $global-radius; +$fieldset-border: 1px solid $medium-gray !default; +$fieldset-padding: rem-calc(20) !default; +$fieldset-margin: rem-calc(18 0) !default; +$legend-padding: rem-calc(0 3) !default; +$form-spacing: rem-calc(16) !default; +$helptext-color: $black !default; +$helptext-font-size: rem-calc(13) !default; +$helptext-font-style: italic !default; +$input-prefix-color: $black !default; +$input-prefix-background: $light-gray !default; +$input-prefix-border: 1px solid $medium-gray !default; +$input-prefix-padding: 1rem !default; +$form-label-color: $black !default; +$form-label-font-size: rem-calc(14) !default; +$form-label-font-weight: $global-weight-normal !default; +$form-label-line-height: 1.8 !default; +$select-background: $white !default; +$select-triangle-color: $dark-gray !default; +$select-radius: $global-radius !default; +$input-color: $black !default; +$input-placeholder-color: $medium-gray !default; +$input-font-family: inherit !default; +$input-font-size: rem-calc(16) !default; +$input-font-weight: $global-weight-normal !default; +$input-line-height: $global-lineheight !default; +$input-background: $white !default; +$input-background-focus: $white !default; +$input-background-disabled: $light-gray !default; +$input-border: 1px solid $medium-gray !default; +$input-border-focus: 1px solid $dark-gray !default; +$input-padding: $form-spacing / 2 !default; +$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default; +$input-shadow-focus: 0 0 5px $medium-gray !default; +$input-cursor-disabled: not-allowed !default; +$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default; +$input-number-spinners: true !default; +$input-radius: $global-radius !default; +$form-button-radius: $global-radius !default; // 21. Label // --------- -$label-background: $primary-color; -$label-color: $white; -$label-color-alt: $black; -$label-palette: $foundation-palette; -$label-font-size: 0.8rem; -$label-padding: 0.33333rem 0.5rem; -$label-radius: $global-radius; +$label-background: $primary-color !default; +$label-color: $white !default; +$label-color-alt: $black !default; +$label-palette: $foundation-palette !default; +$label-font-size: 0.8rem !default; +$label-padding: 0.33333rem 0.5rem !default; +$label-radius: $global-radius !default; // 22. Media Object // ---------------- -$mediaobject-margin-bottom: $global-margin; -$mediaobject-section-padding: $global-padding; -$mediaobject-image-width-stacked: 100%; +$mediaobject-margin-bottom: $global-margin !default; +$mediaobject-section-padding: $global-padding !default; +$mediaobject-image-width-stacked: 100% !default; // 23. Menu // -------- -$menu-margin: 0; -$menu-nested-margin: $global-menu-nested-margin; -$menu-items-padding: $global-menu-padding; -$menu-simple-margin: 1rem; -$menu-item-color-active: $white; -$menu-item-background-active: get-color(primary); -$menu-icon-spacing: 0.25rem; -$menu-item-background-hover: $light-gray; -$menu-state-back-compat: true; -$menu-centered-back-compat: true; -$menu-icons-back-compat: true; +$menu-margin: 0 !default; +$menu-nested-margin: $global-menu-nested-margin !default; +$menu-items-padding: $global-menu-padding !default; +$menu-simple-margin: 1rem !default; +$menu-item-color-active: $white !default; +$menu-item-background-active: get-color(primary) !default; +$menu-icon-spacing: 0.25rem !default; +$menu-item-background-hover: $light-gray !default; +$menu-state-back-compat: true !default; +$menu-centered-back-compat: true !default; +$menu-icons-back-compat: true !default; // 24. Meter // --------- -$meter-height: 1rem; -$meter-radius: $global-radius; -$meter-background: $medium-gray; -$meter-fill-good: $success-color; -$meter-fill-medium: $warning-color; -$meter-fill-bad: $alert-color; +$meter-height: 1rem !default; +$meter-radius: $global-radius !default; +$meter-background: $medium-gray !default; +$meter-fill-good: $success-color !default; +$meter-fill-medium: $warning-color !default; +$meter-fill-bad: $alert-color !default; // 25. Off-canvas // -------------- $offcanvas-sizes: ( small: 250px, -); +) !default; $offcanvas-vertical-sizes: ( small: 250px, -); -$offcanvas-background: $light-gray; -$offcanvas-shadow: 0 0 10px rgba($black, 0.7); -$offcanvas-inner-shadow-size: 20px; -$offcanvas-inner-shadow-color: rgba($black, 0.25); -$offcanvas-overlay-zindex: 11; -$offcanvas-push-zindex: 12; -$offcanvas-overlap-zindex: 13; -$offcanvas-reveal-zindex: 12; -$offcanvas-transition-length: 0.5s; -$offcanvas-transition-timing: ease; -$offcanvas-fixed-reveal: true; -$offcanvas-exit-background: rgba($white, 0.25); -$maincontent-class: "off-canvas-content"; +) !default; +$offcanvas-background: $light-gray !default; +$offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default; +$offcanvas-inner-shadow-size: 20px !default; +$offcanvas-inner-shadow-color: rgba($black, 0.25) !default; +$offcanvas-overlay-zindex: 11 !default; +$offcanvas-push-zindex: 12 !default; +$offcanvas-overlap-zindex: 13 !default; +$offcanvas-reveal-zindex: 12 !default; +$offcanvas-transition-length: 0.5s !default; +$offcanvas-transition-timing: ease !default; +$offcanvas-fixed-reveal: true !default; +$offcanvas-exit-background: rgba($white, 0.25) !default; +$maincontent-class: "off-canvas-content" !default; // 26. Orbit // --------- -$orbit-bullet-background: $medium-gray; -$orbit-bullet-background-active: $dark-gray; -$orbit-bullet-diameter: 1.2rem; -$orbit-bullet-margin: 0.1rem; -$orbit-bullet-margin-top: 0.8rem; -$orbit-bullet-margin-bottom: 0.8rem; -$orbit-caption-background: rgba($black, 0.5); -$orbit-caption-padding: 1rem; -$orbit-control-background-hover: rgba($black, 0.5); -$orbit-control-padding: 1rem; -$orbit-control-zindex: 10; +$orbit-bullet-background: $medium-gray !default; +$orbit-bullet-background-active: $dark-gray !default; +$orbit-bullet-diameter: 1.2rem !default; +$orbit-bullet-margin: 0.1rem !default; +$orbit-bullet-margin-top: 0.8rem !default; +$orbit-bullet-margin-bottom: 0.8rem !default; +$orbit-caption-background: rgba($black, 0.5) !default; +$orbit-caption-padding: 1rem !default; +$orbit-control-background-hover: rgba($black, 0.5) !default; +$orbit-control-padding: 1rem !default; +$orbit-control-zindex: 10 !default; // 27. Pagination // -------------- -$pagination-font-size: rem-calc(14); -$pagination-margin-bottom: $global-margin; -$pagination-item-color: $black; -$pagination-item-padding: rem-calc(3 10); -$pagination-item-spacing: rem-calc(1); -$pagination-radius: $global-radius; -$pagination-item-background-hover: $light-gray; -$pagination-item-background-current: $primary-color; -$pagination-item-color-current: $white; -$pagination-item-color-disabled: $medium-gray; -$pagination-ellipsis-color: $black; -$pagination-mobile-items: false; -$pagination-mobile-current-item: false; -$pagination-arrows: true; +$pagination-font-size: rem-calc(14) !default; +$pagination-margin-bottom: $global-margin !default; +$pagination-item-color: $black !default; +$pagination-item-padding: rem-calc(3 10) !default; +$pagination-item-spacing: rem-calc(1) !default; +$pagination-radius: $global-radius !default; +$pagination-item-background-hover: $light-gray !default; +$pagination-item-background-current: $primary-color !default; +$pagination-item-color-current: $white !default; +$pagination-item-color-disabled: $medium-gray !default; +$pagination-ellipsis-color: $black !default; +$pagination-mobile-items: false !default; +$pagination-mobile-current-item: false !default; +$pagination-arrows: true !default; // 28. Progress Bar // ---------------- -$progress-height: 1rem; -$progress-background: $medium-gray; -$progress-margin-bottom: $global-margin; -$progress-meter-background: $primary-color; -$progress-radius: $global-radius; +$progress-height: 1rem !default; +$progress-background: $medium-gray !default; +$progress-margin-bottom: $global-margin !default; +$progress-meter-background: $primary-color !default; +$progress-radius: $global-radius !default; // 29. Prototype Arrow // ------------------- @@ -563,57 +561,57 @@ $prototype-arrow-directions: ( up, right, left -); -$prototype-arrow-size: 0.4375rem; -$prototype-arrow-color: $black; +) !default; +$prototype-arrow-size: 0.4375rem !default; +$prototype-arrow-color: $black !default; // 30. Prototype Border-Box // ------------------------ -$prototype-border-box-breakpoints: $global-prototype-breakpoints; +$prototype-border-box-breakpoints: $global-prototype-breakpoints !default; // 31. Prototype Border-None // ------------------------- -$prototype-border-none-breakpoints: $global-prototype-breakpoints; +$prototype-border-none-breakpoints: $global-prototype-breakpoints !default; // 32. Prototype Bordered // ---------------------- -$prototype-bordered-breakpoints: $global-prototype-breakpoints; -$prototype-border-width: rem-calc(1); -$prototype-border-type: solid; -$prototype-border-color: $medium-gray; +$prototype-bordered-breakpoints: $global-prototype-breakpoints !default; +$prototype-border-width: rem-calc(1) !default; +$prototype-border-type: solid !default; +$prototype-border-color: $medium-gray !default; // 33. Prototype Display // --------------------- -$prototype-display-breakpoints: $global-prototype-breakpoints; +$prototype-display-breakpoints: $global-prototype-breakpoints !default; $prototype-display: ( inline, inline-block, block, table, table-cell -); +) !default; // 34. Prototype Font-Styling // -------------------------- -$prototype-font-breakpoints: $global-prototype-breakpoints; -$prototype-wide-letter-spacing: rem-calc(4); -$prototype-font-normal: $global-weight-normal; -$prototype-font-bold: $global-weight-bold; +$prototype-font-breakpoints: $global-prototype-breakpoints !default; +$prototype-wide-letter-spacing: rem-calc(4) !default; +$prototype-font-normal: $global-weight-normal !default; +$prototype-font-bold: $global-weight-bold !default; // 35. Prototype List-Style-Type // ----------------------------- -$prototype-list-breakpoints: $global-prototype-breakpoints; +$prototype-list-breakpoints: $global-prototype-breakpoints !default; $prototype-style-type-unordered: ( disc, circle, square -); +) !default; $prototype-style-type-ordered: ( decimal, lower-alpha, @@ -622,247 +620,247 @@ $prototype-style-type-ordered: ( upper-alpha, upper-latin, upper-roman -); +) !default; // 36. Prototype Overflow // ---------------------- -$prototype-overflow-breakpoints: $global-prototype-breakpoints; +$prototype-overflow-breakpoints: $global-prototype-breakpoints !default; $prototype-overflow: ( visible, hidden, scroll -); +) !default; // 37. Prototype Position // ---------------------- -$prototype-position-breakpoints: $global-prototype-breakpoints; +$prototype-position-breakpoints: $global-prototype-breakpoints !default; $prototype-position: ( static, relative, absolute, fixed -); -$prototype-position-z-index: 975; +) !default; +$prototype-position-z-index: 975 !default; // 38. Prototype Rounded // --------------------- -$prototype-rounded-breakpoints: $global-prototype-breakpoints; -$prototype-border-radius: rem-calc(3); +$prototype-rounded-breakpoints: $global-prototype-breakpoints !default; +$prototype-border-radius: rem-calc(3) !default; // 39. Prototype Separator // ----------------------- -$prototype-separator-breakpoints: $global-prototype-breakpoints; -$prototype-separator-align: center; -$prototype-separator-height: rem-calc(2); -$prototype-separator-width: 3rem; -$prototype-separator-background: $primary-color; -$prototype-separator-margin-top: $global-margin; +$prototype-separator-breakpoints: $global-prototype-breakpoints !default; +$prototype-separator-align: center !default; +$prototype-separator-height: rem-calc(2) !default; +$prototype-separator-width: 3rem !default; +$prototype-separator-background: $primary-color !default; +$prototype-separator-margin-top: $global-margin !default; // 40. Prototype Shadow // -------------------- -$prototype-shadow-breakpoints: $global-prototype-breakpoints; +$prototype-shadow-breakpoints: $global-prototype-breakpoints !default; $prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), - 0 2px 10px 0 rgba(0, 0, 0, 0.12); + 0 2px 10px 0 rgba(0, 0, 0, 0.12) !default; // 41. Prototype Sizing // -------------------- -$prototype-sizing-breakpoints: $global-prototype-breakpoints; +$prototype-sizing-breakpoints: $global-prototype-breakpoints !default; $prototype-sizing: ( width, height -); +) !default; $prototype-sizes: ( 25: 25%, 50: 50%, 75: 75%, 100: 100% -); +) !default; // 42. Prototype Spacing // --------------------- -$prototype-spacing-breakpoints: $global-prototype-breakpoints; -$prototype-spacers-count: 3; +$prototype-spacing-breakpoints: $global-prototype-breakpoints !default; +$prototype-spacers-count: 3 !default; // 43. Prototype Text-Decoration // ----------------------------- -$prototype-decoration-breakpoints: $global-prototype-breakpoints; +$prototype-decoration-breakpoints: $global-prototype-breakpoints !default; $prototype-text-decoration: ( overline, underline, line-through, -); +) !default; // 44. Prototype Text-Transformation // --------------------------------- -$prototype-transformation-breakpoints: $global-prototype-breakpoints; +$prototype-transformation-breakpoints: $global-prototype-breakpoints !default; $prototype-text-transformation: ( lowercase, uppercase, capitalize -); +) !default; // 45. Prototype Text-Utilities // ---------------------------- -$prototype-utilities-breakpoints: $global-prototype-breakpoints; -$prototype-text-overflow: ellipsis; +$prototype-utilities-breakpoints: $global-prototype-breakpoints !default; +$prototype-text-overflow: ellipsis !default; // 46. Responsive Embed // -------------------- -$responsive-embed-margin-bottom: rem-calc(16); +$responsive-embed-margin-bottom: rem-calc(16) !default; $responsive-embed-ratios: ( default: 4 by 3, widescreen: 16 by 9, -); +) !default; // 47. Reveal // ---------- -$reveal-background: $white; -$reveal-width: 600px; -$reveal-max-width: $global-width; -$reveal-padding: $global-padding; -$reveal-border: 1px solid $medium-gray; -$reveal-radius: $global-radius; -$reveal-zindex: 1005; -$reveal-overlay-background: rgba($black, 0.45); +$reveal-background: $white !default; +$reveal-width: 600px !default; +$reveal-max-width: $global-width !default; +$reveal-padding: $global-padding !default; +$reveal-border: 1px solid $medium-gray !default; +$reveal-radius: $global-radius !default; +$reveal-zindex: 1005 !default; +$reveal-overlay-background: rgba($black, 0.45) !default; // 48. Slider // ---------- -$slider-width-vertical: 0.5rem; -$slider-transition: all 0.2s ease-in-out; -$slider-height: 0.5rem; -$slider-background: $light-gray; -$slider-fill-background: $medium-gray; -$slider-handle-height: 1.4rem; -$slider-handle-width: 1.4rem; -$slider-handle-background: $primary-color; -$slider-opacity-disabled: 0.25; -$slider-radius: $global-radius; +$slider-width-vertical: 0.5rem !default; +$slider-transition: all 0.2s ease-in-out !default; +$slider-height: 0.5rem !default; +$slider-background: $light-gray !default; +$slider-fill-background: $medium-gray !default; +$slider-handle-height: 1.4rem !default; +$slider-handle-width: 1.4rem !default; +$slider-handle-background: $primary-color !default; +$slider-opacity-disabled: 0.25 !default; +$slider-radius: $global-radius !default; // 49. Switch // ---------- -$switch-background: $medium-gray; -$switch-background-active: $primary-color; -$switch-height: 2rem; -$switch-height-tiny: 1.5rem; -$switch-height-small: 1.75rem; -$switch-height-large: 2.5rem; -$switch-radius: $global-radius; -$switch-margin: $global-margin; -$switch-paddle-background: $white; -$switch-paddle-offset: 0.25rem; -$switch-paddle-radius: $global-radius; -$switch-paddle-transition: all 0.25s ease-out; +$switch-background: $medium-gray !default; +$switch-background-active: $primary-color !default; +$switch-height: 2rem !default; +$switch-height-tiny: 1.5rem !default; +$switch-height-small: 1.75rem !default; +$switch-height-large: 2.5rem !default; +$switch-radius: $global-radius !default; +$switch-margin: $global-margin !default; +$switch-paddle-background: $white !default; +$switch-paddle-offset: 0.25rem !default; +$switch-paddle-radius: $global-radius !default; +$switch-paddle-transition: all 0.25s ease-out !default; // 50. Table // --------- -$table-background: $white; -$table-color-scale: 5%; -$table-border: 1px solid smart-scale($table-background, $table-color-scale); -$table-padding: rem-calc(8 10 10); -$table-hover-scale: 2%; -$table-row-hover: darken($table-background, $table-hover-scale); -$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); -$table-is-striped: true; -$table-striped-background: smart-scale($table-background, $table-color-scale); -$table-stripe: even; -$table-head-background: smart-scale($table-background, $table-color-scale / 2); -$table-head-row-hover: darken($table-head-background, $table-hover-scale); -$table-foot-background: smart-scale($table-background, $table-color-scale); -$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); -$table-head-font-color: $body-font-color; -$table-foot-font-color: $body-font-color; -$show-header-for-stacked: false; -$table-stack-breakpoint: medium; +$table-background: $white !default; +$table-color-scale: 5% !default; +$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default; +$table-padding: rem-calc(8 10 10) !default; +$table-hover-scale: 2% !default; +$table-row-hover: darken($table-background, $table-hover-scale) !default; +$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default; +$table-is-striped: true !default; +$table-striped-background: smart-scale($table-background, $table-color-scale) !default; +$table-stripe: even !default; +$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default; +$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default; +$table-foot-background: smart-scale($table-background, $table-color-scale) !default; +$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default; +$table-head-font-color: $body-font-color !default; +$table-foot-font-color: $body-font-color !default; +$show-header-for-stacked: false !default; +$table-stack-breakpoint: medium !default; // 51. Tabs // -------- -$tab-margin: 0; -$tab-background: $white; -$tab-color: $primary-color; -$tab-background-active: $light-gray; -$tab-active-color: $primary-color; -$tab-item-font-size: rem-calc(12); -$tab-item-background-hover: $white; -$tab-item-padding: 1.25rem 1.5rem; -$tab-expand-max: 6; -$tab-content-background: $white; -$tab-content-border: $light-gray; -$tab-content-color: $body-font-color; -$tab-content-padding: 1rem; +$tab-margin: 0 !default; +$tab-background: $white !default; +$tab-color: $primary-color !default; +$tab-background-active: $light-gray !default; +$tab-active-color: $primary-color !default; +$tab-item-font-size: rem-calc(12) !default; +$tab-item-background-hover: $white !default; +$tab-item-padding: 1.25rem 1.5rem !default; +$tab-expand-max: 6 !default; +$tab-content-background: $white !default; +$tab-content-border: $light-gray !default; +$tab-content-color: $body-font-color !default; +$tab-content-padding: 1rem !default; // 52. Thumbnail // ------------- -$thumbnail-border: solid 4px $white; -$thumbnail-margin-bottom: $global-margin; -$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); -$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); -$thumbnail-transition: box-shadow 200ms ease-out; -$thumbnail-radius: $global-radius; +$thumbnail-border: solid 4px $white !default; +$thumbnail-margin-bottom: $global-margin !default; +$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default; +$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default; +$thumbnail-transition: box-shadow 200ms ease-out !default; +$thumbnail-radius: $global-radius !default; // 53. Title Bar // ------------- -$titlebar-background: $black; -$titlebar-color: $white; -$titlebar-padding: 0.5rem; -$titlebar-text-font-weight: bold; -$titlebar-icon-color: $white; -$titlebar-icon-color-hover: $medium-gray; -$titlebar-icon-spacing: 0.25rem; +$titlebar-background: $black !default; +$titlebar-color: $white !default; +$titlebar-padding: 0.5rem !default; +$titlebar-text-font-weight: bold !default; +$titlebar-icon-color: $white !default; +$titlebar-icon-color-hover: $medium-gray !default; +$titlebar-icon-spacing: 0.25rem !default; // 54. Tooltip // ----------- -$has-tip-cursor: help; -$has-tip-font-weight: $global-weight-bold; -$has-tip-border-bottom: dotted 1px $dark-gray; -$tooltip-background-color: $black; -$tooltip-color: $white; -$tooltip-padding: 0.75rem; -$tooltip-max-width: 10rem; -$tooltip-font-size: $small-font-size; -$tooltip-pip-width: 0.75rem; -$tooltip-pip-height: $tooltip-pip-width * 0.866; -$tooltip-radius: $global-radius; +$has-tip-cursor: help !default; +$has-tip-font-weight: $global-weight-bold !default; +$has-tip-border-bottom: dotted 1px $dark-gray !default; +$tooltip-background-color: $black !default; +$tooltip-color: $white !default; +$tooltip-padding: 0.75rem !default; +$tooltip-max-width: 10rem !default; +$tooltip-font-size: $small-font-size !default; +$tooltip-pip-width: 0.75rem !default; +$tooltip-pip-height: $tooltip-pip-width * 0.866 !default; +$tooltip-radius: $global-radius !default; // 55. Top Bar // ----------- -$topbar-padding: 0.5rem; -$topbar-background: $light-gray; -$topbar-submenu-background: $topbar-background; -$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; -$topbar-input-width: 200px; -$topbar-unstack-breakpoint: medium; +$topbar-padding: 0.5rem !default; +$topbar-background: $light-gray !default; +$topbar-submenu-background: $topbar-background !default; +$topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default; +$topbar-input-width: 200px !default; +$topbar-unstack-breakpoint: medium !default; // 56. Xy Grid // ----------- -$xy-grid: true; -$grid-container: $global-width; -$grid-columns: 12; +$xy-grid: true !default; +$grid-container: $global-width !default; +$grid-columns: 12 !default; $grid-margin-gutters: ( small: 20px, medium: 30px -); -$grid-padding-gutters: $grid-margin-gutters; -$grid-container-padding: $grid-padding-gutters; -$grid-container-max: $global-width; -$xy-block-grid-max: 8; +) !default; +$grid-padding-gutters: $grid-margin-gutters !default; +$grid-container-padding: $grid-padding-gutters !default; +$grid-container-max: $global-width !default; +$xy-block-grid-max: 8 !default; diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index 577b8476f..bb1811d9c 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -1,7 +1,8 @@ @charset "utf-8"; -@import "settings"; +@import "util/util"; @import "consul_settings"; +@import "settings"; @import "custom_settings"; @import "foundation";