foundation-sass-rails 5.5.3.2

data/vendor/assets/stylesheets/foundation/components/_reveal.scss

@@ -0,0 +1,212 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+@import 'grid';
+
+//
+// @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($black, .45) !default;
+$reveal-overlay-bg-old: $black !default;
+
+// We use these to control the style of the modal itself.
+$reveal-modal-bg: $white !default;
+$reveal-position-top: rem-calc(100) !default;
+$reveal-default-width: 80% !default;
+$reveal-max-width: $row-width !default;
+$reveal-modal-padding: rem-calc(30) !default;
+$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
+
+// We use these to style the reveal close button
+$reveal-close-font-size: rem-calc(40) !default;
+$reveal-close-top: rem-calc(10) !default;
+$reveal-close-side: rem-calc(22) !default;
+$reveal-close-color: $base !default;
+$reveal-close-weight: $font-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: $steel !default;
+
+$reveal-modal-class: "reveal-modal" !default;
+$close-reveal-modal-class: "close-reveal-modal" !default;
+
+// Set base z-index
+$z-index-base: 1005;
+
+//
+// @mixins
+//
+
+// We use this to create the reveal background overlay styles
+@mixin reveal-bg( $include-z-index-value: true ) {
+  // position: absolute; // allows modal background to extend beyond window position
+  background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
+  background: $reveal-overlay-bg;
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: if( $include-z-index-value, $z-index-base - 1, auto );
+  #{$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, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
+  @if $base-style {
+    border-radius: $border-radius;
+    display: none;
+    position: absolute;
+    top:0;
+    visibility: hidden;
+    width: 100%;
+    z-index: $z-index-base;
+    #{$default-float}: 0;
+
+    @media #{$small-only} {
+      min-height:100vh;
+    }
+
+    // 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} {
+      left: 0;
+      margin: 0 auto;
+      max-width: $max-width;
+      right: 0;
+      width: $width;
+    }
+  }
+}
+
+// We use this to style the reveal modal defaults
+//
+// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
+// $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;
+  }
+  @else{
+       box-shadow: none;
+  }
+
+  // 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 || $base
+@mixin reveal-close($color:$reveal-close-color) {
+  color: $color;
+  cursor: $cursor-pointer-value;
+  font-size: $reveal-close-font-size;
+  font-weight: $reveal-close-weight;
+  line-height: 1;
+  position: absolute;
+  top: $reveal-close-top;
+  #{$opposite-direction}: $reveal-close-side;
+}
+
+@include exports("reveal") {
+  @if $include-html-reveal-classes {
+
+    // Reveal Modals
+    .reveal-modal-bg { @include reveal-bg; }
+
+    .#{$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
+      );
+
+      &.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%); }
+      &.full {
+        @include reveal-modal-base(false, 100%);
+        height: 100vh;
+        height:100%;
+        left:0;
+        margin-left: 0 !important;
+        max-width: none !important;
+        min-height:100vh;
+        top:0;
+      }
+
+      // Modals pushed to back
+      &.toback {
+        z-index: $z-index-base - 2;
+      }
+
+      .#{$close-reveal-modal-class} { @include reveal-close; }
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_side-nav.scss

@@ -0,0 +1,120 @@
+// 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: outside !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-link-bg-hover: hsla(0, 0, 0, .025) !default;
+$side-nav-link-margin: 0 !default;
+$side-nav-link-padding: rem-calc(7 14) !default;
+$side-nav-font-size: rem-calc(14) !default;
+$side-nav-font-weight: $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 heading styles.
+$side-nav-heading-color: $side-nav-link-color !default;
+$side-nav-heading-font-size: $side-nav-font-size !default;
+$side-nav-heading-font-weight: bold !default;
+$side-nav-heading-text-transform: uppercase !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($white, $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-active:$side-nav-link-color-active,
+  $link-color-hover:$side-nav-link-color-hover,
+  $link-bg-hover:$side-nav-link-bg-hover) {
+  display: block;
+  font-family: $side-nav-font-family;
+  list-style-position: $side-nav-list-position;
+  list-style-type: $side-nav-list-type;
+  margin: 0;
+  padding: $side-nav-padding;
+
+  li {
+    font-size: $font-size;
+    font-weight: $side-nav-font-weight;
+    margin: $side-nav-list-margin;
+
+    a:not(.button) {
+      color: $link-color;
+      display: block;
+      margin: $side-nav-link-margin;
+      padding: $side-nav-link-padding;
+      &:hover,
+      &:focus {
+        background: $link-bg-hover;
+        color: $link-color-hover;
+      }
+      &:active {
+        color: $link-color-active;
+      }
+    }
+
+    &.active > a:first-child:not(.button) {
+      color: $side-nav-link-color-active;
+      font-family: $side-nav-font-family-active;
+      font-weight: $side-nav-font-weight-active;
+    }
+
+    &.divider {
+      border-top: $side-nav-divider-size $side-nav-divider-style;
+      height: 0;
+      list-style: none;
+      padding: 0;
+      border-top-color: $divider-color;
+    }
+
+    &.heading {
+      color: $side-nav-heading-color;
+      font: {
+        size: $side-nav-heading-font-size;
+        weight: $side-nav-heading-font-weight;
+      }
+      text-transform: $side-nav-heading-text-transform;
+    }
+  }
+}
+
+@include exports("side-nav") {
+  @if $include-html-nav-classes {
+    .side-nav {@include side-nav;}
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss

@@ -0,0 +1,203 @@
+// 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: $white !default;
+$split-button-pip-color-alt: $oil !default;
+$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
+$split-button-span-border-color: rgba(255,255,255,0.5) !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: $split-button-span-border-color.
+// $base-style - Apply base style to split button. Default: true.
+@mixin split-button(
+  $padding:medium,
+  $pip-color:$split-button-pip-color, 
+  $span-border:$split-button-span-border-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
+      &:after {
+        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: $span-border;
+    }
+  }
+
+  // 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;
+      &:after {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-tny;
+        margin-#{$default-float}: $split-button-pip-default-float-tny;
+        top: 48%;
+      }
+    }
+  }
+
+  // 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;
+      &:after {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-sml;
+        margin-#{$default-float}: $split-button-pip-default-float-sml;
+        top: 48%;
+      }
+    }
+  }
+
+  // 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;
+      &:after {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-med;
+        margin-#{$default-float}: $split-button-pip-default-float-med;
+        top: 48%;
+      }
+    }
+  }
+
+  // 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;
+      &:after {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-lrg;
+        margin-#{$default-float}: $split-button-pip-default-float-lrg;
+        top: 48%;
+      }
+    }
+  }
+
+  // Control the color of the triangle pip
+  @if $pip-color {
+    span:after { 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, $split-button-span-border-color, false); }
+      &.alert { @include split-button(false, false, $split-button-span-border-color, false); }
+      &.success { @include split-button(false, false, $split-button-span-border-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); }
+      &.no-pip{
+        span:before{ border-style:none; }
+        span:after{ border-style:none; }
+        span>i{
+          display: block;
+          left: 50%;
+          margin-left: -0.28889em;
+          margin-top: -0.48889em;
+          position: absolute;
+          top: 50%;
+        }
+      }
+    }
+
+  }
+}