zurb-foundation-5 5.2.2

data/scss/foundation/components/_inline-lists.scss

@@ -0,0 +1,56 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-inline-list-classes: $include-html-classes !default;
+
+// We use this to control the margins and padding of the inline list.
+$inline-list-top-margin: 0 !default;
+$inline-list-opposite-margin: 0 !default;
+$inline-list-bottom-margin: rem-calc(17) !default;
+$inline-list-default-float-margin: rem-calc(-22) !default;
+
+$inline-list-padding: 0 !default;
+
+// We use this to control the overflow of the inline list.
+$inline-list-overflow: hidden !default;
+
+// We use this to control the list items
+$inline-list-display: block !default;
+
+// We use this to control any elements within list items
+$inline-list-children-display: block !default;
+
+//
+// @mixins
+//
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: rem-calc(22);
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+@include exports("inline-list") {
+  @if $include-html-inline-list-classes {
+    .inline-list {
+      @include inline-list();
+    }
+  }
+}

data/scss/foundation/components/_joyride.scss

@@ -0,0 +1,220 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-joyride-classes: $include-html-classes !default;
+
+// Controlling default Joyride styles
+$joyride-tip-bg: #333 !default;
+$joyride-tip-default-width: 300px !default;
+$joyride-tip-padding: rem-calc(18 20 24) !default;
+$joyride-tip-border: solid 1px #555 !default;
+$joyride-tip-radius: 4px !default;
+$joyride-tip-position-offset: 22px !default;
+
+// Here, we're setting the tip font styles
+$joyride-tip-font-color: #fff !default;
+$joyride-tip-font-size: rem-calc(14) !default;
+$joyride-tip-header-weight: bold !default;
+
+// This changes the nub size
+$joyride-tip-nub-size: 10px !default;
+
+// This adjusts the styles for the timer when its enabled
+$joyride-tip-timer-width: 50px !default;
+$joyride-tip-timer-height: 3px !default;
+$joyride-tip-timer-color: #666 !default;
+
+// This changes up the styles for the close button
+$joyride-tip-close-color: #777 !default;
+$joyride-tip-close-size: 24px !default;
+$joyride-tip-close-weight: normal !default;
+
+// When Joyride is filling the screen, we use this style for the bg
+$joyride-screenfill: rgba(0,0,0,0.5) !default;
+
+
+// We decided not to make a mixin for this because it relies on 
+// predefined classes to work properly.
+@include exports("joyride") {
+  @if $include-html-joyride-classes {
+
+    /* Foundation Joyride */
+    .joyride-list { display: none; }
+
+    /* Default styles for the container */
+    .joyride-tip-guide {
+      display: none;
+      position: absolute;
+      background: $joyride-tip-bg;
+      color: $joyride-tip-font-color;
+      z-index: 101;
+      top: 0;
+      #{$default-float}: 2.5%;
+      font-family: inherit;
+      font-weight: normal;
+      width: 95%;
+    }
+
+    .lt-ie9 .joyride-tip-guide {
+      max-width:800px;
+      #{$default-float}: 50%;
+      margin-#{$default-float}:-400px;
+    }
+
+    .joyride-content-wrapper {
+      width: 100%;
+
+      padding: $joyride-tip-padding;
+
+      .button { margin-bottom: 0 !important; }
+    }
+
+    /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+    .joyride-tip-guide {
+      .joyride-nub {
+        display: block;
+        position: absolute;
+        #{$default-float}: $joyride-tip-position-offset;
+        width: 0;
+        height: 0;
+        border: $joyride-tip-nub-size solid $joyride-tip-bg;
+
+        &.top {
+          border-top-style: solid;
+          border-color: $joyride-tip-bg;
+          border-top-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          top: -($joyride-tip-nub-size*2);
+        }
+        &.bottom {
+          border-bottom-style: solid;
+          border-color: $joyride-tip-bg !important;
+          border-bottom-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          bottom: -($joyride-tip-nub-size*2);
+        }
+
+        &.right { right: -($joyride-tip-nub-size*2); }
+        &.left { left: -($joyride-tip-nub-size*2); }
+      }
+    }
+
+    /* Typography */
+    .joyride-tip-guide h1,
+    .joyride-tip-guide h2,
+    .joyride-tip-guide h3,
+    .joyride-tip-guide h4,
+    .joyride-tip-guide h5,
+    .joyride-tip-guide h6 {
+      line-height: 1.25;
+      margin: 0;
+      font-weight: $joyride-tip-header-weight;
+      color: $joyride-tip-font-color;
+    }
+    .joyride-tip-guide p {
+      margin: rem-calc(0 0 18 0);
+      font-size: $joyride-tip-font-size;
+      line-height: 1.3;
+    }
+
+    .joyride-timer-indicator-wrap {
+      width: $joyride-tip-timer-width;
+      height: $joyride-tip-timer-height;
+      border: $joyride-tip-border;
+      position: absolute;
+      #{$opposite-direction}: rem-calc(17);
+      bottom: rem-calc(16);
+    }
+    .joyride-timer-indicator {
+      display: block;
+      width: 0;
+      height: inherit;
+      background: $joyride-tip-timer-color;
+    }
+
+    .joyride-close-tip {
+      position: absolute;
+      #{$opposite-direction}: 12px;
+      top: 10px;
+      color: $joyride-tip-close-color !important;
+      text-decoration: none;
+      font-size: $joyride-tip-close-size;
+      font-weight: $joyride-tip-close-weight;
+      line-height: .5 !important;
+
+      &:hover,
+      &:focus { color: #eee !important; }
+    }
+
+    .joyride-modal-bg {
+      position: fixed;
+      height: 100%;
+      width: 100%;
+      background: transparent;
+      background: $joyride-screenfill;
+      z-index: 100;
+      display: none;
+      top: 0;
+      #{$default-float}: 0;
+      cursor: $cursor-pointer-value;
+    }
+
+    .joyride-expose-wrapper {
+      background-color: #ffffff;
+      position: absolute;
+      border-radius: 3px;
+      z-index: 102;
+      box-shadow: 0 0 15px #ffffff;
+    }
+
+    .joyride-expose-cover {
+      background: transparent;
+      border-radius: 3px;
+      position: absolute;
+      z-index: 9999;
+      top: 0;
+      left: 0;
+    }
+
+
+    /* Styles for screens that are at least 768px; */
+    @media #{$small} {
+      .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+        .joyride-nub {
+          &.bottom {
+            border-color: $joyride-tip-bg !important;
+            border-bottom-color: transparent !important;
+            border-#{$default-float}-color: transparent !important;
+            border-#{$opposite-direction}-color: transparent !important;
+            bottom: -($joyride-tip-nub-size*2);
+          }
+          &.right {
+            border-color: $joyride-tip-bg !important;
+            border-top-color: transparent !important;
+            border-right-color: transparent !important; border-bottom-color: transparent !important;
+            top: $joyride-tip-position-offset;
+            left: auto;
+            right: -($joyride-tip-nub-size*2);
+          }
+          &.left {
+            border-color: $joyride-tip-bg !important;
+            border-top-color: transparent !important;
+            border-left-color: transparent !important;
+            border-bottom-color: transparent !important;
+            top: $joyride-tip-position-offset;
+            left: -($joyride-tip-nub-size*2);
+            right: auto;
+          }
+        }
+      }
+    }
+  }
+}

