groundworkcss-rails 0.2.9 → 0.2.10

data/vendor/assets/stylesheets/groundworkcss-scss/nav/_tabs.scss

@@ -0,0 +1,230 @@
+// ===================================
+//         GroundworkCSS Tabs
+// ===================================
+
+
+
+
+%tabs {
+  position:relative;
+}
+%tablist {
+  display:block;
+  width:100%;
+  margin:0;
+  padding:0;
+  list-style:none;
+  &:after {
+    content:'';
+    display:block;
+    clear:both;
+  }
+}
+%tab {
+  display:block;
+  float:left;
+  margin:0 2px;
+  &.pull-right  { float:right; }
+  &.pull-left   { float:left; }
+  &:first-child {
+    margin-left:0;
+    a, a:visited {
+      &:before {
+        display:none;
+      }
+    }
+  }
+}
+%tab-link {
+  display:block;
+  position:relative;
+  width:100%;
+  word-wrap:break-word;
+  padding:0.25em 1em;
+  background:$button-color;
+  border:1px solid $button-color;
+  color:$button-text;
+  font-weight:bold;
+  font-size:1em;
+  text-decoration:none;
+  text-align:center;
+  cursor:pointer;
+  line-height:1.5;
+  height:2em;
+  @include transition(background-color 0.25s ease-out);
+  @include rounded($radius $radius 0 0);
+  &:hover, &:focus {
+    background:$button-active;
+    border:1px solid $button-active;
+    color:$button-text;
+    text-decoration:none;
+    &:before {
+      box-shadow:2px 1px 0 $button-active;
+    }
+    &:after {
+      box-shadow:-2px 1px 0 $button-active;
+    }
+  }
+  &.active, &.active:hover, &.active:focus {
+    background:$button-active;
+    border:1px solid $button-active;
+    color:$button-text;
+    z-index:2;
+    &:before {
+      box-shadow:2px 1px 0 $button-active;
+    }
+    &:after {
+      box-shadow:-2px 1px 0 $button-active;
+    }
+  }
+  &.disabled {
+    @include state(disabled,normal,desaturate($button-color,20%));
+    border-bottom-color:lighten(desaturate($button-color,20%), 15%) !important;
+    &:before {
+      box-shadow:2px 1px 0 lighten(desaturate($button-color,20%), 15%);
+    }
+    &:after {
+      box-shadow:-2px 1px 0 lighten(desaturate($button-color,20%), 15%);
+    }
+  }
+  &:before, &:after {
+    position:absolute;
+    bottom:-1px;
+    width:6px;
+    height:6px;
+    content:'';
+  }
+  &:before {
+    left:-6px;
+    border-bottom-right-radius:6px;
+    border-width:0 1px 1px 0;
+    box-shadow:2px 1px 0 $button-color;
+  }
+  &:after {
+    right:-6px;
+    border-bottom-left-radius:6px;
+    border-width:0 0 1px 1px;
+    box-shadow:-2px 1px 0 $button-color;
+  }
+}
+%tabpanel {
+  display:none;
+  padding:$gutter * 2;
+  background:$background-color;
+  @include rounded(0 0 $radius $radius);
+  *:first-child {
+    margin-top:0;
+  }
+  *:last-child {
+    margin-bottom:0;
+  }
+  &.active {
+    display:block;
+    border:1px solid $button-active;
+  }
+}
+%vertical-tablist {
+  height:100%;
+  position:absolute;
+  width:20%;
+  background:$button-active;
+  border-bottom:1px solid $button-active;
+  @include rounded($radius 0 0 $radius);
+}
+%vertical-tabs {
+  float:none;
+  margin:0 -1px 0 0;
+  &:first-child {
+    a, a:visited {
+      @include rounded($radius 0 0 0);
+    }
+  }
+}
+%vertical-tab-link {
+  height:auto;
+  border-bottom:1px solid $button-active;
+  @include rounded(0);
+  &:before, &:after {
+    display:none !important;
+  }
+  &.active {
+    border-right:none;
+    color:$font-color;
+    background:$background-color;
+    &:hover, &:focus {
+      border-right:none;
+      color:$font-color;
+      background:$background-color;
+    }
+  }
+}
+%vertical-tabpanel {
+  position:relative;
+  left:20%;
+  width:80%;
+  @include rounded(0 $radius $radius 0);
+}
+
+@if $classes {
+  .tabs {
+    @extend %tabs;
+
+    @if $tags {
+      > ul, > ol {
+        @extend %tablist;
+        li {
+          @extend %tab;
+          a, a:visited {
+            @extend %tab-link;
+          }
+        }
+      }
+      > div {
+        @extend %tabpanel;
+      }
+      &.vertical {
+        @extend %vertical-tabs;
+        > ul, > ol {
+          @extend %vertical-tablist;
+          li {
+            @extend %vertical-tabs;
+            a, a:visited {
+              @extend %vertical-tab-link;
+            }
+          }
+        }
+        > div {
+          @extend %vertical-tabpanel;
+        }
+
+        @if $aria {
+          [role~=tablist] {
+            @extend %vertical-tablist;
+            [role~=tab] {
+              @extend %vertical-tabs;
+            }
+          }
+          [role~=tabpanel] {
+            @extend %vertical-tabpanel;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $aria {
+  [role~=tabpanel] {
+    @extend %tabs;
+    [role~=tablist] {
+      @extend %tablist;
+      background:none;
+      [role~=tab] {
+        @extend %tab;
+      }
+    }
+    [role~=tabpanel] {
+      @extend %tabpanel;
+    }
+  }
+}

data/vendor/assets/stylesheets/groundworkcss-scss/no-svg.scss

@@ -1,12 +1,14 @@
-// =============================================
-// Fallbacks for non-SVG support by Gary Hepting 
-//           Last Updated:2013-2-15
-// =============================================
+/* =============================================
+ *              No SVG Fallbacks
+ *           Last Updated:2013-2-15
+ * ===========================================*/
 
-// variables & mixins
-@import "variables";
-@import "mixins";
 
+// custom settings
+@import "settings";     // optional
+
+// core
+@import "core/all";         // required
 
 
 

data/vendor/assets/stylesheets/groundworkcss-scss/responsive/_all.scss

@@ -0,0 +1,13 @@
+// ===================================
+//            Responsive
+// ===================================
+
+
+
+
+// responsive adjustments
+@import "helpers";
+@import "desktop";
+@import "ipad";
+@import "small-tablet";
+@import "mobile";

data/vendor/assets/stylesheets/groundworkcss-scss/responsive/_desktop.scss

@@ -0,0 +1,26 @@
+// ===================================
+//             Desktop
+// ===================================
+
+
+
+
+@mixin desktop {
+  @media only screen and (min-width:1025px) {
+    // conditional helpers
+    .hide-on-desktop { display:none !important; }
+    // spacer overrides
+    .zero-desktop { @include helper_reset(); }
+    .no-padding-desktop, .no-pad-desktop { @include helper_reset(padding, $spacers: padded pad-top pad-right pad-bottom pad-left); }
+    .no-margin-desktop, .no-gap-desktop { @include helper_reset(margin, $spacers: gapped gap-top gap-right gap-bottom gap-left); }
+    @content;
+  }
+}
+
+
+///////////////////////
+//      desktop      //
+///////////////////////
+@include desktop {
+  // do not remove -- required for desktop helpers
+}

data/vendor/assets/stylesheets/groundworkcss-scss/responsive/_helpers.scss

@@ -0,0 +1,16 @@
+///////////////////////
+//    conditionals   //
+///////////////////////
+
+// desktop helpers
+.desktop-only { display:block; }
+.hide-on-desktop {}
+// ipad helpers
+.ipad-only { display:none; }
+.hide-on-ipad {}
+// small tablet helpers
+.small-tablet-only { display:none; }
+.hide-on-small-tablet {}
+// mobile helpers
+.mobile-only { display:none; }
+.hide-on-mobile {}

data/vendor/assets/stylesheets/groundworkcss-scss/responsive/_ipad.scss

@@ -0,0 +1,28 @@
+// ===================================
+//               iPad
+// ===================================
+
+
+
+
+@mixin ipad {
+  @media only screen and (min-width:768px) and (max-width:1024px) {
+    // conditional helpers
+    .ipad-only { display:inline-block !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); }
+    @content;
+  }
+}
+
+
+///////////////////////
+//       ipad        //
+///////////////////////
+@include ipad {
+  // do not remove -- required for ipad helpers
+}

data/vendor/assets/stylesheets/groundworkcss-scss/responsive/_mobile.scss

@@ -0,0 +1,44 @@
+// ===================================
+//               Mobile
+// ===================================
+
+
+
+
+@mixin mobile {
+  @media only screen and (max-width:480px) {
+    // responsive grid
+    @include grid-responsive(false);
+    // conditional helpers
+    .mobile-only { display:inline-block !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); }
+    @content;
+  }
+}
+
+
+///////////////////////
+//      mobile       //
+///////////////////////
+@include mobile {
+  .tabs:not(.mobile) {
+    > ul {
+      li {
+        float:none;
+        width:100%;
+        a {
+          @include rounded(0);
+          border-bottom:none;
+        }
+        &:first-child a {
+          @include rounded($radius $radius 0 0);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,196 @@
+// ===================================
+//            Small Tablet
+// ===================================
+
+
+
+
+@mixin small-tablet {
+  @media only screen and (max-width:767px) {
+    // responsive grid
+    @include grid-responsive();
+    // conditional helpers
+    .small-tablet-only { display:inline-block !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); }
+    @content;
+  }
+}
+
+
+///////////////////////
+//    small tablet   //
+///////////////////////
+@include small-tablet {
+  %nav-not-pagination {
+    width:100%;
+    ul, ul.row {
+      li {
+        display:block;
+        width:100% !important;
+        &:first-child {
+          > a, > a:visited {
+            @include rounded($radius $radius 0 0);
+          }
+        }
+        &:last-child {
+          > a, > a:visited {
+            @include rounded(0 0 $radius $radius);
+          }
+        }
+        &:only-child {
+          > a, > a:visited {
+            @include rounded($radius);
+          }
+        }
+        a, a:visited {
+          border:none;
+          border-top:1px solid $button-active !important;
+        }
+        ul {
+          position:static !important;
+          li {
+            a, a:visited {
+              @include rounded(0);
+            }
+            &:first-child,
+            &:last-child,
+            &:only-child {
+              a, a:visited {
+                @include rounded(0);
+              }
+            }
+          }
+        }
+        &:first-child {
+          a, a:visited {
+            @include rounded($radius $radius 0 0);
+          }
+        }
+        &:last-child {
+          a, a:visited {
+            @include rounded(0 0 $radius $radius);
+          }
+          ul {
+            li {
+              &:last-child {
+                a, a:visited {
+                  @include rounded(0 0 $radius $radius);
+                }
+              }
+            }
+          }
+        }
+        &:only-child {
+          a, a:visited {
+            @include rounded($radius);
+          }
+        }
+      }
+    }
+  }
+  // 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($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, a:visited {
+          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;
+          }
+        }
+        &:last-child {
+          a, a:visited {
+            @include rounded(0 0 $radius $radius !important);
+          }
+        }
+        ul {
+          position:static;
+        }
+      }
+    }
+    &.on {
+      > ul {
+        max-height:1000px;
+      }
+    }
+  }
+  %normal-tabs {
+    > ul {
+      li {
+        float:none;
+        width:100%;
+        margin:0;
+        a {
+          @include rounded(0);
+          border-bottom:none;
+          &:before, &:after {
+            display:none !important;
+          }
+        }
+        &:first-child a {
+          @include rounded($radius $radius 0 0);
+        }
+      }
+    }
+  }
+
+  @if $tags {
+    nav:not(.pagination) {
+      @extend %nav-not-pagination;
+    }
+
+    @if $classes {
+      nav.inline {
+        @extend %nav-not-pagination;
+      }
+      nav.menu {
+        @extend %nav-menu-not-pagination;
+      }
+    }
+  }
+  @if $classes {
+    .nav, .nav.inline {
+      @extend %nav-not-pagination;
+    }
+    .nav.menu {
+      @extend %nav-menu-not-pagination;
+    }
+    .tabs:not(.small-tablet):not(.mobile):not(.vertical) {
+      @extend %normal-tabs;
+    }
+  }
+}