foundation-rails 5.0.1.0

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

@@ -0,0 +1,87 @@
+@import "global";
+
+//
+// @variables
+//
+$include-html-panel-classes: $include-html-classes !default;
+
+// We use these to control the background and border styles
+$panel-bg: darken(#fff, 5%) !default;
+$panel-border-style: solid !default;
+$panel-border-size: 1px !default;
+
+// We use this % to control how much we darken things on hover
+$panel-function-factor: 10% !default;
+$panel-border-color: darken($panel-bg, $panel-function-factor) !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: #333 !default;
+$panel-font-color-alt: #fff !default;
+
+$panel-header-adjust: true !default;
+$callout-panel-link-color: $primary-color !default;
+//
+// @mixins
+//
+// We use this mixin to create panels.
+// $bg - Sets the panel background color. Default: $panel-pg || darken(#fff, 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) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+
+    border-style: $panel-border-style;
+    border-width: $panel-border-size;
+    border-color: darken($bg, $panel-function-factor);
+    margin-bottom: $panel-margin-bottom;
+    padding: $padding;
+
+    background: $bg;
+
+    // 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% and $bg == blue { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
+      @else if $bg-lightness >= 50%            { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
+      @else                                    { h1,h2,h3,h4,h5,h6,p { 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(lighten($primary-color, 60%));
+        a {
+          color: $callout-panel-link-color;
+        }
+      }
+
+      &.radius {
+        @include panel($bg:false);
+        @include radius;
+      }
+
+    }
+
+  }
+}

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

@@ -0,0 +1,146 @@
+@import "global";
+
+//
+// @variables
+//
+$include-html-pricing-classes: $include-html-classes !default;
+
+// We use this to control the border color
+$price-table-border: solid 1px #ddd !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: #333 !default;
+$price-title-padding: rem-calc(15 20) !default;
+$price-title-align: center !default;
+$price-title-color: #eee !default;
+$price-title-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: #f6f6f6 !default;
+$price-money-padding: rem-calc(15 20) !default;
+$price-money-align: center !default;
+$price-money-color: #333 !default;
+$price-money-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: #fff !default;
+$price-desc-color: #777 !default;
+$price-desc-padding: rem-calc(15) !default;
+$price-desc-align: center !default;
+$price-desc-font-size: rem-calc(12) !default;
+$price-desc-weight: normal !default;
+$price-desc-line-height: 1.4 !default;
+$price-desc-bottom-border: dotted 1px #ddd !default;
+
+// We use these to control the list item styles
+$price-item-color: #333 !default;
+$price-item-padding: rem-calc(15) !default;
+$price-item-align: center !default;
+$price-item-font-size: rem-calc(14) !default;
+$price-item-weight: normal !default;
+$price-item-bottom-border: dotted 1px #ddd !default;
+
+// We use these to control the CTA area styles
+$price-cta-bg: #fff !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;
+  padding: $price-title-padding;
+  text-align: $price-title-align;
+  color: $price-title-color;
+  font-weight: $price-title-weight;
+  font-size: $price-title-size;
+  font-family: $price-title-font-family;
+}
+
+// @mixins
+//
+// We use this mixin to control the pricing table price styles
+@mixin pricing-table-price {
+  background-color: $price-money-bg;
+  padding: $price-money-padding;
+  text-align: $price-money-align;
+  color: $price-money-color;
+  font-weight: $price-money-weight;
+  font-size: $price-money-size;
+  font-family: $price-money-font-family;
+}
+
+// @mixins
+//
+// We use this mixin to create the description styles for the pricing table
+@mixin pricing-table-description {
+  background-color: $price-bg;
+  padding: $price-desc-padding;
+  text-align: $price-desc-align;
+  color: $price-desc-color;
+  font-size: $price-desc-font-size;
+  font-weight: $price-desc-weight;
+  line-height: $price-desc-line-height;
+  border-bottom: $price-desc-bottom-border;
+}
+
+// @mixins
+//
+// We use this mixin to style the bullet items in the pricing table
+@mixin pricing-table-bullet {
+  background-color: $price-bg;
+  padding: $price-item-padding;
+  text-align: $price-item-align;
+  color: $price-item-color;
+  font-size: $price-item-font-size;
+  font-weight: $price-item-weight;
+  border-bottom: $price-item-bottom-border;
+}
+
+// @mixins
+//
+// We use this mixin to style the CTA area of the pricing tables
+@mixin pricing-table-cta {
+  background-color: $price-cta-bg;
+  text-align: $price-cta-align;
+  padding: $price-cta-padding;
+}
+
+@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,75 @@
+@import "global";
+
+//
+// @variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use this to se the prog bar height
+$progress-bar-height: rem-calc(25) !default;
+$progress-bar-color: #f6f6f6 !default;
+
+// We use these to control the border styles
+$progress-bar-border-color: darken(#fff, 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;
+  height: $progress-bar-height;
+  border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
+  padding: $progress-bar-pad;
+  margin-bottom: $progress-bar-margin-bottom;
+}
+
+// @mixins
+//
+// $bg - Default: $progress-meter-color || $primary-color
+@mixin progress-meter($bg:$progress-meter-color) {
+  background: $bg;
+  height: 100%;
+  display: block;
+}
+
+
+@include exports("progress-bar") {
+  @if $include-html-media-classes {
+
+    /* Progress Bar */
+    .progress {
+      @include progress-container;
+
+      // Meter
+      .meter {
+        @include progress-meter;
+      }
+      &.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($global-radius);
+        .meter { @include radius($global-radius - 1); }
+      }
+
+      &.round { @include radius(1000px);
+        .meter { @include radius(999px); }
+      }
+
+    }
+
+  }
+}

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

