foundation-scss 6.3.1.0

data/scss/components/_flex-video.scss

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

data/scss/components/_flex.scss

@@ -0,0 +1,34 @@
+@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);
+    }
+  }
+
+  // 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 6 {
+      .#{$-zf-size}-order-#{$i} {
+        @include flex-order($i);
+      }
+    }
+  }
+}

data/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/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/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/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;
+  }
+}

data/scss/components/_menu.scss

@@ -0,0 +1,376 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group menu
+////
+
+/// Margin of a menu.
+/// @type Number
+$menu-margin: 0 !default;
+
+/// Left-hand margin of a nested menu.
+/// @type Number
+$menu-margin-nested: 1rem !default;
+
+/// Padding for items in a menu.
+/// @type Number
+$menu-item-padding: 0.7rem 1rem !default;
+
+/// Text color of an active menu item.
+/// @type Color
+$menu-item-color-active: $white !default;
+
+/// Background color of an active menu item.
+/// @type Color
+$menu-item-background-active: get-color(primary) !default;
+
+/// Spacing between an icon and text in a menu item.
+/// @type Number
+$menu-icon-spacing: 0.25rem !default;
+
+/// Background color for an hovered menu item.
+/// @type Color
+$menu-item-background-hover: $light-gray !default;
+
+/// Color for bordered menu
+/// @type Color
+$menu-border: $light-gray !default;
+
+/// Creates the base styles for a Menu.
+@mixin menu-base {
+  margin: $menu-margin;
+  list-style-type: none;
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+  }
+
+  // List items are table cell to allow for vertical alignment
+  > li {
+    @include disable-mouse-outline;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+  // Reset line height to make the height of the overall item easier to calculate
+  > li > a {
+    display: block;
+    padding: $menu-item-padding;
+    line-height: 1;
+  }
+
+  // Reset styles of inner elements
+  input,
+  select,
+  a,
+  button {
+    margin-bottom: 0;
+  }
+}
+
+/// Expands the items of a Menu, so each item is the same width.
+@mixin menu-expand {
+  @if $global-flexbox {
+    > li {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+  }
+  @else {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  > li:first-child:last-child {
+    width: 100%;
+  }
+}
+
+/// Sets the direction of a Menu.
+/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
+@mixin menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+
+      > li {
+        flex: 0 0 auto;
+      }
+    }
+    @else {
+      > li {
+        display: table-cell;
+      }
+    }
+  }
+  @else if $dir == vertical {
+    @if $global-flexbox {
+      flex-wrap: wrap;
+
+      > li {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
+      > li  > a {
+        justify-content: flex-start;
+        align-items: flex-start;
+      }
+    }
+    @else {
+      > li {
+        display: block;
+      }
+    }
+  }
+  @else {
+    @warn 'The direction used for menu-direction() must be horizontal or vertical.';
+  }
+}
+
+/// Creates a simple Menu, which has no padding or hover state.
+/// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
+@mixin menu-simple($dir: $global-left) {
+  li {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 1;
+  }
+
+  a {
+    padding: 0;
+  }
+
+  @if $dir != null {
+    @include menu-simple-direction($dir);
+  }
+}
+
+/// Direction modifier for a simple Menu
+/// @param {Keyword} $dir [$global-left] - Direction of the menu
+@mixin menu-simple-direction($dir: $global-left) {
+  $no-margin-dir: $dir;
+  $margin-dir: direction-opposite($dir);
+
+  li {
+    margin-#{$no-margin-dir}: 0;
+    margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
+  }
+}
+
+/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
+/// @param {Keyword|Number} $padding [auto] - Length of the margin.
+@mixin menu-nested($margin: $menu-margin-nested) {
+  margin-#{$global-left}: $margin;
+}
+
+/// Adds support for icons to Menu items.
+/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
+/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
+@mixin menu-icons($position: side, $base: true) {
+  @if $base {
+    @if $global-flexbox {
+      > li > a {
+        display: flex;
+      }
+    }
+    @else {
+      > li > a {
+        img,
+        i,
+        svg {
+          vertical-align: middle;
+
+          + span {
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+
+  @if $position == side {
+    > li > a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-right}: $menu-icon-spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  @else if $position == top {
+    > li > a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $menu-icon-spacing;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $menu-icon-spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+@mixin menu-text {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding: $menu-item-padding;
+
+  font-weight: bold;
+  line-height: 1;
+  color: inherit;
+}
+
+@mixin foundation-menu {
+  .menu {
+    @include menu-base;
+    @include menu-icons;
+
+    // Default orientation: horizontal
+    &, &.horizontal {
+      @include menu-direction(horizontal);
+    }
+
+    // Even-width modifier for horizontal orientation
+    &.expanded {
+      @include menu-expand;
+    }
+
+    // Vertical orientation modifier
+    &.vertical {
+      @include menu-direction(vertical);
+    }
+
+    @include -zf-each-breakpoint($small: false) {
+      &.#{$-zf-size}-horizontal {
+        @include menu-direction(horizontal);
+      }
+
+      &.#{$-zf-size}-expanded {
+        @include menu-expand;
+      }
+
+      &.#{$-zf-size}-vertical {
+        @include menu-direction(vertical);
+      }
+    }
+
+    // Simple
+    &.simple {
+      @include menu-simple;
+
+      &.align-#{$global-right} {
+        @include menu-simple-direction($global-right);
+      }
+    }
+
+    // Align right
+    &.align-#{$global-right} {
+      @if $global-flexbox {
+        justify-content: flex-end;
+      }
+      @else {
+        @include clearfix;
+
+        > li {
+          float: $global-right;
+        }
+      }
+    }
+
+    // Vertical icons
+    &.icon-top {
+      @include menu-icons(top, $base: false);
+      // Make vertical menu with icons on top work
+      &.vertical {
+        a > span {
+          margin: auto;
+        }
+      }
+    }
+
+    // Nesting
+    &.nested {
+      @include menu-nested;
+    }
+
+    // Active state
+    .active > a {
+      background: $menu-item-background-active;
+      color: $menu-item-color-active;
+    }
+
+    // Menu with border
+    &.menu-bordered {
+      li {
+        border: 1px solid $menu-border;
+        &:not(:first-child) {
+          border-top: 0;
+        }
+      }
+    }
+
+    // Menu with background hover
+    &.menu-hover {
+      li:hover {
+        background-color: $menu-item-background-hover;
+      }
+    }
+  }
+
+  .menu-text {
+    @include menu-text;
+  }
+
+  // Align center
+  .menu-centered {
+    text-align: center;
+
+    > .menu {
+      @if $global-flexbox {
+        @include flex-align($x: center, $y: top);
+      }
+      @else {
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
+  }
+
+  // Prevent FOUC when using the Responsive Menu plugin
+  .no-js [data-responsive-menu] ul {
+    display: none;
+  }
+}