zurb-foundation 2.2.1.2 → 3.0.3

data/stylesheets/foundation/ie.scss

@@ -0,0 +1,16 @@
+/* This is for all IE specfific style less than IE9. We hate IE. */
+
+  @import "base";
+
+  .lt-ie8 .row { max-width: 1000px; }
+
+  div.panel { border: 1px solid #ccc; }
+  .lt-ie8 .nav-bar li.has-flyout a { padding-right: 20px; }
+  .lt-ie8 .nav-bar li.has-flyout a:after { border-top: none; }
+
+  /* Correct IE7 button padding */
+  .lt-ie8 input[type=submit].nice.button { filter:chroma(color=#000000); position: relative; top: -2px; }
+  .lt-ie8 input[type=submit].tiny.button    { padding: 5px 5px 7px; }
+  .lt-ie8 input[type=submit].small.button   { padding: 8px 7px 9px; }
+  .lt-ie8 input[type=submit].medium.button  { padding: 9px 13px 9px; }
+  .lt-ie8 input[type=submit].large.button   { padding: 9px 18px 10px; }

data/stylesheets/foundation/mobile.scss

@@ -0,0 +1,32 @@
+/* Requires:
+   buttons.css
+   forms.css
+   grid.css
+   tabs.css
+   typography.css
+   ui.css
+   modernizr
+*/
+
+  @import "base";
+
+
+
+/* Forms ---------------------- */
+
+  
+
+/* UI ---------------------- */
+
+  /* Buttons */
+ 
+
+  /* Tabs */
+  
+
+  /* Tooltips */
+  
+
+
+  /* Video */
+  

data/stylesheets/foundation/navbar.scss

@@ -0,0 +1,107 @@
+/* Requires
+   globals.css */
+
+  @import "base";
+
+  .nav-bar { height: $navBarHeight; background: lighten($black, 30%); margin-top: $navBarHeight / 2; padding: 0;
+
+    &>li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid lighten($black, 20%); border-right: none; line-height: $navBarHeight - 2; @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset);
+
+      &:first-child { @include box-shadow(0 0 0); }
+      &:last-child { border-right: solid 1px lighten($black, 20%); @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset, 1px 0 0 fade-out($shinyEdge, .3)); }
+
+      &.active { background: $mainColor; border-color: darken($mainColor, 10%);
+        &>a { color: $white; cursor: default; }
+        &:hover { background: $mainColor; cursor: default; }
+      }
+      &:hover { background: lighten($black, 20%); }
+
+      a { color: darken($white, 10%); }
+      ul { margin-bottom: 0; }
+      .flyout { display: none; }
+
+      &.has-flyout {
+        &>a:first-child { padding-right: 36px; position: relative;
+          &:after { @include cssTriangle(4px, darken($white, 10%), top); position: absolute; right: 20px; top: 17px; }
+        }
+        &>a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
+        &.is-touch {
+          &>a:first-child { padding-right: 55px;}
+          &>a.flyout-toggle { border-left: 1px dashed #666; }
+        }
+      }
+    }
+
+    &>li>a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: ms(0); }
+    &>li>input { margin: 0 10px; }
+
+    &.vertical { height: auto; margin-top: 0;
+
+      &>li { float: none; border-bottom: none;
+
+        &.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), left); }
+        .flyout { left: 100%; top: -1px;
+          &.right { left: auto; right: 100%; }
+        }
+      }
+    }
+
+  }
+
+  .flyout { background: darken($white, 5%); padding: 20px; margin: 0; border: 1px solid darken($white, 15%); position: absolute; top: $navBarHeight - 1; left: -1px; width: $navFlyoutBaseWidth; z-index: 40; @include box-shadow(0 1px 5px rgba(#000, .1));
+
+    p { line-height: 1.2; font-size: ms(0) - 1; }
+    *:first-child { margin-top: 0; } /* remove margin on any first-child element */
+    *:last-child { margin-bottom: 0; } /* remove margin on last element */
+
+    &.small { width: $navFlyoutBaseWidth / 1.5; }
+    &.large { width: $navFlyoutBaseWidth * 1.75; }
+    &.right { left: auto; right: -2px; }
+
+  }
+
+  ul.flyout, .nav-bar li ul { padding: 0; list-style: none;
+
+    li { border-left: solid 3px #CCC;
+      a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: 15px 20px; @include box-shadow(0 1px 0 $shinyEdge inset);
+        &:hover { background: darken($white, 8%); color: #333; }
+      }
+      &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-left: 4px solid lighten($black, 10%);
+        a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
+      }
+    }
+
+  }
+
+
+  /* Mobile Styles */
+  @media only screen and (max-device-width: 1280px) {
+    .touch .nav-bar li.has-flyout>a { padding-right: 36px !important; }
+  }
+
+  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
+    .touch .nav-bar li a { @include font-size(13); }
+    .touch .nav-bar li.has-flyout>a.flyout-toggle { padding: 20px !important; }
+    .touch .nav-bar li.has-flyout>a { padding-right: 36px !important; }
+  }
+
+  @media only screen and (max-width: $screenSmall - 1) {
+    .nav-bar { height: auto;
+
+      &>li { float: none; display: block; border-right: none; }
+      &>li>a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
+      &>li:first-child>a.main { border-top: none; }
+      &>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
+      &>li.has-flyout.is-touch>a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
+      &>li.has-flyout>a.flyout-toggle:hover span { border-top-color: #141414; }
+      &.vertical>li.has-flyout>.flyout { left: 0; }
+    }
+
+    .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px;
+
+      &.right { float: none; right: auto; left: -1px; }
+      &.small, &.large { width: 100% !important; }
+      p:last-child { margin-bottom: 18px; }
+    }
+
+  }