data/scss/foundation/components/_keystrokes.scss

@@ -0,0 +1,61 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-keystroke-classes: $include-html-classes !default;
+
+// We use these to control text styles.
+$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
+$keystroke-font-size: inherit !default;
+$keystroke-font-color: #222 !default;
+$keystroke-font-color-alt: #fff !default;
+$keystroke-function-factor: -7% !default;
+
+// We use this to control keystroke padding.
+$keystroke-padding: rem-calc(2 4 0) !default;
+
+// We use these to control background and border styles.
+$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+$keystroke-border-style: solid !default;
+$keystroke-border-width: 1px !default;
+$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
+$keystroke-radius: $global-radius !default;
+
+//
+// @mixins
+//
+// We use this mixin to create keystroke styles.
+// $bg - Default: $keystroke-bg || scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+@mixin keystroke($bg:$keystroke-bg) {
+  // This find the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  background-color: $bg;
+  border-color: scale-color($bg, $lightness: $keystroke-function-factor);
+
+  // We adjust the font color based on the brightness of the background.
+  @if $bg-lightness > 70% { color: $keystroke-font-color; }
+  @else { color: $keystroke-font-color-alt; }
+
+  border-style: $keystroke-border-style;
+  border-width: $keystroke-border-width;
+  margin: 0;
+  font-family: $keystroke-font;
+  font-size: $keystroke-font-size;
+  padding: $keystroke-padding;
+}
+
+@include exports("keystroke") {
+  @if $include-html-keystroke-classes  {
+    .keystroke,
+    kbd {
+      @include keystroke;
+      @include radius($keystroke-radius);
+    }
+  }
+}

