RubyGems - foundation-rails - Versions diffs - 5.5.3.2 → 6.6.2.0 - Mend

foundation-rails 5.5.3.2 → 6.6.2.0

Files changed (369) hide show

data/vendor/assets/scss/_global.scss ADDED Viewed

@@ -0,0 +1,244 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+// sass-lint:disable no-color-literals, no-qualifying-elements
+////
+/// @group global
+////
+@import 'util/util';
+/// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
+/// @type Number
+$global-font-size: 100% !default;
+/// Global width of your site. Used by the grid to determine row width.
+/// @type Number
+$global-width: rem-calc(1200) !default;
+/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
+/// @type Number
+$global-lineheight: 1.5 !default;
+/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+/// @type Map
+$foundation-palette: (
+  primary: #1779ba,
+  secondary: #767676,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+) !default;
+/// Color used for light gray UI items.
+/// @type Color
+$light-gray: #e6e6e6 !default;
+/// Color used for medium gray UI items.
+/// @type Color
+$medium-gray: #cacaca !default;
+/// Color used for dark gray UI items.
+/// @type Color
+$dark-gray: #8a8a8a !default;
+/// Color used for black ui items.
+/// @type Color
+$black: #0a0a0a !default;
+/// Color used for white ui items.
+/// @type Color
+$white: #fefefe !default;
+/// Background color of the body.
+/// @type Color
+$body-background: $white !default;
+/// Text color of the body.
+/// @type Color
+$body-font-color: $black !default;
+/// Font stack of the body.
+/// @type List
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
+/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
+/// @type Boolean
+$body-antialiased: true !default;
+/// Global value used for margin on components.
+/// @type Number
+$global-margin: 1rem !default;
+/// Global value used for padding on components.
+/// @type Number
+$global-padding: 1rem !default;
+/// Global value used for positioning on components.
+/// @type Number
+$global-position: 1rem !default;
+/// Global font weight used for normal type.
+/// @type Keyword | Number
+$global-weight-normal: normal !default;
+/// Global font weight used for bold type.
+/// @type Keyword | Number
+$global-weight-bold: bold !default;
+/// Global value used for all elements that have a border radius.
+/// @type Number
+$global-radius: 0 !default;
+/// Global value used for all menu styles. Can be overwritten at individual menu component level.
+/// @type Number
+$global-menu-padding: 0.7rem 1rem !default;
+/// Global value used for all menu styles. Nested margin for submenu.
+$global-menu-nested-margin: 1rem !default;
+/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+/// @type Keyword
+$global-text-direction: ltr !default;
+/// Enables flexbox for components that support it.
+/// @type Boolean
+$global-flexbox: true !default;
+/// Enabled responsive breakpoints for prototypes if applicable
+/// @type Boolean
+$global-prototype-breakpoints: false !default;
+/// Button cursor's value, `auto` by default
+/// @type Keyword
+$global-button-cursor: auto !default;
+@if not map-has-key($foundation-palette, primary) {
+  @error 'In $foundation-palette, you must have a color named "primary".';
+}
+// Internal variables used for text direction
+$global-left: if($global-text-direction == rtl, right, left);
+$global-right: if($global-text-direction == rtl, left, right);
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+/// Global tolerance for color pick contrast.
+/// @type Number
+$global-color-pick-contrast-tolerance: 0 !default;
+// Internal variables used for colors
+@include add-foundation-colors;
+@mixin foundation-global-styles {
+  @include foundation-normalize;
+  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
+  .foundation-mq {
+    font-family: '#{-zf-bp-serialize($breakpoints)}';
+  }
+  html {
+    box-sizing: border-box;
+    font-size: $global-font-size;
+  }
+  // Set box-sizing globally to handle padding and border widths
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+  // Default body styles
+  body {
+    margin: 0;
+    padding: 0;
+    background: $body-background;
+    font-family: $body-font-family;
+    font-weight: $global-weight-normal;
+    line-height: $global-lineheight;
+    color: $body-font-color;
+    @if ($body-antialiased) {
+      -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+      -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
+    }
+  }
+  img {
+    // Get rid of gap under images by making them display: inline-block; by default
+    display: inline-block;
+    vertical-align: middle;
+    // Grid defaults to get images and embeds to work properly
+    max-width: 100%;
+    height: auto;
+    -ms-interpolation-mode: bicubic;
+  }
+  // Make sure textarea takes on height automatically
+  textarea {
+    height: auto;
+    min-height: 50px;
+    border-radius: $global-radius;
+  }
+  // Make select elements are 100% width by default
+  select {
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: $global-radius;
+  }
+  // Styles Google Maps and MapQuest embeds properly
+  // sass-lint:disable-line no-ids
+  .map_canvas,
+  .mqa-display {
+    img,
+    embed,
+    object {
+      max-width: none !important;
+    }
+  }
+  // Reset <button> styles created by most browsers
+  button {
+    @include disable-mouse-outline;
+    padding: 0;
+    appearance: none;
+    border: 0;
+    border-radius: $global-radius;
+    background: transparent;
+    line-height: 1;
+    cursor: $global-button-cursor;
+  }
+  // Prevent text overflow on pre
+  pre {
+    overflow: auto;
+  }
+  // Make reset inherit font-family instead of settings sans-serif
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+  // Internal classes to show/hide elements in JavaScript
+  .is-visible {
+    display: block !important;
+  }
+  .is-hidden {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,174 @@
+////
+/// @group accordion-menu
+////
+/// Sets accordion menu padding.
+/// @type Number
+$accordionmenu-padding: $global-menu-padding !default;
+/// Sets accordion menu nested margin
+/// @type Number
+$accordionmenu-nested-margin: $global-menu-nested-margin !default;
+/// Sets accordion menu submenu padding.
+/// @type Number
+$accordionmenu-submenu-padding: $accordionmenu-padding !default;
+/// 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;
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-item-background: null !default;
+/// Sets accordion menu item border.
+/// @type Color
+$accordionmenu-border: null !default;
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-submenu-toggle-background: null !default;
+/// Sets accordion menu item padding.
+/// @type List
+$accordion-submenu-toggle-border: $accordionmenu-border !default;
+/// Sets accordion menu submenu toggle background width.
+/// @type Number
+$accordionmenu-submenu-toggle-width: 40px !default;
+/// Sets accordion menu submenu toggle background height.
+/// @type Number
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
+/// Sets accordion menu arrow size if arrow is used.
+/// @type Length
+$accordionmenu-arrow-size: 6px !default;
+@mixin zf-accordion-menu-left-right-arrows {
+  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+    position: relative;
+    &::after {
+      @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      #{$global-right}: 1rem;
+    }
+  }
+  &.align-left .is-accordion-submenu-parent > a::after {
+    right: 1rem;
+    left: auto;
+  }
+  &.align-right .is-accordion-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+  }
+}
+@mixin foundation-accordion-menu {
+  .accordion-menu {
+    @if $accordionmenu-border {
+      border-bottom: $accordionmenu-border;
+    }
+    li {
+      @if $accordionmenu-border {
+        border-top: $accordionmenu-border;
+        border-right: $accordionmenu-border;
+        border-left: $accordionmenu-border;
+      }
+      width: 100%;
+    }
+    a {
+      @if $accordionmenu-item-background {
+        background: $accordionmenu-item-background;
+      }
+      padding: $accordionmenu-padding;
+    }
+    .is-accordion-submenu a {
+      padding: $accordionmenu-submenu-padding;
+    }
+    .nested.is-accordion-submenu {
+      @include menu-nested($accordionmenu-nested-margin);
+    }
+    &.align-#{$global-right} {
+      .nested.is-accordion-submenu {
+        @include menu-nested($accordionmenu-nested-margin, right);
+      }
+    }
+    @if $accordionmenu-arrows {
+      @include zf-accordion-menu-left-right-arrows;
+      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+  .is-accordion-submenu li {
+    @if $accordionmenu-border {
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+  .is-accordion-submenu-parent {
+    position: relative;
+  }
+  .has-submenu-toggle > a {
+    margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
+  }
+  // Submenu toggle
+  .submenu-toggle {
+    position: absolute;
+    top: 0;
+    #{$global-right}: 0;
+    width: $accordionmenu-submenu-toggle-width;
+    height: $accordionmenu-submenu-toggle-height;
+    cursor: pointer;
+    border-#{$global-left}: $accordion-submenu-toggle-border;
+    @if $accordionmenu-submenu-toggle-background {
+      background: $accordionmenu-submenu-toggle-background;
+    }
+    // Add the arrow to the toggle
+    &::after {
+      @include css-triangle(6px, $accordionmenu-arrow-color, down);
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+  // Rotate the arrow when menu is open
+  .submenu-toggle[aria-expanded='true']::after {
+    transform: scaleY(-1);
+    transform-origin: 50% 50%;
+  }
+  .submenu-toggle-text {
+    @include element-invisible;
+  }
+}

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

@@ -0,0 +1,164 @@
+// Foundation for Sites
+// https://get.foundation
+// 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;
+/// Content for the plus icon when `$accordion-plusminus` is `true`
+/// @type String
+$accordion-plus-content: '\002B' !default;
+/// Content for the minus icon when `$accordion-plusminus` is `true`
+/// @type String
+$accordion-minus-content: '\2013' !default;
+/// Font size of accordion titles.
+/// @type Number
+$accordion-title-font-size: rem-calc(12) !default;
+/// Default text color for items in a Menu.
+/// @type Color
+$accordion-item-color: $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: $body-font-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 (
+  $background: $accordion-background
+) {
+  margin-#{$global-left}: 0;
+  background: $background;
+  list-style-type: none;
+  &[disabled] {
+    .accordion-title {
+      cursor: not-allowed;
+    }
+  }
+}
+/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+@mixin accordion-item {
+  &:first-child > :first-child {
+    border-radius: $global-radius $global-radius 0 0;
+  }
+  &:last-child > :last-child {
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+}
+/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
+@mixin accordion-title (
+  $padding: $accordion-item-padding,
+  $font-size: $accordion-title-font-size,
+  $color: $accordion-item-color,
+  $border: $accordion-content-border,
+  $background-hover: $accordion-item-background-hover
+) {
+  position: relative;
+  display: block;
+  padding: $padding;
+  border: $border;
+  border-bottom: 0;
+  font-size: $font-size;
+  line-height: 1;
+  color: $color;
+  :last-child:not(.is-active) > & {
+    border-bottom: $border;
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+  &:hover,
+  &:focus {
+    background-color: $background-hover;
+  }
+  @if $accordion-plusminus {
+    &::before {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 1rem;
+      margin-top: -0.5rem;
+      content: $accordion-plus-content;
+    }
+    .is-active > &::before {
+      content: $accordion-minus-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,
+  $border: $accordion-content-border,
+  $background: $accordion-content-background,
+  $color: $accordion-content-color
+) {
+  display: none;
+  padding: $padding;
+  border: $border;
+  border-bottom: 0;
+  background-color: $background;
+  color: $color;
+  :last-child > &:last-child {
+    border-bottom: $border;
+  }
+}
+@mixin foundation-accordion {
+  .accordion {
+    @include accordion-container;
+  }
+  .accordion-item {
+    @include accordion-item;
+  }
+  .accordion-title {
+    @include accordion-title;
+  }
+  .accordion-content {
+    @include accordion-content;
+  }
+}

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

@@ -0,0 +1,63 @@
+// Foundation for Sites
+// https://get.foundation
+// 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: $white !default;
+/// Alternate text color for badges.
+/// @type Color
+$badge-color-alt: $black !default;
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$badge-palette: $foundation-palette !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;
+  min-width: $badge-minwidth;
+  padding: $badge-padding;
+  border-radius: 50%;
+  font-size: $badge-font-size;
+  text-align: center;
+}
+@mixin foundation-badge {
+  .badge {
+    @include badge;
+    background: $badge-background;
+    color: $badge-color;
+    @each $name, $color in $badge-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
+      }
+    }
+  }
+}