From 757da0f314b1b274bfd05bdb48eb39ea473ef1ea Mon Sep 17 00:00:00 2001 From: Myles Derham Date: Tue, 5 Apr 2016 16:45:44 +1200 Subject: [PATCH] Updated Foundation version to 6.2 and updated the settings file to match. --- bower.json | 2 +- themes/base/scss/_settings.scss | 110 +++++++++++++++++++------------- 2 files changed, 65 insertions(+), 47 deletions(-) diff --git a/bower.json b/bower.json index 1c67f9a..25a9563 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "plato-creative/plato-silverstripe-installer", "dependencies": { - "foundation-sites": "6.1.2", + "foundation-sites": "6.2.0", "jquery": "2.1.4", "jquery-cycle2": "2.1.6", "modernizr": "3.2.0", diff --git a/themes/base/scss/_settings.scss b/themes/base/scss/_settings.scss index f787f4b..54dfcd0 100755 --- a/themes/base/scss/_settings.scss +++ b/themes/base/scss/_settings.scss @@ -25,19 +25,20 @@ // 20. Label // 21. Media Object // 22. Menu -// 23. Off-canvas -// 24. Orbit -// 25. Pagination -// 26. Progress Bar -// 27. Reveal -// 28. Slider -// 29. Switch -// 30. Table -// 31. Tabs -// 32. Thumbnail -// 33. Title Bar -// 34. Tooltip -// 35. Top Bar +// 23. Meter +// 24. Off-canvas +// 25. Orbit +// 26. Pagination +// 27. Progress Bar +// 28. Reveal +// 29. Slider +// 30. Switch +// 31. Table +// 32. Tabs +// 33. Thumbnail +// 34. Title Bar +// 35. Tooltip +// 36. Top Bar @import 'foundation-sites/scss/util/util'; @@ -47,11 +48,13 @@ $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; -$primary-color: #2199e8; -$secondary-color: #777; -$success-color: #3adb76; -$warning-color: #ffae00; -$alert-color: #ec5840; +$foundation-palette: ( + primary: #2199e8, + secondary: #777, + success: #3adb76, + warning: #ffae00, + alert: #ec5840, +); $light-gray: #e6e6e6; $medium-gray: #cacaca; $dark-gray: #8a8a8a; @@ -67,6 +70,10 @@ $global-weight-normal: normal; $global-weight-bold: bold; $global-radius: 0; $global-text-direction: ltr; +$global-flexbox: false; +$print-transparent-backgrounds: true; + +@include add-foundation-colors; // 2. Breakpoints // -------------- @@ -85,7 +92,7 @@ $breakpoint-classes: (small medium large); $grid-row-width: $global-width; $grid-column-count: 12; -$grid-column-responsive-gutter: ( +$grid-column-gutter: ( small: 20px, medium: 30px, ); @@ -177,9 +184,9 @@ $stat-font-size: 2.5rem; $abide-inputs: true; $abide-labels: true; -$input-background-invalid: $alert-color; -$form-label-color-invalid: $alert-color; -$input-error-color: $alert-color; +$input-background-invalid: map-get($foundation-palette, alert); +$form-label-color-invalid: map-get($foundation-palette, alert); +$input-error-color: map-get($foundation-palette, alert); $input-error-font-size: rem-calc(12); $input-error-font-weight: $global-weight-bold; @@ -231,8 +238,8 @@ $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: #fff; -$button-color-alt: #000; +$button-color: $white; +$button-color-alt: $black; $button-radius: $global-radius; $button-sizes: ( tiny: 0.6rem, @@ -320,7 +327,7 @@ $fieldset-padding: rem-calc(20); $fieldset-margin: rem-calc(18 0); $legend-padding: rem-calc(0 3); $form-spacing: rem-calc(16); -$helptext-color: #333; +$helptext-color: $black; $helptext-font-size: rem-calc(13); $helptext-font-style: italic; $input-prefix-color: $black; @@ -332,9 +339,10 @@ $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: #333; +$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-background: $white; @@ -371,10 +379,21 @@ $mediaobject-image-width-stacked: 100%; $menu-margin: 0; $menu-margin-nested: 1rem; $menu-item-padding: 0.7rem 1rem; +$menu-item-color-active: $white; +$menu-item-background-active: map-get($foundation-palette, primary); $menu-icon-spacing: 0.25rem; -$menu-expand-max: 6; -// 23. Off-canvas +// 23. 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; + +// 24. Off-canvas // -------------- $offcanvas-size: 250px; @@ -387,7 +406,7 @@ $offcanvas-exit-background: rgba($white, 0.25); $maincontent-class: 'off-canvas-content'; $maincontent-shadow: 0 0 10px rgba($black, 0.5); -// 24. Orbit +// 25. Orbit // --------- $orbit-bullet-background: $medium-gray; @@ -402,7 +421,7 @@ $orbit-control-background-hover: rgba($black, 0.5); $orbit-control-padding: 1rem; $orbit-control-zindex: 10; -// 25. Pagination +// 26. Pagination // -------------- $pagination-font-size: rem-calc(14); @@ -419,7 +438,7 @@ $pagination-ellipsis-color: $black; $pagination-mobile-items: false; $pagination-arrows: true; -// 26. Progress Bar +// 27. Progress Bar // ---------------- $progress-height: 1rem; @@ -428,24 +447,24 @@ $progress-margin-bottom: $global-margin; $progress-meter-background: $primary-color; $progress-radius: $global-radius; -// 27. Reveal +// 28. Reveal // ---------- $reveal-background: $white; $reveal-width: 600px; $reveal-max-width: $global-width; -$reveal-offset: rem-calc(100); $reveal-padding: $global-padding; $reveal-border: 1px solid $medium-gray; $reveal-radius: $global-radius; $reveal-zindex: 1005; $reveal-overlay-background: rgba($black, 0.45); -// 28. Slider +// 29. Slider // ---------- +$slider-width-vertical: 0.5rem; +$slider-transition: all 0.2s ease-in-out; $slider-height: 0.5rem; -$slider-width-vertical: $slider-height; $slider-background: $light-gray; $slider-fill-background: $medium-gray; $slider-handle-height: 1.4rem; @@ -453,9 +472,8 @@ $slider-handle-width: 1.4rem; $slider-handle-background: $primary-color; $slider-opacity-disabled: 0.25; $slider-radius: $global-radius; -$slider-transition: all 0.2s ease-in-out; -// 29. Switch +// 30. Switch // ---------- $switch-background: $medium-gray; @@ -471,7 +489,7 @@ $switch-paddle-offset: 0.25rem; $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; -// 30. Table +// 31. Table // --------- $table-background: $white; @@ -488,14 +506,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale); $table-head-font-color: $body-font-color; $show-header-for-stacked: false; -// 31. Tabs +// 32. Tabs // -------- $tab-margin: 0; $tab-background: $white; $tab-background-active: $light-gray; -$tab-border: $light-gray; -$tab-item-color: foreground($tab-background, $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; @@ -504,7 +521,7 @@ $tab-content-border: $light-gray; $tab-content-color: foreground($tab-background, $primary-color); $tab-content-padding: 1rem; -// 32. Thumbnail +// 33. Thumbnail // ------------- $thumbnail-border: solid 4px $white; @@ -514,7 +531,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; -// 33. Title Bar +// 34. Title Bar // ------------- $titlebar-background: $black; @@ -525,7 +542,7 @@ $titlebar-icon-color: $white; $titlebar-icon-color-hover: $medium-gray; $titlebar-icon-spacing: 0.25rem; -// 34. Tooltip +// 35. Tooltip // ----------- $has-tip-font-weight: $global-weight-bold; @@ -536,13 +553,14 @@ $tooltip-padding: 0.75rem; $tooltip-font-size: $small-font-size; $tooltip-pip-width: 0.75rem; $tooltip-pip-height: $tooltip-pip-width * 0.866; -$tooltip-pip-offset: 1.25rem; $tooltip-radius: $global-radius; -// 35. Top Bar +// 36. Top Bar // ----------- $topbar-padding: 0.5rem; $topbar-background: $light-gray; +$topbar-submenu-background: $topbar-background; $topbar-title-spacing: 1rem; $topbar-input-width: 200px; +$topbar-unstack-breakpoint: medium;