jekyll-theme-foundation 0.1.0

data/_sass/scss/components/_dropdown-menu.scss

@@ -0,0 +1,274 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown-menu
+////
+
+/// Enables arrows for items with dropdown menus.
+/// @type Boolean
+$dropdownmenu-arrows: true !default;
+
+/// Sets dropdown menu arrow color if arrow is used.
+/// @type Color
+$dropdownmenu-arrow-color: $anchor-color !default;
+
+/// Sets dropdown menu arrow size if arrow is used.
+/// @type Length
+$dropdownmenu-arrow-size: 6px !default;
+
+/// Sets dropdown menu arrow padding for aligning the arrow correctly.
+/// @type Length
+$dropdownmenu-arrow-padding: 1.5rem !default;
+
+/// Minimum width of dropdown sub-menus.
+/// @type Length
+$dropdownmenu-min-width: 200px !default;
+
+/// Background color for top level items.
+/// @type Color
+$dropdownmenu-background: $white !default;
+
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-submenu-background: $dropdownmenu-background !default;
+
+/// Padding for top level items.
+/// @type Number
+$dropdownmenu-padding: $global-menu-padding !default;
+
+/// Sets dropdown menu nested margin
+/// @type Number
+$dropdownmenu-nested-margin: 0 !default;
+
+/// Padding for sub-menu items.
+/// @type Number
+$dropdownmenu-submenu-padding: $dropdownmenu-padding !default;
+
+/// Border for dropdown sub-menus.
+/// @type List
+$dropdownmenu-border: 1px solid $medium-gray !default;
+
+// Border width for dropdown sub-menus.
+// Used to adjust top margin of a sub-menu if a border is used.
+// @type Length
+$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
+
+/// Text color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-color-active: get-color(primary) !default;
+
+/// Background color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-background-active: transparent !default;
+
+@mixin zf-dropdown-left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+  }
+
+  &.opens-left > a::after {
+    right: auto;
+    left: 5px;
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+  }
+
+  &.opens-right > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+  }
+}
+
+@mixin dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left {
+      > .is-dropdown-submenu {
+        top: 100%;
+        right: 0;
+        left: auto;
+      }
+    }
+
+    > li.opens-right {
+      > .is-dropdown-submenu {
+        top: 100%;
+        right: auto;
+        left: 0;
+      }
+    }
+
+    @if $dropdownmenu-arrows {
+      > li.is-dropdown-submenu-parent > a {
+        position: relative;
+        padding-#{$global-right}: $dropdownmenu-arrow-padding;
+      }
+
+      > li.is-dropdown-submenu-parent > a::after {
+        @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
+        #{$global-right}: 5px;
+        #{$global-left}: auto;
+        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+      }
+    }
+  }
+  @else if $dir == vertical {
+    > li {
+      .is-dropdown-submenu {
+        top: 0;
+      }
+
+      &.opens-left {
+        > .is-dropdown-submenu {
+          right: 100%;
+          left: auto;
+          top: 0;
+        }
+      }
+
+      &.opens-right {
+        > .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+
+      @if $dropdownmenu-arrows {
+        @include zf-dropdown-left-right-arrows;
+      }
+    }
+  }
+  @else {
+    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+  }
+}
+
+@mixin foundation-dropdown-menu {
+  .dropdown.menu {
+    @include dropdown-menu-direction(horizontal);
+
+    a {
+      @include disable-mouse-outline;
+      padding: $dropdownmenu-padding;
+    }
+
+    // Active state
+    .is-active > a {
+      background: $dropdown-menu-item-background-active;
+      color: $dropdown-menu-item-color-active;
+    }
+
+    .no-js & ul {
+      display: none;
+    }
+
+    .nested.is-dropdown-submenu {
+      @include menu-nested($dropdownmenu-nested-margin);
+    }
+
+    &.vertical {
+      @include dropdown-menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include dropdown-menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include dropdown-menu-direction(vertical);
+          }
+        }
+      }
+    }
+
+    &.align-right {
+      .is-dropdown-submenu.first-sub {
+        top: 100%;
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  .is-dropdown-menu.vertical {
+    width: 100px;
+
+    &.align-right {
+      float: right;
+    }
+  }
+
+  .is-dropdown-submenu-parent {
+    position: relative;
+
+    a::after {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 5px;
+      #{$global-left}: auto;
+      margin-top: -1 * $dropdownmenu-arrow-size;
+    }
+
+    &.opens-inner > .is-dropdown-submenu {
+
+      top: 100%;
+      @if $global-text-direction == 'rtl' {
+        right: auto;
+      }
+      @else {
+        left: auto;
+      }
+    }
+
+    &.opens-left > .is-dropdown-submenu {
+      right: 100%;
+      left: auto;
+    }
+
+    &.opens-right > .is-dropdown-submenu {
+      right: auto;
+      left: 100%;
+    }
+  }
+
+  .is-dropdown-submenu {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    z-index: 1;
+
+    display: none;
+    min-width: $dropdownmenu-min-width;
+
+    border: $dropdownmenu-border;
+    background: $dropdownmenu-submenu-background;
+
+    .dropdown & a {
+      padding: $dropdownmenu-submenu-padding;
+    }
+
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include zf-dropdown-left-right-arrows;
+      }
+    }
+
+    @if (type-of($dropdownmenu-border-width) == 'number') {
+      .is-dropdown-submenu {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+    }
+
+    > li {
+      width: 100%;
+    }
+
+    // [TODO] Cut back specificity
+    //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
+    &.js-dropdown-active {
+      display: block;
+    }
+  }
+}

