groundworkcss-rails 0.2.9 → 0.2.10

data/vendor/assets/stylesheets/groundworkcss-scss/groundwork-ie.scss

@@ -1,12 +1,14 @@
-@import "compass";
-// =============================================
-//         IE hacks by Gary Hepting 
-//          Last Updated:2013-2-2
-// =============================================
+/* =============================================
+ *                 IE hacks
+ *          Last Updated:2013-4-24
+ * ===========================================*/
 
-// variables & mixins
-@import "variables";
-@import "mixins";
+
+// custom settings
+@import "settings";     // optional
+
+// core
+@import "core/all";         // required
 
 
 

data/vendor/assets/stylesheets/groundworkcss-scss/groundwork.scss

@@ -1,42 +1,22 @@
 /* =============================================
  *       GroundworkCSS by Gary Hepting
- *          Last Updated:2013-3-30
+ *          Last Updated:2013-4-24
  * ===========================================*/
 
-// variables & mixins
-@import "variables";
-@import "mixins";
 
-// set the stage
-@import "reset";
-@import "global";
+// custom settings
+@import "settings";         // customizable settings
 
-// webfonts
-@import "webfonts";
-
-// grid
-@import "grid";
+// core (required)
+@import "core/all";         // constants, defaults, mixins
+@import "base/all";         // reset, globals, grid, helpers, animations
 
 // components
-@import "typography";
-@import "buttons";
-@import "forms";
-@import "navigation";
-@import "tabs";
-@import "ui-elements";
-@import "tables";
-@import "font-awesome";
-@import "social-icons";
-@import "tooltips";
-// @import "popovers";
-@import "modals";
-@import "tiles";
-
-// CSS animations (required by helpers)
-@import "animations";
-
-// helper classes
-@import "helpers";
+@import "type/all";         // typography, font awesome, web fonts
+@import "nav/all";          // buttons, navigation, tabs
+@import "ui/all";           // messages, callouts, tables, tooltips, popovers, modals
+@import "form/all";         // forms, tiles
+@import "misc/all";         // social icons
 
 // responsive adjustments
-@import "responsive";
+@import "responsive/all";   // responsive navigation, tabs

data/vendor/assets/stylesheets/groundworkcss-scss/{_popovers.scss → misc/_all.scss}

@@ -1,10 +1,9 @@
 // ===================================
-//              Popovers
+//               Misc
 // ===================================
 
 
 
 
-.popover {
-
-}
+// misc components
+@import "social-icons";

data/vendor/assets/stylesheets/groundworkcss-scss/{_social-icons.scss → misc/_social-icons.scss}

@@ -35,6 +35,10 @@
   &.round {
     @include rounded(50% 50%);
   }
+  &.disabled {
+    -webkit-filter:grayscale(100%);
+    filter:grayscale(100%);
+  }
   &.aboutme       { @include data-image("social-icons/aboutme.svg"); }
   &.adn           { @include data-image("social-icons/adn.svg"); }
   &.android       { @include data-image("social-icons/android.svg"); }

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

@@ -0,0 +1,11 @@
+// ===================================
+//            Navigation
+// ===================================
+
+
+
+
+// navigation components
+@import "buttons";      // optional (required by navigation)
+@import "navigation";   // optional
+@import "tabs";         // optional

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

