groundworkcss 0.4.4 → 2.0.0

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

@@ -0,0 +1,102 @@
+// =============================================
+//               Content Boxes
+//          Last Updated:2013-8-24
+// =============================================
+
+$ui-classes:      true !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;
+$default-radius:  4px !default;
+
+%box {
+  @extend %relative, %padded;
+  background: $button-color;
+  color: $button-text;
+  border: 1px solid $border-color;
+  @include rounded($default-radius);
+  %links {
+    color: inherit;
+  }
+}
+
+%box-small { @include _small; }
+%box-medium { @include _medium; }
+%box-large { @include _large; }
+%box-square { @include _square; }
+%box-round { @include _round; }
+
+%box-info {
+  background-color: $info-background;
+  color: $info-color;
+  border-color: $info-border;
+}
+
+%box-question {
+  background-color: $question-background;
+  color: $question-color;
+  border-color: $question-border;
+}
+
+%box-alert {
+  background-color: $alert-background;
+  color: $alert-color;
+  border-color: $alert-border;
+}
+
+%box-warning {
+  background: $warning-background;
+  color: $warning-color;
+  border-color: $warning-border;
+}
+
+%box-error {
+  background: $error-background;
+  color: $error-color;
+  border-color: $error-border;
+}
+
+%box-success {
+  background: $success-background;
+  color: $success-color;
+  border-color: $success-border;
+}
+
+@for $i from 1 through length($modifier-name) {
+  %box-#{nth($modifier-name, $i)} {
+    border-color: nth($modifier-code, $i);
+    background-color: lighten(nth($modifier-code, $i), 10%);
+    color: nth($modifier-text, $i);
+  }
+}
+
+@mixin box-modifiers() {
+  @for $i from 1 through length($ui-states) {
+    &.#{nth($ui-states, $i)} {
+      @extend %box-#{nth($ui-states, $i)};
+    }
+  }
+  @for $i from 1 through length($radius-helpers) {
+    &.#{nth($radius-helpers, $i)} {
+      @extend %box-#{nth($radius-helpers, $i)};
+    }
+  }
+  @for $i from 1 through length($size-helpers) {
+    &.#{nth($size-helpers, $i)} {
+      @extend %box-#{nth($size-helpers, $i)};
+    }
+  }
+  @for $i from 1 through length($modifier-name) {
+    &.#{nth($modifier-name, $i)} {
+      @extend %box-#{nth($modifier-name, $i)};
+    }
+  }
+}
+
+@if $ui-classes {
+  .box {
+    @extend %box;
+    @include box-modifiers;
+  }
+}

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

