groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/responsive/_ipad.scss

@@ -1,24 +1,147 @@
 // =============================================
 //                   iPad
-//          Last Updated:2013-6-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$responsive: true !default;
 
 
 @mixin ipad {
-  @media #{$ipad} {
-    // conditional helpers
-    .ipad-only { display: block !important; }
-    span.ipad-only { display: inline !important; }
-    .hide-on-ipad { display: none !important; }
-    .desktop-only { display: none !important; }
-    // spacer overrides
-    .zero-ipad { @include helper_reset(); }
-    .no-padding-ipad, .no-pad-ipad { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
-    .no-margin-ipad, .no-gap-ipad { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
-    .no-border-ipad { border: 0; }
-    @content;
+  @if $responsive {
+    @media #{$ipad} {
+      // conditional helpers
+      .ipad-only { display: block !important; }
+      span.ipad-only { display: inline !important; }
+      .hide-on-ipad { display: none !important; }
+      .desktop-only { display: none !important; }
+      // spacer overrides
+      .zero-ipad { @include helper_reset(); }
+      .no-padding-ipad, .no-pad-ipad { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
+      .no-margin-ipad, .no-gap-ipad { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
+      .no-border-ipad { border: 0; }
+      @if $spacer-classes {
+        .padded-ipad        { @include _padded;
+          &.double          { @include _padded(2); }
+          &.triple          { @include _padded(3); }
+        }
+        .pad-top-ipad       { @include _pad-top;
+          &.double          { @include _pad-top(2); }
+          &.triple          { @include _pad-top(3); }
+        }
+        .pad-right-ipad     { @include _pad-right;
+          &.double          { @include _pad-right(2); }
+          &.triple          { @include _pad-right(3); }
+        }
+        .pad-bottom-ipad    { @include _pad-bottom;
+          &.double          { @include _pad-bottom(2); }
+          &.triple          { @include _pad-bottom(3); }
+        }
+        .pad-left-ipad      { @include _pad-left;
+          &.double          { @include _pad-left(2); }
+          &.triple          { @include _pad-left(3); }
+        }
+        .gapped-ipad        { @include _gapped;
+          &.double          { @include _gapped(2); }
+          &.triple          { @include _gapped(3); }
+        }
+        .gap-top-ipad       { @include _gap-top;
+          &.double          { @include _gap-top(2); }
+          &.triple          { @include _gap-top(3); }
+        }
+        .gap-right-ipad     { @include _gap-right;
+          &.double          { @include _gap-right(2); }
+          &.triple          { @include _gap-right(3); }
+        }
+        .gap-bottom-ipad    { @include _gap-bottom;
+          &.double          { @include _gap-bottom(2); }
+          &.triple          { @include _gap-bottom(3); }
+        }
+        .gap-left-ipad      { @include _gap-left;
+          &.double          { @include _gap-left(2); }
+          &.triple          { @include _gap-left(3); }
+        }
+        .offset-ipad        { @include _offset;
+          &.double          { @include _offset(2); }
+          &.triple          { @include _offset(3); }
+        }
+        .offset-top-ipad    { @include _offset-top;
+          &.double          { @include _offset-top(2); }
+          &.triple          { @include _offset-top(3); }
+        }
+        .offset-right-ipad  { @include _offset-right;
+          &.double          { @include _offset-right(2); }
+          &.triple          { @include _offset-right(3); }
+        }
+        .offset-bottom-ipad { @include _offset-bottom;
+          &.double          { @include _offset-bottom(2); }
+          &.triple          { @include _offset-bottom(3); }
+        }
+        .offset-left-ipad   { @include _offset-left;
+          &.double          { @include _offset-left(2); }
+          &.triple          { @include _offset-left(3); }
+        }
+      }
+      @if $positioning-classes {
+        .fixed-ipad           { @include _fixed; }
+        .fixed-top-ipad       { @include _fixed(top); }
+        .fixed-right-ipad     { @include _fixed(right); }
+        .fixed-bottom-ipad    { @include _fixed(bottom); }
+        .fixed-left-ipad      { @include _fixed(left); }
+        .fixed-middle-ipad    { @include _fixed(middle); }
+        .fixed-center-ipad    { @include _fixed(center); }
+        .absolute-ipad        { @include _absolute; }
+        .absolute-top-ipad    { @include _absolute(top); }
+        .absolute-right-ipad  { @include _absolute(right); }
+        .absolute-bottom-ipad { @include _absolute(bottom); }
+        .absolute-left-ipad   { @include _absolute(left); }
+        .absolute-middle-ipad { @include _absolute(middle); }
+        .absolute-center-ipad { @include _absolute(center); }
+        .static-ipad          { @include _static; }
+      }
+      @if $layout-classes {
+        .inline-ipad          { @include _inline; }
+        .block-ipad           { @include _block; }
+        .clear-ipad           { @include _clear; }
+        .center-ipad          { @include _center; }
+        .pull-right-ipad      { @include _pull-right; }
+        .pull-left-ipad       { @include _pull-left; }
+        .pull-none-ipad       { @include _pull-none; }
+      }
+      @if $border-classes {
+        .bordered-ipad        { @include _bordered; }
+        .border-top-ipad      { @include _border-top; }
+        .border-right-ipad    { @include _border-right; }
+        .border-bottom-ipad   { @include _border-bottom; }
+        .border-left-ipad     { @include _border-left; }
+      }
+      @if $typography-helpers {
+        .align-top-ipad       { @include _align-top; }
+        .align-right-ipad     { @include _align-right; }
+        .align-bottom-ipad    { @include _align-bottom; }
+        .align-left-ipad      { @include _align-left; }
+        .align-center-ipad    { @include _align-center; }
+        .justify-ipad         { @include _justify; }
+        .truncate-ipad        { @include _truncate; }
+      }
+      @if $rotation-classes {
+        .rotate-90-ipad       { @include _rotate-90; }
+        .rotate-90-ctr-ipad   { @include _rotate-90-ctr; }
+        .rotate-180-ipad      { @include _rotate-180; }
+        .rotate-180-ctr-ipad  { @include _rotate-180-ctr; }
+        .rotate-270-ipad      { @include _rotate-270; }
+        .rotate-270-ctr-ipad  { @include _rotate-270-ctr; }
+        .rotate-360-ipad      { @include _rotate-360; }
+        .rotate-360-ipad      { @include _rotate-360-ctr; }
+      }
+      @if $multi-column-classes {
+        @for $i from 1 through length($multi-column-names) {
+          .#{nth($multi-column-names, $i)}-ipad, .#{nth($multi-column-names, $i)}s-ipad {
+            @include _multi-column($i);
+          }
+        }
+      }
+      @content;
+    }
   }
 }
 
@@ -27,6 +150,11 @@
 //       ipad        //
 ///////////////////////
 
-@include ipad {
-  // do not remove -- required for ipad helpers
+@if $responsive {
+  @include ipad {
+    // do not remove -- required for ipad helpers
+    @if $navigation-classes {
+      @include hamburger-mode(":not(.small-tablet):not(.mobile)");
+    }
+  }
 }

data/app/assets/stylesheets/groundworkcss/responsive/_mobile.scss

@@ -1,30 +1,153 @@
 // =============================================
 //                  Mobile
-//          Last Updated:2013-6-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$responsive: true !default;
 
 
 @mixin mobile {
-  @media #{$mobile} {
-    // responsive grid
-    @include grid-responsive(false);
-    // conditional helpers
-    .mobile-only { display: block !important; }
-    span.mobile-only { display: inline !important; }
-    .hide-on-small-tablet { display: block !important; }
-    span.hide-on-small-tablet { display: inline !important; }
-    .small-tablet-only { display: none !important; }
-    span.small-tablet-only { display: none !important; }
-    .hide-on-mobile { display: none !important; }
-    .desktop-only { display: none !important; }
-    // spacer overrides
-    .zero-mobile { @include helper_reset(); }
-    .no-padding-mobile, .no-pad-mobile { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
-    .no-margin-mobile, .no-gap-mobile { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
-    .no-border-mobile { border: 0; }
-    @content;
+  @if $responsive {
+    @media #{$mobile} {
+      // responsive grid
+      @include grid-responsive(false);
+      // conditional helpers
+      .mobile-only { display: block !important; }
+      span.mobile-only { display: inline !important; }
+      .hide-on-small-tablet { display: block !important; }
+      span.hide-on-small-tablet { display: inline !important; }
+      .small-tablet-only { display: none !important; }
+      span.small-tablet-only { display: none !important; }
+      .hide-on-mobile { display: none !important; }
+      .desktop-only { display: none !important; }
+      // spacer overrides
+      .zero-mobile { @include helper_reset(); }
+      .no-padding-mobile, .no-pad-mobile { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
+      .no-margin-mobile, .no-gap-mobile { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
+      .no-border-mobile { border: 0; }
+      @if $spacer-classes {
+        .padded-mobile        { @include _padded;
+          &.double            { @include _padded(2); }
+          &.triple            { @include _padded(3); }
+        }
+        .pad-top-mobile       { @include _pad-top;
+          &.double            { @include _pad-top(2); }
+          &.triple            { @include _pad-top(3); }
+        }
+        .pad-right-mobile     { @include _pad-right;
+          &.double            { @include _pad-right(2); }
+          &.triple            { @include _pad-right(3); }
+        }
+        .pad-bottom-mobile    { @include _pad-bottom;
+          &.double            { @include _pad-bottom(2); }
+          &.triple            { @include _pad-bottom(3); }
+        }
+        .pad-left-mobile      { @include _pad-left;
+          &.double            { @include _pad-left(2); }
+          &.triple            { @include _pad-left(3); }
+        }
+        .gapped-mobile        { @include _gapped;
+          &.double            { @include _gapped(2); }
+          &.triple            { @include _gapped(3); }
+        }
+        .gap-top-mobile       { @include _gap-top;
+          &.double            { @include _gap-top(2); }
+          &.triple            { @include _gap-top(3); }
+        }
+        .gap-right-mobile     { @include _gap-right;
+          &.double            { @include _gap-right(2); }
+          &.triple            { @include _gap-right(3); }
+        }
+        .gap-bottom-mobile    { @include _gap-bottom;
+          &.double            { @include _gap-bottom(2); }
+          &.triple            { @include _gap-bottom(3); }
+        }
+        .gap-left-mobile      { @include _gap-left;
+          &.double            { @include _gap-left(2); }
+          &.triple            { @include _gap-left(3); }
+        }
+        .offset-mobile        { @include _offset;
+          &.double            { @include _offset(2); }
+          &.triple            { @include _offset(3); }
+        }
+        .offset-top-mobile    { @include _offset-top;
+          &.double            { @include _offset-top(2); }
+          &.triple            { @include _offset-top(3); }
+        }
+        .offset-right-mobile  { @include _offset-right;
+          &.double            { @include _offset-right(2); }
+          &.triple            { @include _offset-right(3); }
+        }
+        .offset-bottom-mobile { @include _offset-bottom;
+          &.double            { @include _offset-bottom(2); }
+          &.triple            { @include _offset-bottom(3); }
+        }
+        .offset-left-mobile   { @include _offset-left;
+          &.double            { @include _offset-left(2); }
+          &.triple            { @include _offset-left(3); }
+        }
+      }
+      @if $positioning-classes {
+        .fixed-mobile           { @include _fixed; }
+        .fixed-top-mobile       { @include _fixed(top); }
+        .fixed-right-mobile     { @include _fixed(right); }
+        .fixed-bottom-mobile    { @include _fixed(bottom); }
+        .fixed-left-mobile      { @include _fixed(left); }
+        .fixed-middle-mobile    { @include _fixed(middle); }
+        .fixed-center-mobile    { @include _fixed(center); }
+        .absolute-mobile        { @include _absolute; }
+        .absolute-top-mobile    { @include _absolute(top); }
+        .absolute-right-mobile  { @include _absolute(right); }
+        .absolute-bottom-mobile { @include _absolute(bottom); }
+        .absolute-left-mobile   { @include _absolute(left); }
+        .absolute-middle-mobile { @include _absolute(middle); }
+        .absolute-center-mobile { @include _absolute(center); }
+        .static-mobile          { @include _static; }
+      }
+      @if $layout-classes {
+        .inline-mobile          { @include _inline; }
+        .block-mobile           { @include _block; }
+        .clear-mobile           { @include _clear; }
+        .center-mobile          { @include _center; }
+        .pull-right-mobile      { @include _pull-right; }
+        .pull-left-mobile       { @include _pull-left; }
+        .pull-none-mobile       { @include _pull-none; }
+      }
+      @if $border-classes {
+        .bordered-mobile        { @include _bordered; }
+        .border-top-mobile      { @include _border-top; }
+        .border-right-mobile    { @include _border-right; }
+        .border-bottom-mobile   { @include _border-bottom; }
+        .border-left-mobile     { @include _border-left; }
+      }
+      @if $typography-helpers {
+        .align-top-mobile       { @include _align-top; }
+        .align-right-mobile     { @include _align-right; }
+        .align-bottom-mobile    { @include _align-bottom; }
+        .align-left-mobile      { @include _align-left; }
+        .align-center-mobile    { @include _align-center; }
+        .justify-mobile         { @include _justify; }
+        .truncate-mobile        { @include _truncate; }
+      }
+      @if $rotation-classes {
+        .rotate-90-mobile       { @include _rotate-90; }
+        .rotate-90-ctr-mobile   { @include _rotate-90-ctr; }
+        .rotate-180-mobile      { @include _rotate-180; }
+        .rotate-180-ctr-mobile  { @include _rotate-180-ctr; }
+        .rotate-270-mobile      { @include _rotate-270; }
+        .rotate-270-ctr-mobile  { @include _rotate-270-ctr; }
+        .rotate-360-mobile      { @include _rotate-360; }
+        .rotate-360-mobile      { @include _rotate-360-ctr; }
+      }
+      @if $multi-column-classes {
+        @for $i from 1 through length($multi-column-names) {
+          .#{nth($multi-column-names, $i)}-mobile, .#{nth($multi-column-names, $i)}s-mobile {
+            @include _multi-column($i);
+          }
+        }
+      }
+      @content;
+    }
   }
 }
 
@@ -33,20 +156,11 @@
 //      mobile       //
 ///////////////////////
 
-@include mobile {
-  .tabs:not(.mobile) {
-    > ul {
-      li {
-        float:none;
-        width:100%;
-        a {
-          @include rounded(0);
-          border-bottom:none;
-        }
-        &:first-child a {
-          @include rounded($default-radius $default-radius 0 0);
-        }
-      }
+@if $responsive {
+  @include mobile {
+    // do not remove -- required for mobile helpers
+    @if $navigation-classes {
+      @include hamburger-mode();
     }
   }
 }