@@ -0,0 +1,165 @@
+@import "global";
+
+//
+// @name _reveal.scss
+// @dependencies _global.scss
+//
+
+$include-html-reveal-classes: $include-html-classes !default;
+
+// We use these to control the style of the reveal overlay.
+$reveal-overlay-bg: rgba(#000, .45) !default;
+$reveal-overlay-bg-old: #000 !default;
+
+// We use these to control the style of the modal itself.
+$reveal-modal-bg: #fff !default;
+$reveal-position-top: 50px !default;
+$reveal-default-width: 80% !default;
+$reveal-modal-padding: rem-calc(20) !default;
+$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+
+// We use these to style the reveal close button
+$reveal-close-font-size: rem-calc(22) !default;
+$reveal-close-top: rem-calc(8) !default;
+$reveal-close-side: rem-calc(11) !default;
+$reveal-close-color: #aaa !default;
+$reveal-close-weight: bold !default;
+
+// We use these to control the modal border
+$reveal-border-style: solid !default;
+$reveal-border-width: 1px !default;
+$reveal-border-color: #666 !default;
+
+$reveal-modal-class: "reveal-modal" !default;
+$close-reveal-modal-class: "close-reveal-modal" !default;
+
+//
+// @mixins
+//
+
+// We use this to create the reveal background overlay styles
+@mixin reveal-bg {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: $reveal-overlay-bg-old;
+  background: $reveal-overlay-bg;
+  z-index: 98;
+  display: none;
+  top: 0;
+  #{$default-float}: 0;
+}
+
+// We use this mixin to create the structure of a reveal modal
+//
+// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
+// $width - Sets reveal width Default: $reveal-default-width || 80%
+//
+@mixin reveal-modal-base(
+  $base-style:true,
+  $width:$reveal-default-width) {
+  @if $base-style {
+    visibility: hidden;
+    display: none;
+    position: absolute;
+    #{$default-float}: 50%;
+    z-index: 99;
+    height: auto;
+
+    // Make sure rows don't have a min-width on them
+    .column,
+    .columns { min-width: 0; }
+
+    // Get rid of margin from first and last element inside modal
+    & > :first-child { margin-top: 0; }
+    & > :last-child { margin-bottom: 0; }
+  }
+
+  @if $width {
+    margin-#{$default-float}: -($width / 2);
+    width: $width;
+  }
+}
+
+// We use this to style the reveal modal defaults
+//
+// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
+// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
+// $border - Choose whether reveal uses a border. Default: true, Options: false
+// $border-style - Set reveal border style. Default: $reveal-border-style || solid
+// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width.
+// $border-color - Color of border. Default: $reveal-border-color.
+// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
+// $top-offset - Default: $reveal-position-top || 50px
+@mixin reveal-modal-style(
+  $bg:$reveal-modal-bg,
+  $padding:$reveal-modal-padding,
+  $border:true,
+  $border-style:$reveal-border-style,
+  $border-width:$reveal-border-width,
+  $border-color:$reveal-border-color,
+  $box-shadow:true,
+  $top-offset:$reveal-position-top) {
+
+  @if $bg { background-color: $bg; }
+  @if $padding { padding: $padding; }
+
+  @if $border { border: $border-style $border-width $border-color; }
+
+  // We can choose whether or not to include the default box-shadow.
+  @if $box-shadow {
+    @if $experimental {
+      -webkit-box-shadow: $reveal-box-shadow;
+    }
+    box-shadow: $reveal-box-shadow;
+  }
+
+  @if $top-offset { top: $top-offset; }
+}
+
+// We use this to create a close button for the reveal modal
+//
+// $color - Default: $reveal-close-color || #aaa
+@mixin reveal-close($color:$reveal-close-color) {
+  font-size: $reveal-close-font-size;
+  line-height: 1;
+  position: absolute;
+  top: $reveal-close-top;
+  #{$opposite-direction}: $reveal-close-side;
+  color: $color;
+  font-weight: $reveal-close-weight;
+  cursor: $cursor-pointer-value;
+}
+
+@include exports("reveal") {
+  @if $include-html-reveal-classes {
+
+    // Reveal Modals
+    .reveal-modal-bg { @include reveal-bg; }
+
+    .#{$reveal-modal-class} {
+      @include reveal-modal-base;
+      @include reveal-modal-style;
+
+      .#{$close-reveal-modal-class} { @include reveal-close; }
+    }
+
+    @media #{$medium-up} {
+
+      .#{$reveal-modal-class} {
+        @include reveal-modal-style(false, rem-calc(30), false, $box-shadow: false, $top-offset: rem-calc(100));
+
+        &.tiny  { @include reveal-modal-base(false, 30%); }
+        &.small { @include reveal-modal-base(false, 40%); }
+        &.medium  { @include reveal-modal-base(false, 60%); }
+        &.large { @include reveal-modal-base(false, 70%); }
+        &.xlarge { @include reveal-modal-base(false, 95%); }
+      }
+    }
+
+    // Reveal Print Styles
+    @media print {
+      .#{$reveal-modal-class} {background: #fff !important;}
+    }
+  }
+}