zurb-foundation-5 5.2.2

data/scss/foundation/components/_split-buttons.scss

@@ -0,0 +1,191 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+@import "buttons";
+@import "dropdown-buttons";
+
+//
+// @name _split-buttons.scss
+// @dependencies _buttons.scss, _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to control different shared styles for Split Buttons
+$split-button-function-factor: 10% !default;
+$split-button-pip-color: #fff !default;
+$split-button-pip-color-alt: #333 !default;
+$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
+
+// We use these to control tiny split buttons
+$split-button-padding-tny: $button-pip-tny * 10 !default;
+$split-button-span-width-tny: $button-pip-tny * 6 !default;
+$split-button-pip-size-tny: $button-pip-tny !default;
+$split-button-pip-top-tny: $button-pip-tny * 2 !default;
+$split-button-pip-default-float-tny: rem-calc(-6) !default;
+
+// We use these to control small split buttons
+$split-button-padding-sml: $button-pip-sml * 10 !default;
+$split-button-span-width-sml: $button-pip-sml * 6 !default;
+$split-button-pip-size-sml: $button-pip-sml !default;
+$split-button-pip-top-sml: $button-pip-sml * 1.5 !default;
+$split-button-pip-default-float-sml: rem-calc(-6) !default;
+
+// We use these to control medium split buttons
+$split-button-padding-med: $button-pip-med * 9 !default;
+$split-button-span-width-med: $button-pip-med * 5.5 !default;
+$split-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
+$split-button-pip-top-med: $button-pip-med * 1.5 !default;
+$split-button-pip-default-float-med: rem-calc(-6) !default;
+
+// We use these to control large split buttons
+$split-button-padding-lrg: $button-pip-lrg * 8 !default;
+$split-button-span-width-lrg: $button-pip-lrg * 5 !default;
+$split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
+$split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5) !default;
+$split-button-pip-default-float-lrg: rem-calc(-6) !default;
+
+
+//
+// @mixins
+//
+
+// We use this mixin to create split buttons that build upon the button mixins
+//
+// $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large.
+// $pip-color - Color of the triangle. Default: $split-button-pip-color.
+// $span-border - Border color of button divider. Default: $primary-color.
+// $base-style - Apply base style to split button. Default: true.
+@mixin split-button(
+  $padding:medium,
+  $pip-color:$split-button-pip-color, 
+  $span-border:$primary-color, 
+  $base-style:true) {
+
+  // With this, we can control whether or not the base styles come through.
+  @if $base-style {
+    position: relative;
+
+    // Styling for the split arrow clickable area
+    span {
+      display: block;
+      height: 100%;
+      position: absolute;
+      #{$opposite-direction}: 0;
+      top: 0;
+      border-#{$default-float}: solid 1px;
+
+      // Building the triangle pip indicator
+      &:before {
+        position: absolute;
+        content: "";
+        width: 0;
+        height: 0;
+        display: block;
+        border-style: inset;
+        top: 50%;
+
+        #{$default-float}: 50%;
+      }
+
+      &:active { background-color: $split-button-active-bg-tint; }
+    }
+  }
+
+  // Control the border color for the span area of the split button
+  @if $span-border {
+    span {
+      border-#{$default-float}-color: rgba(255,255,255,0.5);
+    }
+  }
+
+  // Style of the button and clickable area for tiny sizes
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $split-button-padding-tny;
+
+    span { width: $split-button-span-width-tny;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-tny;
+        top: 48%;
+        margin-#{$default-float}: $split-button-pip-default-float-tny;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for small sizes
+  @else if $padding == small {
+    padding-#{$opposite-direction}: $split-button-padding-sml;
+
+    span { width: $split-button-span-width-sml;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-sml;
+        top: 48%;
+        margin-#{$default-float}: $split-button-pip-default-float-sml;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for default (medium) sizes
+  @else if $padding == medium {
+    padding-#{$opposite-direction}: $split-button-padding-med;
+
+    span { width: $split-button-span-width-med;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-med;
+        top: 48%;
+        margin-#{$default-float}: $split-button-pip-default-float-med;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for large sizes
+  @else if $padding == large {
+    padding-#{$opposite-direction}: $split-button-padding-lrg;
+
+    span { width: $split-button-span-width-lrg;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-lrg;
+        top: 48%;
+        margin-#{$default-float}: $split-button-pip-default-float-lrg;
+      }
+    }
+  }
+
+  // Control the color of the triangle pip
+  @if $pip-color {
+    span:before { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+@include exports("split-button") {
+  @if $include-html-button-classes {
+
+    .split.button { @include split-button;
+
+      &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
+      &.alert { @include split-button(false, false, $alert-color, false); }
+      &.success { @include split-button(false, false, $success-color, false); }
+
+      &.tiny { @include split-button(tiny, false, false, false); }
+      &.small { @include split-button(small, false, false, false); }
+      &.large { @include split-button(large, false, false, false); }
+      &.expand { padding-left: 2rem; }
+
+      &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
+
+      &.radius span { @include side-radius($opposite-direction, $global-radius); }
+      &.round span { @include side-radius($opposite-direction, 1000px); }
+    }
+
+  }
+}

data/scss/foundation/components/_sub-nav.scss

@@ -0,0 +1,125 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name _sub-nav.scss
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control margin and padding
+$sub-nav-list-margin: rem-calc(-4 0 18) !default;
+$sub-nav-list-padding-top: rem-calc(4) !default;
+
+// We use this to control the definition
+$sub-nav-font-family: $body-font-family !default;
+$sub-nav-font-size: rem-calc(14) !default;
+$sub-nav-font-color: #999 !default;
+$sub-nav-font-weight: normal !default;
+$sub-nav-text-decoration: none !default;
+$sub-nav-padding: rem-calc(3 16) !default;
+$sub-nav-border-radius: 3px !default;
+$sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default;
+
+
+// We use these to control the active item styles
+
+$sub-nav-active-font-weight: normal !default;
+$sub-nav-active-bg: $primary-color !default;
+$sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
+$sub-nav-active-color: #fff !default;
+$sub-nav-active-padding: $sub-nav-padding !default;
+$sub-nav-active-cursor: default !default;
+
+$sub-nav-item-divider: "" !default;
+$sub-nav-item-divider-margin: rem-calc(12) !default;
+
+//
+// @mixins
+//
+
+
+// Create a sub-nav item
+//
+// $font-color - Font color. Default: $sub-nav-font-color.
+// $font-size - Font size. Default: $sub-nav-font-size.
+// $active-bg - Background of active nav item. Default: $sub-nav-active-bg.
+// $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover.
+@mixin sub-nav(
+  $font-color: $sub-nav-font-color,
+  $font-size: $sub-nav-font-size,
+  $active-bg: $sub-nav-active-bg,
+  $active-bg-hover: $sub-nav-active-bg-hover) {
+  display: block;
+  width: auto;
+  overflow: hidden;
+  margin: $sub-nav-list-margin;
+  padding-top: $sub-nav-list-padding-top;
+  margin-#{$opposite-direction}: 0;
+  margin-#{$default-float}: rem-calc(-12);
+
+  dt {
+    text-transform: uppercase;
+  }
+
+  dt,
+  dd,
+  li {
+    float: $default-float;
+    display: inline;
+    margin-#{$default-float}: rem-calc(16);
+    margin-bottom: rem-calc(10);
+    font-family: $sub-nav-font-family;
+    font-weight: $sub-nav-font-weight;
+    font-size: $font-size;
+    color: $font-color;
+
+    a {
+      text-decoration: $sub-nav-text-decoration;
+      color: $sub-nav-font-color;
+      padding: $sub-nav-padding;
+      &:hover {
+        color: $sub-nav-font-color-hover;
+      }
+    }
+
+    &.active a {
+      @include radius($sub-nav-border-radius);
+      font-weight: $sub-nav-active-font-weight;
+      background: $active-bg;
+      padding: $sub-nav-active-padding;
+      cursor: $sub-nav-active-cursor;
+      color: $sub-nav-active-color;
+      &:hover {
+        background: $active-bg-hover;
+      }
+    }
+    @if $sub-nav-item-divider != "" {
+      margin-#{$default-float}: 0;
+
+      &:before {
+        content: "#{$sub-nav-item-divider}";
+        margin: 0 $sub-nav-item-divider-margin;
+      }
+
+      &:first-child:before {
+        content: "";
+        margin: 0;
+      }
+    }
+  }
+}
+
+@include exports("sub-nav") {
+  @if $include-html-nav-classes {
+    .sub-nav { @include sub-nav; }
+  }
+}

data/scss/foundation/components/_switch.scss

@@ -0,0 +1,294 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+// NOTE: Switches have been deprecated in Foundation 5 and will be removed in the future.
+
+$include-html-form-classes: $include-html-classes !default;
+
+// Controlling border styles and background colors for the switch container
+$switch-border-color: scale-color(#fff, $lightness: -20%) !default;
+$switch-border-style: solid !default;
+$switch-border-width: 1px !default;
+$switch-bg: #fff !default;
+
+// We use these to control the switch heights for our default classes
+$switch-height-tny: 22px !default;
+$switch-height-sml: 28px !default;
+$switch-height-med: 36px !default;
+$switch-height-lrg: 44px !default;
+$switch-bottom-margin: rem-calc(20) !default;
+
+// We use these to control default font sizes for our classes.
+$switch-font-size-tny: 11px !default;
+$switch-font-size-sml: 12px !default;
+$switch-font-size-med: 14px !default;
+$switch-font-size-lrg: 17px !default;
+$switch-label-side-padding: 6px !default;
+
+// We use these to style the switch-paddle
+$switch-paddle-bg: #fff !default;
+$switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%) !default;
+$switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%) !default;
+$switch-paddle-border-width: 1px !default;
+$switch-paddle-border-style: solid !default;
+$switch-paddle-transition-speed: .1s !default;
+$switch-paddle-transition-ease: ease-out !default;
+$switch-positive-color: scale-color($success-color, $lightness: 94%) !default;
+$switch-negative-color: #f5f5f5 !default;
+
+// Outline Style for tabbing through switches
+$switch-label-outline: 1px dotted #888 !default;
+
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+@mixin switch-base(
+  $transition-speed:$switch-paddle-transition-speed,
+  $transition-ease:$switch-paddle-transition-ease) {
+
+  // Default position and structure for switch container.
+  position: relative;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+  border-style: $switch-border-style;
+  border-width: $switch-border-width;
+  margin-bottom: $switch-bottom-margin;
+
+  // Default label styles for type and transition
+  label {
+    position: relative;
+    #{$default-float}: 0;
+    z-index: 2;
+    float: $default-float;
+    width: 50%;
+    height: 100%;
+    margin: 0;
+    font-weight: bold;
+    text-align: $default-float;
+
+    // Transition for the switch label to follow paddle
+    @include single-transition(all, $transition-speed, $transition-ease);
+  }
+
+  // So that we don't need to recreate the form with any JS, we use the
+  // existing radio button, but we cleverly position and hide it.
+  input {
+    position: absolute;
+    z-index: 3;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    -moz-appearance: none;
+
+    // Hover and focus styles for the paddle
+    &:hover,
+    &:focus {
+      cursor: $cursor-pointer-value;
+    }
+  }
+
+  // The toggle area for radio switches. We call is a paddle.
+  span:last-child {
+    position: absolute;
+    top: -1px;
+    #{$default-float}: -1px;
+    z-index: 1;
+    display: block;
+    padding: 0;
+    border-width: $switch-paddle-border-width;
+    border-style: $switch-paddle-border-style;
+
+    // Transition for the switch paddle
+    @include single-transition(all, $transition-speed, $transition-ease);
+  }
+
+  // When a label isn't :checked, we hide it as it slides away.
+  input:not(:checked) + label { opacity: 0; }
+
+  // Controlling the position of the labels as they are toggled.
+  input:checked { display: none !important; }
+  input { #{$default-float}: 0; display: block !important; }
+
+  // Left Label alignment and position changes, including fixes for while inside a custom form
+  input:first-of-type + label,
+  input:first-of-type + span + label { #{$default-float}: -50%; }
+  input:first-of-type:checked + label,
+  input:first-of-type:checked + span + label { #{$default-float}: 0%; }
+
+  // Right Label alignment and position changes, including fixes for while inside a custom form
+  input:last-of-type + label,
+  input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
+  input:last-of-type:checked + label,
+  input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
+
+  // Hiding custom form spans since we auto-create them
+  span.custom { display: none !important; }
+
+  form.custom & .hidden-field {
+    margin-left: auto;
+    position: absolute;
+    visibility: visible;
+  }
+}
+
+// We use this mixin to create the size styles for switches.
+//
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $font-size - Font size of text in switch. Default: $switch-font-size-med.
+// $line-height - Line height of switch. Default: 2.3rem.
+@mixin switch-size(
+  $height: $switch-height-med,
+  $font-size: $switch-font-size-med,
+  $line-height: 2.3rem) {
+
+  height: rem-calc($height);
+
+  label {
+    padding: rem-calc(0, $switch-label-side-padding);
+    line-height: $line-height;
+    font-size: rem-calc($font-size);
+  }
+
+  input {
+    // Move the paddle to the right position
+    &:first-of-type:checked ~ span:last-child {
+      #{$default-float}: 100%;
+      margin-#{$default-float}: rem-calc(-$height + 1px);
+    }
+  }
+
+  span:last-child {
+    width: rem-calc($height);
+    height: rem-calc($height);
+  }
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+//
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $positive-color - Background color of positive side of switch. Default: $switch-positive-color.
+// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch-style(
+  $paddle-bg:$switch-paddle-bg,
+  $positive-color:$switch-positive-color,
+  $negative-color:$switch-negative-color,
+  $radius:false,
+  $base-style:true) {
+
+  @if $base-style {
+    background: $switch-bg;
+    border-color: $switch-border-color;
+
+    span:last-child {
+      border-color: scale-color($paddle-bg, $lightness: -30%);
+      background: $paddle-bg;
+      background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
+
+      // Building the alternating colored sides of the switch
+      box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
+                  1000px 0 0 980px $positive-color,
+                  -2px 0 10px 0 rgba(0,0,0,0.07),
+                  -1000px 0 0 1000px $negative-color;
+    }
+
+    &:hover,
+    &:focus {
+      span:last-child {
+        background: $paddle-bg;
+        background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
+      }
+    }
+
+    &:active { background: transparent; }
+  }
+
+  // Setting up the radius for switches
+  @if $radius == true {
+    @include radius(4px);
+    span:last-child { @include radius(3px); }
+  }
+  @else if $radius {
+    @include radius($radius);
+    span:last-child { @include radius($radius - 1px); }
+  }
+
+}
+
+// We use this to quickly create switches with a single mixin
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $font-size - Font size of text in switch. Default: $switch-font-size-med.
+// $line-height - Line height of switch. Default: 2.3rem.
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $positive-color - Background color of positive side of switch. Default: $switch-positive-color.
+// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch(
+  $transition-speed: $switch-paddle-transition-speed,
+  $transition-ease: $switch-paddle-transition-ease,
+  $height: $switch-height-med,
+  $font-size: $switch-font-size-med,
+  $line-height: 2.3rem,
+  $paddle-bg: $switch-paddle-bg,
+  $positive-color: $switch-positive-color,
+  $negative-color: $switch-negative-color,
+  $radius:false,
+  $base-style:true) {
+    @include switch-base($transition-speed, $transition-ease);
+    @include switch-size($height, $font-size, $line-height);
+    @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+
+@include exports("switch") {
+  @if $include-html-form-classes {
+      div.switch {
+        @include switch;
+
+        // Large radio switches
+        &.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
+
+        // Small radio switches
+        &.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1rem); }
+
+        // Tiny radio switches
+        &.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9rem); }
+
+        // Add a radius to the switch
+        &.radius { @include radius(4px);
+          span:last-child{ @include radius(3px); }
+        }
+
+        // Make the switch completely round, like a pill
+        &.round { @include radius(1000px);
+          span:last-child { @include radius(999px); }
+          label { padding: rem-calc(0 $switch-label-side-padding + 3); }
+        }
+
+      }
+  }
+}