data/stylesheets/foundation/offcanvas.scss

@@ -0,0 +1,57 @@
+/* Off canvas layout CSS/JS provided by or adapted from work by Jason Weaver and Luke Wroblewski
+   Requires
+   globals.css
+   grid.css */
+
+  @import "base";
+
+  body.off-canvas { padding: 0; margin: 0; }
+
+  .container { width: 100%; }
+  .row { overflow: hidden; }
+  .row .row { overflow: visible; }
+
+  .paneled .container { overflow: hidden; }
+  .paneled .row { width: 100%; }
+
+  [role="main"]:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; }
+
+  [role="complementary"],
+  [role="main"] { width: 100%; padding: 0 15px; display: block;	position: relative; z-index: 1; @include transition(.25s all ease-in); }
+
+  .paneled [role="main"] { padding: 0; }
+  .page-panel { width: 100%; padding: 0 15px; @include transition(.3s margin ease-in-out); background: #fff; }
+  #switchPanels { margin: 0 -15px; }
+
+  .hide-extras [role="complementary"] { display: block; }
+
+  [role="navigation"]#topMenu { @include transition(.25s all ease-in); }
+  [role="navigation"]#topMenu ul { margin-top: 0; }
+
+  [role="complementary"] { margin-left: -100%; width: 80%; float: left; z-index: 2; }
+  [role="main"] { margin-left: 0; float: right; z-index: 1; position: relative; }
+
+  .paneled [role="main"] { background: #fff; width: 500%; overflow: hidden; float: none; position: relative; left: 0; @include transition(.15s all ease-in); }
+  .page-panel { min-height: 400px; float: left; margin: 0; width: 20%; }
+
+
+  .active [role="complementary"] { margin-left: 0; }
+  .active [role="main"] { margin-right: -80%; }
+
+  .active-menu [role="navigation"]#topMenu { margin-top: 0 !important; }
+
+  @media all and (min-width: 768px) {
+
+    menu-button, .sidebar-button { display: none; }
+    [role="complementary"] { width: $complementaryWidth; margin-left: 0; float: left; padding: 0 15px; }
+    [role="main"] { width: $mainWidth; padding: 0 15px; }
+
+    .paneled [role="main"] { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
+    .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
+
+    .hide-extras [role="main"] { width: 100%; }
+    .hide-extras [role="complementary"] { display: none; }
+
+    [role="navigation"]#topMenu {	display: none; }
+
+  }

data/{vendor/assets/stylesheets/foundation/orbit.css.scss → stylesheets/foundation/orbit.scss}

@@ -2,48 +2,46 @@
  * Maintained for Foundation. foundation.zurb.com
  * Free to use under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
- 
- 
- 
-/* CONTAINER
-   ================================================== */
+*/
 
-div.orbit-wrapper {
+    @import "base";
+
+  /* Container ---------------------- */
+
+  div.orbit-wrapper {
     width: 1px;
     height: 1px;
     position: relative; }
 
-div.orbit {
+  div.orbit {
     width: 1px;
     height: 1px;
     position: relative;
     overflow: hidden }
-    
-div.orbit.with-bullets {
-    margin-bottom: 40px; }
 
-div.orbit .orbit-slide {
+  div.orbit.with-bullets {
+      margin-bottom: 40px; }
+
+  div.orbit .orbit-slide {
     max-width: 100%;
     position: absolute;
     top: 0;
     left: 0; }
 
-div.orbit a.orbit-slide {
+  div.orbit a.orbit-slide {
     border: none;
-    line-height: 0; 
+    line-height: 0;
     display: none; }
 
-div.orbit div.orbit-slide {
+  div.orbit div.orbit-slide {
     width: 100%;
     height: 100%; }
 
-/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
+  /* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
 
+  /* Timer ---------------------- */
 
-/* TIMER
-   ================================================== */
-
-div.orbit-wrapper div.timer {
+  div.orbit-wrapper div.timer {
     width: 40px;
     height: 40px;
     overflow: hidden;
@@ -54,7 +52,7 @@ div.orbit-wrapper div.timer {
     cursor: pointer;
     z-index: 31; }
 
-div.orbit-wrapper span.rotator {
+  div.orbit-wrapper span.rotator {
     display: block;
     width: 40px;
     height: 40px;
@@ -64,7 +62,7 @@ div.orbit-wrapper span.rotator {
     background: image-url("foundation/orbit/rotator-black.png") no-repeat;
     z-index: 3; }
 
-div.orbit-wrapper span.mask {
+  div.orbit-wrapper span.mask {
     display: block;
     width: 20px;
     height: 40px;
@@ -74,15 +72,15 @@ div.orbit-wrapper span.mask {
     z-index: 2;
     overflow: hidden; }
 
-div.orbit-wrapper span.rotator.move {
+  div.orbit-wrapper span.rotator.move {
     left: 0 }
 
-div.orbit-wrapper span.mask.move {
+  div.orbit-wrapper span.mask.move {
     width: 40px;
     left: 0;
     background: image-url("foundation/orbit/timer-black.png") repeat 0 0; }
 
-div.orbit-wrapper span.pause {
+  div.orbit-wrapper span.pause {
     display: block;
     width: 40px;
     height: 40px;
@@ -93,72 +91,74 @@ div.orbit-wrapper span.pause {
     z-index: 4;
     opacity: 0; }
 
-div.orbit-wrapper span.pause.active {
+  div.orbit-wrapper span.pause.active {
     background: image-url("foundation/orbit/pause-black.png") no-repeat 0 -40px }
 
-div.orbit-wrapper div.timer:hover span.pause,
-div.orbit-wrapper span.pause.active {
+  div.orbit-wrapper div.timer:hover span.pause,
+  div.orbit-wrapper span.pause.active {
     opacity: 1 }
 
+  /* Captions ---------------------- */
 
-/* CAPTIONS
-   ================================================== */
-
-.orbit-caption {
+  .orbit-caption {
     display: none;
     font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
 
-.orbit-wrapper .orbit-caption {
+  .orbit-wrapper .orbit-caption {
     background: #000;
     background: rgba(0,0,0,.6);
     z-index: 30;
     color: #fff;
     text-align: center;
     padding: 7px 0;
-    font-size: 13px;
+    @include font-size(13);
     position: absolute;
     right: 0;
     bottom: 0;
     width: 100%; }
 
+  /* Directional Nav ---------------------- */
 
-/* DIRECTIONAL NAV
-   ================================================== */
-
-div.orbit-wrapper div.slider-nav {
+  div.orbit-wrapper div.slider-nav {
     display: block }
 
-div.orbit-wrapper div.slider-nav span {
-    width: 78px;
-    height: 100px;
+  div.orbit-wrapper div.slider-nav span {
+    width: 39px;
+    height: 50px;
     text-indent: -9999px;
     position: absolute;
     z-index: 30;
     top: 50%;
-    margin-top: -50px;
+    margin-top: -25px;
     cursor: pointer; }
 
-div.orbit-wrapper div.slider-nav span.right {
+  div.orbit-wrapper div.slider-nav span.right {
     background: image-url("foundation/orbit/right-arrow.png");
+    background-size: 100%;
     right: 0; }
 
-div.orbit-wrapper div.slider-nav span.left {
+  div.orbit-wrapper div.slider-nav span.left {
     background: image-url("foundation/orbit/left-arrow.png");
+    background-size: 100%;
     left: 0; }
 
-/* BULLET NAV
-   ================================================== */
+  .lt-ie9 {
+    div.orbit-wrapper div.slider-nav span.right { background: image-url("foundation/orbit/right-arrow-small.png"); }
+    div.orbit-wrapper div.slider-nav span.left { background: image-url("foundation/orbit/left-arrow-small.png"); }
+  }
 
-ul.orbit-bullets {
+  /* Bullet Nav ---------------------- */
+
+  ul.orbit-bullets {
     position: absolute;
     z-index: 30;
     list-style: none;
     bottom: -40px;
     left: 50%;
-	margin-left: -50px;
+    margin-left: -50px;
     padding: 0; }
 
-ul.orbit-bullets li {
+  ul.orbit-bullets li {
     float: left;
     margin-left: 5px;
     cursor: pointer;
@@ -169,39 +169,40 @@ ul.orbit-bullets li {
     height: 12px;
     overflow: hidden; }
 
-ul.orbit-bullets li.active {
+  ul.orbit-bullets li.active {
     color: #222;
     background-position: -8px 0; }
-    
-ul.orbit-bullets li.has-thumb {
+
+  ul.orbit-bullets li.has-thumb {
     background: none;
     width: 100px;
     height: 75px; }
 
-ul.orbit-bullets li.active.has-thumb {
+  ul.orbit-bullets li.active.has-thumb {
     background-position: 0 0;
     border-top: 2px solid #000; }
-    
-/* FLUID LAYOUT
-   ================================================== */
-div.orbit img.fluid-placeholder {
+
+
+  /* Fluid Layout ---------------------- */
+
+  div.orbit img.fluid-placeholder {
     visibility: hidden;
     position: static;
     display: block;
     width: 100%; }
 
-div.orbit, div.orbit-wrapper { width: 100% !important; }
+  div.orbit, div.orbit-wrapper { width: 100% !important; }
 
-ul.orbit-bullets {
+  ul.orbit-bullets {
     position: absolute;
     z-index: 30;
     list-style: none;
     bottom: -50px;
     left: 50%;
-	margin-left: -50px;
+    margin-left: -50px;
     padding: 0; }
 
-ul.orbit-bullets li {
+  ul.orbit-bullets li {
     float: left;
     margin-left: 5px;
     cursor: pointer;
@@ -212,21 +213,20 @@ ul.orbit-bullets li {
     height: 12px;
     overflow: hidden; }
 
-ul.orbit-bullets li.has-thumb {
+  ul.orbit-bullets li.has-thumb {
     background: none;
     width: 100px;
     height: 75px; }
 
-ul.orbit-bullets li.active {
+  ul.orbit-bullets li.active {
     color: #222;
     background-position: -8px 0; }
 
-ul.orbit-bullets li.active.has-thumb {
+  ul.orbit-bullets li.active.has-thumb {
     background-position: 0 0;
     border-top: 2px solid #000; }
-    
-    
-/* Correct timer in IE */
-	.timer { display: none !important; }
-	div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
 
+
+  /* Correct timer in IE */
+  .lt-ie9 .timer { display: none !important; }
+  .lt-ie9 div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }