foundation-sass-rails 5.5.3.2

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

@@ -0,0 +1,161 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @variables
+//
+
+$include-html-accordion-classes: $include-html-classes !default;
+
+$accordion-navigation-padding: rem-calc(16) !default;
+$accordion-navigation-bg-color: $silver !default;
+$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
+$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
+$accordion-navigation-active-font-color: $jet !default;
+$accordion-navigation-font-color: $jet !default;
+$accordion-navigation-font-size: rem-calc(16) !default;
+$accordion-navigation-font-family: $body-font-family !default;
+
+$accordion-content-padding: ($column-gutter/2) !default;
+$accordion-content-active-bg-color: $white !default;
+
+
+//  Mixin: accordion-container()
+//  Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
+//  Explicit Dependencies: a clearfix mixin *is* defined.
+//  Implicit Dependencies: None
+
+@mixin accordion-container() {
+  @include clearfix;
+  margin-bottom: 0;
+}
+
+//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family) {
+//    @params $bg-color: [ color or string ]: Specify the background color for the navigation element
+//    @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
+//    @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
+//    @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
+//    @params $font-color [ color or string ]: Color of the font for accordion
+//    @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
+//    @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
+//    @params $active-font [ color or string ]: Specify the font color for the navigation element when active.
+
+@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family, $active-font: $accordion-navigation-active-font-color ) {
+  display: block;
+  margin-bottom: 0 !important;
+  @if type-of($active_class) != "string" {
+    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
+  }
+  @else {
+    &.#{ $active_class } > a {
+      background: $active-bg;
+      color: $active-font;
+    }
+  }
+  > a {
+    background: $bg;
+    color: $font-color;
+    @if type-of($padding) != number {
+      @warn "`#{$padding}` was read as #{type-of($padding)}";
+      @if $accordion-navigation-padding != null {
+        @warn "#{$padding} was read as a #{type-of($padding)}";
+        @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
+        padding: $accordion-navigation-padding;
+      }
+      @else {
+        @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
+        padding: null;
+      }
+    }
+    @else {
+      padding: $padding;
+    }
+    display: block;
+    font-family: $font-family;
+    @if type-of($font-size) != number {
+      @warn "`#{$font-size}` was read as a #{type-of($font-size)}";
+      @if $accordion-navigation-font-size != null {
+        @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
+        font-size: $accordion-navigation-font-size;
+      }
+      @else{
+        @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
+        font-size: null;
+
+      }
+    }
+    @else {
+      font-size: $font-size;
+    }
+    &:hover {
+      background: $hover-bg;
+    }
+  }
+}
+
+//  Mixin: accordion-content($bg, $padding, $active-class)
+//    @params $padding [ number ]: Padding for the content of the container
+//    @params $bg [ color  ]: Background color for the content when it's visible
+//    @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
+
+@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
+  display: none;
+  @if type-of($padding) != "number" {
+    @warn "#{$padding} was read as a #{type-of($padding)}";
+    @if $accordion-content-padding != null {
+      @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
+      padding: $accordion-content-padding;
+    } @else {
+      @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
+      padding: null;
+    }
+  } @else {
+    padding: $padding;
+  }
+
+  @if type-of($active_class) != "string" {
+    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
+  }
+  @else {
+    &.#{$active_class} {
+      background: $bg;
+      display: block;
+    }
+  }
+}
+
+@include exports("accordion") {
+  @if $include-html-accordion-classes {
+    .accordion {
+      @include clearfix;
+      margin-bottom: 0;
+      margin-left: 0;
+      .accordion-navigation, dd {
+        display: block;
+        margin-bottom: 0 !important;
+        &.active > a { background: $accordion-navigation-active-bg-color; color: $accordion-navigation-active-font-color; }
+        > a {
+          background: $accordion-navigation-bg-color;
+          color: $accordion-navigation-font-color;
+          display: block;
+          font-family: $accordion-navigation-font-family;
+          font-size: $accordion-navigation-font-size;
+          padding: $accordion-navigation-padding;
+          &:hover { background: $accordion-navigation-hover-bg-color; }
+        }
+
+        > .content {
+          display: none;
+          padding: $accordion-content-padding;
+          &.active {
+            background: $accordion-content-active-bg-color;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss

@@ -0,0 +1,128 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// Alert Box Variables
+//
+$include-html-alert-classes: $include-html-classes !default;
+
+// We use this to control alert padding.
+$alert-padding-top: rem-calc(14) !default;
+$alert-padding-default-float: $alert-padding-top !default;
+$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default;
+$alert-padding-bottom: $alert-padding-top !default;
+
+// We use these to control text style.
+$alert-font-weight: $font-weight-normal !default;
+$alert-font-size: rem-calc(13) !default;
+$alert-font-color: $white !default;
+$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
+
+// We use this for close hover effect.
+$alert-function-factor: -14% !default;
+
+// We use these to control border styles.
+$alert-border-style: solid !default;
+$alert-border-width: 1px !default;
+$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default;
+$alert-bottom-margin: rem-calc(20) !default;
+
+// We use these to style the close buttons
+$alert-close-color: $oil !default;
+$alert-close-top: 50% !default;
+$alert-close-position: rem-calc(4) !default;
+$alert-close-font-size: rem-calc(22) !default;
+$alert-close-opacity: .3 !default;
+$alert-close-opacity-hover: .5 !default;
+$alert-close-padding: 0 6px 4px !default;
+$alert-close-background: inherit !default;
+
+// We use this to control border radius
+$alert-radius: $global-radius !default;
+
+$alert-transition-speed: 300ms !default;
+$alert-transition-ease: ease-out !default;
+
+//
+// Alert Mixins
+//
+
+// We use this mixin to create a default alert base.
+@mixin alert-base {
+  border-style: $alert-border-style;
+  border-width: $alert-border-width;
+  display: block;
+  font-size: $alert-font-size;
+  font-weight: $alert-font-weight;
+  margin-bottom: $alert-bottom-margin;
+  padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
+  position: relative;
+  @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
+}
+
+// We use this mixin to add alert styles
+//
+// $bg - The background of the alert. Default: $primary-color.
+@mixin alert-style($bg:$primary-color) {
+
+  // This finds the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  // We control which background color and border come through.
+  background-color: $bg;
+  border-color: scale-color($bg, $lightness: $alert-function-factor);
+
+  // We control the text color for you based on the background color.
+  @if $bg-lightness > 70% { color: $alert-font-color-alt; }
+  @else                   { color: $alert-font-color; }
+
+}
+
+// We use this to create the close button.
+@mixin alert-close {
+  #{$opposite-direction}: $alert-close-position;
+  background: $alert-close-background;
+  color: $alert-close-color;
+  font-size: $alert-close-font-size;
+  line-height: .9;
+  margin-top: -($alert-close-font-size / 2);
+  opacity: $alert-close-opacity;
+  padding: $alert-close-padding;
+  position: absolute;
+  top: $alert-close-top;
+  &:hover,
+  &:focus { opacity: $alert-close-opacity-hover; }
+}
+
+// We use this to quickly create alerts with a single mixin.
+//
+// $bg - Background of alert. Default: $primary-color.
+// $radius - Radius of alert box. Default: false.
+@mixin alert($bg:$primary-color, $radius:false) {
+  @include alert-base;
+  @include alert-style($bg);
+  @include radius($radius);
+}
+
+@include exports("alert-box") {
+  @if $include-html-alert-classes {
+    .alert-box {
+      @include alert;
+
+      .close      { @include alert-close; }
+
+      &.radius    { @include radius($alert-radius); }
+      &.round     { @include radius($global-rounded); }
+
+      &.success   { @include alert-style($success-color); }
+      &.alert     { @include alert-style($alert-color); }
+      &.secondary { @include alert-style($secondary-color); }
+      &.warning { @include alert-style($warning-color); }
+      &.info { @include alert-style($info-color); }
+      &.alert-close { opacity: 0}
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -0,0 +1,133 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// Block Grid Variables
+//
+$include-html-block-grid-classes: $include-html-classes !default;
+$include-xl-html-block-grid-classes: false !default;
+
+// We use this to control the maximum number of block grid elements per row
+$block-grid-elements: 12 !default;
+$block-grid-default-spacing: rem-calc(20) !default;
+
+$align-block-grid-to-grid: false !default;
+@if $align-block-grid-to-grid {
+  $block-grid-default-spacing: $column-gutter;
+}
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+$block-grid-media-queries: true !default;
+
+//
+// Block Grid Mixins
+//
+
+// Create a custom block grid
+//
+// $per-row - # of items to display per row. Default: false.
+// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
+// $include-spacing - Adds padding to our list item. Default: true.
+// $base-style - Apply a base style to block grid. Default: true.
+@mixin block-grid(
+  $per-row:false,
+  $spacing:$block-grid-default-spacing,
+  $include-spacing:true,
+  $base-style:true) {
+
+  @if $base-style {
+    display: block;
+    padding: 0;
+    @if $align-block-grid-to-grid {
+      margin: 0;
+    } @else {
+      margin: 0 (-$spacing/2);
+    }
+    @include clearfix;
+
+    > li {
+      display: block;
+      float: $default-float;
+      height: auto;
+      @if $include-spacing {
+        padding: 0 ($spacing/2) $spacing;
+      }
+    }
+  }
+
+  @if $per-row {
+    > li {
+      list-style: none;
+      @if $include-spacing {
+        padding: 0 ($spacing/2) $spacing;
+      }
+      width: 100%/$per-row;
+
+      &:nth-of-type(1n) { clear: none; }
+      &:nth-of-type(#{$per-row}n+1) { clear: both; }
+      @if $align-block-grid-to-grid {
+        @include block-grid-aligned($per-row, $spacing);
+      }
+    }
+  }
+}
+
+@mixin block-grid-aligned($per-row, $spacing) {
+  @for $i from 1 through $block-grid-elements {
+    @if $per-row >= $i {
+      $grid-column: '+' + $i;
+      @if $per-row == $i {
+        $grid-column: '';
+      }
+      &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
+        padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
+        padding-right: ($spacing - (($spacing / $per-row) * $i));
+      }
+    }
+  }
+}
+
+// Generate presentational markup for block grid.
+//
+// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
+@mixin block-grid-html-classes($size, $include-spacing) {
+  @for $i from 1 through $block-grid-elements {
+    .#{$size}-block-grid-#{($i)} {
+      @include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
+    }
+  }
+}
+
+@include exports("block-grid") {
+  @if $include-html-block-grid-classes {
+
+    [class*="block-grid-"] { @include block-grid; }
+
+    @if $block-grid-media-queries {
+      @media #{$small-up} {
+        @include block-grid-html-classes($size:small, $include-spacing:false);
+      }
+
+      @media #{$medium-up} {
+        @include block-grid-html-classes($size:medium, $include-spacing:false);
+      }
+
+      @media #{$large-up} {
+        @include block-grid-html-classes($size:large, $include-spacing:false);
+      }
+
+      @if $include-xl-html-block-grid-classes {
+        @media #{$xlarge-up} {
+          @include block-grid-html-classes($size:xlarge, $include-spacing:false);
+        }
+
+        @media #{$xxlarge-up} {
+          @include block-grid-html-classes($size:xxlarge, $include-spacing:false);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,132 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// Breadcrumb Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to set the background color for the breadcrumb container.
+$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
+
+// We use these to set the padding around the breadcrumbs.
+$crumb-padding: rem-calc(9 14 9) !default;
+$crumb-side-padding: rem-calc(12) !default;
+
+// We use these to control border styles.
+$crumb-function-factor: -10% !default;
+$crumb-border-size: 1px !default;
+$crumb-border-style: solid !default;
+$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
+$crumb-radius: $global-radius !default;
+
+// We use these to set various text styles for breadcrumbs.
+$crumb-font-size: rem-calc(11) !default;
+$crumb-font-color: $primary-color !default;
+$crumb-font-color-current: $oil !default;
+$crumb-font-color-unavailable: $aluminum !default;
+$crumb-font-transform: uppercase !default;
+$crumb-link-decor: underline !default;
+
+// We use these to control the slash between breadcrumbs
+$crumb-slash-color: $base !default;
+$crumb-slash: "/" !default;
+$crumb-slash-position: 1px !default;
+
+//
+// Breadcrumb Mixins
+//
+
+// We use this mixin to create a container around our breadcrumbs
+@mixin crumb-container {
+  border-style: $crumb-border-style;
+  border-width: $crumb-border-size;
+  display: block;
+  list-style: none;
+  margin-#{$default-float}: 0;
+  overflow: hidden;
+  padding: $crumb-padding;
+
+  // We control which background color and border come through.
+  background-color: $crumb-bg;
+  border-color: $crumb-border-color;
+}
+
+// We use this mixin to create breadcrumb styles from list items.
+@mixin crumbs {
+
+  // A normal state will make the links look and act like clickable breadcrumbs.
+  color: $crumb-font-color;
+  float: $default-float;
+  font-size: $crumb-font-size;
+  line-height: $crumb-font-size;
+  margin: 0;
+  text-transform: $crumb-font-transform;
+
+  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
+
+  a {
+    color: $crumb-font-color;
+  }
+
+  // Current is for the link of the current page
+  &.current {
+    color: $crumb-font-color-current;
+    cursor: $cursor-default-value;
+    a {
+      color: $crumb-font-color-current;
+      cursor: $cursor-default-value;
+    }
+
+    &:hover, &:hover a,
+    &:focus, &:focus a { text-decoration: none; }
+  }
+
+  // Unavailable removed color and link styles so it looks inactive.
+  &.unavailable {
+    color: $crumb-font-color-unavailable;
+    a { color: $crumb-font-color-unavailable; }
+
+    &:hover,
+    &:hover a,
+    &:focus,
+    a:focus {
+      color: $crumb-font-color-unavailable;
+      cursor: $cursor-disabled-value;
+      text-decoration: none;
+    }
+  }
+
+  &:before {
+    color: $crumb-slash-color;
+    content: "#{$crumb-slash}";
+    margin: 0 $crumb-side-padding;
+    position: relative;
+    top: $crumb-slash-position;
+  }
+
+  &:first-child:before {
+    content: " ";
+    margin: 0;
+  }
+}
+
+@include exports("breadcrumbs") {
+  @if $include-html-nav-classes {
+    .breadcrumbs {
+      @include crumb-container;
+      @include radius($crumb-radius);
+
+      > * {
+        @include crumbs;
+      }
+    }
+    /* Accessibility - hides the forward slash */
+    [aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+      content: "/";
+    }
+  }
+}