groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/responsive/_small-tablet.scss

@@ -1,205 +1,162 @@
 // =============================================
 //               Small Tablet
-//          Last Updated:2013-6-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$responsive: true !default;
 
 
 @mixin small-tablet {
-  @media #{$small-tablet} {
-    // responsive grid
-    @include grid-responsive();
-    // conditional helpers
-    .small-tablet-only { display: block !important; }
-    span.small-tablet-only { display: inline !important; }
-    .hide-on-small-tablet { display: none !important; }
-    .desktop-only { display: none !important; }
-    // spacer overrides
-    .zero-small-tablet { @include helper_reset(); }
-    .no-padding-small-tablet, .no-pad-small-tablet { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
-    .no-margin-small-tablet, .no-gap-small-tablet { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
-    .no-border-small-tablet { border: 0; }
-    @content;
-  }
-}
-
-
-///////////////////////
-//    small tablet   //
-///////////////////////
-
-@include small-tablet {
-  %nav-not-pagination {
-    width:100%;
-    ul, ul.row {
-      li {
-        display:block;
-        width:100% !important;
-        &:first-child {
-          > a {
-            @include rounded($default-radius $default-radius 0 0);
-          }
+  @if $responsive {
+    @media #{$small-tablet} {
+      // responsive grid
+      @include grid-responsive();
+      // conditional helpers
+      .small-tablet-only { display: block !important; }
+      span.small-tablet-only { display: inline !important; }
+      .hide-on-small-tablet { display: none !important; }
+      .desktop-only { display: none !important; }
+      // spacer overrides
+      .zero-small-tablet { @include helper_reset(); }
+      .no-padding-small-tablet, .no-pad-small-tablet { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
+      .no-margin-small-tablet, .no-gap-small-tablet { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
+      .no-border-small-tablet { border: 0; }
+      @if $spacer-classes {
+        .padded-small-tablet        { @include _padded;
+          &.double                  { @include _padded(2); }
+          &.triple                  { @include _padded(3); }
         }
-        &:last-child {
-          > a {
-            @include rounded(0 0 $default-radius $default-radius);
-          }
+        .pad-top-small-tablet       { @include _pad-top;
+          &.double                  { @include _pad-top(2); }
+          &.triple                  { @include _pad-top(3); }
         }
-        &:only-child {
-          > a {
-            @include rounded($default-radius);
-          }
+        .pad-right-small-tablet     { @include _pad-right;
+          &.double                  { @include _pad-right(2); }
+          &.triple                  { @include _pad-right(3); }
         }
-        a {
-          border:none;
-          border-top:1px solid $button-active !important;
-        }
-        ul {
-          position:static !important;
-          li {
-            a {
-              @include rounded(0);
-            }
-            &:first-child,
-            &:last-child,
-            &:only-child {
-              a {
-                @include rounded(0);
-              }
-            }
-          }
+        .pad-bottom-small-tablet    { @include _pad-bottom;
+          &.double                  { @include _pad-bottom(2); }
+          &.triple                  { @include _pad-bottom(3); }
         }
-        &:first-child {
-          a {
-            @include rounded($default-radius $default-radius 0 0);
-          }
+        .pad-left-small-tablet      { @include _pad-left;
+          &.double                  { @include _pad-left(2); }
+          &.triple                  { @include _pad-left(3); }
         }
-        &:last-child {
-          a {
-            @include rounded(0 0 $default-radius $default-radius);
-          }
-          ul {
-            li {
-              a {
-                @include rounded(0 0 0 0 !important);
-              }
-              &:last-child {
-                a {
-                  @include rounded(0 0 $default-radius $default-radius !important);
-                }
-              }
-            }
-          }
+        .gapped-small-tablet        { @include _gapped;
+          &.double                  { @include _gapped(2); }
+          &.triple                  { @include _gapped(3); }
         }
-        &:only-child {
-          a {
-            @include rounded($default-radius);
-          }
+        .gap-top-small-tablet       { @include _gap-top;
+          &.double                  { @include _gap-top(2); }
+          &.triple                  { @include _gap-top(3); }
         }
-      }
-    }
-  }
-  // hamburger menus
-  %nav-menu-not-pagination {
-    display:block;
-    float:none;
-    &:before {
-      content:attr(data-label);
-      float:left;
-      color:$button-text;
-      line-height:2.2;
-    }
-    background-color:$button-color;
-    padding:$gutter;
-    padding-bottom:0;
-    @include rounded($default-radius);
-    .menu-toggle {
-      display:inline-block !important;
-      float:right;
-      margin-bottom:$gutter;
-    }
-    > ul, > ul.row {
-      display:block !important;
-      overflow:hidden;
-      max-height:0;
-      width:auto;
-      margin:0 (-$gutter);
-      clear:both;
-      @include transition(all 0.2s ease);
-      li {
-        a {
-          border:none;
-          border-top:1px solid $button-active;
-          &:first-child, &:last-child {
-            @include rounded(0);
-          }
-          &:hover, &:focus {
-            border:none;
-            border-top:1px solid $button-active;
-          }
+        .gap-right-small-tablet     { @include _gap-right;
+          &.double                  { @include _gap-right(2); }
+          &.triple                  { @include _gap-right(3); }
         }
-        &:last-child {
-          a {
-            @include rounded(0 0 $default-radius $default-radius !important);
-          }
+        .gap-bottom-small-tablet    { @include _gap-bottom;
+          &.double                  { @include _gap-bottom(2); }
+          &.triple                  { @include _gap-bottom(3); }
+        }
+        .gap-left-small-tablet      { @include _gap-left;
+          &.double                  { @include _gap-left(2); }
+          &.triple                  { @include _gap-left(3); }
         }
-        ul {
-          position:static;
+        .offset-small-tablet        { @include _offset;
+          &.double                  { @include _offset(2); }
+          &.triple                  { @include _offset(3); }
+        }
+        .offset-top-small-tablet    { @include _offset-top;
+          &.double                  { @include _offset-top(2); }
+          &.triple                  { @include _offset-top(3); }
+        }
+        .offset-right-small-tablet  { @include _offset-right;
+          &.double                  { @include _offset-right(2); }
+          &.triple                  { @include _offset-right(3); }
+        }
+        .offset-bottom-small-tablet { @include _offset-bottom;
+          &.double                  { @include _offset-bottom(2); }
+          &.triple                  { @include _offset-bottom(3); }
+        }
+        .offset-left-small-tablet   { @include _offset-left;
+          &.double                  { @include _offset-left(2); }
+          &.triple                  { @include _offset-left(3); }
         }
       }
-    }
-    &.on {
-      > ul {
-        max-height:1000px;
+      @if $positioning-classes {
+        .fixed-small-tablet           { @include _fixed; }
+        .fixed-top-small-tablet       { @include _fixed(top); }
+        .fixed-right-small-tablet     { @include _fixed(right); }
+        .fixed-bottom-small-tablet    { @include _fixed(bottom); }
+        .fixed-left-small-tablet      { @include _fixed(left); }
+        .fixed-middle-small-tablet    { @include _fixed(middle); }
+        .fixed-center-small-tablet    { @include _fixed(center); }
+        .absolute-small-tablet        { @include _absolute; }
+        .absolute-top-small-tablet    { @include _absolute(top); }
+        .absolute-right-small-tablet  { @include _absolute(right); }
+        .absolute-bottom-small-tablet { @include _absolute(bottom); }
+        .absolute-left-small-tablet   { @include _absolute(left); }
+        .absolute-middle-small-tablet { @include _absolute(middle); }
+        .absolute-center-small-tablet { @include _absolute(center); }
+        .static-small-tablet          { @include _static; }
       }
-    }
-  }
-  %normal-tabs {
-    > ul {
-      li {
-        float:none;
-        width:100%;
-        margin:0;
-        a {
-          @include rounded(0);
-          border-bottom:none;
-          &:before, &:after {
-            display:none !important;
+      @if $layout-classes {
+        .inline-small-tablet          { @include _inline; }
+        .block-small-tablet           { @include _block; }
+        .clear-small-tablet           { @include _clear; }
+        .center-small-tablet          { @include _center; }
+        .pull-right-small-tablet      { @include _pull-right; }
+        .pull-left-small-tablet       { @include _pull-left; }
+        .pull-none-small-tablet       { @include _pull-none; }
+      }
+      @if $border-classes {
+        .bordered-small-tablet        { @include _bordered; }
+        .border-top-small-tablet      { @include _border-top; }
+        .border-right-small-tablet    { @include _border-right; }
+        .border-bottom-small-tablet   { @include _border-bottom; }
+        .border-left-small-tablet     { @include _border-left; }
+      }
+      @if $typography-helpers {
+        .align-top-small-tablet       { @include _align-top; }
+        .align-right-small-tablet     { @include _align-right; }
+        .align-bottom-small-tablet    { @include _align-bottom; }
+        .align-left-small-tablet      { @include _align-left; }
+        .align-center-small-tablet    { @include _align-center; }
+        .justify-small-tablet         { @include _justify; }
+        .truncate-small-tablet        { @include _truncate; }
+      }
+      @if $rotation-classes {
+        .rotate-90-small-tablet       { @include _rotate-90; }
+        .rotate-90-ctr-small-tablet   { @include _rotate-90-ctr; }
+        .rotate-180-small-tablet      { @include _rotate-180; }
+        .rotate-180-ctr-small-tablet  { @include _rotate-180-ctr; }
+        .rotate-270-small-tablet      { @include _rotate-270; }
+        .rotate-270-ctr-small-tablet  { @include _rotate-270-ctr; }
+        .rotate-360-small-tablet      { @include _rotate-360; }
+        .rotate-360-ctr-small-tablet  { @include _rotate-360-ctr; }
+      }
+      @if $multi-column-classes {
+        @for $i from 1 through length($multi-column-names) {
+          .#{nth($multi-column-names, $i)}-small-tablet, .#{nth($multi-column-names, $i)}s-small-tablet {
+            @include _multi-column($i);
           }
         }
-        &:first-child a {
-          @include rounded($default-radius $default-radius 0 0);
-        }
       }
+      @content;
     }
   }
+}
 
-  @if $nav-tags {
-    nav:not(.pagination) {
-      @extend %nav-not-pagination;
-    }
 
-    @if $nav-classes {
-      nav.inline {
-        @extend %nav-not-pagination;
-      }
-      nav.menu {
-        @extend %nav-menu-not-pagination;
-      }
-    }
-  }
-  @if $nav-classes {
-    .nav, .nav.inline {
-      @extend %nav-not-pagination;
-    }
-    .nav.menu {
-      @extend %nav-menu-not-pagination;
-    }
-  }
-  @if $tab-classes {
-    .tabs:not(.small-tablet):not(.mobile):not(.vertical) {
-      @extend %normal-tabs;
+///////////////////////
+//    small tablet   //
+///////////////////////
+
+@if $responsive {
+  @include small-tablet {
+    // do not remove -- required for small-tablet helpers
+    @if $navigation-classes {
+      @include hamburger-mode(":not(.mobile)");
     }
   }
 }

data/app/assets/stylesheets/groundworkcss/type/_all-type.scss

@@ -1,8 +1,12 @@
 // =============================================
-//       GroundworkCSS by Gary Hepting
-//          Last Updated:2013-5-3
+//           Typography & Webfonts
+//          Last Updated:2013-9-5
 // =============================================
 
 
-@import "webfonts";     // optional
-@import "typography";   // optional
+
+
+// typography & webfonts
+@import "link-type-icons";
+@import "typography";
+@import "webfonts";