jekyll-theme-foundation 0.1.0

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

@@ -0,0 +1,171 @@
+////
+/// @group accordion-menu
+////
+
+/// Sets accordion menu padding.
+/// @type Number
+$accordionmenu-padding: $global-menu-padding !default;
+
+/// Sets accordion menu nested margin
+/// @type Number
+$accordionmenu-nested-margin: $global-menu-nested-margin !default;
+
+/// Sets accordion menu submenu padding.
+/// @type Number
+$accordionmenu-submenu-padding: $accordionmenu-padding !default;
+
+/// Sets if accordion menus have the default arrow styles.
+/// @type Boolean
+$accordionmenu-arrows: true !default;
+
+/// Sets accordion menu arrow color if arrow is used.
+/// @type Color
+$accordionmenu-arrow-color: $primary-color !default;
+
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-item-background: null !default;
+
+/// Sets accordion menu item border.
+/// @type Color
+$accordionmenu-border: null !default;
+
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-submenu-toggle-background: null !default;
+
+/// Sets accordion menu item padding.
+/// @type List
+$accordion-submenu-toggle-border: $accordionmenu-border !default;
+
+/// Sets accordion menu submenu toggle background width.
+/// @type Number
+$accordionmenu-submenu-toggle-width: 40px !default;
+
+/// Sets accordion menu submenu toggle background height.
+/// @type Number
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
+
+/// Sets accordion menu arrow size if arrow is used.
+/// @type Length
+$accordionmenu-arrow-size: 6px !default;
+
+@mixin zf-accordion-menu-left-right-arrows {
+  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+    position: relative;
+
+    &::after {
+      @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      #{$global-right}: 1rem;
+    }
+  }
+  &.align-left .is-accordion-submenu-parent > a::after {
+    left: auto;
+    right: 1rem;
+  }
+  &.align-right .is-accordion-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+  }
+}
+@mixin foundation-accordion-menu {
+
+  .accordion-menu {
+    @if $accordionmenu-border {
+      border-bottom: $accordionmenu-border;
+    }
+
+    li {
+      @if $accordionmenu-border {
+        border-top: $accordionmenu-border;
+        border-right: $accordionmenu-border;
+        border-left: $accordionmenu-border;
+      }
+      width: 100%;
+    }
+
+    a {
+      @if $accordionmenu-item-background {
+        background: $accordionmenu-item-background;
+      }
+      padding: $accordionmenu-padding;
+    }
+    
+    .is-accordion-submenu a {
+      padding: $accordionmenu-submenu-padding;
+    }
+
+    .nested.is-accordion-submenu {
+      @include menu-nested($accordionmenu-nested-margin);
+    }
+
+    &.align-#{$global-right} {
+      .nested.is-accordion-submenu {
+        @include menu-nested($accordionmenu-nested-margin, right);
+      }
+    }
+
+    @if $accordionmenu-arrows {
+      @include zf-accordion-menu-left-right-arrows;
+
+      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+
+  .is-accordion-submenu li {
+    @if $accordionmenu-border {
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+
+  .is-accordion-submenu-parent {
+    position: relative;
+  }
+
+  .has-submenu-toggle > a {
+    margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
+  }
+
+  // Submenu toggle
+  .submenu-toggle {
+    position: absolute;
+    top: 0;
+    #{$global-right}: 0;
+    cursor: pointer;
+
+    width: $accordionmenu-submenu-toggle-width;
+    height: $accordionmenu-submenu-toggle-height;
+
+    border-#{$global-left}: $accordion-submenu-toggle-border;
+
+    @if $accordionmenu-submenu-toggle-background {
+      background: $accordionmenu-submenu-toggle-background;
+    }
+
+    // Add the arrow to the toggle
+    &::after {
+      @include css-triangle(6px, $accordionmenu-arrow-color, down);
+
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+
+  // Rotate the arrow when menu is open
+  .submenu-toggle[aria-expanded='true']::after {
+    transform: scaleY(-1);
+    transform-origin: 50% 50%;
+  }
+
+  .submenu-toggle-text {
+    @include element-invisible;
+  }
+}

data/_sass/scss/components/_accordion.scss

@@ -0,0 +1,155 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group accordion
+////
+
+/// Default background color of an accordion group.
+/// @type Color
+$accordion-background: $white !default;
+
+/// If `true`, adds plus and minus icons to the side of each accordion title.
+/// @type Boolean
+$accordion-plusminus: true !default;
+
+/// Font size of accordion titles.
+/// @type Number
+$accordion-title-font-size: rem-calc(12) !default;
+
+/// Default text color for items in a Menu.
+/// @type Color
+$accordion-item-color: $primary-color !default;
+
+/// Default background color on hover for items in a Menu.
+/// @type Color
+$accordion-item-background-hover: $light-gray !default;
+
+/// Default padding of an accordion item.
+/// @type Number | List
+$accordion-item-padding: 1.25rem 1rem !default;
+
+/// Default background color of tab content.
+/// @type Color
+$accordion-content-background: $white !default;
+
+/// Default border color of tab content.
+/// @type Color
+$accordion-content-border: 1px solid $light-gray !default;
+
+/// Default text color of tab content.
+/// @type Color
+$accordion-content-color: $body-font-color !default;
+
+/// Default padding for tab content.
+/// @type Number | List
+$accordion-content-padding: 1rem !default;
+
+/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
+@mixin accordion-container (
+  $background: $accordion-background
+) {
+  margin-#{$global-left}: 0;
+  background: $background;
+  list-style-type: none;
+  &[disabled] {
+    .accordion-title {
+      cursor: not-allowed;
+    }
+  }
+}
+
+/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+@mixin accordion-item {
+  &:first-child > :first-child {
+    border-radius: $global-radius $global-radius 0 0;
+  }
+
+  &:last-child > :last-child {
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+}
+
+/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
+@mixin accordion-title (
+  $padding: $accordion-item-padding,
+  $font-size: $accordion-title-font-size,
+  $color: $accordion-item-color,
+  $border: $accordion-content-border,
+  $background-hover: $accordion-item-background-hover
+) {
+  position: relative;
+  display: block;
+  padding: $padding;
+
+  border: $border;
+  border-bottom: 0;
+
+  font-size: $font-size;
+  line-height: 1;
+  color: $color;
+
+  :last-child:not(.is-active) > & {
+    border-bottom: $border;
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $background-hover;
+  }
+
+  @if $accordion-plusminus {
+    &::before {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 1rem;
+      margin-top: -0.5rem;
+      content: '+';
+    }
+
+    .is-active > &::before {
+      content: '\2013';
+    }
+  }
+}
+
+/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
+@mixin accordion-content (
+  $padding: $accordion-content-padding,
+  $border: $accordion-content-border,
+  $background: $accordion-content-background,
+  $color: $accordion-content-color
+) {
+  display: none;
+  padding: $padding;
+
+  border: $border;
+  border-bottom: 0;
+  background-color: $background;
+
+  color: $color;
+
+  :last-child > &:last-child {
+    border-bottom: $border;
+  }
+}
+
+@mixin foundation-accordion {
+  .accordion {
+    @include accordion-container;
+  }
+
+  .accordion-item {
+    @include accordion-item;
+  }
+
+  .accordion-title {
+    @include accordion-title;
+  }
+
+  .accordion-content {
+    @include accordion-content;
+  }
+}

data/_sass/scss/components/_badge.scss

@@ -0,0 +1,63 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group badge
+////
+
+/// Default background color for badges.
+/// @type Color
+$badge-background: $primary-color !default;
+
+/// Default text color for badges.
+/// @type Color
+$badge-color: $white !default;
+
+/// Alternate text color for badges.
+/// @type Color
+$badge-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$badge-palette: $foundation-palette !default;
+
+/// Default padding inside badges.
+/// @type Number
+$badge-padding: 0.3em !default;
+
+/// Minimum width of a badge.
+/// @type Number
+$badge-minwidth: 2.1em !default;
+
+/// Default font size for badges.
+/// @type Number
+$badge-font-size: 0.6rem !default;
+
+/// Generates the base styles for a badge.
+@mixin badge {
+  display: inline-block;
+  min-width: $badge-minwidth;
+  padding: $badge-padding;
+
+  border-radius: 50%;
+
+  font-size: $badge-font-size;
+  text-align: center;
+}
+
+@mixin foundation-badge {
+  .badge {
+    @include badge;
+
+    background: $badge-background;
+    color: $badge-color;
+
+    @each $name, $color in $badge-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
+      }
+    }
+  }
+}

data/_sass/scss/components/_breadcrumbs.scss

@@ -0,0 +1,117 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group breadcrumbs
+////
+
+/// Margin around a breadcrumbs container.
+/// @type Number
+$breadcrumbs-margin: 0 0 $global-margin 0 !default;
+
+/// Font size of breadcrumb links.
+/// @type Number
+$breadcrumbs-item-font-size: rem-calc(11) !default;
+
+/// Color of breadcrumb links.
+/// @type Color
+$breadcrumbs-item-color: $primary-color !default;
+
+/// Color of the active breadcrumb link.
+/// @type Color
+$breadcrumbs-item-color-current: $black !default;
+
+/// Opacity of disabled breadcrumb links.
+/// @type Number
+$breadcrumbs-item-color-disabled: $medium-gray !default;
+
+/// Margin between breadcrumb items.
+/// @type Number
+$breadcrumbs-item-margin: 0.75rem !default;
+
+/// If `true`, makes breadcrumb links uppercase.
+/// @type Boolean
+$breadcrumbs-item-uppercase: true !default;
+
+/// If `true`, adds a seperator between breadcrumb links.
+/// @type Boolean
+$breadcrumbs-item-separator: true !default;
+
+// If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
+@if variable-exists(breadcrumbs-item-slash) {
+  $breadcrumbs-item-separator: $breadcrumbs-item-slash;
+}
+
+/// Used character for the breadcrumb separator.
+/// @type Content
+$breadcrumbs-item-separator-item: '/' !default;
+
+/// Used character for the breadcrumb separator in rtl mode.
+/// @type Content
+$breadcrumbs-item-separator-item-rtl: '\\' !default;
+
+/// Color of breadcrumb item.
+/// @type Color
+$breadcrumbs-item-separator-color: $medium-gray !default;
+
+// If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
+@if variable-exists(breadcrumbs-item-slash-color) {
+  $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
+}
+
+/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
+@mixin breadcrumbs-container {
+  @include clearfix;
+  margin: $breadcrumbs-margin;
+  list-style: none;
+
+  // Item wrapper
+  li {
+    float: #{$global-left};
+
+    font-size: $breadcrumbs-item-font-size;
+    color: $breadcrumbs-item-color-current;
+    cursor: default;
+
+    @if $breadcrumbs-item-uppercase {
+      text-transform: uppercase;
+    }
+
+    @if $breadcrumbs-item-separator {
+      // Need to escape the backslash
+      $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
+
+      &:not(:last-child)::after {
+        position: relative;
+        margin: 0 $breadcrumbs-item-margin;
+        opacity: 1;
+        content: $separator;
+        color: $breadcrumbs-item-separator-color;
+      }
+    }
+    @else {
+      margin-#{$global-right}: $breadcrumbs-item-margin;
+    }
+  }
+
+  // Page links
+  a {
+    color: $breadcrumbs-item-color;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@mixin foundation-breadcrumbs {
+  .breadcrumbs {
+    @include breadcrumbs-container;
+
+    .disabled {
+      color: $breadcrumbs-item-color-disabled;
+      cursor: not-allowed;
+    }
+  }
+}