data/_sass/scss/components/_dropdown.scss

@@ -0,0 +1,79 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown
+////
+
+/// Padding for dropdown panes.
+/// @type List
+$dropdown-padding: 1rem !default;
+
+/// Background for dropdown panes.
+/// @type Color
+$dropdown-background: $body-background !default;
+
+/// Border for dropdown panes.
+/// @type List
+$dropdown-border: 1px solid $medium-gray !default;
+
+/// Font size for dropdown panes.
+/// @type List
+$dropdown-font-size: 1rem !default;
+
+/// Width for dropdown panes.
+/// @type Number
+$dropdown-width: 300px !default;
+
+/// Border radius dropdown panes.
+/// @type Number
+$dropdown-radius: $global-radius !default;
+
+/// Sizes for dropdown panes. Each size is a CSS class you can apply.
+/// @type Map
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+) !default;
+
+/// Applies styles for a basic dropdown.
+@mixin dropdown-container {
+  position: absolute;
+  z-index: 10;
+
+  width: $dropdown-width;
+  padding: $dropdown-padding;
+
+  visibility: hidden;
+  display: none;
+  border: $dropdown-border;
+  border-radius: $dropdown-radius;
+  background-color: $dropdown-background;
+
+  font-size: $dropdown-font-size;
+
+
+  // Allow an intermittent state to do positioning before making visible.
+  &.is-opening {
+    display: block;
+  }
+
+  &.is-open {
+    visibility: visible;
+    display: block;
+  }
+}
+
+@mixin foundation-dropdown {
+  .dropdown-pane {
+    @include dropdown-container;
+  }
+
+  @each $name, $size in $dropdown-sizes {
+    .dropdown-pane.#{$name} {
+      width: $size;
+    }
+  }
+}

data/_sass/scss/components/_flex-video.scss

@@ -0,0 +1 @@
+@import 'responsive-embed';

data/_sass/scss/components/_flex.scss

@@ -0,0 +1,117 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group Flexbox Utilities
+////
+//
+/// Default value for the count of source ordering`
+/// @type Number
+$flex-source-ordering-count: 6 !default;
+
+/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
+/// @type Boolean
+$flexbox-responsive-breakpoints: true !default;
+
+@mixin flex-helpers {
+  .flex-container {
+    @include flex;
+  }
+
+  .flex-child-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-child-grow {
+    flex: 1 0 auto;
+  }
+
+  .flex-child-shrink {
+    flex: 0 1 auto;
+  }
+
+  @each $dir, $prop in $-zf-flex-direction {
+    .flex-dir-#{$dir} {
+      @include flex-direction($prop);
+    }
+  }
+
+  @if ($flexbox-responsive-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-flex-container {
+            @include flex;
+          }
+
+          .#{$size}-flex-child-auto {
+            flex: 1 1 auto;
+          }
+
+          .#{$size}-flex-child-grow {
+            flex: 1 0 auto;
+          }
+
+          .#{$size}-flex-child-shrink {
+            flex: 0 1 auto;
+          }
+
+          @each $dir, $prop in $-zf-flex-direction {
+            .#{$size}-flex-dir-#{$dir} {
+              @include flex-direction($prop);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin foundation-flex-classes {
+  // Horizontal alignment using justify-content
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+    .align-#{$hdir} {
+      @include flex-align($x: $hdir);
+    }
+  }
+  
+  // Horizontal alignment Specifically for Vertical Menu
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+    .align-#{$hdir} {
+      &.vertical.menu > li > a { 
+        @include flex-align($x: $hdir);
+      }
+    }
+  }
+
+  // Vertical alignment using align-items and align-self
+  @each $vdir, $prop in $-zf-flex-align {
+    .align-#{$vdir} {
+      @include flex-align($y: $vdir);
+    }
+
+    .align-self-#{$vdir} {
+      @include flex-align-self($y: $vdir);
+    }
+  }
+
+  // Central alignment of content
+  .align-center-middle {
+    @include flex-align($x: center, $y: middle);
+    align-content: center;
+  }
+
+  // Source ordering
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $flex-source-ordering-count {
+      .#{$-zf-size}-order-#{$i} {
+        @include flex-order($i);
+      }
+    }
+  }
+
+  // Vanilla Flexbox Helpers
+  @include flex-helpers;
+}