data/scss/foundation/components/_labels.scss

@@ -0,0 +1,104 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-label-classes: $include-html-classes !default;
+
+// We use these to style the labels
+$label-padding: rem-calc(4 8 6) !default;
+$label-radius: $global-radius !default;
+
+// We use these to style the label text
+$label-font-sizing: rem-calc(11) !default;
+$label-font-weight: normal !default;
+$label-font-color: #333 !default;
+$label-font-color-alt: #fff !default;
+$label-font-family: $body-font-family !default;
+
+//
+// @mixins
+//
+// We use this mixin to create a default label base.
+@mixin label-base {
+  font-weight: $label-font-weight;
+  font-family: $label-font-family;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-block;
+  position: relative;
+  margin-bottom: inherit;
+}
+
+// @mixins
+//
+// We use this mixin to add label size styles.
+// $padding - Used to determine label padding. Default: $label-padding || rem-calc(3 10 4) !default
+// $text-size - Used to determine label text-size. Default: $text-size found in settings
+@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
+  @if $padding { padding: $padding; }
+  @if $text-size { font-size: $text-size; }
+}
+
+// @mixins
+//
+// We use this mixin to add label styles.
+// $bg - Default: $primary-color (found in settings file)
+// $radius - Default: false, Options: true, sets radius to $global-radius (found in settings file)
+@mixin label-style($bg:$primary-color, $radius:false) {
+
+  // We control which background color comes through
+  @if $bg {
+
+    // This find the lightness percentage of the background color.
+    $bg-lightness: lightness($bg);
+
+    background-color: $bg;
+
+    // We control the text color for you based on the background color.
+    @if $bg-lightness < 70% { color: $label-font-color-alt; }
+    @else { color: $label-font-color; }
+  }
+
+  // We use this to control the radius on labels.
+  @if $radius == true { @include radius($label-radius); }
+  @else if $radius { @include radius($radius); }
+
+}
+
+// @mixins
+//
+// We use this to add close buttons to alerts
+// $padding - Default: $label-padding,
+// $text-size - Default: $label-font-sizing,
+// $bg - Default: $primary-color(found in settings file)
+// $radius - Default: false, Options: true which sets radius to $global-radius (found in settings file)
+@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
+
+  @include label-base;
+  @include label-size($padding, $text-size);
+  @include label-style($bg, $radius);
+}
+
+@include exports("label") {
+  @if $include-html-label-classes {
+    .label {
+      @include label-base;
+      @include label-size;
+      @include label-style;
+
+      &.radius { @include label-style(false, true); }
+      &.round { @include label-style(false, $radius:1000px); }
+
+      &.alert     { @include label-style($alert-color); }
+      &.success   { @include label-style($success-color); }
+      &.secondary { @include label-style($secondary-color); }
+    }
+  }
+}

data/scss/foundation/components/_magellan.scss

@@ -0,0 +1,34 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-magellan-classes: $include-html-classes !default;
+
+$magellan-bg: #fff !default;
+$magellan-padding: 10px !default;
+
+@include exports("magellan") {
+  @if $include-html-magellan-classes {
+
+    #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
+      background: $magellan-bg;
+      z-index: 50;
+      min-width: 100%;
+      padding: $magellan-padding;
+
+      .sub-nav {
+        margin-bottom: 0;
+        dd { margin-bottom: 0; }
+        a {
+          line-height: 1.8em;
+        }
+      }
+    }
+
+  }
+}