foundation-rails 5.5.3.2 → 6.1.1.0

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

@@ -1,260 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import 'global';
-
-//
-// @variables
-//
-$include-html-clearing-classes: $include-html-classes !default;
-
-// We use these to set the background colors for parts of Clearing.
-$clearing-bg: $oil !default;
-$clearing-caption-bg: $clearing-bg !default;
-$clearing-carousel-bg: rgba(51,51,51,0.8) !default;
-$clearing-img-bg: $clearing-bg !default;
-
-// We use these to style the close button
-$clearing-close-color: $iron !default;
-$clearing-close-size: 30px !default;
-
-// We use these to style the arrows
-$clearing-arrow-size: 12px !default;
-$clearing-arrow-color: $clearing-close-color !default;
-
-// We use these to style captions
-$clearing-caption-font-color: $iron !default;
-$clearing-caption-font-size: .875em !default;
-$clearing-caption-padding: 10px 30px 20px !default;
-
-// We use these to make the image and carousel height and style
-$clearing-active-img-height: 85% !default;
-$clearing-carousel-height: 120px !default;
-$clearing-carousel-thumb-width: 120px !default;
-$clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
-
-@include exports("clearing") {
-  @if $include-html-clearing-classes {
-    // We decided to not create a mixin for Clearing because it relies
-    // on predefined classes and structure to work properly.
-    // The variables above should give enough control.
-
-    /* Clearing Styles */
-    .clearing-thumbs, #{data('clearing')} {
-      @include clearfix;
-      list-style: none;
-      margin-#{$default-float}: 0;
-      margin-bottom: 0;
-
-      li {
-        float: $default-float;
-        margin-#{$opposite-direction}: 10px;
-      }
-
-      &[class*="block-grid-"] li {
-        margin-#{$opposite-direction}: 0;
-      }
-    }
-
-    .clearing-blackout {
-      background: $clearing-bg;
-      height: 100%;
-      position: fixed;
-      top: 0;
-      width: 100%;
-      z-index: 998;
-      #{$default-float}: 0;
-
-      .clearing-close { display: block; }
-    }
-
-    .clearing-container {
-      height: 100%;
-      margin: 0;
-      overflow: hidden;
-      position: relative;
-      z-index: 998;
-    }
-
-    .clearing-touch-label {
-      color: $base;
-      font-size: .6em;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-    }
-
-    .visible-img {
-      height: 95%;
-      position: relative;
-
-      img {
-        position: absolute;
-        #{$default-float}: 50%;
-        top: 50%;
-        @if $default-float == left {
-          -webkit-transform: translateY(-50%) translateX(-50%);
-          -moz-transform: translateY(-50%) translateX(-50%);
-          -ms-transform: translateY(-50%) translateX(-50%);
-          -o-transform: translateY(-50%) translateX(-50%);
-          transform: translateY(-50%) translateX(-50%);
-        }
-        @else {
-          -webkit-transform: translateY(-50%) translateX(50%);
-          -moz-transform: translateY(-50%) translateX(50%);
-          -ms-transform: translateY(-50%) translateX(50%);
-          -o-transform: translateY(-50%) translateX(50%);
-          transform: translateY(-50%) translateX(50%);
-        };
-        max-height: 100%;
-        max-width: 100%;
-      }
-    }
-
-    .clearing-caption {
-      background: $clearing-caption-bg;
-      bottom: 0;
-      color: $clearing-caption-font-color;
-      font-size: $clearing-caption-font-size;
-      line-height: 1.3;
-      margin-bottom: 0;
-      padding: $clearing-caption-padding;
-      position: absolute;
-      text-align: center;
-      width: 100%;
-      #{$default-float}: 0;
-    }
-
-    .clearing-close {
-      color: $clearing-close-color;
-      display: none;
-      font-size: $clearing-close-size;
-      line-height: 1;
-      padding-#{$default-float}: 20px;
-      padding-top: 10px;
-      z-index: 999;
-
-      &:hover,
-      &:focus { color: $iron; }
-    }
-
-    .clearing-assembled .clearing-container { height: 100%;
-      .carousel > ul { display: none; }
-    }
-
-    // If you want to show a lightbox, but only have a single image come through as the thumbnail
-    .clearing-feature li {
-      display: none;
-      &.clearing-featured-img {
-        display: block;
-      }
-    }
-
-    // Large screen overrides
-    @media #{$medium-up} {
-      .clearing-main-prev,
-      .clearing-main-next {
-        height: 100%;
-        position: absolute;
-        top: 0;
-        width: 40px;
-        > span {
-          border: solid $clearing-arrow-size;
-          display: block;
-          height: 0;
-          position: absolute;
-          top: 50%;
-          width: 0;
-          &:hover { opacity: .8; }
-        }
-      }
-      .clearing-main-prev {
-        #{$default-float}: 0;
-        > span {
-          #{$default-float}: 5px;
-          border-color: transparent;
-          border-#{$opposite-direction}-color: $clearing-arrow-color;
-        }
-      }
-      .clearing-main-next {
-        #{$opposite-direction}: 0;
-        > span {
-          border-color: transparent;
-          border-#{$default-float}-color: $clearing-arrow-color;
-        }
-      }
-
-      .clearing-main-prev.disabled,
-      .clearing-main-next.disabled { opacity: .3; }
-
-      .clearing-assembled .clearing-container {
-
-        .carousel {
-          background: $clearing-carousel-bg;
-          height: $clearing-carousel-height;
-          margin-top: 10px;
-          text-align: center;
-
-          > ul {
-            display: inline-block;
-            z-index: 999;
-            height: 100%;
-            position: relative;
-            float: none;
-
-            li {
-              clear: none;
-              cursor: $cursor-pointer-value;
-              display: block;
-              float: $default-float;
-              margin-#{$opposite-direction}: 0;
-              min-height: inherit;
-              opacity: .4;
-              overflow: hidden;
-              padding: 0;
-              position: relative;
-              width: $clearing-carousel-thumb-width;
-
-              &.fix-height {
-                img {
-                  height: 100%;
-                  max-width: none;
-                }
-              }
-
-              a.th {
-                border: none;
-                box-shadow: none;
-                display: block;
-              }
-
-              img {
-                cursor: $cursor-pointer-value !important;
-                width: 100% !important;
-              }
-
-              &.visible { opacity: 1; }
-              &:hover { opacity: .8; }
-            }
-          }
-        }
-
-        .visible-img {
-          background: $clearing-img-bg;
-          height: $clearing-active-img-height;
-          overflow: hidden;
-        }
-      }
-
-      .clearing-close {
-        padding-#{$default-float}: 0;
-        padding-top: 0;
-        position: absolute;
-        top: 10px;
-        #{$opposite-direction}: 20px;
-      }
-    }
-
-  }
-}

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

@@ -1,130 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import 'global';
-
-//
-// @variables
-//
-$include-html-button-classes: $include-html-classes !default;
-
-// We use these to set the color of the pip in dropdown buttons
-$dropdown-button-pip-color: $white !default;
-$dropdown-button-pip-color-alt: $oil !default;
-
-// We use these to set the size of the pip in dropdown buttons
-$button-pip-tny: rem-calc(6) !default;
-$button-pip-sml: rem-calc(7) !default;
-$button-pip-med: rem-calc(9) !default;
-$button-pip-lrg: rem-calc(11) !default;
-
-// We use these to style tiny dropdown buttons
-$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
-$dropdown-button-pip-size-tny: $button-pip-tny !default;
-$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
-$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
-
-// We use these to style small dropdown buttons
-$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
-$dropdown-button-pip-size-sml: $button-pip-sml !default;
-$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
-$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
-
-// We use these to style medium dropdown buttons
-$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
-$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
-$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
-$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
-
-// We use these to style large dropdown buttons
-$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
-$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
-$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
-$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
-
-// @mixins
-//
-// Dropdown Button Mixin
-//
-// We use this mixin to build off of the button mixin and add dropdown button styles
-//
-// $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
-// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
-// $base-style - Add in base-styles. This can be set to false. Default:true
-
-@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) {
-
-  // We add in base styles, but they can be negated by setting to 'false'.
-  @if $base-style {
-    position: relative;
-
-    // This creates the base styles for the triangle pip
-    &::after {
-      border-color: $dropdown-button-pip-color transparent transparent transparent;
-      border-style: solid;
-      content: "";
-      display: block;
-      height: 0;
-      position: absolute;
-      top: 50%;
-      width: 0;
-    }
-  }
-
-  // If we're dealing with tiny buttons, use these styles
-  @if $padding == tiny {
-    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
-    &:after {
-      border-width: $dropdown-button-pip-size-tny;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
-      margin-top: $dropdown-button-pip-top-tny;
-    }
-  }
-
-  // If we're dealing with small buttons, use these styles
-  @if $padding == small {
-    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &::after {
-      border-width: $dropdown-button-pip-size-sml;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
-      margin-top: $dropdown-button-pip-top-sml;
-    }
-  }
-
-  // If we're dealing with default (medium) buttons, use these styles
-  @if $padding == medium {
-    padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &::after {
-      border-width: $dropdown-button-pip-size-med;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
-      margin-top: $dropdown-button-pip-top-med;
-    }
-  }
-
-  // If we're dealing with large buttons, use these styles
-  @if $padding == large {
-    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &::after {
-      border-width: $dropdown-button-pip-size-lrg;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
-      margin-top: $dropdown-button-pip-top-lrg;
-    }
-  }
-
-  // We can control the pip color. We didn't use logic in this case, just set it and forget it.
-  @if $pip-color {
-    &::after { border-color: $pip-color transparent transparent transparent; }
-  }
-}
-
-@include exports("dropdown-button") {
-  @if $include-html-button-classes {
-    .dropdown.button, button.dropdown { @include dropdown-button;
-      &.tiny { @include dropdown-button(tiny, $base-style:false); }
-      &.small { @include dropdown-button(small, $base-style:false); }
-      &.large { @include dropdown-button(large, $base-style:false); }
-      &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
-    }
-  }
-}

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

@@ -1,269 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import 'global';
-
-//
-// @variables
-//
-$include-html-dropdown-classes: $include-html-classes !default;
-
-// We use these to controls height and width styles.
-$f-dropdown-max-width: 200px !default;
-$f-dropdown-height: auto !default;
-$f-dropdown-max-height: none !default;
-
-// Used for bottom position
-$f-dropdown-margin-top: 2px !default;
-
-// Used for right position
-$f-dropdown-margin-left: $f-dropdown-margin-top !default;
-
-// Used for left position
-$f-dropdown-margin-right: $f-dropdown-margin-top !default;
-
-// Used for top position
-$f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
-
-// We use this to control the background color
-$f-dropdown-bg: $white !default;
-
-// We use this to set the border styles for dropdowns.
-$f-dropdown-border-style: solid !default;
-$f-dropdown-border-width: 1px !default;
-$f-dropdown-border-color: scale-color($white, $lightness: -20%) !default;
-
-// We use these to style the triangle pip.
-$f-dropdown-triangle-size: 6px !default;
-$f-dropdown-triangle-color: $white !default;
-$f-dropdown-triangle-side-offset: 10px !default;
-
-// We use these to control styles for the list elements.
-$f-dropdown-list-style: none !default;
-$f-dropdown-font-color: $charcoal !default;
-$f-dropdown-font-size: rem-calc(14) !default;
-$f-dropdown-list-padding: rem-calc(5, 10) !default;
-$f-dropdown-line-height: rem-calc(18) !default;
-$f-dropdown-list-hover-bg: $smoke !default;
-$dropdown-mobile-default-float: 0 !default;
-
-// We use this to control the styles for when the dropdown has custom content.
-$f-dropdown-content-padding: rem-calc(20) !default;
-
-// Default radius for dropdown.
-$f-dropdown-radius: $global-radius !default;
-
-//
-// @mixins
-//
-//
-// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
-// We use this to style the dropdown container element.
-// $content-list - Sets list-style. Default: list. Options: [list, content]
-// $triangle - Sets if dropdown has triangle. Default:true.
-// $max-width - Default: $f-dropdown-max-width || 200px.
-@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
-  display: none;
-  left: -9999px;
-  list-style: $f-dropdown-list-style;
-  margin-#{$default-float}: 0;
-  position: absolute;
-
-  &.open {
-    display: block;
-  }
-
-  > *:first-child { margin-top: 0; }
-  > *:last-child { margin-bottom: 0; }
-
-  @if $content == list {
-    background: $f-dropdown-bg;
-    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
-    font-size: $f-dropdown-font-size;
-    height: $f-dropdown-height;
-    max-height: $f-dropdown-max-height;
-    width: 100%;
-    z-index: 89;
-  }
-  @else if $content == content {
-    background: $f-dropdown-bg;
-    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
-    font-size: $f-dropdown-font-size;
-    height: $f-dropdown-height;
-    max-height: $f-dropdown-max-height;
-    padding: $f-dropdown-content-padding;
-    width: 100%;
-    z-index: 89;
-  }
-
-  @if $triangle == bottom {
-    margin-top: $f-dropdown-margin-top;
-
-    @if $f-dropdown-triangle-size != 0px {
-
-      &:before {
-        @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
-        position: absolute;
-        top: -($f-dropdown-triangle-size * 2);
-        #{$default-float}: $f-dropdown-triangle-side-offset;
-        z-index: 89;
-      }
-      &:after {
-        @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
-        position: absolute;
-        top: -(($f-dropdown-triangle-size + 1) * 2);
-        #{$default-float}: $f-dropdown-triangle-side-offset - 1;
-        z-index: 88;
-      }
-
-      &.right:before {
-        #{$default-float}: auto;
-        #{$opposite-direction}: $f-dropdown-triangle-side-offset;
-      }
-      &.right:after {
-        #{$default-float}: auto;
-        #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
-      }
-    }
-  }
-
-  @if $triangle == $default-float {
-    margin-top: 0;
-    margin-#{$default-float}: $f-dropdown-margin-right;
-
-    &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
-      position: absolute;
-      top: $f-dropdown-triangle-side-offset;
-      #{$default-float}: -($f-dropdown-triangle-size * 2);
-      z-index: 89;
-    }
-    &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
-      position: absolute;
-      top: $f-dropdown-triangle-side-offset - 1;
-      #{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
-      z-index: 88;
-    }
-
-  }
-
-  @if $triangle == $opposite-direction {
-    margin-top: 0;
-    margin-#{$default-float}: -$f-dropdown-margin-right;
-
-    &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
-      position: absolute;
-      top: $f-dropdown-triangle-side-offset;
-      #{$opposite-direction}: -($f-dropdown-triangle-size * 2);
-      #{$default-float}: auto;
-      z-index: 89;
-    }
-    &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
-      position: absolute;
-      top: $f-dropdown-triangle-side-offset - 1;
-      #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
-      #{$default-float}: auto;
-      z-index: 88;
-    }
-
-  }
-
-  @if $triangle == top {
-    margin-left: 0;
-    margin-top: -$f-dropdown-margin-bottom;
-
-    &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
-      bottom: -($f-dropdown-triangle-size * 2);
-      position: absolute;
-      top: auto;
-      #{$default-float}: $f-dropdown-triangle-side-offset;
-      #{$opposite-direction}: auto;
-      z-index: 89;
-    }
-    &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
-      bottom: -($f-dropdown-triangle-size * 2) - 2;
-      position: absolute;
-      top: auto;
-      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
-      #{$opposite-direction}: auto;
-      z-index: 88;
-    }
-
-  }
-
-  @if $max-width { max-width: $max-width; }
-  @else { max-width: $f-dropdown-max-width; }
-
-}
-
-// @MIXIN
-//
-// We use this to style the list elements or content inside the dropdown.
-
-@mixin dropdown-style {
-  cursor: $cursor-pointer-value;
-  font-size: $f-dropdown-font-size;
-  line-height: $f-dropdown-line-height;
-  margin: 0;
-
-  &:hover,
-  &:focus { background: $f-dropdown-list-hover-bg; }
-
-  a {
-    display: block;
-    padding: $f-dropdown-list-padding;
-    color: $f-dropdown-font-color;
-  }
-}
-
-@include exports("dropdown") {
-  @if $include-html-dropdown-classes {
-
-    /* Foundation Dropdowns */
-    .f-dropdown {
-      @include dropdown-container(list, bottom);
-
-      &.drop-#{$opposite-direction} {
-        @include dropdown-container(list, #{$default-float});
-      }
-
-      &.drop-#{$default-float} {
-        @include dropdown-container(list, #{$opposite-direction});
-      }
-
-      &.drop-top {
-        @include dropdown-container(list, top);
-      }
-      // max-width: none;
-
-      li { @include dropdown-style; }
-
-      // You can also put custom content in these dropdowns
-      &.content { @include dropdown-container(content, $triangle:false); }
-
-      // Radius of Dropdown
-      &.radius { @include radius($f-dropdown-radius); }
-
-      // Sizes
-      &.tiny    { max-width: 200px; }
-      &.small   { max-width: 300px; }
-      &.medium  { max-width: 500px; }
-      &.large   { max-width: 800px; }
-      &.mega    {
-        width:100%!important;
-        max-width:100%!important;
-
-        &.open{
-          left:0!important;
-        }
-      }
-    }
-
-  }
-}