zurb-foundation-5 5.2.2

data/scss/foundation/components/_range-slider.scss

@@ -0,0 +1,148 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name _range-slider.scss
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-range-slider-classes: $include-html-classes !default;
+
+// These variabels define the slider bar styles
+$range-slider-bar-width: 100% !default;
+$range-slider-bar-height: rem-calc(16) !default;
+
+$range-slider-bar-border-width: 1px !default;
+$range-slider-bar-border-style: solid !default;
+$range-slider-bar-border-color: #ddd !default; 
+$range-slider-radius: $global-radius !default;
+$range-slider-round: $global-rounded !default;
+$range-slider-bar-bg-color: #fafafa !default;
+
+// Vertical bar styles
+$range-slider-vertical-bar-width: rem-calc(16) !default;
+$range-slider-vertical-bar-height: rem-calc(200) !default;
+
+// These variabels define the slider handle styles
+$range-slider-handle-width: rem-calc(32) !default;
+$range-slider-handle-height: rem-calc(22) !default;
+$range-slider-handle-position-top: rem-calc(-5) !default;
+$range-slider-handle-bg-color: $primary-color !default;
+$range-slider-handle-border-width: 1px !default;
+$range-slider-handle-border-style: solid !default;
+$range-slider-handle-border-color: none !default;
+$range-slider-handle-radius: $global-radius !default;
+$range-slider-handle-round: $global-rounded !default;
+$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
+$range-slider-handle-cursor: pointer !default;
+
+
+//
+// @mixins
+//
+
+@mixin range-slider-bar-base($vertical: false) {
+  display: block;
+  position: relative;
+  width: $range-slider-bar-width;
+  height: $range-slider-bar-height;
+  border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
+  margin: rem-calc(20 0);
+  -ms-touch-action: none;
+  touch-action: none;
+  @if $vertical == true {
+    display: inline-block;
+    width: $range-slider-vertical-bar-width;
+    height: $range-slider-vertical-bar-height;
+  }
+}
+@mixin range-slider-bar-style(
+  $bg: true,
+  $radius: false,
+  $round: false) {
+    @if $bg == true { background: $range-slider-bar-bg-color; }
+    @if $radius == true { @include radius($range-slider-radius); }
+    @if $round == true { @include radius($range-slider-round); }
+  }
+
+@mixin range-slider-bar(
+  $bg: $range-slider-bar-bg-color, 
+  $radius:false) {
+  @include range-slider-bar-base;
+  @include range-slider-bar-style;
+}
+
+@mixin range-slider-handle-base() {
+  display: inline-block;
+  position: absolute;
+  z-index: 1;
+  top: $range-slider-handle-position-top;
+  width: $range-slider-handle-width;
+  height: $range-slider-handle-height;
+  border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
+  cursor: $range-slider-handle-cursor;
+}
+@mixin range-slider-handle-style(
+  $bg: true,
+  $radius: false,
+  $round: false) {
+  @if $bg == true { background: $range-slider-handle-bg-color; }
+  @if $radius == true { @include radius($range-slider-radius); }
+  @if $round == true { @include radius($range-slider-round); }
+  &:hover {
+    background: $range-slider-handle-bg-hover-color;
+  }
+}
+@mixin range-slider-handle() {
+  @include range-slider-handle-base;
+  @include range-slider-handle-style;
+}
+
+// CSS Generation
+@include exports("range-slider-bar") {
+  @if $include-html-range-slider-classes {
+    .range-slider {
+      @include range-slider-bar-base;
+      @include range-slider-bar-style($bg:true, $radius:false);
+      &.vertical-range {
+        @include range-slider-bar-base($vertical: true);
+        .range-slider-handle {
+          margin-top: 0;
+          margin-#{$default-float}: -($range-slider-handle-width / 4);
+          position: absolute;
+          bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width);
+        }
+        .range-slider-active-segment {
+          width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
+          height: auto;
+          bottom: 0;
+        }
+      }
+      &.radius {
+        @include range-slider-bar-style($radius:true);
+        .range-slider-handle { @include range-slider-handle-style($radius: true); }
+      }
+      &.round {
+        @include range-slider-bar-style($round:true);
+        .range-slider-handle { @include range-slider-handle-style($round: true); }
+      }
+    }
+    .range-slider-active-segment {
+      display: inline-block;
+      position: absolute;
+      height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
+      background: scale-color($secondary-color, $lightness: -1%);
+    }
+    .range-slider-handle {
+      @include range-slider-handle-base;
+      @include range-slider-handle-style($bg:true, $radius: false);
+    }
+  }
+}