@@ -0,0 +1,389 @@
+// =============================================
+//                  Buttons
+//          Last Updated:2013-9-6
+// =============================================
+
+$button-tags:         true !default;
+$button-classes:      true !default;
+$button-modifiers:    "small" "large" "on" "active" "square" "round" "block" !default;
+$button-states:       "on" "active" "selected" "pressed" "disabled" "info" "alert" "warning" "error" "success" "question" !default;
+$aria-selectors:      true !default;
+$aria-states:         "selected" "pressed" "disabled" "readonly" "invalid" !default;
+$button-color:        lighten(gray, 32.5%) !default;
+$button-text:         darken(gray, 15%) !default;
+$button-border-color: lighten(gray, 27.5%) !default;
+$button-active:       lighten(gray, 27.5%) !default;
+$button-active-text:  darken(gray, 12%) !default;
+// shared defaults
+$border-thickness:    1px !default;
+$border-style:        solid !default;
+$border-color:        #dddddd !default;
+$default-radius:      4px !default;
+$disabled-color:      #808080 !default;
+$disabled-text:       #dddddd !default;
+$disabled-background: lighten($disabled-color, 20%) !default;
+$disabled-border:     darken($disabled-color, 10%) !default;
+
+
+%button {
+  @extend %inline-block;
+  word-wrap: break-word;
+  padding: 0.25em 1em;
+  background: $button-color;
+  border: $border-thickness $border-style $button-active;
+  color: $button-text;
+  @include font-stack();
+  font-weight: bold;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.5;
+  width: auto;
+  height: auto;
+  text-align: center;
+  @include transition(background-color 0.25s ease-out);
+  @include rounded($default-radius);
+  &:visited {
+    color: $button-text;
+  }
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    @extend %button-active;
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,$disabled-background);
+    &:hover, &:focus {
+      @include state(disabled,normal,$disabled-background);
+    }
+  }
+}
+
+%button-on, %button-active, %button-selected, %button-pressed {
+  background: $button-active;
+  text-decoration: none;
+  color: $button-active-text;
+}
+
+%button-small     { @include _small; }
+%button-medium    { @include _medium; }
+%button-large     { @include _large; }
+%button-square    { @include _square; }
+%button-round     { @include _round; }
+
+@for $i from 1 through length($modifier-name) {
+  %button-#{nth($modifier-name, $i)} {
+    background-color: #{nth($modifier-code, $i)};
+    color: #{nth($modifier-text, $i)};
+    border-color: darken(nth($modifier-code, $i), 5%);
+    &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+      background: darken(nth($modifier-code, $i), 5%);
+      border-color: darken(nth($modifier-code, $i), 10%);
+    }
+    &.disabled, &[disabled="disabled"] {
+      @include state(disabled,normal,desaturate(nth($modifier-code, $i),20%));
+    }
+  }
+}
+
+%button-info {
+  background-color: darken($info-background, 40%);
+  color: $info-text;
+  border-color: darken($info-border, 40%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($info-background, 49%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,desaturate($info-color,20%));
+  }
+}
+
+%button-disabled, %button-readonly {
+  background-color: darken($disabled-background, 40%);
+  color: $disabled-text;
+  border-color: darken($disabled-border, 40%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($disabled-background, 49%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,$disabled-background);
+  }
+}
+
+%button-alert {
+  background-color: darken($alert-background, 40%);
+  color: $alert-text;
+  border-color: darken($alert-border, 25%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($alert-background, 45%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,desaturate($alert-color,20%));
+  }
+}
+
+%button-warning {
+  background-color: darken($warning-background, 40%);
+  color: $warning-text;
+  border-color: darken($warning-border, 40%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($warning-background, 45%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,desaturate($warning-color,20%));
+  }
+}
+
+%button-error, %button-invalid {
+  background-color: darken($error-background, 40%);
+  color: $error-text;
+  border-color: darken($error-border, 40%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($error-background, 49%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,desaturate($error-color,20%));
+  }
+}
+
+%button-success {
+  background-color: darken($success-background, 40%);
+  color: $success-text;
+  border-color: darken($success-border, 40%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($success-background, 49%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,desaturate($success-color,20%));
+  }
+}
+
+%button-question {
+  background-color: darken($question-background, 40%);
+  color: $question-text;
+  border-color: darken($question-border, 40%);
+  &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+    background: darken($question-background, 49%);
+  }
+  &.disabled, &[disabled="disabled"] {
+    @include state(disabled,normal,desaturate($question-color,20%));
+  }
+}
+
+%button-block {
+  @extend %block;
+  width: 100%;
+}
+
+%dropdown-holder {
+  position: relative;
+  @extend %inline-block;
+}
+
+%dropdown-button {
+  &:after {
+    @extend %inline-block, %gap-left;
+    @include icon-FontAwesome();
+    content: $icon-caret-down;
+  }
+}
+
+%dropdown-list {
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: none;
+  background: white;
+  border: $border-thickness $border-style $border-color;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  @include box-shadow(rgba(0,0,0,0.25), 5px, 0, 0);
+  @include rounded(0 0 $default-radius $default-radius);
+}
+
+%dropdown-list-item {
+  @extend %block;
+  %dropdown-menu-item {
+    @extend %block;
+    width: 100%;
+    padding: 0.5em 1em;
+    border: none;
+    background: none;
+    color: $font-color;
+    font-size: 1em;
+    font-weight: normal;
+    text-shadow: none;
+    text-decoration: none;
+    text-align: left;
+    @include rounded(0);
+    &:hover, &:focus {
+      background: #efefef;
+    }
+    &.disabled, &[disabled="disabled"] {
+      @include state(disabled,textOnly);
+    }
+  }
+  &:last-child {
+    @include rounded(0 0 $default-radius $default-radius);
+  }
+}
+
+%dropdown-divider {
+  margin: 0;
+  border-color: #ececec;
+}
+
+%button-group {
+  @extend %zero, %unstyled;
+  &:after {
+    @extend %block, %clear;
+    content: "";
+  }
+  li {
+    @extend %block;
+    float: left;
+    margin: 0;
+    &:first-child a, &:first-child button {
+      @include rounded($default-radius 0 0 $default-radius);
+    }
+    &:last-child a, &:last-child button {
+      @include rounded(0 $default-radius $default-radius 0);
+    }
+    a, button {
+      @extend %block;
+      word-wrap: break-word;
+      padding: 0.25em 1em;
+      background: $button-color;
+      border: $border-thickness $border-style $button-active;
+      color: $button-text;
+      font-weight: bold;
+      text-decoration: none;
+      cursor: pointer;
+      line-height: 1.5;
+      @include rounded(0);
+      @include transition(background-color 0.25s ease-out);
+      &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+        background: $button-active;
+        text-decoration: none;
+        // color: $button-active-text;
+        border: $border-thickness $border-style $button-active;
+      }
+      &.disabled, &[disabled="disabled"] {
+        @include state(disabled,normal,$disabled-background);
+      }
+    }
+  }
+}
+
+@mixin button_modifiers() {
+  @for $i from 1 through length($button-modifiers) {
+    &.#{nth($button-modifiers, $i)} {
+      @extend %button-#{nth($button-modifiers, $i)};
+    }
+  }
+  @for $i from 1 through length($button-states) {
+    &.#{nth($button-states, $i)} {
+      @extend %button-#{nth($button-states, $i)};
+    }
+  }
+  // modifier colors
+  @for $i from 1 through length($modifier-name) {
+    &.#{nth($modifier-name, $i)} {
+      @extend %button-#{nth($modifier-name, $i)};
+    }
+  }
+}
+
+@if $button-tags {
+  button,
+  input[type=submit],
+  input[type=button],
+  input[type=reset] {
+    @extend %button;
+
+    @if $button-classes {
+      @include button_modifiers;
+    }
+  }
+
+  .dropdown {
+    @extend %dropdown-holder;
+    &.on, &.active, &[aria-selected="true"], &[aria-pressed="true"] {
+      ul {
+       @extend %block;
+      }
+    }
+    > a, > button {
+      @extend %dropdown-button;
+    }
+    ul {
+      @extend %dropdown-list;
+      li {
+        @extend %dropdown-list-item;
+        a, button {
+          @extend %dropdown-menu-item;
+        }
+      }
+    }
+    hr {
+      @extend %dropdown-divider;
+    }
+  }
+}
+
+@if $button-classes {
+  .button,
+  a.button,
+  a.button:visited {
+    @extend %button;
+    @include button_modifiers;
+  }
+  .dropdown {
+    @extend %dropdown-holder;
+    &.on, &.active, &[aria-selected="true"], &[aria-pressed="true"] {
+      ul {
+       @extend %block;
+      }
+    }
+    .button {
+      @extend %dropdown-button;
+    }
+    ul {
+      @extend %dropdown-list;
+      li {
+        @extend %dropdown-list-item;
+          a, button {
+          @extend %dropdown-menu-item;
+        }
+      }
+    }
+    hr {
+      @extend %dropdown-divider; 
+    }
+  }
+  ul.button-group,
+  ol.button-group {
+    @extend %button-group;
+    li {
+      a, button {
+        @include button_modifiers;
+      }
+    }
+  }
+}
+
+@if $aria-selectors {
+  [role~="button"] {
+    @extend %button;
+
+    @for $i from 1 through length($aria-states) {
+      &[aria-#{nth($aria-states, $i)}] {
+        @extend %button-#{nth($aria-states, $i)};
+      }
+    }
+
+    @if $button-classes {
+      @include button_modifiers;
+    }
+  }
+}

