foundation-rails 5.0.1.0

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

@@ -0,0 +1,234 @@
+@import "global";
+
+//
+// @variables
+//
+$include-html-grid-classes: $include-html-classes !default;
+
+$row-width: rem-calc(1000) !default;
+$column-gutter: rem-calc(30) !default;
+$total-columns: 12 !default;
+
+//
+// Grid Functions
+//
+
+// Deprecated: We'll drop support for this in 5.1, use grid-calc()
+@function gridCalc($colNumber, $totalColumns) {
+  @warn "gridCalc() is deprecated, use grid-calc()";
+  @return grid-calc($colNumber, $totalColumns);
+}
+
+// @FUNCTION
+// $colNumber - Found in settings file
+// $totalColumns - Found in settings file
+@function grid-calc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}
+
+//
+// @mixins
+//
+
+// For creating container, nested, and collapsed rows.
+//
+// 
+// $behavior - Any special beavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
+@mixin grid-row($behavior: false) {
+
+  // use @include grid-row(nest); to include a nested row
+  @if $behavior == nest {
+    width: auto;
+    margin-#{$default-float}: -($column-gutter/2);
+    margin-#{$opposite-direction}: -($column-gutter/2);
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: none;
+  }
+
+  // use @include grid-row(collapse); to collapsed a container row margins
+  @else if $behavior == collapse {
+    width: 100%;
+    margin: 0;
+    max-width: $row-width;
+  }
+
+  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
+  @else if $behavior == nest-collapse {
+    width: auto;
+    margin: 0;
+    max-width: none;
+  }
+
+  // use @include grid-row; to use a container row
+  @else {
+    width: 100%;
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: $row-width;
+  }
+
+  // Clearfix for all rows
+  @include clearfix();
+}
+
+// Creates a column, should be used inside of a media query to control layouts
+//
+// $columns - The number of columns this should be
+// $last-column - Is this the last column? Default: false.
+// $center - Center these columns? Default: false.
+// $offset - # of columns to offset. Default: false.
+// $push - # of columns to push. Default: false.
+// $pull - # of columns to pull. Default: false.
+// $collapse - Get rid of gutter padding on column? Default: false.
+// $float - Should this float? Default: true. Options: true, false, left, right.
+@mixin grid-column(
+  $columns:false, 
+  $last-column:false, 
+  $center:false, 
+  $offset:false, 
+  $push:false, 
+  $pull:false, 
+  $collapse:false, 
+  $float:true) {
+
+  position: relative;
+
+  // If collapsed, get rid of gutter padding
+  @if $collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // Gutter padding whenever a column isn't set to collapse
+  // (use $collapse:null to do nothing)
+  @else if $collapse == false {
+    padding-left: $column-gutter / 2;
+    padding-right: $column-gutter / 2;
+  }
+
+  // If a column number is given, calculate width
+  @if $columns {
+    width: grid-calc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column { float: $opposite-direction; }
+  }
+
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns); }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
+  @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    float: none !important;
+  }
+
+  @if $float {
+    @if $float == left or $float == true { float: $default-float; }
+    @else if $float == right { float: $opposite-direction; }
+    @else { float: none; }
+  }
+
+}
+
+// Create presentational classes for grid
+//
+// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
+@mixin grid-html-classes($size) {
+
+  @for $i from 1 through $total-columns - 1 {
+    .#{$size}-push#{-$i} {
+      @include grid-column($push:$i, $collapse:null, $float:false);
+    }
+    .#{$size}-pull#{-$i} {
+      @include grid-column($pull:$i, $collapse:null, $float:false);
+    }
+  }
+
+  .column,
+  .columns { @include grid-column($columns:false); }
+
+
+  @for $i from 1 through $total-columns {
+    .#{$size}#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+  }
+
+  @for $i from 0 through $total-columns - 2 {
+    .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+  }
+
+  [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
+  [class*="column"] + [class*="column"].end { float: $default-float; }
+
+  .column.#{$size}-centered,
+  .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+  .column.#{$size}-uncentered,
+  .columns.#{$size}-uncentered {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    float: $default-float !important;
+  }
+
+  .column.#{$size}-uncentered.opposite,
+  .columns.#{$size}-uncentered.opposite {
+    float: $opposite-direction !important;
+
+  }
+}
+
+@include exports("grid") {
+  @if $include-html-grid-classes {
+    .row {
+      @include grid-row;
+
+      &.collapse {
+         > .column,
+         > .columns { @include grid-column($collapse:true); }
+
+        .row {margin-left:0; margin-right:0;}
+      }
+
+      .row { @include grid-row($behavior:nest);
+        &.collapse { @include grid-row($behavior:nest-collapse); }
+      }
+    }
+
+    .column,
+    .columns { @include grid-column($columns:$total-columns); }
+
+    @media #{$small-up} {
+      @include grid-html-classes($size:small);
+    }
+
+    @media #{$medium-up} {
+      @include grid-html-classes($size:medium);
+      // Old push and pull classes
+      @for $i from 1 through $total-columns - 1 {
+        .push#{-$i} {
+          @include grid-column($push:$i, $collapse:null, $float:false);
+        }
+        .pull#{-$i} {
+          @include grid-column($pull:$i, $collapse:null, $float:false);
+        }
+      }
+    }
+    @media #{$large-up} {
+      @include grid-html-classes($size:large);
+    }
+    @media #{$xlarge-up} {
+      @include grid-html-classes($size:xlarge);
+    }
+    @media #{$xxlarge-up} {
+      @include grid-html-classes($size:xxlarge);
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+@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-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 elments within list items
+$inline-list-children-display: block !default;
+
+//
+// @mixins
+//
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: rem-calc(22);
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+@include exports("inline-list") {
+  @if $include-html-inline-list-classes {
+    .inline-list {
+      @include inline-list();
+    }
+  }
+}

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