data/scss/foundation/components/_reveal.scss

@@ -0,0 +1,216 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name _reveal.scss
+// @dependencies _global.scss
+//
+
+$include-html-reveal-classes: $include-html-classes !default;
+
+// We use these to control the style of the reveal overlay.
+$reveal-overlay-bg: rgba(#000, .45) !default;
+$reveal-overlay-bg-old: #000 !default;
+
+// We use these to control the style of the modal itself.
+$reveal-modal-bg: #fff !default;
+$reveal-position-top: rem-calc(100) !default;
+$reveal-default-width: 80% !default;
+$reveal-modal-padding: rem-calc(20) !default;
+$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+
+// We use these to style the reveal close button
+$reveal-close-font-size: rem-calc(40) !default;
+$reveal-close-top: rem-calc(8) !default;
+$reveal-close-side: rem-calc(11) !default;
+$reveal-close-color: #aaa !default;
+$reveal-close-weight: bold !default;
+
+// We use this to set the default radius used throughout the core.
+$reveal-radius: $global-radius !default;
+$reveal-round: $global-rounded !default;
+
+// We use these to control the modal border
+$reveal-border-style: solid !default;
+$reveal-border-width: 1px !default;
+$reveal-border-color: #666 !default;
+
+$reveal-modal-class: "reveal-modal" !default;
+$close-reveal-modal-class: "close-reveal-modal" !default;
+
+//
+// @mixins
+//
+
+// We use this to create the reveal background overlay styles
+@mixin reveal-bg {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: $reveal-overlay-bg-old;
+  background: $reveal-overlay-bg;
+  z-index: 99;
+  display: none;
+  top: 0;
+  #{$default-float}: 0;
+}
+
+// We use this mixin to create the structure of a reveal modal
+//
+// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
+// $width - Sets reveal width Default: $reveal-default-width || 80%
+//
+@mixin reveal-modal-base(
+  $base-style:true,
+  $width:$reveal-default-width) {
+  @if $base-style {
+    visibility: hidden;
+    display: none;
+    position: absolute;
+    z-index: 100;
+    width: 100vw;
+    top:0;
+    #{$default-float}: 0;
+    @media #{$small-only} {
+      min-height:100vh;
+    }
+    @media #{$medium-up} {
+      #{$default-float}: 50%;
+    }
+
+    // Make sure rows don't have a min-width on them
+    .column,
+    .columns { min-width: 0; }
+
+    // Get rid of margin from first and last element inside modal
+    & > :first-child { margin-top: 0; }
+    & > :last-child { margin-bottom: 0; }
+  }
+
+  @if $width {
+    @media #{$medium-up} {
+      margin-#{$default-float}: -($width / 2);
+      width: $width;
+    }
+  }
+}
+
+// We use this to style the reveal modal defaults
+//
+// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
+// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
+// $border - Choose whether reveal uses a border. Default: true, Options: false
+// $border-style - Set reveal border style. Default: $reveal-border-style || solid
+// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width.
+// $border-color - Color of border. Default: $reveal-border-color.
+// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
+// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
+// $top-offset - Default: $reveal-position-top || 50px
+@mixin reveal-modal-style(
+  $bg:false,
+  $padding:false,
+  $border:false,
+  $border-style:$reveal-border-style,
+  $border-width:$reveal-border-width,
+  $border-color:$reveal-border-color,
+  $box-shadow:false,
+  $radius:false,
+  $top-offset:false) {
+
+  @if $bg { background-color: $bg; }
+  @if $padding != false { padding: $padding; }
+
+  @if $border { border: $border-style $border-width $border-color; }
+
+  // We can choose whether or not to include the default box-shadow.
+  @if $box-shadow {
+    box-shadow: $reveal-box-shadow;
+  }
+
+  // We can control how much radius is used on the modal
+  @if $radius == true { @include radius($reveal-radius); }
+  @else if $radius { @include radius($radius); }
+
+  @if $top-offset {
+    @media #{$medium-up} {
+      top: $top-offset;
+    }
+  }
+}
+
+// We use this to create a close button for the reveal modal
+//
+// $color - Default: $reveal-close-color || #aaa
+@mixin reveal-close($color:$reveal-close-color) {
+  font-size: $reveal-close-font-size;
+  line-height: 1;
+  position: absolute;
+  top: $reveal-close-top;
+  #{$opposite-direction}: $reveal-close-side;
+  color: $color;
+  font-weight: $reveal-close-weight;
+  cursor: $cursor-pointer-value;
+}
+
+@include exports("reveal") {
+  @if $include-html-reveal-classes {
+
+    // Reveal Modals
+    .reveal-modal-bg { @include reveal-bg; }
+
+    dialog, .#{$reveal-modal-class} {
+      @include reveal-modal-base;
+      @include reveal-modal-style(
+        $bg:$reveal-modal-bg,
+        $padding:$reveal-modal-padding,
+        $border:true,
+        $box-shadow:true,
+        $radius:false,
+        $top-offset:$reveal-position-top);
+
+      .#{$close-reveal-modal-class} { @include reveal-close; }
+    }
+
+    dialog[open] {
+      display:block;
+      visibility: visible;
+    }
+
+    @media #{$medium-up} {
+
+      dialog, .#{$reveal-modal-class} {
+        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
+
+        &.radius { @include reveal-modal-style($radius:true); }
+        &.round  { @include reveal-modal-style($radius:$reveal-round); }
+        
+        &.collapse { @include reveal-modal-style($padding:0); }
+
+        &.tiny  { @include reveal-modal-base(false, 30%); }
+        &.small { @include reveal-modal-base(false, 40%); }
+        &.medium  { @include reveal-modal-base(false, 60%); }
+        &.large { @include reveal-modal-base(false, 70%); }
+        &.xlarge { @include reveal-modal-base(false, 95%); }
+      }
+
+      dialog, .#{$reveal-modal-class} {
+        &.full {
+          @include reveal-modal-base(false, 100vw);
+          top:0;
+          left:0;
+          height: 100vh;
+          min-height:100vh;
+          margin-left: 0 !important;
+        }
+      }
+    }
+
+    // Reveal Print Styles
+    @media print {
+      dialog, .#{$reveal-modal-class} {background: #fff !important;}
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to control padding.
+$side-nav-padding: rem-calc(14 0) !default;
+
+// We use these to control list styles.
+$side-nav-list-type: none !default;
+$side-nav-list-position: inside !default;
+$side-nav-list-margin: rem-calc(0 0 7 0) !default;
+
+// We use these to control link styles.
+$side-nav-link-color: $primary-color !default;
+$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
+$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
+$side-nav-font-size: rem-calc(14) !default;
+$side-nav-font-weight: normal !default;
+$side-nav-font-weight-active: $side-nav-font-weight !default;
+$side-nav-font-family: $body-font-family !default;
+$side-nav-font-family-active: $side-nav-font-family !default;
+
+
+
+// We use these to control border styles
+$side-nav-divider-size: 1px !default;
+$side-nav-divider-style: solid !default;
+$side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
+
+
+//
+// @mixins
+//
+
+
+// We use this to style the side-nav
+//
+// $divider-color - Border color of divider. Default: $side-nav-divider-color.
+// $font-size - Font size of nav items. Default: $side-nav-font-size.
+// $link-color - Color of navigation links. Default: $side-nav-link-color.
+// $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover.
+@mixin side-nav(
+  $divider-color:$side-nav-divider-color,
+  $font-size:$side-nav-font-size,
+  $link-color:$side-nav-link-color,
+  $link-color-hover:$side-nav-link-color-hover) {
+  display: block;
+  margin: 0;
+  padding: $side-nav-padding;
+  list-style-type: $side-nav-list-type;
+  list-style-position: $side-nav-list-position;
+  font-family: $side-nav-font-family;
+
+  li {
+    margin: $side-nav-list-margin;
+    font-size: $font-size;
+
+    a:not(.button) {
+      display: block;
+      color: $link-color;
+      &:hover,
+      &:focus { color: $link-color-hover; }
+    }
+
+    &.active > a:first-child:not(.button) {
+      color: $side-nav-link-color-active;
+      font-weight: $side-nav-font-weight-active;
+      font-family: $side-nav-font-family-active;
+    }
+
+    &.divider {
+      border-top: $side-nav-divider-size $side-nav-divider-style;
+      height: 0;
+      padding: 0;
+      list-style: none;
+      border-top-color: $divider-color;
+    }
+  }
+}
+
+@include exports("side-nav") {
+  @if $include-html-nav-classes {
+    .side-nav { @include side-nav; }
+  }
+}