foundation-rails 5.5.3.2 → 6.6.2.0

data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss

@@ -1,460 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import 'global';
-
-
-// @name
-// @dependencies _global.scss
-
-$include-html-icon-bar-classes: $include-html-classes !default;
-
-// @variables
-
-// We use these to style the icon-bar and items
-$icon-bar-bg: $oil !default;
-$icon-bar-font-color: $white !default;
-$icon-bar-font-color-hover: $icon-bar-font-color !default;
-$icon-bar-font-size: 1rem !default;
-$icon-bar-hover-color: $primary-color !default;
-$icon-bar-icon-color: $white !default;
-$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
-$icon-bar-icon-size: 1.875rem !default;
-$icon-bar-image-width: 1.875rem !default;
-$icon-bar-image-height: 1.875rem !default;
-$icon-bar-active-color: $primary-color !default;
-$icon-bar-item-padding: 1.25rem !default;
-
-// We use this to set default opacity and cursor for disabled icons.
-$icon-bar-disabled-opacity: .7 !default;
-$icon-bar-disabled-cursor: $cursor-disabled-value !default;
-
-
-//
-// @mixins
-//
-
-// We use this mixin to create the base styles for our Icon bar element.
-//
-@mixin icon-bar-base() {
-  display: inline-block;
-  font-size: 0;
-  width: 100%;
-
-  > * {
-    display: block;
-    float: left;
-    font-size: $icon-bar-font-size;
-    margin: 0 auto;
-    padding: $icon-bar-item-padding;
-    text-align: center;
-    width: 25%;
-
-    i, img {
-      display: block;
-      margin: 0 auto;
-
-      & + label {
-        margin-top: .0625rem;
-      }
-    }
-
-    i {
-      font-size: $icon-bar-icon-size;
-      vertical-align: middle;
-    }
-
-    img {
-      height: $icon-bar-image-height;
-      width: $icon-bar-image-width;
-    }
-  }
-
-  &.label-right > * {
-
-    i, img {
-      display: inline-block;
-      margin: 0 .0625rem 0 0;
-
-      & + label {
-        margin-top: 0;
-      }
-    }
-
-    label { display: inline-block; }
-  }
-
-  &.vertical.label-right > * {
-    text-align: left;
-  }
-
-  &.vertical, &.small-vertical{
-    height: 100%;
-    width: auto;
-
-    .item {
-      float: none;
-      margin: auto;
-      width: auto;
-    }
-  }
-
-  &.medium-vertical {
-    @media #{$medium-up} {
-      height: 100%;
-      width: auto;
-
-      .item {
-        float: none;
-        margin: auto;
-        width: auto;
-      }
-    }
-  }
-  &.large-vertical {
-    @media #{$large-up} {
-      height: 100%;
-      width: auto;
-
-      .item {
-        float: none;
-        margin: auto;
-        width: auto;
-      }
-    }
-  }
-}
-
-// We use this mixin to create the size styles for icon bars.
-@mixin icon-bar-size(
-  $padding: $icon-bar-item-padding,
-  $font-size: $icon-bar-font-size,
-  $icon-size: $icon-bar-icon-size,
-  $image-width: $icon-bar-image-width,
-  $image-height: $icon-bar-image-height) {
-
-  > * {
-    font-size: $font-size;
-    padding: $padding;
-
-    i, img {
-
-      & + label {
-        margin-top: .0625rem;
-        font-size: $font-size;
-      }
-    }
-
-    i {
-      font-size: $icon-size;
-    }
-
-    img {
-      height: $image-height;
-      width: $image-width;
-    }
-  }
-
-}
-
-@mixin icon-bar-style(
-  $bar-bg:$icon-bar-bg,
-  $bar-font-color:$icon-bar-font-color,
-  $bar-font-color-hover:$icon-bar-font-color-hover,
-  $bar-hover-color:$icon-bar-hover-color,
-  $bar-icon-color:$icon-bar-icon-color,
-  $bar-icon-color-hover:$icon-bar-icon-color-hover,
-  $bar-active-color:$icon-bar-active-color,
-  $base-style:true,
-  $disabled:false) {
-
-  @if $base-style {
-
-    background: $bar-bg;
-
-    > * {
-      label { color: $bar-font-color; }
-
-      i { color: $bar-icon-color; }
-    }
-
-    > a:hover {
-
-      background: $bar-hover-color;
-
-      label { color: $bar-font-color-hover; }
-
-      i { color: $bar-icon-color-hover; }
-    }
-
-        > a.active {
-
-      background: $bar-active-color;
-
-      label { color: $bar-font-color-hover; }
-
-      i { color: $bar-icon-color-hover; }
-    }
-  }
-  @if $disabled {
-    .item.disabled {
-      cursor: $icon-bar-disabled-cursor;
-      opacity: $icon-bar-disabled-opacity;
-      pointer-events: none;
-      >* {
-        opacity: $icon-bar-disabled-opacity;
-        cursor: $icon-bar-disabled-cursor;
-      }
-    }
-  }
-
-}
-
-// We use this to quickly create icon bars with a single mixin
-// $height - The overall calculated height of the icon bar (horizontal)
-// $bar-bg - the background color of the bar
-// $bar-font-color - the font color
-// $bar-hover-color - okay these are pretty obvious variables
-// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
-// $bar-active-color - the color of an active / hover state
-// $base-style - Apply base styles? Default: true.
-// $disabled - Allow disabled icons? Default: false.
-
-@mixin icon-bar(
-  $bar-bg:$icon-bar-bg,
-  $bar-font-color:$icon-bar-font-color,
-  $bar-font-color-hover:$icon-bar-font-color-hover,
-  $bar-hover-color:$icon-bar-hover-color,
-  $bar-icon-color:$icon-bar-icon-color,
-  $bar-icon-color-hover:$icon-bar-icon-color-hover,
-  $bar-active-color:$icon-bar-active-color,
-  $padding: $icon-bar-item-padding,
-  $font-size: $icon-bar-font-size,
-  $icon-size: $icon-bar-icon-size,
-  $image-width: $icon-bar-image-width,
-  $image-height: $icon-bar-image-height,
-  $base-style:true,
-  $disabled:true) {
-    @include icon-bar-base();
-    @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
-    @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
-
-  // Counts
-
-  &.two-up {
-    .item { width: 50%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-        width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-        width: auto;
-      }
-    }
-  }
-  &.three-up {
-    .item { width: 33.3333%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-        width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-        width: auto;
-      }
-    }
-  }
-  &.four-up {
-    .item { width: 25%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-        width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-        width: auto;
-      }
-    }
-  }
-  &.five-up {
-    .item { width: 20%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-        width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-        width: auto;
-      }
-    }
-  }
-  &.six-up {
-    .item { width: 16.66667%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-        width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-        width: auto;
-      }
-    }
-  }
-  &.seven-up {
-    .item { width: 14.28571%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-            width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-         width: auto;
-      }
-    }
-  }
-  &.eight-up {
-    .item { width: 12.5%; }
-    &.vertical .item, &.small-vertical .item { width: auto; }
-    &.medium-vertical .item {
-      @media #{$medium-up} {
-            width: auto;
-      }
-    }
-    &.large-vertical .item {
-      @media #{$large-up} {
-         width: auto;
-      }
-    }
-  }
-}
-
-@include exports("icon-bar") {
-  @if $include-html-icon-bar-classes {
-    .icon-bar {
-      @include icon-bar;
-    }
-  }
-}
-
-@if $include-html-icon-bar-classes {
-
-  // toolbar styles
-
-  .icon-bar {
-
-    // Counts
-
-    &.two-up {
-      .item { width: 50%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-          width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-          width: auto;
-        }
-      }
-    }
-    &.three-up {
-      .item { width: 33.3333%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-          width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-          width: auto;
-        }
-      }
-    }
-    &.four-up {
-      .item { width: 25%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-          width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-          width: auto;
-        }
-      }
-    }
-    &.five-up {
-      .item { width: 20%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-          width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-          width: auto;
-        }
-      }
-    }
-    &.six-up {
-      .item { width: 16.66667%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-          width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-          width: auto;
-        }
-      }
-    }
-    &.seven-up {
-      .item { width: 14.28571%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-              width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-           width: auto;
-        }
-      }
-    }
-    &.eight-up {
-      .item { width: 12.5%; }
-      &.vertical .item, &.small-vertical .item { width: auto; }
-      &.medium-vertical .item {
-        @media #{$medium-up} {
-              width: auto;
-        }
-      }
-      &.large-vertical .item {
-        @media #{$large-up} {
-           width: auto;
-        }
-      }
-    }
-  }
-}

