zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/_grid.scss

@@ -1,89 +1,167 @@
-  /* The Grid ---------------------- */
+//
+// Grid Variables
+//
+$row-width:     62.5em !default;
+$column-gutter: 1.875em !default;
+$total-columns: 12 !default;
+
+//
+// Grid Mixins
+//
+
+// For creating container, nested, and collapsed rows.
+@mixin grid-row($behavior: false) {
+
+  // use @include grid-row(nest); to include a nested row
+  @if $behavior == nest {
+    width: auto;
+    margin-left: -($column-gutter/2);
+    margin-right: -($column-gutter/2);
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: none;
+  }
 
-  .row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
-    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }
+  // use @include grid-row(collapse); to collapsed a container row margins
+  @else if $behavior == collapse {
+    width: 100%;
+    margin: 0;
+    max-width: $row-width;
+  }
 
-    &.collapse {
-      .column, .columns { padding: 0; }
-    }
-    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
-      &.collapse { margin: 0; }
-    }
+  // 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;
   }
 
-  .column, .columns { float: $defaultFloat; min-height: 1px; padding: 0 ($columnGutter/2); position: relative;
-    &.centered { float: none; margin: 0 auto; }
+  // use @include grid-row; to use a container row
+  @else {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: $row-width;
   }
 
-  [class*="column"] + [class*="column"]:last-child { float: $defaultOpposite; }
-  [class*="column"] + [class*="column"].end { float: $defaultFloat; }
+  // Clearfix for all rows
+  @include clearfix();
+
+}
 
-  // Creating column classes
-  @for $i from 1 through $totalColumns {
-    .#{convert-number-to-word($i)} { width: gridCalc($i, $totalColumns); }
+
+// For creating columns - @include these inside a media query to control small vs. large grid layouts
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:false) {
+
+  position: relative;
+
+  // Gutter padding whenever a column isn't set to collapse
+  @if $collapse == false {
+    padding-left: $column-gutter / 2;
+    padding-right: $column-gutter / 2;
   }
 
-  // Creating .row-# classes
-  @for $i from 1 through $totalColumns {
-    .row {
-      .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; }
-    }
+  // If a column number is given, calculate width
+  @if $columns {
+    width: gridCalc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column { float: $default-opposite; }
+
+    // if collapsed, get rid of gutter padding
+    @else if $collapse { padding-left: 0; padding-right: 0; }
+
+  }
+
+  @if $collapse { padding-left: 0; padding-right: 0; }
+
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$default-opposite}: auto; }
+  @if $pull { #{$default-opposite}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  // Creating .row .offset-by-# classes
-  @for $i from 1 through $totalColumns - 2 {
-    .row {
-      .offset-by-#{convert-number-to-word($i)} { margin-#{$defaultFloat}: gridCalc($i, $totalColumns); }
+  @if $float {
+    @if $float == left { float: $default-float; }
+    @else if $float == right { float: $default-opposite; }
+    @else { float: none; }
+  }
+
+}
+
+
+/* Grid HTML Classes */
+@if $include-html-classes {
+
+  .row {
+    @include grid-row;
+
+    .column,
+    .columns { @include grid-column($columns:$total-columns); }
+
+    &.collapse {
+      .column,
+      .columns { @include grid-column($collapse:true); }
+    }
+
+    .row { @include grid-row($behavior:nest);
+      &.collapse { @include grid-row($behavior:nest-collapse); }
     }
   }
 
-  // Creating .row .push-# classes
-  @for $i from 2 through $totalColumns - 2 {
-    .push-#{convert-number-to-word($i)} { #{$defaultFloat}: gridCalc($i, $totalColumns); }
-    .pull-#{convert-number-to-word($i)} { #{$defaultOpposite}: gridCalc($i, $totalColumns); }
+  @media only screen {
+
+    .row .column,
+    .row .columns { @include grid-column($columns:false, $float:left); }
+
+    @for $i from 1 through $total-columns {
+      .row .small#{-$i} { @include grid-column($columns:$i,$collapse:null); }
+    }
+
+    @for $i from 1 through $total-columns - 2 {
+      .row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null); }
+    }
+
+    [class*="column"] + [class*="column"]:last-child { float: $default-opposite; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
+    .column.small-centered,
+    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:none); }
   }
 
-  img { height: auto; }
-  img, object, embed { max-width: 100%; }
-  img { -ms-interpolation-mode: bicubic; }
-  #map_canvas img, .map_canvas img {max-width: none!important;}
-
-  /* Nicolas Gallagher's micro clearfix */
-  .row { @include clearfix(); }
-
-/* Block Grids ---------------------- */
-
-/* These are 2-up, 3-up, 4-up and 5-up ULs, suited
-for repeating blocks of content. Add 'mobile' to
-them to switch them just like the layout grid
-(one item per line) on phones
-
-For IE7/8 compatibility block-grid items need to be
-the same height. You can optionally uncomment the
-lines below to support arbitrary height, but know
-that IE7/8 do not support :nth-child.
--------------------------------------------------- */
-
-  .block-grid { display: block; overflow: hidden; padding: 0;
-
-    &>li { display: block; height: auto; float: $defaultFloat; }
-
-    @for $i from 1 through $blockGridElements {
-      &.#{convert-number-to-word($i)}-up {
-        @if $i == 1 { margin: 0; }
-        @else if $i == 2 { margin: 0 -15px; }
-        @else if $i == 3 { margin: 0 -12px; }
-        @else if $i == 4 { margin: 0 -10px; }
-        @else { margin: 0 -8px; }
-        &>li {
-          width: 100%/$i;
-          @if $i == 1 { padding: 0 0 15px; }
-          @else if $i == 2 { padding: 0 15px 15px; }
-          @else if $i == 3 { padding: 0 12px 12px; }
-          @else if $i == 4 { padding: 0 10px 10px; }
-          @else { padding: 0 8px 8px; }
-          @if $i > 1 { &:nth-child(#{$i}n+1) { clear: both; } }
-        }
-      }
+  /* Styles for screens that are atleast 768px; */
+  @media #{$small} {
+
+    @for $i from 1 through $total-columns {
+      .row .large#{-$i} { @include grid-column($columns:$i,$collapse:null); }
+    }
+
+    @for $i from 1 through $total-columns - 2 {
+      .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null); }
+    }
+
+    @for $i from 2 through $total-columns - 2 {
+      .push#{-$i} { @include grid-column($push:$i, $collapse:null); }
+      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null); }
     }
