foundation-scss 6.3.1.0

data/scss/components/_close-button.scss

@@ -0,0 +1,102 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group close-button
+////
+
+/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
+/// @type List
+$closebutton-position: right top !default;
+
+/// Right (or left) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem,
+) !default;
+
+/// Top (or bottom) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+) !default;
+
+/// Default font size(s) of the close button.
+/// @type Number|Map
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+) !default;
+
+/// The line-height of the close button. It affects the spacing of the element.
+/// @type Number
+$closebutton-lineheight: 1 !default;
+
+/// Default color of the close button.
+/// @type Color
+$closebutton-color: $dark-gray !default;
+
+/// Default color of the close button when being hovered on.
+/// @type Color
+$closebutton-color-hover: $black !default;
+
+
+/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
+///
+/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
+/// @param {Keyword} $size - The size of the close button to use.
+///
+/// @return {Number} The given number or the value found in the map.
+@function -zf-get-size-val($value, $size) {
+  // Check if the value is a number
+  @if type-of($value) == 'number' {
+    // If it is, just return the number
+    @return $value;
+  }
+
+  // Check if the size name exists in the value map
+  @else if map-has-key($value, $size) {
+    // If it does, return the value
+    @return map-get($value, $size);
+  }
+}
+
+/// Sets the size and position of a close button.
+/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
+@mixin close-button-size($size) {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
+  #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
+  font-size: -zf-get-size-val($closebutton-size, $size);
+  line-height: -zf-get-size-val($closebutton-lineheight, $size);
+}
+
+/// Adds styles for a close button, using the styles in the settings variables.
+@mixin close-button {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  @include disable-mouse-outline;
+  position: absolute;
+  color: $closebutton-color;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: $closebutton-color-hover;
+  }
+}
+
+@mixin foundation-close-button {
+  .close-button {
+    @include close-button;
+
+    &.small { @include close-button-size(small) }
+    &, &.medium { @include close-button-size(medium) }
+  }
+}

data/scss/components/_drilldown.scss

@@ -0,0 +1,93 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group drilldown
+////
+
+/// Transition property to use for animating menus.
+/// @type Transition
+$drilldown-transition: transform 0.15s linear !default;
+
+/// Adds arrows to drilldown items with submenus, as well as the back button.
+/// @type Boolean
+$drilldown-arrows: true !default;
+
+/// Sets drilldown arrow color if arrow is used.
+/// @type Color
+$drilldown-arrow-color: $primary-color !default;
+
+/// Sets drilldown arrow size if arrow is used.
+/// @type Length
+$drilldown-arrow-size: 6px !default;
+
+/// Background color for drilldown submenus.
+/// @type Color
+$drilldown-background: $white !default;
+
+@mixin foundation-drilldown-menu {
+  // Applied to the Menu container
+  .is-drilldown {
+    position: relative;
+    overflow: hidden;
+
+    li {
+      display: block;
+    }
+
+    &.animate-height {
+      transition: height 0.5s;
+    }
+  }
+
+  // Applied to nested <ul>s
+  .is-drilldown-submenu {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    z-index: -1;
+
+    width: 100%;
+    background: $drilldown-background;
+    transition: $drilldown-transition;
+
+    &.is-active {
+      z-index: 1;
+      display: block;
+      transform: translateX(if($global-text-direction == ltr, -100%, 100%));
+    }
+
+    &.is-closing {
+      transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+    }
+  }
+
+  .drilldown-submenu-cover-previous {
+    min-height: 100%;
+  }
+
+  @if $drilldown-arrows {
+    .is-drilldown-submenu-parent > a {
+      position: relative;
+
+      &::after {
+        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
+        position: absolute;
+        top: 50%;
+        margin-top: -1 * $drilldown-arrow-size;
+        #{$global-right}: 1rem;
+      }
+    }
+
+    .js-drilldown-back > a::before {
+      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
+      border-#{$global-left}-width: 0;
+      display: inline-block;
+      vertical-align: middle;
+      margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+
+      border-#{$global-left}-width: 0;
+    }
+  }
+}

data/scss/components/_dropdown-menu.scss

@@ -0,0 +1,226 @@
+// 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;
+
+/// Minimum width of dropdown sub-menus.
+/// @type Length
+$dropdownmenu-min-width: 200px !default;
+
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-background: $white !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);
+
+@mixin left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+  }
+
+  &.opens-left > a::after {
+    @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}: 1.5rem;
+      }
+
+      > li.is-dropdown-submenu-parent > a::after {
+        @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
+        #{$global-right}: 5px;
+        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;
+        }
+      }
+
+      &.opens-right {
+        > .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+
+      @if $dropdownmenu-arrows {
+        @include 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;
+    }
+
+    .no-js & ul {
+      display: none;
+    }
+
+    &.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;
+      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-background;
+
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include 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/scss/components/_dropdown.scss

@@ -0,0 +1,72 @@
+// 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;
+
+  display: block;
+  width: $dropdown-width;
+  padding: $dropdown-padding;
+
+  visibility: hidden;
+  border: $dropdown-border;
+  border-radius: $dropdown-radius;
+  background-color: $dropdown-background;
+
+  font-size: $dropdown-font-size;
+
+  &.is-open {
+    visibility: visible;
+  }
+}
+
+@mixin foundation-dropdown {
+  .dropdown-pane {
+    @include dropdown-container;
+  }
+
+  @each $name, $size in $dropdown-sizes {
+    .dropdown-pane.#{$name} {
+      width: $size;
+    }
+  }
+}