data/app/assets/stylesheets/groundworkcss/{form → ui}/_forms.scss

@@ -1,20 +1,45 @@
 // =============================================
 //                   Forms
-//          Last Updated:2013-4-24
+//          Last Updated:2013-8-21
 // =============================================
 
+$form-tags:       true !default;
+$form-classes:    false !default;
+$form-elements:   "fieldset" "legend" "label" "input" "textarea" !default;
+$default-radius:  4px !default;
 
+$fieldset-color:  darken(white, 2%) !default;
+
+$border-thickness:    1px !default;
+$border-style:        solid !default;
+$border-color:        #dddddd !default;
+
+$error-color:         #b94a48 !default;
+$error-text:          #ffffff !default;
+$error-background:    #f2dede !default;
+$error-border:        #eed3d7 !default;
+
+$success-color:       #468847 !default;
+$success-text:        #ffffff !default;
+$success-background:  #dff0d8 !default;
+$success-border:      #d6e9c6 !default;
+
+$question-color:      #9855b4 !default;
+$question-text:       #ffffff !default;
+$question-background: #f0e6f4 !default;
+$question-border:     #f1dbfa !default;
 
 
 %fieldset {
+  background-color: $fieldset-color;
   border:1px solid $border-color;
   padding:$gutter;
+  @include rounded($default-radius);
 }
 
 %legend {
-  font-weight:900;
-  color:darken($background-color, 35%);
-  margin-bottom:0;
+  font-weight: 900;
+  margin-bottom: 0;
 }
 
 %label {
@@ -46,12 +71,12 @@
     height:auto;
   }
   &[type=checkbox], &[type=radio] {
-    display:inline-block;
-    width:1em;
-    height:1em;
-    margin:0 0 0 0.2em;
-    background:white;
-    border:1px solid $border-color;
+    @extend %inline-block;
+    width: 1em;
+    height: 1em;
+    margin: 0 0 0 0.2em;
+    background: white;
+    border: $border-thickness $border-style $border-color;
     @include rounded($default-radius);
   }
 }