@@ -0,0 +1,220 @@
+@import "global";
+
+//
+// @variables
+//
+$include-html-joyride-classes: $include-html-classes !default;
+
+// Controlling default Joyride styles
+$joyride-tip-bg: #333 !default;
+$joyride-tip-default-width: 300px !default;
+$joyride-tip-padding: rem-calc(18 20 24) !default;
+$joyride-tip-border: solid 1px #555 !default;
+$joyride-tip-radius: 4px !default;
+$joyride-tip-position-offset: 22px !default;
+
+// Here, we're setting the tip dont styles
+$joyride-tip-font-color: #fff !default;
+$joyride-tip-font-size: rem-calc(14) !default;
+$joyride-tip-header-weight: bold !default;
+
+// This changes the nub size
+$joyride-tip-nub-size: 10px !default;
+
+// This adjusts the styles for the timer when its enabled
+$joyride-tip-timer-width: 50px !default;
+$joyride-tip-timer-height: 3px !default;
+$joyride-tip-timer-color: #666 !default;
+
+// This changes up the styles for the close button
+$joyride-tip-close-color: #777 !default;
+$joyride-tip-close-size: 24px !default;
+$joyride-tip-close-weight: normal !default;
+
+// When Joyride is filling the screen, we use this style for the bg
+$joyride-screenfill: rgba(0,0,0,0.5) !default;
+
+
+// We decided not to make a mixin for this because it relies on 
+// predefined classes to work properly.
+@include exports("joyride") {
+  @if $include-html-joyride-classes {
+
+    /* Foundation Joyride */
+    .joyride-list { display: none; }
+
+    /* Default styles for the container */
+    .joyride-tip-guide {
+      display: none;
+      position: absolute;
+      background: $joyride-tip-bg;
+      color: $joyride-tip-font-color;
+      z-index: 101;
+      top: 0;
+      #{$default-float}: 2.5%;
+      font-family: inherit;
+      font-weight: normal;
+      width: 95%;
+    }
+
+    .lt-ie9 .joyride-tip-guide {
+      max-width:800px;
+      #{$default-float}: 50%;
+      margin-#{$default-float}:-400px;
+    }
+
+    .joyride-content-wrapper {
+      width: 100%;
+
+      padding: $joyride-tip-padding;
+
+      .button { margin-bottom: 0 !important; }
+    }
+
+    /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+    .joyride-tip-guide {
+      .joyride-nub {
+        display: block;
+        position: absolute;
+        #{$default-float}: $joyride-tip-position-offset;
+        width: 0;
+        height: 0;
+        border: $joyride-tip-nub-size solid $joyride-tip-bg;
+
+        &.top {
+          border-top-style: solid;
+          border-color: $joyride-tip-bg;
+          border-top-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          top: -($joyride-tip-nub-size*2);
+        }
+        &.bottom {
+          border-bottom-style: solid;
+          border-color: $joyride-tip-bg !important;
+          border-bottom-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          bottom: -($joyride-tip-nub-size*2);
+        }
+
+        &.right { right: -($joyride-tip-nub-size*2); }
+        &.left { left: -($joyride-tip-nub-size*2); }
+      }
+    }
+
+    /* Typography */
+    .joyride-tip-guide h1,
+    .joyride-tip-guide h2,
+    .joyride-tip-guide h3,
+    .joyride-tip-guide h4,
+    .joyride-tip-guide h5,
+    .joyride-tip-guide h6 {
+      line-height: 1.25;
+      margin: 0;
+      font-weight: $joyride-tip-header-weight;
+      color: $joyride-tip-font-color;
+    }
+    .joyride-tip-guide p {
+      margin: rem-calc(0 0 18 0);
+      font-size: $joyride-tip-font-size;
+      line-height: 1.3;
+    }
+
+    .joyride-timer-indicator-wrap {
+      width: $joyride-tip-timer-width;
+      height: $joyride-tip-timer-height;
+      border: $joyride-tip-border;
+      position: absolute;
+      #{$opposite-direction}: rem-calc(17);
+      bottom: rem-calc(16);
+    }
+    .joyride-timer-indicator {
+      display: block;
+      width: 0;
+      height: inherit;
+      background: $joyride-tip-timer-color;
+    }
+
+    .joyride-close-tip {
+      position: absolute;
+      #{$opposite-direction}: 12px;
+      top: 10px;
+      color: $joyride-tip-close-color !important;
+      text-decoration: none;
+      font-size: $joyride-tip-close-size;
+      font-weight: $joyride-tip-close-weight;
+      line-height: .5 !important;
+
+      &:hover,
+      &:focus { color: #eee !important; }
+    }
+
+    .joyride-modal-bg {
+      position: fixed;
+      height: 100%;
+      width: 100%;
+      background: transparent;
+      background: $joyride-screenfill;
+      z-index: 100;
+      display: none;
+      top: 0;
+      #{$default-float}: 0;
+      cursor: $cursor-pointer-value;
+    }
+
+    .joyride-expose-wrapper {
+      background-color: #ffffff;
+      position: absolute;
+      border-radius: 3px;
+      z-index: 102;
+      @if $experimental {
+        -moz-box-shadow: 0 0 30px #ffffff;
+        -webkit-box-shadow: 0 0 15px #ffffff;
+      }
+      box-shadow: 0 0 15px #ffffff;
+    }
+
+    .joyride-expose-cover {
+      background: transparent;
+      border-radius: 3px;
+      position: absolute;
+      z-index: 9999;
+      top: 0;
+      left: 0;
+    }
+
+
+    /* Styles for screens that are atleast 768px; */
+    @media #{$small} {
+      .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+        .joyride-nub {
+          &.bottom {
+            border-color: $joyride-tip-bg !important;
+            border-bottom-color: transparent !important;
+            border-#{$default-float}-color: transparent !important;
+            border-#{$opposite-direction}-color: transparent !important;
+            bottom: -($joyride-tip-nub-size*2);
+          }
+          &.right {
+            border-color: $joyride-tip-bg !important;
+            border-top-color: transparent !important;
+            border-right-color: transparent !important; border-bottom-color: transparent !important;
+            top: $joyride-tip-position-offset;
+            left: auto;
+            right: -($joyride-tip-nub-size*2);
+          }
+          &.left {
+            border-color: $joyride-tip-bg !important;
+            border-top-color: transparent !important;
+            border-left-color: transparent !important;
+            border-bottom-color: transparent !important;
+            top: $joyride-tip-position-offset;
+            left: -($joyride-tip-nub-size*2);
+            right: auto;
+          }
+        }
+      }
+    }
+  }
+}