data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss

@@ -1,58 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import 'global';
-
-//
-// @variables
-//
-$include-html-inline-list-classes: $include-html-classes !default;
-
-// We use this to control the margins and padding of the inline list.
-$inline-list-top-margin: 0 !default;
-$inline-list-opposite-margin: 0 !default;
-$inline-list-bottom-margin: rem-calc(17) !default;
-$inline-list-default-float-margin: rem-calc(-22) !default;
-$inline-list-default-float-list-margin: rem-calc(22) !default;
-
-$inline-list-padding: 0 !default;
-
-// We use this to control the overflow of the inline list.
-$inline-list-overflow: hidden !default;
-
-// We use this to control the list items
-$inline-list-display: block !default;
-
-// We use this to control any elements within list items
-$inline-list-children-display: block !default;
-
-//
-// @mixins
-//
-// We use this mixin to create inline lists
-@mixin inline-list {
-  list-style: none;
-  margin-top: $inline-list-top-margin;
-  margin-bottom: $inline-list-bottom-margin;
-  margin-#{$default-float}: $inline-list-default-float-margin;
-  margin-#{$opposite-direction}: $inline-list-opposite-margin;
-  overflow: $inline-list-overflow;
-  padding: $inline-list-padding;
-
-  > li {
-    display: $inline-list-display;
-    float: $default-float;
-    list-style: none;
-    margin-#{$default-float}: $inline-list-default-float-list-margin;
-    > * { display: $inline-list-children-display; }
-  }
-}
-
-@include exports("inline-list") {
-  @if $include-html-inline-list-classes {
-    .inline-list {
-      @include inline-list();
-    }
-  }
-}