Merge pull request #14 from mediabeastnz/new-scss-structure

New SCSS structure and minor updates

themes/base/scss/base/_base.scss → 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 {
 

themes/base/scss/_settings.scss

@@ -35,14 +35,17 @@
 //  30. Table
 //  31. Tabs
 //  32. Thumbnail
-//  33. Tooltip
-//  34. Top Bar
+//  33. Title Bar
+//  34. Tooltip
+//  35. Top Bar
+
+@import 'foundation-sites/scss/util/util';
 
 // 1. Global
 // ---------
 
-$global-width: rem-calc(1200);
 $global-font-size: 100%;
+$global-width: rem-calc(1200);
 $global-lineheight: 1.5;
 $primary-color: #2199e8;
 $secondary-color: #777;
@@ -60,19 +63,16 @@ $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,
+  small: 0,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
@@ -85,8 +85,12 @@ $breakpoint-classes: (small medium large);
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-gutter: 30px;
-$block-grid-max: 6;
+$grid-column-responsive-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$block-grid-max: 8;
 
 // 4. Base Typography
 // ------------------
@@ -196,6 +200,7 @@ $accordion-content-padding: 1rem;
 // -----------------
 
 $accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
 
 // 9. Badge
 // --------
@@ -222,7 +227,7 @@ $breadcrumbs-item-slash: true;
 // ----------
 
 $button-padding: 0.85em 1em;
-$button-margin: 0 $global-margin $global-margin 0;
+$button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
@@ -274,13 +279,15 @@ $closebutton-color-hover: $black;
 
 $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: 16rem;
+$dropdown-font-size: 1rem;
 $dropdown-width: 300px;
 $dropdown-radius: $global-radius;
 $dropdown-sizes: (
@@ -293,14 +300,14 @@ $dropdown-sizes: (
 // -----------------
 
 $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-padding-top: rem-calc(25);
 $flexvideo-margin-bottom: rem-calc(16);
 $flexvideo-ratio: 4 by 3;
 $flexvideo-ratio-widescreen: 16 by 9;
@@ -324,10 +331,10 @@ $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-background: $white;
 $select-triangle-color: #333;
 $select-radius: $global-radius;
-$input-color: $dark-gray;
+$input-color: $black;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-background: $white;
@@ -507,9 +514,22 @@ $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
+// 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;
@@ -519,10 +539,10 @@ $tooltip-pip-height: $tooltip-pip-width * 0.866;
 $tooltip-pip-offset: 1.25rem;
 $tooltip-radius: $global-radius;
 
-// 34. Top Bar
+// 35. Top Bar
 // -----------
 
 $topbar-padding: 0.5rem;
-$topbar-background: #eee;
-$topbar-link-color: #fff;
+$topbar-background: $light-gray;
+$topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;

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/*";