From 8d9cb0dce8692f87f98e04d5e6efbd797fe99acf Mon Sep 17 00:00:00 2001 From: Myles Beardsmore Date: Fri, 5 Feb 2016 15:28:34 +1300 Subject: [PATCH 1/3] Added new SCSS structure --- themes/base/scss/{base => }/_base.scss | 26 +- themes/base/scss/_settings.scss | 529 +----------------- themes/base/scss/app.scss | 13 +- themes/base/scss/base/_banner.scss | 79 --- themes/base/scss/base/_footer.scss | 0 themes/base/scss/base/_form.scss | 138 ----- themes/base/scss/base/_header.scss | 0 themes/base/scss/base/_navigation.scss | 19 - themes/base/scss/editor.scss | 2 +- themes/base/scss/layout/_general_layout.scss | 0 themes/base/scss/layout/_modal.scss | 0 themes/base/scss/layout/_navigation.scss | 0 themes/base/scss/mixins/_mixins.scss | 16 + themes/base/scss/modules/_module-banners.scss | 56 ++ themes/base/scss/modules/_module-gallery.scss | 4 + .../base/scss/modules/_module-homeslides.scss | 117 ++++ .../base/scss/modules/_module-hometiles.scss | 198 +++++++ themes/base/scss/pages/_page.scss | 5 + themes/base/scss/partials/_footer.scss | 5 + themes/base/scss/partials/_form.scss | 5 + themes/base/scss/partials/_header.scss | 5 + themes/base/scss/partials/_navigation.scss | 5 + themes/base/scss/plugins/_plugins.scss | 1 - themes/base/scss/shame/_shame.scss | 0 24 files changed, 443 insertions(+), 780 deletions(-) rename themes/base/scss/{base => }/_base.scss (92%) mode change 100644 => 100755 themes/base/scss/_settings.scss delete mode 100644 themes/base/scss/base/_banner.scss delete mode 100644 themes/base/scss/base/_footer.scss delete mode 100644 themes/base/scss/base/_form.scss delete mode 100644 themes/base/scss/base/_header.scss delete mode 100644 themes/base/scss/base/_navigation.scss mode change 100644 => 100755 themes/base/scss/editor.scss delete mode 100755 themes/base/scss/layout/_general_layout.scss delete mode 100644 themes/base/scss/layout/_modal.scss delete mode 100644 themes/base/scss/layout/_navigation.scss create mode 100644 themes/base/scss/mixins/_mixins.scss create mode 100644 themes/base/scss/modules/_module-banners.scss create mode 100644 themes/base/scss/modules/_module-gallery.scss create mode 100644 themes/base/scss/modules/_module-homeslides.scss create mode 100644 themes/base/scss/modules/_module-hometiles.scss create mode 100755 themes/base/scss/pages/_page.scss create mode 100755 themes/base/scss/partials/_footer.scss create mode 100755 themes/base/scss/partials/_form.scss create mode 100755 themes/base/scss/partials/_header.scss create mode 100755 themes/base/scss/partials/_navigation.scss mode change 100644 => 100755 themes/base/scss/plugins/_plugins.scss delete mode 100644 themes/base/scss/shame/_shame.scss diff --git a/themes/base/scss/base/_base.scss b/themes/base/scss/_base.scss similarity index 92% rename from themes/base/scss/base/_base.scss rename to themes/base/scss/_base.scss index cf07757..f7550ce 100755 --- a/themes/base/scss/base/_base.scss +++ b/themes/base/scss/_base.scss @@ -16,14 +16,6 @@ main{ display: block; } -// --------------- animations --------------- - -$fast-animation: .5s ease-in; -$animation: 1s ease; -$slow-animation: 2s ease; - -// --------------- visibility --------------- - // --------------- headings --------------- h1 { @@ -170,6 +162,24 @@ dt { dd { } + +// --------------- logo --------------- + +.siteName { + +} + +// --------------- tagline --------------- + +.siteTagline{ + +} +// --------------- icons --------------- + +%icon { + +} + // --------------- table --------------- table { diff --git a/themes/base/scss/_settings.scss b/themes/base/scss/_settings.scss old mode 100644 new mode 100755 index 9ac432f..5539e29 --- a/themes/base/scss/_settings.scss +++ b/themes/base/scss/_settings.scss @@ -1,528 +1 @@ -// Foundation for Sites Settings -// ----------------------------- -// -// Table of Contents: -// -// 1. Global -// 2. Breakpoints -// 3. The Grid -// 4. Base Typography -// 5. Typography Helpers -// 6. Abide -// 7. Accordion -// 8. Accordion Menu -// 9. Badge -// 10. Breadcrumbs -// 11. Button -// 12. Button Group -// 13. Callout -// 14. Close Button -// 15. Drilldown -// 16. Dropdown -// 17. Dropdown Menu -// 18. Flex Video -// 19. Forms -// 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. Tooltip -// 34. Top Bar - -// 1. Global -// --------- - -$global-width: rem-calc(1200); -$global-font-size: 100%; -$global-lineheight: 1.5; -$primary-color: #2199e8; -$secondary-color: #777; -$success-color: #3adb76; -$warning-color: #ffae00; -$alert-color: #ec5840; -$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-margin: 1rem; -$global-weight-normal: normal; -$global-weight-bold: bold; -$global-radius: 0; -$global-text-direction: ltr; -$rem-base: 16px; - -// 2. Breakpoints -// -------------- - -$breakpoints: ( - tiny: 0, - small: 320px, - medium: 640px, - large: 1024px, - xlarge: 1200px, - xxlarge: 1440px, -); -$breakpoint-classes: (small medium large); - -// 3. The Grid -// ----------- - -$grid-row-width: $global-width; -$grid-column-count: 12; -$grid-column-gutter: 30px; -$block-grid-max: 6; - -// 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-sizes: ( - small: ( - 'h1': 24, - 'h2': 20, - 'h3': 19, - 'h4': 18, - 'h5': 17, - 'h6': 16, - ), - medium: ( - 'h1': 48, - 'h2': 40, - 'h3': 31, - 'h4': 25, - 'h5': 20, - 'h6': 16, - ), -); -$header-color: inherit; -$header-lineheight: 1.4; -$header-margin-bottom: 0.5rem; -$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; -$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; - -// 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; - -// 6. Abide -// -------- - -$abide-inputs: true; -$abide-labels: true; -$input-background-invalid: $alert-color; -$form-label-color-invalid: $alert-color; -$input-error-color: $alert-color; -$input-error-font-size: rem-calc(12); -$input-error-font-weight: $global-weight-bold; - -// 7. Accordion -// ------------ - -$accordion-background: $white; -$accordion-plusminus: true; -$accordion-item-color: foreground($accordion-background, $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: foreground($accordion-background, $primary-color); -$accordion-content-padding: 1rem; - -// 8. Accordion Menu -// ----------------- - -$accordionmenu-arrows: true; - -// 9. Badge -// -------- - -$badge-background: $primary-color; -$badge-color: foreground($badge-background); -$badge-padding: 0.3em; -$badge-minwidth: 2.1em; -$badge-font-size: 0.6rem; - -// 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-slash: true; - -// 11. Button -// ---------- - -$button-padding: 0.85em 1em; -$button-margin: 0 $global-margin $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-radius: $global-radius; -$button-sizes: ( - tiny: 0.6rem, - small: 0.75rem, - default: 0.9rem, - large: 1.25rem, -); -$button-opacity-disabled: 0.25; - -// 12. Button Group -// ---------------- - -$buttongroup-margin: 1rem; -$buttongroup-spacing: 1px; -$buttongroup-child-selector: '.button'; -$buttongroup-expand-max: 6; - -// 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%; - -// 14. Close Button -// ---------------- - -$closebutton-position: right top; -$closebutton-offset-horizontal: 1rem; -$closebutton-offset-vertical: 0.5rem; -$closebutton-size: 2em; -$closebutton-lineheight: 1; -$closebutton-color: $dark-gray; -$closebutton-color-hover: $black; - -// 15. Drilldown -// ------------- - -$drilldown-transition: transform 0.15s linear; -$drilldown-arrows: true; - -// 16. Dropdown -// ------------ - -$dropdown-padding: 1rem; -$dropdown-border: 1px solid $medium-gray; -$dropdown-font-size: 16rem; -$dropdown-width: 300px; -$dropdown-radius: $global-radius; -$dropdown-sizes: ( - tiny: 100px, - small: 200px, - large: 400px, -); - -// 17. Dropdown Menu -// ----------------- - -$dropdownmenu-arrows: true; -$dropdownmenu-min-width: 200px; -$dropdownmenu-background: $white; -$dropdownmenu-border: 1px solid $medium-gray; - -// 18. Flex Video -// -------------- - -$flexvideo-padding-top: rem-calc(25); -$flexvideo-margin-bottom: rem-calc(16); -$flexvideo-ratio: 4 by 3; -$flexvideo-ratio-widescreen: 16 by 9; - -// 19. 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: #333; -$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: #fafafa; -$select-triangle-color: #333; -$select-radius: $global-radius; -$input-color: $dark-gray; -$input-font-family: inherit; -$input-font-size: rem-calc(16); -$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-shadow: inset 0 1px 2px rgba($black, 0.1); -$input-shadow-focus: 0 0 5px $medium-gray; -$input-cursor-disabled: default; -$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -$input-number-spinners: true; -$input-radius: $global-radius; - -// 20. Label -// --------- - -$label-background: $primary-color; -$label-color: foreground($label-background); -$label-font-size: 0.8rem; -$label-padding: 0.33333rem 0.5rem; -$label-radius: $global-radius; - -// 21. Media Object -// ---------------- - -$mediaobject-margin-bottom: $global-margin; -$mediaobject-section-padding: $global-padding; -$mediaobject-image-width-stacked: 100%; - -// 22. Menu -// -------- - -$menu-margin: 0; -$menu-margin-nested: 1rem; -$menu-item-padding: 0.7rem 1rem; -$menu-icon-spacing: 0.25rem; -$menu-expand-max: 6; - -// 23. Off-canvas -// -------------- - -$offcanvas-size: 250px; -$offcanvas-background: $light-gray; -$offcanvas-zindex: -1; -$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'; -$maincontent-shadow: 0 0 10px rgba($black, 0.5); - -// 24. 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; - -// 25. 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: foreground($pagination-item-background-current); -$pagination-item-color-disabled: $medium-gray; -$pagination-ellipsis-color: $black; -$pagination-mobile-items: false; -$pagination-arrows: true; - -// 26. Progress Bar -// ---------------- - -$progress-height: 1rem; -$progress-background: $medium-gray; -$progress-margin-bottom: $global-margin; -$progress-meter-background: $primary-color; -$progress-radius: $global-radius; - -// 27. 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 -// ---------- - -$slider-height: 0.5rem; -$slider-width-vertical: $slider-height; -$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-transition: all 0.2s ease-in-out; - -// 29. 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; - -// 30. 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-striped-background: smart-scale($table-background, $table-color-scale); -$table-stripe: even; -$table-head-background: smart-scale($table-background, $table-color-scale / 2); -$table-foot-background: smart-scale($table-background, $table-color-scale); -$table-head-font-color: $body-font-color; -$show-header-for-stacked: false; - -// 31. 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-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: foreground($tab-background, $primary-color); -$tab-content-padding: 1rem; - -// 32. 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; - -// 33. Tooltip -// ----------- - -$tooltip-background-color: $black; -$tooltip-color: $white; -$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; - -// 34. Top Bar -// ----------- - -$topbar-padding: 0.5rem; -$topbar-background: #eee; -$topbar-link-color: #fff; -$topbar-input-width: 200px; +// settings from Foundation will go here... diff --git a/themes/base/scss/app.scss b/themes/base/scss/app.scss index cc7f579..edb85e4 100755 --- a/themes/base/scss/app.scss +++ b/themes/base/scss/app.scss @@ -15,7 +15,7 @@ @include foundation-float-classes; @include foundation-accordion; @include foundation-accordion-menu; -// @include foundation-badge; +@include foundation-badge; // @include foundation-breadcrumbs; // @include foundation-button-group; @include foundation-callout; @@ -29,7 +29,7 @@ @include foundation-menu; @include foundation-off-canvas; @include foundation-orbit; -// @include foundation-pagination; +@include foundation-pagination; // @include foundation-progress-bar; // @include foundation-slider; @include foundation-sticky; @@ -42,8 +42,9 @@ @include foundation-tooltip; @include foundation-top-bar; +@import "mixins/*"; @import "plugins/*"; -@import "base/*"; -@import "layout/*"; - -@import "shame/shame"; +@import "base"; +@import "modules/*"; +@import "pages/*"; +@import "partials/*"; diff --git a/themes/base/scss/base/_banner.scss b/themes/base/scss/base/_banner.scss deleted file mode 100644 index a91269d..0000000 --- a/themes/base/scss/base/_banner.scss +++ /dev/null @@ -1,79 +0,0 @@ -$zbanner: 200; - -%banner-arrows{ - display: block; - position: absolute; - top: 0; - bottom: 0; - height: 100%; - opacity: 0.1; - transition: opacity 500ms ease; - z-index: $zbanner+20; - .banner-wrapper:hover &{ - opacity: 0.5; - &:hover{ - opacity: 1; - } - } - .fa{ - // display: none; - position: relative; - top: 50%; - margin-top: rem-calc(-15px); - font-size: rem-calc(30px); - color: $white; - } -} - -.banner .next{ - @extend %banner-arrows; - right: 0; -} -.banner .prev{ - @extend %banner-arrows; - left: 0; -} - -.banner-wrapper{ - position: relative; - z-index: $zbanner; -} - -.banner{ - width: 100%; - height: 100%; - .slide{ - width: 100%; - background-size: cover; - } - -} - -.banner .pager{ - text-align: center; - font-size: rem-calc(20px); - opacity: 0.1; - transition: opacity 500ms ease; - z-index: $zbanner+22; - position: absolute; - bottom: 0; - right: 0; - left: 0; - span{ - display: inline-block; - height: 0; - width: 0; - overflow: hidden; - border: 1px solid $white; - border-radius: 50%; - background: rgba($white, 0.32); - padding: rem-calc(12px 0 0 12px); - margin: rem-calc(6px) - } - .cycle-pager-active{ - background: rgba($white, 0.67); - } - .banner-wrapper:hover &{ - opacity: 1; - } -} diff --git a/themes/base/scss/base/_footer.scss b/themes/base/scss/base/_footer.scss deleted file mode 100644 index e69de29..0000000 diff --git a/themes/base/scss/base/_form.scss b/themes/base/scss/base/_form.scss deleted file mode 100644 index e3193f8..0000000 --- a/themes/base/scss/base/_form.scss +++ /dev/null @@ -1,138 +0,0 @@ -/* -Form Elements ------------- -This file should contain base elements form forms .e.g. inputs and textarea -No structural or layout styles should be in this file. -*/ - -// --------------- inputs --------------- -// --------------- text --------------- -input.text, -input[type=text] { - -} - -// --------------- textarea --------------- -textarea { - -} - -// --------------- email --------------- -input.email, -input[type=email] { - -} - -// --------------- password --------------- -input.password, -input[type=password] { - -} - -// --------------- web site address --------------- -input.url, -input[type=url] { - -} - -// --------------- search --------------- -input.search, -input[type=search] { - -} - -// --------------- select menu --------------- -input.text, -input[type=text] { - -} -// --------------- checkbox --------------- -input.text, -input[type=text] { - -} -// --------------- radio --------------- -input.text, -input[type=text] { - -} -// --------------- color --------------- -input.text, -input[type=text] { - -} -// --------------- number --------------- -input.number, -input[type=number] { - -} -// --------------- range --------------- -input.range, -input[type=range] { - -} -// --------------- date --------------- -input.date, -input[type=date] { - -} -// --------------- month --------------- -input.month, -input[type=month] { - -} -// --------------- week --------------- -input.week, -input[type=week] { - -} -// --------------- datetime --------------- -input.datetime, -input[type=datetime] , -input.datetime-local, -input[type=datetime-local] { - -} - -// --------------- required and optional --------------- - -form:not(.userform){ - .requiredField > label:after{ - content: ' *'; - color: $alert-color; - } -} - -.userform{ - .field:not(.requiredField) > label:after{ - content: " (Optional)"; - color: $medium-gray; - } -} - -// --------------- errors --------------- - -span.error, -small.error{ - -} - -// --------------- buttons --------------- -.btn, -.button, -input.submit, -input[type=submit] { - @include button; -} - -// --------------- search buttons --------------- - -button[value=Search]{ - -} - -// --------------- field wrapper --------------- - -.field{ - -} diff --git a/themes/base/scss/base/_header.scss b/themes/base/scss/base/_header.scss deleted file mode 100644 index e69de29..0000000 diff --git a/themes/base/scss/base/_navigation.scss b/themes/base/scss/base/_navigation.scss deleted file mode 100644 index b2221a7..0000000 --- a/themes/base/scss/base/_navigation.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* -navigation ----------- -This file should contain base styling for navigation. -This means padding, link colors and hovers effects. -NO Layout styles at this stage. -*/ - -nav, -.navigation { - ul, - ol{ - list-style: none; - margin: 0; - } - a{ - display: block; - } -} diff --git a/themes/base/scss/editor.scss b/themes/base/scss/editor.scss old mode 100644 new mode 100755 index 84d371a..51483e5 --- a/themes/base/scss/editor.scss +++ b/themes/base/scss/editor.scss @@ -10,4 +10,4 @@ @include foundation-typography; @include foundation-button; -@import "base/base"; +@import "base"; diff --git a/themes/base/scss/layout/_general_layout.scss b/themes/base/scss/layout/_general_layout.scss deleted file mode 100755 index e69de29..0000000 diff --git a/themes/base/scss/layout/_modal.scss b/themes/base/scss/layout/_modal.scss deleted file mode 100644 index e69de29..0000000 diff --git a/themes/base/scss/layout/_navigation.scss b/themes/base/scss/layout/_navigation.scss deleted file mode 100644 index e69de29..0000000 diff --git a/themes/base/scss/mixins/_mixins.scss b/themes/base/scss/mixins/_mixins.scss new file mode 100644 index 0000000..8f8e597 --- /dev/null +++ b/themes/base/scss/mixins/_mixins.scss @@ -0,0 +1,16 @@ +/* +Mixins +------------ +This file should contain all mixins for your site +*/ + +// Transitions +// @include transition(color .3s ease); +/******************************************************************************/ +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + -ms-transition: $args; + -o-transition: $args; + transition: $args; +} diff --git a/themes/base/scss/modules/_module-banners.scss b/themes/base/scss/modules/_module-banners.scss new file mode 100644 index 0000000..dc133e3 --- /dev/null +++ b/themes/base/scss/modules/_module-banners.scss @@ -0,0 +1,56 @@ +// Layout One +.banner-layout-one { + background-color: #d3d3d3; + margin-bottom: rem-calc(40); + .banner-wrapper, + .banner-content { + width: 100%; + padding: 0; + margin: 0; + height: 250px; + } + + .banner-content { + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } + + .banner-content h1{ + color: #FFF; + margin-top: 80px; + text-shadow: 1px 1px 6px rgba(0,0,0,0.7); + } +} + +// Layout Two +.banner-layout-two { + background-color: #d3d3d3; + + .banner-image{ + background-color: #afafaf; + min-height: rem-calc(250); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + h1{ + padding-top: rem-calc(70); + } +} + +.banner-layout-two.banner-wrapper { + width: 100%; + min-width: 100%; + max-width: 100%; +} +// @media #{$small-only} { +@include breakpoint(small only) { + .banner-layout-two{ + h1{ + padding-top: rem-calc(40); + padding-bottom: rem-calc(40); + } + + } +} diff --git a/themes/base/scss/modules/_module-gallery.scss b/themes/base/scss/modules/_module-gallery.scss new file mode 100644 index 0000000..54dfe3f --- /dev/null +++ b/themes/base/scss/modules/_module-gallery.scss @@ -0,0 +1,4 @@ +// Gallery +.gallery-block { + margin: rem-calc(40 0); +} diff --git a/themes/base/scss/modules/_module-homeslides.scss b/themes/base/scss/modules/_module-homeslides.scss new file mode 100644 index 0000000..97fb5dd --- /dev/null +++ b/themes/base/scss/modules/_module-homeslides.scss @@ -0,0 +1,117 @@ +.home-slides-wrapper, +.home-slides, +.home-slide { + width: 100%; + min-height: 400px; + max-height: 400px; + padding: 0; + margin: 0; + z-index: 2; +} + +.home-slides-wrapper { + position: relative; + overflow: hidden; +} + +.home-pager-wrapper { + display:block; + text-align:center; + z-index:200; + position:absolute; + bottom:0; + right:0; + left:0; + z-index:200; +} +.home-slides-pager { + z-index:200; + bottom:0; + text-align:center; + display:inline-block; + width:auto; + text-indent:-9999px; + span { + color: rgba(#FFF, 0.5);; + margin-right:24px; + font-size: 1.5em; + cursor: pointer; + background-image:url("../images/pager-icon-inactive.png"); + background-repeat:no-repeat; + display:block; + float:left; + height:14px; + width:14px; + &:hover { + color: rgba(#666, 0.5); + } + &.cycle-pager-active { + color: rgba(#666, 0.8);; + background-image:url("../images/pager-icon.png"); + + } + } + span:last-child { + margin-right:0; + } +} + +#home-slides-prev, #home-slides-next { + position: absolute; + z-index: 200; + bottom: 50%; + color: rgba($white, 1); + font-size:rem-calc(48); + + &:hover{ + color: rgba($white, 0.9); + } +} + +#home-slides-prev{ + left: rem-calc(20); +} + +#home-slides-next{ + right: rem-calc(20); +} + +.home-slide { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.home-slide-content h1 { + margin-top: 100px; + color: #FFF; + text-shadow: 1px 1px 4px rgba(0,0,0,1); +} + +.home-slide-content p { + color: #FFF; + max-width: 60%; + text-shadow: 1px 1px 4px rgba(0,0,0,1); +} + +.home-slide-content a { + color: #FFF; + text-decoration: underline; + text-shadow: 1px 1px 4px rgba(0,0,0,1); + display: inline-block; +} + +.bannerOverlay { + position:absolute; + bottom:0; + left:0; + z-index:900; +} + +@media only screen and (max-device-width: 480px) { + + .home-slide-content p { + max-width: 100%; + } + +} diff --git a/themes/base/scss/modules/_module-hometiles.scss b/themes/base/scss/modules/_module-hometiles.scss new file mode 100644 index 0000000..0d5806d --- /dev/null +++ b/themes/base/scss/modules/_module-hometiles.scss @@ -0,0 +1,198 @@ +%overlay { + position:absolute; + opacity:0; +} +// Layout One +.home-tiles-layout-one { + margin: 40px 0 40px; + + .home-tile-image { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + margin-bottom: 15px; + max-height: 150px; + min-height: 150px; + width: 100%; + } + + .home-tile { + text-align: left; + a { + background-color: #f2f2f2; + display: block; + border:1px solid #e7e7e7; + position:relative; + padding-top:rem-calc(50); + padding-bottom:rem-calc(60); + overflow:hidden; + .overlayLeft { + @extend %overlay; + left:-40px; + bottom:0; + -webkit-animation: exitL 1.1s 1 forwards; /* Safari 4+ */ + -moz-animation: exitL 1.1s 1 forwards; /* Fx 5+ */ + -o-animation: exitL 1.1s 1 forwards; /* Opera 12+ */ + animation: exitL 1.1s 1 forwards; + } + .overlayBottom { + @extend %overlay; + left:0; + bottom:-60px; + -webkit-animation: exitB 1s 1 forwards; /* Safari 4+ */ + -moz-animation: exitB 1s 1 forwards; /* Fx 5+ */ + -o-animation: exitB 1s 1 forwards; /* Opera 12+ */ + animation: exitB 1s 1 forwards; + } + &:hover { + span.button { + // background-color:$button-red; + background-color:red; + } + .overlayLeft { + left:0; + bottom:0; + -webkit-animation: enterL 1.1s 1 forwards; /* Safari 4+ */ + -moz-animation: enterL 1.1s 1 forwards; /* Fx 5+ */ + -o-animation: enterL 1.1s 1 forwards; /* Opera 12+ */ + animation: enterL 1.1s 1 forwards; + animation-delay:0.1s; + } + .overlayBottom { + left:0; + bottom:0; + -webkit-animation: enterB 1s 1 forwards; /* Safari 4+ */ + -moz-animation: enterB 1s 1 forwards; /* Fx 5+ */ + -o-animation: enterB 1s 1 forwards; /* Opera 12+ */ + animation: enterB 1s 1 forwards; + } + } + @keyframes enterL { + 0% { + left:-40px; + bottom:0; + opacity:0; + } + 20% { + left:-40px; + bottom:0; + opacity:0; + } + 100% { + left:0; + bottom:0; + opacity:1; + } + } + @keyframes exitL { + 0% { + left:0; + bottom:0; + opacity:1; + } + 100% { + left:-40px; + bottom:0; + opacity:0; + } + } + @keyframes enterB { + 0% { + left:0; + bottom:-60px; + opacity:0; + } + 100% { + left:0; + bottom:0; + opacity:1; + } + } + @keyframes exitB { + 0% { + left:0; + bottom:0; + opacity:1; + } + 100% { + left:0; + bottom:-60px; + opacity:0; + } + } + } + + p { + color: #333; + padding: rem-calc(0 20); + margin-bottom:rem-calc(60); + } + + .title { + color: #333; + padding: rem-calc(0 20); + } + } + + .linkWrapper { + position:absolute; + left:0; + right:0; + bottom:60px; + } + + .home-tile-link { + display: inline-block; + // margin-bottom: rem-calc(20); + padding: 10px 15px; + text-align: center; + position:relative; + margin:0 auto; + text-align:center; + } +} + +// Layout Two +.home-tiles-layout-two { + margin: 40px 0 40px; + + a { + display: block; + + &:hover { + .home-tile-content { + background-color: rgba(0, 0, 0, .5); + } + } + } + + .home-tile-image { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + //min-height: rem-calc(200); + padding: rem-calc(0); + } + + .home-tile-content { + background-color: rgba(0, 0, 0, .3); + padding: rem-calc(20); + + .title { + color: $white; + } + + p { + color: $white; + } + + span { + display: inline-block; + color: $white; + padding: rem-calc(5 15); + border: 1px solid $white; + } + } + + +} diff --git a/themes/base/scss/pages/_page.scss b/themes/base/scss/pages/_page.scss new file mode 100755 index 0000000..9bf8757 --- /dev/null +++ b/themes/base/scss/pages/_page.scss @@ -0,0 +1,5 @@ +/* +Basic Page Styles +------------ +This file should contain styles for a generic page. +*/ diff --git a/themes/base/scss/partials/_footer.scss b/themes/base/scss/partials/_footer.scss new file mode 100755 index 0000000..052124b --- /dev/null +++ b/themes/base/scss/partials/_footer.scss @@ -0,0 +1,5 @@ +/* +Footer Styles +------------ +This file should contain styles for the footer area of your site. +*/ diff --git a/themes/base/scss/partials/_form.scss b/themes/base/scss/partials/_form.scss new file mode 100755 index 0000000..0361474 --- /dev/null +++ b/themes/base/scss/partials/_form.scss @@ -0,0 +1,5 @@ +/* +Form Styles +------------ +This file should contain styles for forms on your site. +*/ diff --git a/themes/base/scss/partials/_header.scss b/themes/base/scss/partials/_header.scss new file mode 100755 index 0000000..5a0b2ac --- /dev/null +++ b/themes/base/scss/partials/_header.scss @@ -0,0 +1,5 @@ +/* +Header Styles +------------ +This file should contain styles for the header area on your site. +*/ diff --git a/themes/base/scss/partials/_navigation.scss b/themes/base/scss/partials/_navigation.scss new file mode 100755 index 0000000..f1a5e52 --- /dev/null +++ b/themes/base/scss/partials/_navigation.scss @@ -0,0 +1,5 @@ +/* +Navigation Styles +---------- +This file should contain base styling for navigation. +*/ diff --git a/themes/base/scss/plugins/_plugins.scss b/themes/base/scss/plugins/_plugins.scss old mode 100644 new mode 100755 index 1cc19e2..7e63cca --- a/themes/base/scss/plugins/_plugins.scss +++ b/themes/base/scss/plugins/_plugins.scss @@ -3,6 +3,5 @@ Imported. Load order is alphabetical and styles can be overriden in custom/_style.scss which is loaded after all plugin stylesheets. */ - @import "fancybox/source/jquery.fancybox"; @import "fancybox/source/helpers/jquery.fancybox-buttons"; diff --git a/themes/base/scss/shame/_shame.scss b/themes/base/scss/shame/_shame.scss deleted file mode 100644 index e69de29..0000000 From 3ab7372731112b954b76f8d0edcc2318fd658e83 Mon Sep 17 00:00:00 2001 From: Myles Beardsmore Date: Fri, 5 Feb 2016 16:00:34 +1300 Subject: [PATCH 2/3] updated settings file to latest version. Fixed Typekit template issue. Updated editor css to just use standard padding. --- themes/base/scss/_settings.scss | 549 +++++++++++++++++++++++++++++++- themes/base/scss/editor.scss | 2 +- themes/base/templates/Page.ss | 6 +- 3 files changed, 552 insertions(+), 5 deletions(-) diff --git a/themes/base/scss/_settings.scss b/themes/base/scss/_settings.scss index 5539e29..f787f4b 100755 --- a/themes/base/scss/_settings.scss +++ b/themes/base/scss/_settings.scss @@ -1 +1,548 @@ -// settings from Foundation will go here... +// Foundation for Sites Settings +// ----------------------------- +// +// Table of Contents: +// +// 1. Global +// 2. Breakpoints +// 3. The Grid +// 4. Base Typography +// 5. Typography Helpers +// 6. Abide +// 7. Accordion +// 8. Accordion Menu +// 9. Badge +// 10. Breadcrumbs +// 11. Button +// 12. Button Group +// 13. Callout +// 14. Close Button +// 15. Drilldown +// 16. Dropdown +// 17. Dropdown Menu +// 18. Flex Video +// 19. Forms +// 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 + +@import 'foundation-sites/scss/util/util'; + +// 1. Global +// --------- + +$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; +$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-weight-normal: normal; +$global-weight-bold: bold; +$global-radius: 0; +$global-text-direction: ltr; + +// 2. Breakpoints +// -------------- + +$breakpoints: ( + small: 0, + medium: 640px, + large: 1024px, + xlarge: 1200px, + xxlarge: 1440px, +); +$breakpoint-classes: (small medium large); + +// 3. The Grid +// ----------- + +$grid-row-width: $global-width; +$grid-column-count: 12; +$grid-column-responsive-gutter: ( + small: 20px, + medium: 30px, +); +$grid-column-align-edge: true; +$block-grid-max: 8; + +// 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-sizes: ( + small: ( + 'h1': 24, + 'h2': 20, + 'h3': 19, + 'h4': 18, + 'h5': 17, + 'h6': 16, + ), + medium: ( + 'h1': 48, + 'h2': 40, + 'h3': 31, + 'h4': 25, + 'h5': 20, + 'h6': 16, + ), +); +$header-color: inherit; +$header-lineheight: 1.4; +$header-margin-bottom: 0.5rem; +$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; +$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; + +// 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; + +// 6. Abide +// -------- + +$abide-inputs: true; +$abide-labels: true; +$input-background-invalid: $alert-color; +$form-label-color-invalid: $alert-color; +$input-error-color: $alert-color; +$input-error-font-size: rem-calc(12); +$input-error-font-weight: $global-weight-bold; + +// 7. Accordion +// ------------ + +$accordion-background: $white; +$accordion-plusminus: true; +$accordion-item-color: foreground($accordion-background, $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: foreground($accordion-background, $primary-color); +$accordion-content-padding: 1rem; + +// 8. Accordion Menu +// ----------------- + +$accordionmenu-arrows: true; +$accordionmenu-arrow-color: $primary-color; + +// 9. Badge +// -------- + +$badge-background: $primary-color; +$badge-color: foreground($badge-background); +$badge-padding: 0.3em; +$badge-minwidth: 2.1em; +$badge-font-size: 0.6rem; + +// 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-slash: true; + +// 11. Button +// ---------- + +$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: #fff; +$button-color-alt: #000; +$button-radius: $global-radius; +$button-sizes: ( + tiny: 0.6rem, + small: 0.75rem, + default: 0.9rem, + large: 1.25rem, +); +$button-opacity-disabled: 0.25; + +// 12. Button Group +// ---------------- + +$buttongroup-margin: 1rem; +$buttongroup-spacing: 1px; +$buttongroup-child-selector: '.button'; +$buttongroup-expand-max: 6; + +// 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%; + +// 14. Close Button +// ---------------- + +$closebutton-position: right top; +$closebutton-offset-horizontal: 1rem; +$closebutton-offset-vertical: 0.5rem; +$closebutton-size: 2em; +$closebutton-lineheight: 1; +$closebutton-color: $dark-gray; +$closebutton-color-hover: $black; + +// 15. Drilldown +// ------------- + +$drilldown-transition: transform 0.15s linear; +$drilldown-arrows: true; +$drilldown-arrow-color: $primary-color; +$drilldown-background: $white; + +// 16. Dropdown +// ------------ + +$dropdown-padding: 1rem; +$dropdown-border: 1px solid $medium-gray; +$dropdown-font-size: 1rem; +$dropdown-width: 300px; +$dropdown-radius: $global-radius; +$dropdown-sizes: ( + tiny: 100px, + small: 200px, + large: 400px, +); + +// 17. Dropdown Menu +// ----------------- + +$dropdownmenu-arrows: true; +$dropdownmenu-arrow-color: $anchor-color; +$dropdownmenu-min-width: 200px; +$dropdownmenu-background: $white; +$dropdownmenu-border: 1px solid $medium-gray; + +// 18. Flex Video +// -------------- + +$flexvideo-margin-bottom: rem-calc(16); +$flexvideo-ratio: 4 by 3; +$flexvideo-ratio-widescreen: 16 by 9; + +// 19. 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: #333; +$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: #333; +$select-radius: $global-radius; +$input-color: $black; +$input-font-family: inherit; +$input-font-size: rem-calc(16); +$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-shadow: inset 0 1px 2px rgba($black, 0.1); +$input-shadow-focus: 0 0 5px $medium-gray; +$input-cursor-disabled: default; +$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; +$input-number-spinners: true; +$input-radius: $global-radius; + +// 20. Label +// --------- + +$label-background: $primary-color; +$label-color: foreground($label-background); +$label-font-size: 0.8rem; +$label-padding: 0.33333rem 0.5rem; +$label-radius: $global-radius; + +// 21. Media Object +// ---------------- + +$mediaobject-margin-bottom: $global-margin; +$mediaobject-section-padding: $global-padding; +$mediaobject-image-width-stacked: 100%; + +// 22. Menu +// -------- + +$menu-margin: 0; +$menu-margin-nested: 1rem; +$menu-item-padding: 0.7rem 1rem; +$menu-icon-spacing: 0.25rem; +$menu-expand-max: 6; + +// 23. Off-canvas +// -------------- + +$offcanvas-size: 250px; +$offcanvas-background: $light-gray; +$offcanvas-zindex: -1; +$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'; +$maincontent-shadow: 0 0 10px rgba($black, 0.5); + +// 24. 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; + +// 25. 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: foreground($pagination-item-background-current); +$pagination-item-color-disabled: $medium-gray; +$pagination-ellipsis-color: $black; +$pagination-mobile-items: false; +$pagination-arrows: true; + +// 26. Progress Bar +// ---------------- + +$progress-height: 1rem; +$progress-background: $medium-gray; +$progress-margin-bottom: $global-margin; +$progress-meter-background: $primary-color; +$progress-radius: $global-radius; + +// 27. 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 +// ---------- + +$slider-height: 0.5rem; +$slider-width-vertical: $slider-height; +$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-transition: all 0.2s ease-in-out; + +// 29. 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; + +// 30. 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-striped-background: smart-scale($table-background, $table-color-scale); +$table-stripe: even; +$table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-foot-background: smart-scale($table-background, $table-color-scale); +$table-head-font-color: $body-font-color; +$show-header-for-stacked: false; + +// 31. 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-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: foreground($tab-background, $primary-color); +$tab-content-padding: 1rem; + +// 32. 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; + +// 33. 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; + +// 34. Tooltip +// ----------- + +$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-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 +// ----------- + +$topbar-padding: 0.5rem; +$topbar-background: $light-gray; +$topbar-title-spacing: 1rem; +$topbar-input-width: 200px; diff --git a/themes/base/scss/editor.scss b/themes/base/scss/editor.scss index 51483e5..eedfe4e 100755 --- a/themes/base/scss/editor.scss +++ b/themes/base/scss/editor.scss @@ -3,7 +3,7 @@ @import "settings"; .typography { - padding: rem-calc($grid-column-gutter/2); + padding: rem-calc(30); } @include foundation-global-styles; diff --git a/themes/base/templates/Page.ss b/themes/base/templates/Page.ss index d0cbae3..d894236 100755 --- a/themes/base/templates/Page.ss +++ b/themes/base/templates/Page.ss @@ -14,9 +14,9 @@ <%-- FontAwesome --%> - - $TypeKit - + + <% if SiteConfig.TypeKitID %>{$TypeKit}<% end_if %> + <%-- REMOVE BEFORE WEBSITE GOES LIVE --%> <% if not IsLive %><% end_if %> <% include GoogleAnalytics trackingId=$SiteConfig.GoogleAnaltyicsID %> From 9857b2ca4e1311533de8b8a88d274dabeedcdc3b Mon Sep 17 00:00:00 2001 From: Myles Beardsmore Date: Fri, 5 Feb 2016 16:24:51 +1300 Subject: [PATCH 3/3] Update editor scss to include base font size. --- themes/base/scss/editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/themes/base/scss/editor.scss b/themes/base/scss/editor.scss index eedfe4e..ecc908e 100755 --- a/themes/base/scss/editor.scss +++ b/themes/base/scss/editor.scss @@ -6,6 +6,10 @@ padding: rem-calc(30); } +p { + font-size: rem-calc(16); +} + @include foundation-global-styles; @include foundation-typography; @include foundation-button;