groundworkcss 0.2.2

data/vendor/assets/stylesheets/groundworkcss/nav/_navigation.scss

@@ -0,0 +1,400 @@
+// ===================================
+//             Navigation
+// ===================================
+
+
+
+
+%menu-closed {
+  display:none;
+}
+%menu-open {
+  display:block;
+  @include filter-shadow(rgba(0,0,0,0.25), 5px, 0, 0); // color, blur, x, y
+}
+
+%nav {
+  @extend %clear;
+  &:not(.inline):not(.pagination) {
+    > ul:not(.row) {
+      display:inline-block;
+    }
+  } 
+  ul {
+    display:block;
+    list-style:none;
+    margin:0;
+    padding:0;
+    li {
+      display:block;
+      position:relative;
+      a, a:visited {
+        display:block;
+        width:100%;
+        word-wrap:break-word;
+        padding:0.25em 1em;
+        background:$button-color;
+        border-top:1px solid $button-active;
+        color:$button-text;
+        font-weight:bold;
+        font-size:1em;
+        text-decoration:none;
+        cursor:pointer;
+        line-height:1.5;
+        @include transition(background-color 0.25s ease-out);
+        &:hover, &:focus {
+          background:$button-active;
+          color:$button-text;
+          text-decoration:none;
+        }
+        &.active {
+          &:hover, &:focus {
+            background:$button-active;
+          }
+        }
+        &.disabled {
+          @include state(disabled,normal,desaturate($button-color,20%));
+        }
+      }
+      &:first-child {
+        a {
+          border-top:none;
+        }
+      }
+      &.menu {
+        &.disabled {
+          > a, > a:visited {
+            @include state(disabled,normal,desaturate($button-color,20%));
+          }
+        }
+        > a {
+          &:after {
+            content:'\f0d7';
+            display:inline-block;
+            width:1.1em;
+            margin-left:0.25em;
+            font-family:FontAwesome;
+            font-weight:normal;
+            font-style:normal;
+            font-size:1.1em;
+            text-decoration:inherit;
+            -webkit-font-smoothing:antialiased;
+            line-height:normal;
+            vertical-align:baseline;
+            background-image:none;
+            background-position:0% 0%;
+            background-repeat:repeat;
+            margin-top:0;
+          }
+        }
+        &.on {
+          > a, > a:visited {
+            background:$button-active;
+            text-decoration:none;
+          }
+          > ul {
+            @extend %menu-open;
+          }
+        }
+      }
+      &:first-child {
+        a {
+          @include rounded($radius $radius 0 0);
+        }
+      }
+      &:last-child {
+        a {
+          @include rounded(0 0 $radius $radius);
+        }
+      }
+      &:only-child {
+        a {
+          @include rounded($radius);
+        }
+      }
+    }
+    ul {
+      @extend %menu-closed;
+      position:absolute;
+      left:100%;
+      top:0;
+      width:auto;
+      z-index:101;
+      li {
+        a, a:visited {
+          @include rounded(0);
+          border:none;
+          border-top:1px solid $button-color;
+          background:lighten($button-color, 5%);
+          &:hover {
+            background:lighten($button-active, 5%);
+          }
+          &.disabled {
+            @include state(disabled,normal,desaturate(lighten($button-color, 5%),20%));
+          }
+        }
+        &:first-child {
+          a {
+            border-top:none;
+            @include rounded(0 $radius 0 0);
+          }
+        }
+        &:last-child {
+          a {
+            @include rounded(0 0 $radius $radius);
+          }
+        }
+        &:only-child {
+          a {
+            @include rounded(0 $radius $radius 0);
+          }
+        }
+      }
+    }
+    // horizontal grid navigation
+    &.row {
+      li {
+        a  {
+          border-left:1px solid $button-active;
+          border-top:none;
+          @include rounded(0);
+        }
+        &:first-child {
+          a {
+            border-left:none;
+            @include rounded($radius 0 0 $radius);
+          }
+        }
+        &:last-child {
+          a {
+            @include rounded(0 $radius $radius 0);
+          }
+        }
+        &:only-child {
+          a {
+            @include rounded($radius);
+          }
+        }
+      }
+      ul {
+        @extend %menu-closed;
+        position:absolute;
+        left:auto;
+        top:auto;
+        min-width:100%;
+        z-index:101;
+        li {
+          a {
+            @include rounded(0);
+            border-left:none;
+            border-top:1px solid $button-active;
+          }
+          &:first-child {
+            a {
+              @include rounded(0);
+            }
+          }
+          &:last-child {
+            a {
+              @include rounded(0 0 $radius $radius);
+            }
+          }
+        }
+      }
+    }
+  }
+  // horizontal inline navigation
+  &.inline {
+    width:auto;
+    ul {
+      font-size:0;
+      li {
+        font-size:$base-font-size;
+        display:inline-block;
+        white-space-collapse:discard;
+        float:none;
+        a {
+          border-left:1px solid $button-active;
+          border-top:none;
+        }
+        &:first-child {
+          a {
+            border-left:none;
+            @include rounded($radius 0 0 $radius);
+          }
+        }
+        &:last-child {
+          a {
+            @include rounded(0 $radius $radius 0);
+          }
+        }
+        &:only-child {
+          a {
+            @include rounded($radius);
+          }
+        }
+        ul {
+          @extend %menu-closed;
+          // display:none;
+          position:absolute;
+          left:auto;
+          top:auto;
+          min-width:100%;
+          z-index:101;
+          li {
+            display:block;
+            a {
+              @include rounded(0);
+              border-left:none;
+              border-top:1px solid $button-active;
+            }
+            &:first-child {
+              a {
+                @include rounded(0);
+              }
+            }
+            &:last-child {
+              a {
+                @include rounded(0 0 $radius $radius);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // hamburger menu
+  &.menu {
+    .menu-toggle {
+      @extend %button;
+      display:none;
+    }
+  }
+}
+// pagination
+%pagination {
+  ul {
+    margin:10px auto;
+    display:block;
+    list-style-type:none;
+    li {
+      display:inline-block;
+      @include rounded($radius);
+      padding:0 3px 0 2px;
+      min-width:29px;
+      a, a:visited {
+        display:inline-block;
+        width:100%;
+        background:$button-color;
+        font-size:1em;
+        line-height:1.5;
+        font-weight:bold;
+        color:$button-text;
+        text-decoration:none;
+        text-align:center;
+        padding:0 3px;
+        @include rounded($radius);
+        &:hover, &:focus {
+          background:$button-active;
+          color:$button-text;
+        }
+        &.disabled {
+          @include state(disabled,normal,desaturate($button-color,20%));
+        }
+      }
+      &.active {
+        a {
+          @include state(disabled,normal,desaturate($button-color,20%));
+        }
+      }
+      &.prev, &.next {
+        a, a:visited {
+          padding:0 4px;
+          background:$button-color;
+          color:#fff;
+          &:hover, &:focus {
+            background:$button-active;
+          }
+        }
+      }
+      &.disabled {
+        a {
+          @include state(disabled,normal,desaturate($button-color,20%));
+        }
+      }
+      &:first-child {
+        a {
+          @include rounded($radius);
+        }
+      }
+      &:last-child {
+        a {
+          @include rounded($radius);
+        }
+      }
+    }
+  }
+}
+.no-js {
+  %nav {
+    ul {
+      li.menu {
+        ul {
+          @extend %menu-open;
+          display:none;
+        }
+        &:hover, &:focus {
+          ul {
+            display:block !important;
+          }
+        }
+      }
+    }
+  }
+}
+%breadcrumbs {
+  list-style:none;
+  margin:0;
+  padding:0;
+  font-size:0.8em;
+  li {
+    display:inline-block;
+    padding:0.2em 0;
+    a, a:visited {
+      border:none;
+      color:gray;
+      &:before {
+        content:'>';
+        display:inline-block;
+        margin:0 0.5em;
+        color:gray !important;
+      }
+      &:hover, &:focus {
+        color:$link-color;
+      }
+    }
+    &:first-child a {
+      &:before {
+        display:none;
+      }
+    }
+  }
+}
+
+@if $tags {
+  nav {
+    @extend %nav;
+  }
+}
+
+@if $classes {
+  .nav {
+    @extend %nav;
+  }
+  .pagination {
+    @extend %pagination;
+  }
+  .breadcrumbs {
+    @extend %breadcrumbs;
+  }
+}

data/vendor/assets/stylesheets/groundworkcss/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  {
+      &: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  {
+      @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;
+    }
+  }
+}