foundation-rails 5.5.3.2 → 6.1.1.0

data/vendor/assets/scss/components/_accordion-menu.scss

@@ -0,0 +1,32 @@
+////
+/// @group accordion-menu
+////
+
+/// Sets if accordion menus have the default arrow styles.
+/// @type Boolean
+$accordionmenu-arrows: true !default;
+
+/// Sets accordion menu arrow color if arrow is used.
+/// @type Color
+$accordionmenu-arrow-color: $primary-color !default;
+
+@mixin foundation-accordion-menu {
+  @if $accordionmenu-arrows {
+    .is-accordion-submenu-parent > a {
+      position: relative;
+
+      &::after {
+        @include css-triangle(6px, $accordionmenu-arrow-color, down);
+        position: absolute;
+        top: 50%;
+        margin-top: -4px;
+        right: 1rem;
+      }
+    }
+
+    .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+      transform-origin: 50% 50%;
+      transform: scaleY(-1);
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group accordion
+////
+
+/// Default background color of an accordion group.
+/// @type Color
+$accordion-background: $white !default;
+
+/// If `true`, adds plus and minus icons to the side of each accordion title.
+/// @type Boolean
+$accordion-plusminus: true !default;
+
+/// Default text color for items in a Menu.
+/// @type Color
+$accordion-item-color: foreground($accordion-background, $primary-color) !default;
+
+/// Default background color on hover for items in a Menu.
+/// @type Color
+$accordion-item-background-hover: $light-gray !default;
+
+/// Default padding of an accordion item.
+/// @type Number | List
+$accordion-item-padding: 1.25rem 1rem !default;
+
+/// Default background color of tab content.
+/// @type Color
+$accordion-content-background: $white !default;
+
+/// Default border color of tab content.
+/// @type Color
+$accordion-content-border: 1px solid $light-gray !default;
+
+/// Default text color of tab content.
+/// @type Color
+$accordion-content-color: foreground($accordion-background, $primary-color) !default;
+
+/// Default padding for tab content.
+/// @type Number | List
+$accordion-content-padding: 1rem !default;
+
+/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
+@mixin accordion-container {
+  list-style-type: none;
+  background: $accordion-background;
+  border: $accordion-content-border;
+  border-radius: $global-radius;
+  margin-#{$global-left}: 0;
+}
+
+/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
+@mixin accordion-title {
+  display: block;
+  padding: $accordion-item-padding;
+  line-height: 1;
+  font-size: rem-calc(12);
+  color: $accordion-item-color;
+  position: relative;
+  border-bottom: $accordion-content-border;
+
+  &:hover,
+  &:focus {
+    background-color: $accordion-item-background-hover;
+  }
+
+  // Remove the border on the last title
+  :last-child > & {
+    border-bottom-width: 0;
+  }
+
+  @if $accordion-plusminus {
+    &::before {
+      content: '+';
+      position: absolute;
+      #{$global-right}: 1rem;
+      top: 50%;
+      margin-top: -0.5rem;
+    }
+
+    .is-active > &::before {
+      content: '–';
+    }
+  }
+}
+
+/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
+@mixin accordion-content {
+  padding: $accordion-content-padding;
+  display: none;
+  border-bottom: $accordion-content-border;
+  background-color: $accordion-content-background;
+}
+
+@mixin foundation-accordion {
+  .accordion {
+    @include accordion-container;
+  }
+
+  .accordion-item {
+    // This class doesn't need styles!
+  }
+
+  .accordion-title {
+    @include accordion-title;
+  }
+
+  .accordion-content {
+    @include accordion-content;
+  }
+}

data/vendor/assets/scss/components/_badge.scss

@@ -0,0 +1,55 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group badge
+////
+
+/// Default background color for badges.
+/// @type Color
+$badge-background: $primary-color !default;
+
+/// Default text color for badges.
+/// @type Color
+$badge-color: foreground($badge-background) !default;
+
+/// Default padding inside badges.
+/// @type Number
+$badge-padding: 0.3em !default;
+
+/// Minimum width of a badge.
+/// @type Number
+$badge-minwidth: 2.1em !default;
+
+/// Default font size for badges.
+/// @type Number
+$badge-font-size: 0.6rem !default;
+
+/// Generates the base styles for a badge.
+@mixin badge {
+  display: inline-block;
+  padding: $badge-padding;
+  min-width: $badge-minwidth;
+  font-size: $badge-font-size;
+  text-align: center;
+  border-radius: 50%;
+}
+
+@mixin foundation-badge {
+  .badge {
+    @include badge;
+
+    background: $badge-background;
+    color: $badge-color;
+
+    @each $name, $color in $foundation-colors {
+      @if $name != primary {
+        &.#{$name} {
+          background: $color;
+          color: foreground($color);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group breadcrumbs
+////
+
+/// Margin around a breadcrumbs container.
+/// @type Number
+$breadcrumbs-margin: 0 0 $global-margin 0 !default;
+
+/// Font size of breadcrumb links.
+/// @type Number
+$breadcrumbs-item-font-size: rem-calc(11) !default;
+
+/// Color of breadcrumb links.
+/// @type Color
+$breadcrumbs-item-color: $primary-color !default;
+
+/// Color of the active breadcrumb link.
+/// @type Color
+$breadcrumbs-item-color-current: $black !default;
+
+/// Opacity of disabled breadcrumb links.
+/// @type Number
+$breadcrumbs-item-color-disabled: $medium-gray !default;
+
+/// Margin between breadcrumb items.
+/// @type Number
+$breadcrumbs-item-margin: 0.75rem !default;
+
+/// If `true`, makes breadcrumb links uppercase.
+/// @type Boolean
+$breadcrumbs-item-uppercase: true !default;
+
+/// If `true`, adds a slash between breadcrumb links.
+/// @type Boolean
+$breadcrumbs-item-slash: true !default;
+
+/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
+@mixin breadcrumbs-container {
+  @include clearfix;
+  list-style: none;
+  margin: $breadcrumbs-margin;
+
+  // Item wrapper
+  li {
+    float: #{$global-left};
+    color: $breadcrumbs-item-color-current;
+    font-size: $breadcrumbs-item-font-size;
+    cursor: default;
+
+    @if $breadcrumbs-item-uppercase {
+      text-transform: uppercase;
+    }
+
+    @if $breadcrumbs-item-slash {
+      // Need to escape the backslash
+      $slash: if($global-text-direction == 'ltr', '/', '\\');
+
+      &:not(:last-child)::after {
+        color: $medium-gray;
+        content: $slash;
+        margin: 0 $breadcrumbs-item-margin;
+        position: relative;
+        top: 1px;
+        opacity: 1;
+      }
+    }
+    @else {
+      margin-#{$global-right}: $breadcrumbs-item-margin;
+    }
+  }
+
+  // Page links
+  a {
+    color: $breadcrumbs-item-color;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@mixin foundation-breadcrumbs {
+  .breadcrumbs {
+    @include breadcrumbs-container;
+
+    .disabled {
+      color: $breadcrumbs-item-color-disabled;
+    }
+  }
+}

data/vendor/assets/scss/components/_button-group.scss

@@ -0,0 +1,130 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group button-group
+////
+
+/// Margin for button groups.
+/// @type Number
+$buttongroup-margin: 1rem !default;
+
+/// Margin between buttons in a button group.
+/// @type Border
+$buttongroup-spacing: 1px !default;
+
+/// Selector for the buttons inside a button group.
+/// @type String
+$buttongroup-child-selector: '.button' !default;
+
+/// Maximum number of buttons that can be in an even-width button group.
+/// @type Number
+$buttongroup-expand-max: 6 !default;
+
+/// Add styles for a button group container.
+/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+@mixin button-group(
+  $child-selector: $buttongroup-child-selector
+) {
+  @include clearfix;
+  margin-bottom: $buttongroup-margin;
+  font-size: map-get($button-sizes, default);
+
+  #{$child-selector} {
+    float: #{$global-left};
+    margin: 0;
+    font-size: inherit;
+
+    &:not(:last-child) {
+      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+    }
+  }
+}
+
+/// Creates a full-width button group, making each button equal width.
+/// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+@mixin button-group-expand(
+  $selector: $buttongroup-child-selector
+) {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+
+  &::before,
+  &::after {
+    display: none;
+  }
+
+  #{$selector} {
+    display: table-cell;
+    float: none;
+  }
+}
+
+/// Stacks the buttons in a button group.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
+@mixin button-group-stack(
+  $selector: $buttongroup-child-selector
+) {
+  #{$selector} {
+    width: 100%;
+
+    &:not(:last-child) {
+      border-#{$global-right}: $buttongroup-spacing solid;
+    }
+  }
+}
+
+/// Un-stacks the buttons in a button group.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
+@mixin button-group-unstack(
+  $selector: $buttongroup-child-selector
+) {
+  #{$selector} {
+    width: auto;
+
+    &:not(:last-child) {
+      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+    }
+  }
+}
+
+@mixin foundation-button-group {
+  .button-group {
+    @include button-group;
+
+    // Sizes
+    &.tiny     { font-size: map-get($button-sizes, tiny); }
+    &.small    { font-size: map-get($button-sizes, small); }
+    &.large    { font-size: map-get($button-sizes, large); }
+    &.expanded { @include button-group-expand; }
+
+    // Colors
+    @each $name, $color in $foundation-colors {
+      @if $button-fill != hollow {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-style($color, auto, auto);
+        }
+      }
+      @else {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-hollow;
+          @include button-hollow-style($color);
+        }
+      }
+    }
+
+    &.stacked,
+    &.stacked-for-small {
+      @include button-group-stack;
+    }
+
+    &.stacked-for-small {
+      @include breakpoint(medium) {
+        @include button-group-unstack;
+      }
+    }
+  }
+}

data/vendor/assets/scss/components/_button.scss

@@ -0,0 +1,265 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group button
+////
+
+/// Padding inside buttons.
+/// @type List
+$button-padding: 0.85em 1em !default;
+
+/// Margin around buttons.
+/// @type List
+$button-margin: 0 0 $global-margin 0 !default;
+
+/// Default fill for buttons. Can either be `solid` or `hollow`.
+/// @type Keyword
+$button-fill: solid !default;
+
+/// Default background color for buttons.
+/// @type Color
+$button-background: $primary-color !default;
+
+/// Background color on hover for buttons.
+/// @type Color
+$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+
+/// Font color for buttons.
+/// @type List
+$button-color: #fff !default;
+
+/// Font color for buttons, if the background is light.
+/// @type List
+$button-color-alt: #000 !default;
+
+/// Border radius for buttons, defaulted to global-radius.
+/// @type Number
+$button-radius: $global-radius !default;
+
+/// Sizes for buttons.
+/// @type Map
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+) !default;
+
+/// opacity for a disabled button.
+/// @type List
+$button-opacity-disabled: 0.25 !default;
+
+// Internal: flip from margin-right to margin-left for defaults
+@if $global-text-direction == 'rtl' {
+  $button-margin: 0 0 $global-margin $global-margin !default;
+}
+
+// TODO: Document button-base() mixin
+@mixin button-base {
+  @include disable-mouse-outline;
+  display: inline-block;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  -webkit-appearance: none;
+  transition: background-color 0.25s ease-out, color 0.25s ease-out;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: $button-radius;
+  padding: $button-padding;
+  margin: $button-margin;
+  font-size: map-get($button-sizes, default);
+}
+
+/// Expands a button to make it full-width.
+/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
+@mixin button-expand($expand: true) {
+  @if $expand {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  @else {
+    display: inline-block;
+    width: auto;
+    margin: $button-margin;
+  }
+}
+
+/// Sets the visual style of a button.
+/// @param {Color} $background [$button-background] - Background color of the button.
+/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
+/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
+@mixin button-style(
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color
+) {
+  @if $color == auto {
+    $color: isitlight($background);
+  }
+
+  @if $background-hover == auto {
+    $background-hover: scale-color($background, $lightness: -20%);
+  }
+
+  @if lightness($background) >= 70% {
+    $color: $button-color-alt;
+  }
+  @else {
+    $color: $button-color;
+  }
+
+  background-color: $background;
+  color: $color;
+
+  &:hover, &:focus {
+    background-color: $background-hover;
+    color: $color;
+  }
+}
+
+/// Removes background fill on hover and focus for hollow buttons.
+@mixin button-hollow {
+  &,
+  &:hover, &:focus {
+    background-color: transparent;
+  }
+}
+
+@mixin button-hollow-style($color: $primary-color) {
+  $color-hover: scale-color($color, $lightness: -50%);
+
+  border: 1px solid $color;
+  color: $color;
+
+  &:hover, &:focus {
+    border-color: $color-hover;
+    color: $color-hover;
+  }
+}
+
+/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
+@mixin button-disabled {
+  opacity: $button-opacity-disabled;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/// Adds a dropdown arrow to a button.
+/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
+/// @param {Color} $color [white] - Color of the arrow.
+/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
+@mixin button-dropdown(
+  $size: 0.4em,
+  $color: $white,
+  $offset: get-side($button-padding, right)
+) {
+  &::after {
+    @include css-triangle($size, $color, down);
+    position: relative;
+    top: 0.4em; // Aligns the arrow with the text of the button
+    float: #{$global-right};
+    margin-#{$global-left}: get-side($button-padding, right);
+    display: inline-block;
+  }
+}
+
+/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
+/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
+/// @param {Color} $background [$button-background] - Background color of the button.
+/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
+/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
+/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
+@mixin button(
+  $expand: false,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-fill
+) {
+  @include button-base;
+
+  @if $style == solid {
+    @include button-style($background, $background-hover, $color);
+  }
+  @else if $style == hollow {
+    @include button-hollow;
+    @include button-hollow-style($background);
+  }
+
+  @if $expand {
+    @include button-expand;
+  }
+}
+
+@mixin foundation-button {
+  .button {
+    @include button;
+
+    // Sizes
+    &.tiny     { font-size: map-get($button-sizes, tiny); }
+    &.small    { font-size: map-get($button-sizes, small); }
+    &.large    { font-size: map-get($button-sizes, large); }
+    &.expanded { @include button-expand; }
+
+    // Colors
+    @each $name, $color in $foundation-colors {
+      @if $button-fill != hollow {
+        &.#{$name} {
+          @include button-style($color, auto);
+        }
+      }
+      @else {
+        &.#{$name} {
+          @include button-hollow-style($color);
+        }
+
+        &.#{$name}.dropdown::after {
+          border-top-color: $color;
+        }
+      }
+    }
+
+    // Hollow style
+    @if $button-fill != hollow {
+      &.hollow {
+        @include button-hollow;
+        @include button-hollow-style;
+
+        @each $name, $color in $foundation-colors {
+          &.#{$name} {
+            @include button-hollow-style($color);
+          }
+        }
+      }
+    }
+
+    // Disabled style
+    &.disabled,
+    &[disabled] {
+      @include button-disabled;
+    }
+
+    // Dropdown arrow
+    &.dropdown {
+      @include button-dropdown;
+
+      @if $button-fill == hollow {
+        &::after {
+          border-top-color: $button-background;
+        }
+      }
+    }
+
+    // Button with dropdown arrow only
+    &.arrow-only::after {
+      margin-#{$global-left}: 0;
+      float: none;
+      top: 0.2em;
+    }
+  }
+}