@@ -0,0 +1,328 @@
+// =============================================
+//                  Buttons
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
+%button {
+  display:inline-block;
+  word-wrap:break-word;
+  padding:0.25em 1em;
+  background:$button-color;
+  border:1px solid $button-active;
+  color:$button-text;
+  font-family:$font-family;
+  font-weight:bold;
+  // font-size:1em;
+  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($radius);
+  &:hover, &:focus {
+    background:$button-active;
+    text-decoration:none;
+    color:$button-active-text;
+  }
+}
+
+%button-on {
+  background:$button-active;
+  text-decoration:none;
+  color:$button-active-text;
+}
+
+%button-active, %button-active:hover, %button-active:focus {
+  background:$button-active;
+  color:$button-active-text;
+}
+
+%button-small     { @extend %small; }
+%button-large     { @extend %large; }
+%button-square    { @extend %square; }
+%button-round     { @extend %round; }
+%button-disabled  { @include state(disabled,normal,desaturate($button-color,20%)); }
+
+@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, &:hover, &:focus {
+      background:darken(nth($modifier-code, $i), 5%);
+      border-color:darken(nth($modifier-code, $i), 10%);
+    }
+    &%button-disabled {
+      @include state(disabled,normal,desaturate(nth($modifier-code, $i),20%));
+    }
+  }
+}
+
+%button-info {
+  background-color:darken($info-background, 40%);
+  color:$button-text;
+  border-color:darken($info-border, 40%);
+  &%active, &:hover, &:focus {
+    background:darken($info-background, 49%);
+  }
+  &%button-disabled {
+    @include state(disabled,normal,desaturate($info-color,20%));
+  }
+}
+
+%button-alert {
+  background-color:darken($alert-background, 40%);
+  color:$button-text;
+  border-color:darken($alert-border, 25%);
+  &%active, &:hover, &:focus {
+    background:darken($alert-background, 45%);
+  }
+  &%button-disabled {
+    @include state(disabled,normal,desaturate($alert-color,20%));
+  }
+}
+
+%button-warning {
+  background-color:darken($warning-background, 40%);
+  color:$button-text;
+  border-color:darken($warning-border, 40%);
+  &%active, &:hover, &:focus {
+    background:darken($warning-background, 45%);
+  }
+  &%button-disabled {
+    @include state(disabled,normal,desaturate($warning-color,20%));
+  }
+}
+
+%button-error {
+  background-color:darken($error-background, 40%);
+  color:$button-text;
+  border-color:darken($error-border, 40%);
+  &%active, &:hover, &:focus {
+    background:darken($error-background, 49%);
+  }
+  &%button-disabled {
+    @include state(disabled,normal,desaturate($error-color,20%));
+  }
+}
+
+%button-success {
+  background-color:darken($success-background, 40%);
+  color:$button-text;
+  border-color:darken($success-border, 40%);
+  &%active, &:hover, &:focus {
+    background:darken($success-background, 49%);
+  }
+  &%button-disabled {
+    @include state(disabled,normal,desaturate($success-color,20%));
+  }
+}
+
+%button-block {
+  display:block;
+  width:100%;
+}
+
+%dropdown-button {
+  position:relative;
+  padding-right:2em;
+  &:after {
+    content:'...';
+    position:absolute;
+    right:1em;
+    bottom:0.25em;
+  }
+}
+
+%dropdown-list {
+  text-align:left;
+  margin:0.3em 0 0;
+  padding:0;
+  list-style:none;
+  display:none;
+  background:white;
+  border:1px solid $border-color;
+  position:absolute;
+  left:0;
+  width:100%;
+  z-index:10;
+  // font-size:0.9em;
+  @include rounded(0 0 $radius $radius);
+}
+
+%dropdown-list-item {
+  display:block;
+  %dropdown-menu-item {
+    display:block;
+    padding:0.5em 1em;
+    border:none;
+    color:$font-color;
+    text-shadow:none;
+    text-decoration:none;
+    &:hover, &:focus {
+      background:#efefef;
+    }
+    &%disabled {
+      @include state(disabled,textOnly);
+    }
+  }
+  &:last-child {
+    @include rounded(0 0 $radius $radius);
+  }
+}
+
+%dropdown-divider {
+  margin:0;
+  border-color:#ececec;
+}
+
+%button-list {
+  list-style:none;
+  margin:0;
+  padding:0;
+  &:after {
+    content:'';
+    display:block;
+    clear:both;
+  }
+  li {
+    display:block;
+    float:left;
+    margin:0;
+    border-radius:0;
+    &:first-child a {
+      border-radius:$radius 0 0 $radius;
+    }
+    &:last-child a {
+      border-radius:0 $radius $radius 0;
+    }
+    a {
+      display:block;
+      word-wrap:break-word;
+      padding:0.25em 1em;
+      background:$button-color;
+      border: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;
+        text-decoration:none;
+        color:$button-active-text;
+        border:1px solid $button-active;
+      }
+      &%active, &%active:hover, &%active:focus {
+        background:$button-active;
+        color:$button-active-text;
+      }
+      &%disabled {
+        @include state(disabled,normal,desaturate($button-color,20%));
+      }
+    }
+  }
+}
+
+@mixin button_modifiers() {
+  $modifiers: small large on active disabled info alert warning error success square round block;
+  @for $i from 1 through length($modifiers) {
+    &.#{nth($modifiers, $i)} {
+      @extend %button-#{nth($modifiers, $i)};
+    }
+  }
+  // modifier colors
+  @for $i from 1 through length($modifier-name) {
+    &.#{nth($modifier-name, $i)} {
+      @extend %button-#{nth($modifier-name, $i)};
+    }
+  }
+}
+
+@if $tags {
+  button,
+  input[type=submit],
+  input[type=button],
+  input[type=reset] {
+    @extend %button;
+    
+    @if $classes {
+      @include button_modifiers;
+    }
+  }
+
+  @if $classes {
+    button {
+      &.dropdown {
+        @extend %dropdown-button;
+        &.on {
+          ul {
+            @extend %block;
+          }
+        }
+        ul {
+          @extend %dropdown-list;
+          li {
+            @extend %dropdown-list-item;
+            a, a:visited {
+              @extend %dropdown-menu-item;
+            }
+            hr {
+              @extend %dropdown-divider;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $classes {
+  .button,
+  a.button,
+  a.button:visited {
+    @extend %button;
+    @include button_modifiers;
+    &.dropdown {
+      @extend %dropdown-button;
+      &.on {
+        ul {
+          @extend %block;
+        }
+      }
+      ul {
+        @extend %dropdown-list;
+        li {
+          @extend %dropdown-list-item;
+          a, a:visited {
+            @extend %dropdown-menu-item;
+          }
+          hr {
+            @extend %dropdown-divider;
+          }
+        }
+      }
+    }
+  }
+  ul.button-list,
+  ol.button-list {
+    @extend %button-list;
+  }
+}
+
+@if $aria {
+  [role~=button] {
+    @extend %button;
+
+    @if $classes {
+      @include button_modifiers;
+    }
+  }
+}

data/vendor/assets/stylesheets/groundworkcss-scss/{_navigation.scss → nav/_navigation.scss}

@@ -14,7 +14,7 @@
 
 %nav {
   @extend %clear;
-  &:not(.inline) {
+  &:not(.inline):not(.pagination) {
     > ul:not(.row) {
       display:inline-block;
     }
@@ -265,8 +265,8 @@
   // hamburger menu
   &.menu {
     .menu-toggle {
-      @extend .button;
-      display:none !important;
+      @extend %button;
+      display:none;
     }
   }
 }
@@ -282,7 +282,8 @@
       padding:0 3px 0 2px;
       min-width:29px;
       a {
-        display:block;
+        display:inline-block;
+        width:auto;
         background:$button-color;
         font-size:1em;
         line-height:1.5;
@@ -291,7 +292,7 @@
         text-decoration:none;
         text-align:center;
         padding:0 3px;
-        @include rounded(4px);
+        @include rounded($radius);
         &:hover, &:focus {
           background:$button-active;
           color:$button-text;
@@ -378,11 +379,13 @@
     }
   }
 }
+
 @if $tags {
   nav {
     @extend %nav;
   }
 }
+
 @if $classes {
   .nav {
     @extend %nav;