+
+    @for $i from 2 through $total-columns - 2 {
+      .small-push#{-$i} { left: inherit; }
+      .small-pull#{-$i} { right: inherit; }
+    }
+
+    .column.large-centered,
+    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:none); }
+
   }
+
+}

data/scss/foundation/components/_inline-lists.scss

@@ -0,0 +1,47 @@
+//
+// Inline List Variables
+//
+
+// We use this to control the margins and padding of the inline list.
+$inline-list-margin-bottom:    emCalc(17px) emCalc(-22px ) !default;
+$inline-list-margin:           0 0 !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;
+
+//
+// Inline List Mixins
+//
+
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-margin $inline-list-margin-bottom;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: emCalc(22px);
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+
+@if $include-html-classes {
+
+  /* Inline Lists */
+  .inline-list {
+    @include inline-list();
+  }
+
+}

data/scss/foundation/components/_joyride.scss

@@ -0,0 +1,193 @@
+//
+// Joyride Variables
+//
+
+// Controlling default Joyride styles
+$joyride-tip-bg:              rgb(0,0,0) !default;
+$joyride-tip-default-width:   300px !default;
+$joyride-tip-padding:         emCalc(18px) emCalc(20px) emCalc(24px) !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:       emCalc(14px) !default;
+$joyride-tip-header-weight:   bold !default;
+
+// This changes the nub size
+$joyride-tip-nub-size:        14px !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:      30px !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.
+
+/* 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;
+  left: 50%;
+  margin-left:-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: solid $joyride-tip-nub-size;
+
+    &.top {
+      border-color: $joyride-tip-bg;
+      border-top-color: transparent !important;
+      border-#{$default-float}-color: transparent !important;
+      border-#{$default-opposite}-color: transparent !important;
+      top: -($joyride-tip-nub-size*2);
+      bottom: none;
+    }
+    &.bottom {
+      border-color: $joyride-tip-bg !important;
+      border-bottom-color: transparent !important;
+      border-#{$default-float}-color: transparent !important;
+      border-#{$default-opposite}-color: transparent !important;
+      bottom: -($joyride-tip-nub-size*2);
+      bottom: none;
+    }
+
+    &.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: 0 0 emCalc(18px) 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;
+  #{$default-opposite}: emCalc(17px);
+  bottom: emCalc(16px);
+}
+.joyride-timer-indicator {
+  display: block;
+  width: 0;
+  height: inherit;
+  background: $joyride-tip-timer-color;
+}
+
+.joyride-close-tip {
+  position: absolute;
+  #{$default-opposite}: 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: pointer;
+}
+
+
+/* Styles for screens that are atleast 768px; */
+@media #{$small} {
+  .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: 0;
+    .joyride-nub {
+      &.bottom {
+        border-color: $joyride-tip-bg !important;
+        border-bottom-color: transparent !important;
+        border-#{$default-float}-color: transparent !important;
+        border-#{$default-opposite}-color: transparent !important;
+        bottom: -($joyride-tip-nub-size*2);
+        bottom: none;
+      }
+      &.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;
+        bottom: none;
+        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; bottom: none;
+      }
+    }
+  }
+}