data/_sass/scss/components/_float.scss

@@ -0,0 +1,27 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group float
+////
+
+@mixin foundation-float-classes {
+  .float-left {
+    float: left !important;
+  }
+
+  .float-right {
+    float: right !important;
+  }
+
+  .float-center {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .clearfix {
+    @include clearfix;
+  }
+}

data/_sass/scss/components/_label.scss

@@ -0,0 +1,64 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group label
+////
+
+/// Default background color for labels.
+/// @type Color
+$label-background: $primary-color !default;
+
+/// Default text color for labels.
+/// @type Color
+$label-color: $white !default;
+
+/// Alternate text color for labels.
+/// @type Color
+$label-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$label-palette: $foundation-palette !default;
+
+/// Default font size for labels.
+/// @type Number
+$label-font-size: 0.8rem !default;
+
+/// Default padding inside labels.
+/// @type Number
+$label-padding: 0.33333rem 0.5rem !default;
+
+/// Default radius of labels.
+/// @type Number
+$label-radius: $global-radius !default;
+
+/// Generates base styles for a label.
+@mixin label {
+  display: inline-block;
+  padding: $label-padding;
+
+  border-radius: $label-radius;
+
+  font-size: $label-font-size;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+@mixin foundation-label {
+  .label {
+    @include label;
+
+    background: $label-background;
+    color: $label-color;
+
+    @each $name, $color in $label-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($label-color, $label-color-alt));
+      }
+    }
+  }
+}

data/_sass/scss/components/_media-object.scss

@@ -0,0 +1,114 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group media-object
+////
+
+/// Bottom margin of a media object.
+/// @type Number
+$mediaobject-margin-bottom: $global-margin !default;
+
+/// Left and right padding on sections within a media object.
+/// @type Number
+$mediaobject-section-padding: $global-padding !default;
+
+/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// @type Number
+$mediaobject-image-width-stacked: 100% !default;
+
+/// Adds styles for a media object container.
+@mixin media-object-container {
+  display: if($global-flexbox, flex, block);
+  margin-bottom: $mediaobject-margin-bottom;
+
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+  }
+}
+
+/// Adds styles for sections within a media object.
+/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
+@mixin media-object-section($padding: $mediaobject-section-padding) {
+  @if $global-flexbox {
+    flex: 0 1 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  &:first-child {
+    padding-#{$global-right}: $padding;
+  }
+
+  &:last-child:not(:nth-child(2)) {
+    padding-#{$global-left}: $padding;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
+@mixin media-object-stack {
+  padding: 0;
+  padding-bottom: $mediaobject-section-padding;
+
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
+  img {
+    width: $mediaobject-image-width-stacked;
+  }
+}
+
+@mixin foundation-media-object {
+  .media-object {
+    @include media-object-container;
+
+    img {
+      max-width: none;
+    }
+
+    @if $global-flexbox {
+      &.stack-for-#{$-zf-zero-breakpoint} {
+        @include breakpoint($-zf-zero-breakpoint only) {
+          flex-wrap: wrap;
+        }
+      }
+    }
+
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+      @include breakpoint($-zf-zero-breakpoint only) {
+        @include media-object-stack;
+      }
+    }
+  }
+
+  .media-object-section {
+    @include media-object-section;
+
+    @if $global-flexbox {
+      &.main-section {
+        flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      }
+    }
+    @else {
+      &.middle {
+        vertical-align: middle;
+      }
+
+      &.bottom {
+        vertical-align: bottom;
+      }
+    }
+  }
+}

data/_sass/scss/components/_menu-icon.scss

@@ -0,0 +1,9 @@
+@mixin foundation-menu-icon {
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}