@@ -67,7 +92,7 @@
 }
 
 %error-block-prefix, %error-block-suffix {
-  color:lighten($error-color, 62%);;
+  color:lighten($error-color, 62%);
   background:$error-color;
   border-color:$error-color;
 }
@@ -79,17 +104,11 @@
 }
 
 %success-block-prefix, %success-block-suffix {
-  color:lighten($success-color, 62%);;
+  color:lighten($success-color, 62%);
   background:$success-color;
   border-color:$success-color;
 }
 
-%radio-list {
-  list-style:none;
-  margin:0;
-  padding:0;
-}
-
 %prefix, %suffix {
   display:block;
   position:relative;
@@ -146,18 +165,18 @@
 }
 
 @if $form-tags {
-	@for $i from 1 through length($form-elements) {
-		$element: nth($form-elements, $i);
-		#{$element} {
-			@extend %#{$element};
-			@if $element == input or $element == textarea {
-				@extend %field;
-			}
-			@if $element == textarea {
-				@extend %textarea;
-			}
-		}
-	}
+  @for $i from 1 through length($form-elements) {
+    $element: nth($form-elements, $i);
+    #{$element} {
+      @extend %#{$element};
+      @if $element == input or $element == textarea {
+        @extend %field;
+      }
+      @if $element == textarea {
+        @extend %textarea;
+      }
+    }
+  }
   select {
     @extend %field;
   }
@@ -179,7 +198,4 @@
   .input, .select, .textarea {
     @extend %field;
   }
-  .radio-list {
-    @extend %radio-list;
-  }
 }