zurb-foundation 4.1.2 → 4.1.5

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

@@ -42,7 +42,7 @@ $inline-list-children-display: block !default;
 }
 
 
-@if $include-html-grid-classes {
+@if $include-html-grid-classes != false {
 
   /* Inline Lists */
   .inline-list {

data/scss/foundation/components/_joyride.scss

@@ -73,23 +73,23 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
     #{$default-float}: $joyride-tip-position-offset;
     width: 0;
     height: 0;
-    border: solid $joyride-tip-nub-size;
+    border: inset $joyride-tip-nub-size;
 
     &.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: none;
     }
     &.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);
-      bottom: none;
     }
 
     &.right { right: -($joyride-tip-nub-size*2); }
@@ -187,14 +187,12 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
         border-#{$default-float}-color: transparent !important;
         border-#{$opposite-direction}-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);
       }
@@ -205,7 +203,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
         border-bottom-color: transparent !important;
         top: $joyride-tip-position-offset;
         left: -($joyride-tip-nub-size*2);
-        right: auto; bottom: none;
+        right: auto;
       }
     }
   }

data/scss/foundation/components/_keystrokes.scss

@@ -44,7 +44,7 @@ $keystroke-radius:          $global-radius !default;
 }
 
 
-@if $include-html-media-classes {
+@if $include-html-media-classes != false {
 
   /* Keystroke Characters */
   .keystroke,

data/scss/foundation/components/_labels.scss

@@ -9,6 +9,8 @@ $label-radius:      $global-radius !default;
 // We use these to style the label text
 $label-font-sizing:   emCalc(14px) !default;
 $label-font-weight: bold !default;
+$label-font-color: #333 !default;
+$label-font-color-alt: #fff !default;
 
 //
 // Label Mixins
@@ -43,8 +45,8 @@ $label-font-weight: bold !default;
     background-color: $bg;
 
     // We control the text color for you based on the background color.
-    @if $bg-lightness < 70% { color: #fff; }
-    @else { color: #333; }
+    @if $bg-lightness < 70% { color: $label-font-color-alt; }
+    @else { color: $label-font-color; }
   }
 
   // We use this to control the radius on labels.
@@ -62,7 +64,7 @@ $label-font-weight: bold !default;
 }
 
 
-@if $include-html-label-classes {
+@if $include-html-label-classes != false {
 
   /* Labels */
   .label {

data/scss/foundation/components/_magellan.scss

@@ -4,7 +4,7 @@
 $magellan-bg: #fff !default;
 $magellan-padding: 10px !default;
 
-@if $include-html-magellan-classes {
+@if $include-html-magellan-classes != false {
 
   [data-magellan-expedition] {
     background: $magellan-bg;

data/scss/foundation/components/_orbit.scss

@@ -20,7 +20,7 @@ $orbit-bullet-nav-color: #999 !default;
 $orbit-bullet-nav-color-active: #222 !default;
 
 // We use thes to controls the style of slide numbers
-$orbit-slide-number-bg: rgb(0,0,0) !default;
+$orbit-slide-number-bg: rgba(0,0,0,0) !default;
 $orbit-slide-number-font-color: #fff !default;
 $orbit-slide-number-padding: emCalc(5px) !default;
 
@@ -67,7 +67,9 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
     top: 10px;
     #{$default-float}: 10px;
     font-size: 12px;
-    span { font-weight: 700; }
+    span { font-weight: 700; padding: $orbit-slide-number-padding;}
+    color: $orbit-slide-number-font-color;
+    background: $orbit-slide-number-bg;
   }
 
   .orbit-timer {
@@ -102,7 +104,8 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
         top: 9px;
         width: 11px;
         height: 14px;
-        border: solid 8px;
+        border: inset 8px;
+        border-right-style: solid;
         border-color: transparent transparent transparent #000;
       }
     }
@@ -131,11 +134,12 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       display: block;
       width: 0;
       height: 0;
-      border: solid 16px;
+      border: inset 16px;
     }
   }
   .orbit-prev { #{$default-float}: 0;
-    & > span { 
+    & > span {
+      border-#{$opposite-direction}-style: solid;
       border-color: transparent;
       border-#{$opposite-direction}-color: #fff;
     }
@@ -146,6 +150,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
   .orbit-next { #{$opposite-direction}: 0;
     & > span {
       border-color: transparent;
+      border-#{$default-float}-style: solid;
       border-#{$default-float}-color: #fff;
       #{$default-float}: 50%;
       margin-#{$default-float}: -8px;
@@ -166,14 +171,14 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
     display: block;
     width: 18px;
     height: 18px;
-    background: #fff;
+    background: $orbit-bullet-nav-color;
     float: $default-float;
     margin-#{$opposite-direction}: 6px;
-    border: solid 2px #000;
+    border: solid 2px $orbit-bullet-nav-color-active;
     @include radius(1000px);
 
     &.active {
-      background: #000;
+      background: $orbit-bullet-nav-color-active;
     }
 
     &:last-child { margin-#{$opposite-direction}: 0; }

data/scss/foundation/components/_pagination.scss

@@ -91,7 +91,7 @@ $pagination-link-current-active-bg:      $primary-color !default;
 
 
 
-@if $include-html-nav-classes {
+@if $include-html-nav-classes != false {
 
   /* Pagination */
   .pagination { @include pagination; }

data/scss/foundation/components/_panels.scss

@@ -56,7 +56,7 @@ $panel-font-color-alt:  #fff !default;
 }
 
 // Only include these classes if the option exists
-@if $include-html-panel-classes {
+@if $include-html-panel-classes != false {
 
   /* Panels */
   .panel { @include panel;

data/scss/foundation/components/_pricing-tables.scss

@@ -114,7 +114,7 @@ $price-cta-padding:         emCalc(20px) emCalc(20px) 0 !default;
 }
 
 
-@if $include-html-pricing-classes {
+@if $include-html-pricing-classes != false {
 
   /* Pricing Tables */
   .pricing-table {

data/scss/foundation/components/_progress-bars.scss

@@ -43,7 +43,7 @@ $progress-meter-alert-color: $alert-color !default;
 }
 
 
-@if $include-html-media-classes {
+@if $include-html-media-classes != false {
 
   /* Progress Bar */
   .progress {

data/scss/foundation/components/_reveal.scss

@@ -99,7 +99,7 @@ $reveal-border-color:    #666 !default;
   cursor: pointer;
 }
 
-@if $include-html-reveal-classes {
+@if $include-html-reveal-classes != false {
   // Reveal Modals
   .reveal-modal-bg { @include reveal-bg; }
 
@@ -116,11 +116,11 @@ $reveal-border-color:    #666 !default;
     .reveal-modal {
       @include reveal-modal-style(false, emCalc(30px), false, $box-shadow: false, $top-offset: emCalc(100px));
 
-      &.small  { @include reveal-modal-base(false, 30%); }
-      &.medium { @include reveal-modal-base(false, 40%); }
-      &.large  { @include reveal-modal-base(false, 60%); }
-      &.xlarge { @include reveal-modal-base(false, 70%); }
-      &.expand { @include reveal-modal-base(false, 95%); }
+      &.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%); }
     }
   }
 
@@ -128,4 +128,4 @@ $reveal-border-color:    #666 !default;
   @media print {
     div:not(.reveal-modal) { display: none; }
   }
-}
+}

data/scss/foundation/components/_section.scss

@@ -18,9 +18,10 @@ $section-border-style:           solid !default;
 $section-border-color:           #ccc !default;
 
 // Control the color of the background and some size options
-$section-content-bg:             #fff !default;
-$section-vertical-nav-min-width: emCalc(200px) !default;
-$section-bottom-margin:          emCalc(20px) !default;
+$section-content-bg:                #fff !default;
+$section-vertical-nav-min-width:    emCalc(200px) !default;
+$section-vertical-tabs-title-width: emCalc(200px) !default;
+$section-bottom-margin:             emCalc(20px) !default;
 
 
 //
@@ -49,6 +50,12 @@ $section-bottom-margin:          emCalc(20px) !default;
     position: relative;
   }
 
+  // Vertical Tabs container border styles
+  @else if $section-type == vertical-tabs {
+    border: $section-border-size $section-border-style $section-border-color;
+    position: relative;
+  }
+
   // Vertical Nav container border styles
   @else if $section-type == vertical-nav {
 
@@ -101,8 +108,8 @@ $section-bottom-margin:          emCalc(20px) !default;
 
 
     &.active {
-      .content { display: block; }
-      .title { background: $section-title-bg-active; }
+      & > .content { display: block; }
+      & > .title { background: $section-title-bg-active; }
     }
 
 
@@ -135,12 +142,52 @@ $section-bottom-margin:          emCalc(20px) !default;
 
     &.active {
 
-      .title {
+      & > .title {
         background-color: $section-title-bg-active-tabs;
         z-index: 11;
         border-bottom: 0;
       }
-      .content { position: relative; }
+      & > .content { position: relative; }
+    }
+  }
+
+  @else if $section-type == vertical-tabs {
+    padding-top: 0 !important;
+    border: 0;
+    position: static;
+    background-color: $section-title-bg;
+
+    .title {
+      position: absolute;
+      border-top: $section-border-size $section-border-style $section-border-color;
+      width: $section-vertical-tabs-title-width;
+    }
+
+    &:first-child .title { border-top: 0; }
+
+    .content {
+      // Display all content blocks to account for the scrollbar
+      // in the outerWidth measurements. JavaScript will toggle the active tabs.
+      display: block;
+
+      position: relative;
+      left: $section-vertical-tabs-title-width;
+      border-left: $section-border-size $section-border-style $section-border-color;
+      z-index: 10;
+    }
+
+    &.active {
+
+      & > .title {
+        background-color: $section-title-bg-active-tabs;
+        width: $section-vertical-tabs-title-width + emCalc(2px); // Cover the content's left border
+        border-right: 0;
+        z-index: 11; // Put active title on top of the content
+      }
+
+      &:last-child .title {
+        border-bottom: $section-border-size $section-border-style $section-border-color;
+      }
     }
   }
 
@@ -154,7 +201,7 @@ $section-bottom-margin:          emCalc(20px) !default;
     .content { display: none; }
 
     &.active {
-      .content {
+      & > .content {
         display: block;
         position: absolute;
         #{$default-float}: 100%;
@@ -186,7 +233,7 @@ $section-bottom-margin:          emCalc(20px) !default;
     .content { display: none; }
 
     &.active {
-      .content {
+      & > .content {
         display: block;
         position: absolute;
         z-index: 999;
@@ -200,14 +247,14 @@ $section-bottom-margin:          emCalc(20px) !default;
 }
 
 
-@if $include-html-section-classes {
+@if $include-html-section-classes != false {
 
   /* Sections */
   .section-container, .section-container.auto {
     @include section-container;
 
-    section,
-    .section {
+    &>section,
+    &>.section {
       @include section;
     }
   }
@@ -215,8 +262,8 @@ $section-bottom-margin:          emCalc(20px) !default;
   .section-container.tabs {
     @include section-container(false, tabs);
 
-    section,
-    .section { @include section(tabs); }
+    &>section,
+    &>.section { @include section(tabs); }
   }
 
   @media #{$small} {
@@ -224,26 +271,33 @@ $section-bottom-margin:          emCalc(20px) !default;
     .section-container.auto {
       @include section-container(false, tabs);
 
-      section,
-      .section { @include section(tabs); }
+      &>section,
+      &>.section { @include section(tabs); }
     }
     .section-container.accordion .section {
       padding-top: 0 !important;
     }
 
+    .section-container.vertical-tabs {
+      @include section-container(false, vertical-tabs);
+
+      section,
+      .section { @include section(vertical-tabs); }
+    }
+
     .section-container.vertical-nav {
       @include section-container(false);
 
-      section,
-      .section { @include section(vertical-nav); }
+      &>section,
+      &>.section { @include section(vertical-nav); }
     }
 
     .section-container.horizontal-nav {
       @include section-container(false, horizontal-nav);
 
-      section,
-      .section { @include section(horizontal-nav); }
+      &>section,
+      &>.section { @include section(horizontal-nav); }
     }
   }
 
-}
+}

data/scss/foundation/components/_side-nav.scss

@@ -60,7 +60,7 @@ $side-nav-divider-color:     darken(#fff, 10%) !default;
 }
 
 
-@if $include-html-nav-classes {
+@if $include-html-nav-classes != false {
 
   /* Side Nav */
   .side-nav { @include side-nav; }

data/scss/foundation/components/_split-buttons.scss

@@ -64,7 +64,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
         width: 0;
         height: 0;
         display: block;
-        border-style: solid;
+        border-style: inset;
 
         #{$default-float}: 50%;
       }
@@ -75,7 +75,9 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 
   // Control the border color for the span area of the split button
   @if $span-border {
-    span { border-#{$default-float}-color: darken($span-border, $split-button-function-factor); }
+    span {
+      border-#{$default-float}-color: darken($span-border, $split-button-function-factor);
+    }
   }
 
   // Style of the button and clickable area for tiny sizes
@@ -84,6 +86,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 
     span { width: $split-button-span-width-tny;
       &:before {
+        border-top-style: solid;
         border-width: $split-button-pip-size-tny;
         top: $split-button-pip-top-tny;
         margin-#{$default-float}: $split-button-pip-default-float-tny;
@@ -97,6 +100,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 
     span { width: $split-button-span-width-sml;
       &:before {
+        border-top-style: solid;
         border-width: $split-button-pip-size-sml;
         top: $split-button-pip-top-sml;
         margin-#{$default-float}: $split-button-pip-default-float-sml;
@@ -110,6 +114,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 
     span { width: $split-button-span-width-med;
       &:before {
+        border-top-style: solid;
         border-width: $split-button-pip-size-med;
         top: $split-button-pip-top-med;
         margin-#{$default-float}: $split-button-pip-default-float-med;
@@ -123,6 +128,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 
     span { width: $split-button-span-width-lrg;
       &:before {
+        border-top-style: solid;
         border-width: $split-button-pip-size-lrg;
         top: $split-button-pip-top-lrg;
         margin-#{$default-float}: $split-button-pip-default-float-lrg;
@@ -137,7 +143,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 }
 
 
-@if $include-html-button-classes {
+@if $include-html-button-classes != false {
 
   /* Split Buttons */
   .split.button { @include split-button;
@@ -149,6 +155,7 @@ $split-button-pip-default-float-lrg:    emCalc(-9px) !default;
     &.tiny { @include split-button(tiny, false, false, false); }
     &.small { @include split-button(small, false, false, false); }
     &.large { @include split-button(large, false, false, false); }
+    &.expand { padding-left: 2em; }
 
     &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }