groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/ui/_messages.scss

@@ -1,81 +1,125 @@
 // =============================================
-//              Message Boxes
-//          Last Updated:2013-4-24
+//               Message Boxes
+//          Last Updated:2013-8-21
 // =============================================
 
-
+$ui-classes:      true !default;
+$ui-modifiers:    "dismissible" !default;
+$ui-states:       "info"  "alert" "warning" "error" "success" "question" !default;
+$ui-icons:        "\f05a" "\f06a" "\f071"   "\f057" "\f058"   "\f059" !default;
+$radius-helpers:  "square" "round" !default;
+$size-helpers:    "small" "medium" "large" !default;
+$aria-selectors:  true !default;
+$default-radius:  4px !default;
 
 
 %message {
-  position:relative;
-  word-wrap:break-word;
-  padding:0.25em 1em;
-  background:$button-color;
-  border:1px solid $button-active;
-  color:$button-text;
-  font-weight:bold;
-  text-decoration:none;
+  @extend %relative;
+  word-wrap: break-word;
+  padding: 0.25em 1em 0.25em 2em;
+  background: $button-color;
+  color: $button-text;
+  border: 1px solid $border-color;
+  font-weight: bold;
+  text-decoration: none;
   @include rounded($default-radius);
+  &:before {
+    @include icon-FontAwesome();
+    content: $icon-info-sign;
+    position: absolute;
+    top: 50%;
+    margin-top: -0.9em;
+    left: 0;
+    padding: 0.2em 0.3em;
+    font-size: 1.2em;
+  }
 }
 
 %message-small { @include _small; }
+%message-medium { @include _medium; }
 %message-large { @include _large; }
 %message-square { @include _square; }
 %message-round { @include _round; }
 %message-disabled { @include state(disabled,normal,desaturate($button-color,20%)); }
 
 %message-info {
-  background-color:$info-background;
-  color:$info-color;
-  border-color:$info-border;
+  background-color: $info-background;
+  color: $info-color;
+  border-color: $info-border;
   &%message-disabled {
     @include state(disabled,normal,desaturate($info-color,20%));
   }
 }
 
 %message-alert {
-  background-color:$alert-background;
-  color:$alert-color;
-  border-color:$alert-border;
+  background-color: $alert-background;
+  color: $alert-color;
+  border-color: $alert-border;
+  &:before {
+    content: $icon-exclamation-sign;
+  }
   &%message-disabled {
     @include state(disabled,normal,desaturate($alert-color,20%));
   }
 }
 
 %message-warning {
-  background:$warning-background;
-  color:$warning-color;
-  border-color:$warning-border;
+  background: $warning-background;
+  color: $warning-color;
+  border-color: $warning-border;
+  &:before {
+    content: $icon-warning-sign;
+  }
   &%message-disabled {
     @include state(disabled,normal,desaturate($warning-color,20%));
   }
 }
 
 %message-error {
-  background:$error-background;
-  color:$error-color;
-  border-color:$error-border;
+  background: $error-background;
+  color: $error-color;
+  border-color: $error-border;
+  &:before {
+    content: $icon-remove-sign;
+  }
   &%message-disabled {
     @include state(disabled,normal,desaturate($error-color,20%));
   }
 }
 
 %message-success {
-  background:$success-background;
-  color:$success-color;
-  border-color:$success-border;
+  background: $success-background;
+  color: $success-color;
+  border-color: $success-border;
+  &:before {
+    content: $icon-ok-sign;
+  }
   &%message-disabled {
     @include state(disabled,normal,desaturate($success-color,20%));
   }
 }
 
+%message-question {
+  background-color: $question-background;
+  color: $question-color;
+  border-color: $question-border;
+  &:before {
+    content: $icon-question-sign;
+  }
+  &%message-disabled {
+    @include state(disabled,normal,desaturate($question-color,20%));
+  }
+}
+
 %message-dismissible {
   padding-right: 2em;
+  cursor: pointer;
   &:after {
     @include icon-FontAwesome();
-    content: "\f00d";
+    content: $icon-remove;
     position: absolute;
-    top: 0;
+    top: 50%;
+    margin-top: -0.9em;
     right: 0;
     padding: 0.2em 0.3em;
     font-size: 1.2em;
@@ -85,9 +129,9 @@
 
 @for $i from 1 through length($modifier-name) {
   %message-#{nth($modifier-name, $i)} {
-    border-color:nth($modifier-code, $i);
-    background-color:lighten(nth($modifier-code, $i), 10%);
-    color:nth($modifier-text, $i);
+    border-color: nth($modifier-code, $i);
+    background-color: lighten(nth($modifier-code, $i), 10%);
+    color: nth($modifier-text, $i);
   }
 }
 
@@ -127,7 +171,7 @@
 }
 
 @if $aria-selectors {
-  [role~=alert] {
+  [role~="alert"], [role~="status"] {
     @extend %message;
     
     @if $ui-classes {

data/app/assets/stylesheets/groundworkcss/ui/_nav.scss

@@ -0,0 +1,346 @@
+// =============================================
+//                Navigation
+//          Last Updated:2013-8-21
+// =============================================
+
+$navigation-classes:  true !default;
+$navigation-states:   "on" "active" !default;
+$nav-color:           lighten(gray, 32.5%) !default;
+$nav-text:            darken(gray, 15%) !default;
+$nav-border-color:    lighten(gray, 27.5%) !default;
+$nav-active:          lighten(gray, 27.5%) !default;
+$nav-active-text:     darken(gray, 12%) !default;
+// shared defaults
+$aria-selectors:      true !default;
+$border-thickness:    1px !default;
+$border-style:        solid !default;
+$border-color:        #dddddd !default;
+$default-radius:      4px !default;
+
+
+%navigation {
+  @extend %clear, %relative;
+  background: $nav-color;
+  color: $nav-text;
+  border: $border-thickness $border-style $nav-border-color;
+  @include rounded($default-radius);
+}
+
+%navigation-list {
+  @extend %unstyled, %zero, %clear;
+}
+
+%navigation-list-item {
+  @extend %block, %relative, %pull-left;
+}
+
+%navigation-link {
+  @extend %inline-block, %align-center, %strong;
+  background: $nav-color;
+  color: $nav-text;
+  cursor: pointer;
+  padding: 0.25em 1em;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.5;
+  @include rounded(0);
+  &:hover, &:focus {
+    @extend %navigation-link-active;
+  }
+}
+
+%hamburger-button {
+  @extend %pull-right;
+  display: none;
+  background: none;
+  color: $nav-active-text;
+  border: none !important;
+  &:hover, &:focus {
+    background: none !important;
+  }
+}
+
+%navigation-link-on, %navigation-link-active {
+  background: $nav-active;
+  color: $nav-active-text;
+  text-decoration: none;
+}
+
+%navigation-link-disabled  { @include state(disabled,normal,desaturate($nav-color,20%)); }
+
+%navigation-menu {
+  display: none;
+  position: absolute;
+  z-index: 9;
+  min-width: 100%;
+  border: $border-thickness $border-style $nav-border-color;
+  font-size: 0.9em;
+  @include rounded(0 0 $default-radius $default-radius);
+}
+
+@for $i from 1 through length($modifier-name) {
+  %navigation-#{nth($modifier-name, $i)},
+  %navigation-menu-#{nth($modifier-name, $i)} {
+    background-color: #{nth($modifier-code, $i)};
+    color: #{nth($modifier-text, $i)};
+    border-color: darken(nth($modifier-code, $i), 5%);
+  }
+  %navigation-link-#{nth($modifier-name, $i)} {
+    background-color: #{nth($modifier-code, $i)};
+    color: #{nth($modifier-text, $i)};
+    border-color: darken(nth($modifier-code, $i), 5%);
+    &.active, &:hover, &:focus {
+      background: darken(nth($modifier-code, $i), 5%);
+      border-color: darken(nth($modifier-code, $i), 10%);
+    }
+    &.disabled {
+      @include state(disabled,normal,desaturate(nth($modifier-code, $i),20%));
+    }
+  }
+}
+
+@mixin hamburger-mode($filters: "") {
+    .nav#{$filters} {
+      &:before {
+        float: left;
+        display: inline-block;
+        content: attr(title);
+        padding: 0.25em 0.5em;
+        font-weight: bold;
+      }
+      button.hamburger {
+        display: inline-block;
+        &:before {
+          @include icon-FontAwesome();
+          content: $icon-list;
+        }
+        &[aria-expanded="true"] {
+          &:before {
+            content: $icon-collapse-top;
+          }
+        }
+      }
+      > ul {
+        display: none;
+      }
+      > ul[aria-expanded="true"] {
+        display: block;
+      }
+      li {
+        float: none;
+        display: block;
+        ul {
+          position: static;
+        }
+        li {
+          a, button {
+            text-indent: $gutter;
+          }
+          li {
+            a, button {
+              text-indent: ($gutter * 2);
+            }
+          }
+        }
+        &[role="menu"] {
+          ul {
+            border: none;
+            a, button {
+              border-top: none;
+              border-bottom: $border-thickness $border-style $nav-border-color;
+            }
+          }
+          > a, > button {
+            &:after {
+              float: none;
+              content: $icon-caret-down;
+            }
+          }
+          &[aria-pressed="true"] {
+            > a, > button {
+              &:after {
+                content: $icon-caret-up;
+              }
+            }
+          }
+        }
+      }
+      a, button:not(.hamburger) {
+        display: block;
+        width: 100%;
+        text-align: left;
+        border-bottom: $border-thickness $border-style $nav-border-color;
+      }
+      @for $i from 1 through length($modifier-name) {
+        &.#{nth($modifier-name, $i)} {
+          li ul a, li[role="menu"] ul a, a,
+          li ul button, li[role="menu"] ul button, button {
+            border-top: none;
+            border-bottom: $border-thickness $border-style darken(nth($modifier-code, $i), 5%);
+            @include rounded(0);
+          }
+        }
+      }
+    }
+    > ul li:last-child {
+      a, button {
+        border-bottom: none;
+      }
+    }
+}
+
+@if $navigation-classes {
+  .no-js {
+    .nav {
+      ul {
+        li {
+          &:hover, &:focus {
+            > ul {
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+  .nav {
+    @extend %navigation;
+
+    button.hamburger {
+      @extend %hamburger-button;
+    }
+
+    // modifier colors
+    @for $i from 1 through length($modifier-name) {
+      &.#{nth($modifier-name, $i)} {
+        @extend %navigation-#{nth($modifier-name, $i)};
+        button.hamburger {
+          color: #{nth($modifier-text, $i)}
+        }
+        li[role="menu"] {
+          ul {
+            @extend %navigation-menu-#{nth($modifier-name, $i)};
+            a, button {
+              @extend %navigation-link-#{nth($modifier-name, $i)};
+            }
+          }
+          &[aria-expanded="true"] {
+            > a, > button {
+              background: darken(nth($modifier-code, $i), 5%);
+              border-color: darken(nth($modifier-code, $i), 10%);
+              color: nth($modifier-text, $i)
+            }
+          }
+        }
+        a, button {
+          @extend %navigation-link-#{nth($modifier-name, $i)};
+        }
+      }
+    }
+
+    ul {
+      @extend %navigation-list;
+    }
+
+    li {
+      @extend %navigation-list-item;
+
+      &[role="menu"] {
+        > a, > button {
+          &:after {
+            @extend %pull-right;
+            margin-left: 0.5em;
+            content: $icon-caret-down;
+            font-family: FontAwesome;
+            font-weight: normal;
+            font-style: normal;
+            text-decoration: inherit;
+            -webkit-font-smoothing: antialiased;
+          }
+        }
+        &[aria-expanded="true"] {
+          > a, > button {
+            @extend %navigation-link-active;
+          }
+        }
+      }
+
+      ul {
+        @extend %navigation-menu;
+
+        a, button {
+          @extend %align-left;
+          display: block;
+          width: 100%;
+          border-top: $border-thickness $border-style $nav-border-color;
+        }
+
+        li:first-child {
+          a, button {
+            border-top: none;
+          }
+        }
+      }
+
+      li {
+        float: none;
+        &:last-child {
+          a, button {
+            @include rounded(0 0 $default-radius $default-radius);
+          }
+        }
+
+        &[role="menu"] {
+          > a, > button {
+            &:after {
+              content: $icon-caret-right;
+            }
+          }
+        }
+
+        ul {
+          top: 0;
+          left: 100%;
+          min-width: none;
+          font-size: 1em;
+          @include rounded(0 $default-radius $default-radius $default-radius);
+
+          li {
+            &:first-child {
+              a, button {
+                @include rounded(0 $default-radius 0 0);
+              }
+            }
+            &:last-child {
+              a, button {
+                @include rounded(0 0 $default-radius $default-radius);
+              }
+            }
+          }
+        }
+      }
+
+      > ul[aria-expanded="true"] {
+        display: block;
+      }
+    }
+
+    a, a:visited, button {
+      @extend %navigation-link;
+      @for $i from 1 through length($navigation-states) {
+        &.#{nth($navigation-states, $i)} {
+          @extend %navigation-link-#{nth($navigation-states, $i)};
+        }
+      }
+    }
+    button {
+      border: none;
+    }
+  }
+}
+
+@if $aria-selectors {
+  [role~="navigation"] {
+    @extend %navigation;
+  }
+}

data/app/assets/stylesheets/groundworkcss/ui/_tables.scss

@@ -1,81 +1,125 @@
 // =============================================
 //                  Tables
-//          Last Updated:2013-6-25
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$table-tags:    true !default;
+$table-classes: true !default;
+$tables-states: "info" "alert" "warning" "error" "success" "question" !default;
 
 
 %table {
-  border:1px solid $border-color;
-  width:100%;
-  max-width:100%;
-  padding:0;
-  margin:0;
-  font-size:1em;
+  border: 1px solid $border-color;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: 1em;
 }
 
 %center-table {
   th, td {
-    text-align:center;
+    text-align: center;
   }
 }
 
 %responsive-table {
-  table-layout:fixed;
+  table-layout: fixed;
 }
 
 %table-cells {
-  padding:$gutter;
-  background:darken(white, 1%);
-  white-space:normal;
-  word-wrap:break-word;
-  text-align:left;
+  padding: $gutter;
+  background: darken(white, 1%);
+  white-space: normal;
+  word-wrap: break-word;
+  text-align: left;
 }
 
 %table-cell {
-  font-size:0.9em;
+  font-size: 0.85em;
 }
 
 %even-cells {
-  background:darken(white, 5%);
+  background: darken(white, 5%);
 }
 
 %table-head-th {
-  font-size:1.1em;
-  font-weight:bold;
+  font-size: 1em;
+  font-weight: bold;
 }
 
 %table-head-cells {
-  background:$button-color;
-  color:$button-text;
+  background: lighten(gray, 32.5%);
+  color: darken(gray, 15%);
+}
+
+%table-info {
+  %table-head-cells {
+    background: #{$info-background};
+    color: #{$info-color};
+  }
+}
+
+%table-success {
+  %table-head-cells {
+    background: #{$success-background};
+    color: #{$success-color};
+  }
+}
+
+%table-alert {
+  %table-head-cells {
+    background: #{$alert-background};
+    color: #{$alert-color};
+  }
+}
+
+%table-question {
+  %table-head-cells {
+    background: #{$question-background};
+    color: #{$question-color};
+  }
+}
+
+%table-warning {
+  %table-head-cells {
+    background: #{$warning-background};
+    color: #{$warning-color};
+  }
+}
+
+%table-error {
+  %table-head-cells {
+    background: #{$error-background};
+    color: #{$error-color};
+  }
 }
 
 @for $i from 1 through length($modifier-name) {
   %table-#{nth($modifier-name, $i)} {
     %table-head-cells {
-      background:#{nth($modifier-code, $i)};
-      color:#{nth($modifier-text, $i)};
+      background: #{nth($modifier-code, $i)};
+      color: #{nth($modifier-text, $i)};
     }
   }
 }
 
 %table-head-cell {
-  font-weight:normal;
+  font-weight: normal;
 }
 
 %table-body-th {
-  font-size:0.9em;
+  font-size: 0.95em;
 }
 
 %table-foot-th {
-  font-size:1em;
+  font-size: 0.85em;
 }
 
 %table-foot-cell {
-  background:lighten(gray, 37.5%);
-  color:darken(gray, 15%);
-  font-size:0.8em;
+  background: lighten(gray, 37.5%);
+  color: darken(gray, 15%);
+  font-size: 0.75em;
 }
 
 @if $table-tags {
@@ -132,6 +176,16 @@
       &.responsive {
         @extend %responsive-table;
       }
+      @for $i from 1 through length($modifier-name) {
+        &.#{nth($modifier-name, $i)} {
+          @extend %table-#{nth($modifier-name, $i)};
+        }
+      }
+      @for $i from 1 through length($tables-states) {
+        &.#{nth($tables-states, $i)} {
+          @extend %table-#{nth($tables-states, $i)};
+        }
+      }
       // modifier colors
       @for $i from 1 through length($modifier-name) {
         &.#{nth($modifier-name, $i)} {