foundation-sass-rails 5.5.3.2

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

@@ -0,0 +1,107 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @variables
+//
+$include-html-panel-classes: $include-html-classes !default;
+
+// We use these to control the background and border styles
+$panel-bg: scale-color($white, $lightness: -5%) !default;
+$panel-border-style: solid !default;
+$panel-border-size: 1px !default;
+$callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;
+
+// We use this % to control how much we darken things on hover
+$panel-border-color: scale-color($panel-bg, $lightness: -11%) !default;
+
+// We use these to set default inner padding and bottom margin
+$panel-margin-bottom: rem-calc(20) !default;
+$panel-padding: rem-calc(20) !default;
+
+// We use these to set default font colors
+$panel-font-color: $oil !default;
+$panel-font-color-alt: $white !default;
+
+$panel-header-adjust: true !default;
+$callout-panel-link-color: $primary-color !default;
+$callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
+//
+// @mixins
+//
+// We use this mixin to create panels.
+// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
+// $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
+// $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
+@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust, $border:true) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+
+    @if $border {
+      border-style: $panel-border-style;
+      border-width: $panel-border-size;
+      border-color: $panel-border-color;
+    } @else {
+      border-style: none;
+      border-width: 0;
+    }
+
+    margin-bottom: $panel-margin-bottom;
+    padding: $padding;
+
+    background: $bg;
+    @if $bg-lightness >= 50% { color: $panel-font-color; }
+    @else { color: $panel-font-color-alt; }
+
+    // Respect the padding, fool.
+    > :first-child { margin-top: 0; }
+    > :last-child { margin-bottom: 0; }
+
+    @if $adjust {
+      // We set the font color based on the darkness of the bg.
+      @if $bg-lightness >= 50% {
+        h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color; }
+      }
+      @else {
+        h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color-alt; }
+      }
+
+      // reset header line-heights for panels
+      h1, h2, h3, h4, h5, h6 {
+        line-height: 1; margin-bottom: rem-calc(20) / 2;
+        &.subheader { line-height: 1.4; }
+      }
+    }
+  }
+}
+
+@include exports("panel") {
+  @if $include-html-panel-classes {
+
+    /* Panels */
+    .panel { @include panel;
+
+      &.callout {
+        @include panel($callout-panel-bg);
+        a:not(.button) {
+          color: $callout-panel-link-color;
+
+          &:hover,
+          &:focus {
+            color: $callout-panel-link-color-hover;
+          }
+        }
+      }
+
+      &.radius {
+        @include radius;
+      }
+
+    }
+
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss

@@ -0,0 +1,150 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @variables
+//
+$include-html-pricing-classes: $include-html-classes !default;
+
+// We use this to control the border color
+$price-table-border: solid 1px $gainsboro !default;
+
+// We use this to control the bottom margin of the pricing table
+$price-table-margin-bottom: rem-calc(20) !default;
+
+// We use these to control the title styles
+$price-title-bg: $oil !default;
+$price-title-padding: rem-calc(15 20) !default;
+$price-title-align: center !default;
+$price-title-color: $smoke !default;
+$price-title-weight: $font-weight-normal !default;
+$price-title-size: rem-calc(16) !default;
+$price-title-font-family: $body-font-family !default;
+
+// We use these to control the price styles
+$price-money-bg: $vapor !default;
+$price-money-padding: rem-calc(15 20) !default;
+$price-money-align: center !default;
+$price-money-color: $oil !default;
+$price-money-weight: $font-weight-normal !default;
+$price-money-size: rem-calc(32) !default;
+$price-money-font-family: $body-font-family !default;
+
+
+// We use these to control the description styles
+$price-bg: $white !default;
+$price-desc-color: $monsoon !default;
+$price-desc-padding: rem-calc(15) !default;
+$price-desc-align: center !default;
+$price-desc-font-size: rem-calc(12) !default;
+$price-desc-weight: $font-weight-normal !default;
+$price-desc-line-height: 1.4 !default;
+$price-desc-bottom-border: dotted 1px $gainsboro !default;
+
+// We use these to control the list item styles
+$price-item-color: $oil !default;
+$price-item-padding: rem-calc(15) !default;
+$price-item-align: center !default;
+$price-item-font-size: rem-calc(14) !default;
+$price-item-weight: $font-weight-normal !default;
+$price-item-bottom-border: dotted 1px $gainsboro !default;
+
+// We use these to control the CTA area styles
+$price-cta-bg: $white !default;
+$price-cta-align: center !default;
+$price-cta-padding: rem-calc(20 20 0) !default;
+
+// @mixins
+//
+// We use this to create the container element for the pricing tables
+@mixin pricing-table-container {
+  border: $price-table-border;
+  margin-#{$default-float}: 0;
+  margin-bottom: $price-table-margin-bottom;
+
+  & * {
+    list-style: none;
+    line-height: 1;
+  }
+}
+// @mixins
+//
+// We use this mixin to create the pricing table title styles
+@mixin pricing-table-title {
+  background-color: $price-title-bg;
+  color: $price-title-color;
+  font-family: $price-title-font-family;
+  font-size: $price-title-size;
+  font-weight: $price-title-weight;
+  padding: $price-title-padding;
+  text-align: $price-title-align;
+}
+
+// @mixins
+//
+// We use this mixin to control the pricing table price styles
+@mixin pricing-table-price {
+  background-color: $price-money-bg;
+  color: $price-money-color;
+  font-family: $price-money-font-family;
+  font-size: $price-money-size;
+  font-weight: $price-money-weight;
+  padding: $price-money-padding;
+  text-align: $price-money-align;
+}
+
+// @mixins
+//
+// We use this mixin to create the description styles for the pricing table
+@mixin pricing-table-description {
+  background-color: $price-bg;
+  border-bottom: $price-desc-bottom-border;
+  color: $price-desc-color;
+  font-size: $price-desc-font-size;
+  font-weight: $price-desc-weight;
+  line-height: $price-desc-line-height;
+  padding: $price-desc-padding;
+  text-align: $price-desc-align;
+}
+
+// @mixins
+//
+// We use this mixin to style the bullet items in the pricing table
+@mixin pricing-table-bullet {
+  background-color: $price-bg;
+  border-bottom: $price-item-bottom-border;
+  color: $price-item-color;
+  font-size: $price-item-font-size;
+  font-weight: $price-item-weight;
+  padding: $price-item-padding;
+  text-align: $price-item-align;
+}
+
+// @mixins
+//
+// We use this mixin to style the CTA area of the pricing tables
+@mixin pricing-table-cta {
+  background-color: $price-cta-bg;
+  padding: $price-cta-padding;
+  text-align: $price-cta-align;
+}
+
+@include exports("pricing-table") {
+  @if $include-html-pricing-classes {
+
+    /* Pricing Tables */
+    .pricing-table {
+      @include pricing-table-container;
+
+      .title { @include pricing-table-title; }
+      .price { @include pricing-table-price; }
+      .description { @include pricing-table-description; }
+      .bullet-item { @include pricing-table-bullet; }
+      .cta-button { @include pricing-table-cta; }
+    }
+
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss

@@ -0,0 +1,85 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use this to set the progress bar height
+$progress-bar-height: rem-calc(25) !default;
+$progress-bar-color: $vapor !default;
+
+// We use these to control the border styles
+$progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
+$progress-bar-border-size: 1px !default;
+$progress-bar-border-style: solid !default;
+$progress-bar-border-radius: $global-radius !default;
+
+// We use these to control the margin & padding
+$progress-bar-pad: rem-calc(2) !default;
+$progress-bar-margin-bottom: rem-calc(10) !default;
+
+// We use these to set the meter colors
+$progress-meter-color: $primary-color !default;
+$progress-meter-secondary-color: $secondary-color !default;
+$progress-meter-success-color: $success-color !default;
+$progress-meter-alert-color: $alert-color !default;
+
+// @mixins
+//
+// We use this to set up the progress bar container
+@mixin progress-container {
+  background-color: $progress-bar-color;
+  border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
+  height: $progress-bar-height;
+  margin-bottom: $progress-bar-margin-bottom;
+  padding: $progress-bar-pad;
+}
+
+// @mixins
+//
+// $bg - Default: $progress-meter-color || $primary-color
+@mixin progress-meter($bg:$progress-meter-color) {
+  background: $bg;
+  display: block;
+  height: 100%;
+  float: left;
+  width: 0%;
+}
+
+
+@include exports("progress-bar") {
+  @if $include-html-media-classes {
+
+    /* Progress Bar */
+    .progress {
+      @include progress-container;
+
+      // Meter
+      .meter {
+        @include progress-meter;
+
+        &.secondary { @include progress-meter($bg:$progress-meter-secondary-color); }
+        &.success { @include progress-meter($bg:$progress-meter-success-color); }
+        &.alert { @include progress-meter($bg:$progress-meter-alert-color); }
+      }
+      &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
+      &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
+      &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
+
+      &.radius { @include radius($progress-bar-border-radius);
+        .meter { @include radius($progress-bar-border-radius - 1); }
+      }
+
+      &.round { @include radius(1000px);
+        .meter { @include radius(999px); }
+      }
+
+    }
+
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_range-slider.scss

@@ -0,0 +1,177 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @name _range-slider.scss
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-range-slider-classes: $include-html-classes !default;
+
+// These variables define the slider bar styles
+$range-slider-bar-width: 100% !default;
+$range-slider-bar-height: rem-calc(16) !default;
+
+$range-slider-bar-border-width: 1px !default;
+$range-slider-bar-border-style: solid !default;
+$range-slider-bar-border-color: $gainsboro !default;
+$range-slider-radius: $global-radius !default;
+$range-slider-round: $global-rounded !default;
+$range-slider-bar-bg-color: $ghost !default;
+$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default;
+
+// Vertical bar styles
+$range-slider-vertical-bar-width: rem-calc(16) !default;
+$range-slider-vertical-bar-height: rem-calc(200) !default;
+
+// These variables define the slider handle styles
+$range-slider-handle-width: rem-calc(32) !default;
+$range-slider-handle-height: rem-calc(22) !default;
+$range-slider-handle-position-top: rem-calc(-5) !default;
+$range-slider-handle-bg-color: $primary-color !default;
+$range-slider-handle-border-width: 1px !default;
+$range-slider-handle-border-style: solid !default;
+$range-slider-handle-border-color: none !default;
+$range-slider-handle-radius: $global-radius !default;
+$range-slider-handle-round: $global-rounded !default;
+$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
+$range-slider-handle-cursor: pointer !default;
+
+$range-slider-disabled-opacity: .7 !default;
+$range-slider-disabled-cursor: $cursor-disabled-value !default;
+
+//
+// @mixins
+//
+
+@mixin range-slider-bar-base($vertical: false) {
+  border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
+  margin: rem-calc(20 0);
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  @if $vertical == true {
+    display: inline-block;
+    height: $range-slider-vertical-bar-height;
+    width: $range-slider-vertical-bar-width;
+  } @else {
+    display: block;
+    height: $range-slider-bar-height;
+    width: $range-slider-bar-width;
+  }
+}
+@mixin range-slider-bar-style(
+  $bg: true,
+  $radius: false,
+  $round: false,
+  $disabled: false) {
+  @if $bg == true { background: $range-slider-bar-bg-color; }
+  @if $radius == true { @include radius($range-slider-radius); }
+  @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $range-slider-disabled-cursor;
+    opacity: $range-slider-disabled-opacity;
+  }
+}
+
+@mixin range-slider-bar(
+  $bg: $range-slider-bar-bg-color,
+  $radius:false) {
+  @include range-slider-bar-base;
+  @include range-slider-bar-style;
+}
+
+@mixin range-slider-handle-base() {
+  border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
+  cursor: $range-slider-handle-cursor;
+  display: inline-block;
+  height: $range-slider-handle-height;
+  position: absolute;
+  top: $range-slider-handle-position-top;
+  width: $range-slider-handle-width;
+  z-index: 1;
+
+  // This removes the 300ms touch delay on Windows 8
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+
+@mixin range-slider-handle-style(
+  $bg: true,
+  $radius: false,
+  $round: false,
+  $disabled: false) {
+  @if $bg == true { background: $range-slider-handle-bg-color; }
+  @if $radius == true { @include radius($range-slider-radius); }
+  @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
+  }
+  &:hover {
+    background: $range-slider-handle-bg-hover-color;
+  }
+}
+
+@mixin range-slider-handle() {
+  @include range-slider-handle-base;
+  @include range-slider-handle-style;
+}
+
+// CSS Generation
+@include exports("range-slider-bar") {
+  @if $include-html-range-slider-classes {
+    .range-slider {
+      @include range-slider-bar-base;
+      @include range-slider-bar-style($bg:true, $radius:false);
+      &.vertical-range {
+        @include range-slider-bar-base($vertical: true);
+        .range-slider-handle {
+          bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width);
+          margin-#{$default-float}: -($range-slider-handle-width / 4);
+          margin-top: 0;
+          position: absolute;
+        }
+        .range-slider-active-segment {
+          border-bottom-left-radius: inherit;
+          border-bottom-right-radius: inherit;
+          border-top-left-radius: initial;
+          bottom: 0;
+          height: auto;
+          width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
+        }
+      }
+      &.radius {
+        @include range-slider-bar-style($radius:true);
+        .range-slider-handle { @include range-slider-handle-style($radius: true); }
+      }
+      &.round {
+        @include range-slider-bar-style($round:true);
+        .range-slider-handle { @include range-slider-handle-style($round: true); }
+      }
+      &.disabled, &[disabled] {
+        @include range-slider-bar-style($disabled:true);
+        .range-slider-handle { @include range-slider-handle-style($disabled: true); }
+      }
+    }
+    .range-slider-active-segment {
+      background: $range-slider-active-segment-bg-color;
+      border-bottom-left-radius: inherit;
+      border-top-left-radius: inherit;
+      display: inline-block;
+      height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
+      position: absolute;
+    }
+    .range-slider-handle {
+      @include range-slider-handle-base;
+      @include range-slider-handle-style($bg:true, $radius: false);
+    }
+  }
+}