groundworkcss-rails 0.2.9 → 0.2.10

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

@@ -0,0 +1,9 @@
+// =============================================
+//       GroundworkCSS by Gary Hepting
+//          Last Updated:2013-5-3
+// =============================================
+
+
+@import "font-awesome"; // recommended (used by other components)
+@import "webfonts";     // optional (WIP)
+@import "typography";   // optional

data/vendor/assets/stylesheets/groundworkcss-scss/{_font-awesome.scss → type/_font-awesome.scss}

@@ -1,5 +1,13 @@
+// =============================================
+//            Font Awesome 3.0.2b
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
 /*!
- *  Font Awesome 3.0.2
+ *  Font Awesome 3.0.2b (customized for use with Groundwork)
  *  the iconic font designed for use with Twitter Bootstrap
  *  -------------------------------------------------------
  *  The full suite of pictographic icons, examples, and documentation
@@ -24,7 +32,7 @@
 $fontAwesomePath:   "#{$root_path}#{$fonts_path}" !default;
 $borderColor:       #eee;
 $iconMuted:         #eee;
-@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
+// @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
 
 
 @font-face {

data/vendor/assets/stylesheets/groundworkcss-scss/{_typography.scss → type/_typography.scss}

@@ -1,31 +1,24 @@
-// ===================================
-//       Groundwork Typography
-// ===================================
+// =============================================
+//                Typography
+//          Last Updated:2013-4-24
+// =============================================
 
 
 
 
-body {
+%document {
   font-family:$font-family;
   font-size:$font-size;
   line-height:1.2;
   color:$font-color;
 }
-::selection {
-  background:$selection-color;
-  color:$selection-text;
-}
-::-moz-selection {
+
+%selection {
   background:$selection-color;
   color:$selection-text;
 }
-// * {
-//   outline:none;
-//   &:focus {
-//     @include filter-shadow(rgba(0,0,0,0.35), 15px, 0, 0);
-//   }
-// }
-a, a:visited {
+
+%links {
   color:$link-color;
   @include transition(color 0.25s);
   &:hover, &:focus {
@@ -33,51 +26,81 @@ a, a:visited {
     text-decoration:underline;
   }
 }
-h1, h2, h3, h4, h5, h6 {
+
+%heading {
   line-height:1.3;
   margin-bottom:15px;
 }
-h1 {
+
+%h1 {
+  @extend %heading;
   font-weight:200;
   font-size:$font-size * 2.3333333333;
 }
-h2 {
+
+%h2 {
+  @extend %heading;
   font-weight:200;
   font-size:$font-size * 2;
 }
-h3 {
+
+%h3 {
+  @extend %heading;
   font-weight:500;
   font-size:$font-size * 1.5;
 }
-h4 {
+
+%h4 {
+  @extend %heading;
   font-weight:500;
   font-size:$font-size * 1.3333333333;
 }
-h5 {
+
+%h5 {
+  @extend %heading;
   font-weight:900;
   font-size:$font-size * 1.1666666667;
 }
-h6 {
+
+%h6 {
+  @extend %heading;
   font-weight:900;
   font-size:$font-size * 1.1666666667;
   text-transform:uppercase;
 }
-p, ul, ol, dl {
+
+%p, %ul, %ol, %dl {
   margin-bottom:10px;
   font-weight:normal;
   font-size:1em;
   line-height:1.6;
 }
-ul, ol {
+
+%list {
   margin-left:20px;
-  li {
+  %list-item {
     display:list-item;
   }
 }
-ul.list {
+
+%dl {
+  %dt {
+    font-weight:bold;
+  }
+  %dd {
+    padding-left:1em;
+    margin-bottom:$gutter;
+  }
+}
+
+%unstyled-list {
   list-style:none;
+}
+
+%ul-list {
+  @extend %unstyled-list;
   margin-left:0;
-  > li {
+  %list-item {
     &:before {
       content:'\f00c';
       display:inline-block;
@@ -98,11 +121,12 @@ ul.list {
     }
   }
 }
-ol.list {
+
+%ol-list {
+  @extend %unstyled-list;
   counter-reset:li;
-  list-style:none;
   margin-left:1.5em;
-  > li {
+  %list-item {
     position:relative;
     padding:2px 6px 0;
     &:before {
@@ -122,16 +146,8 @@ ol.list {
     }
   }
 }
-dl {
-  dt {
-    font-weight:bold;
-  }
-  dd {
-    padding-left:1em;
-    margin-bottom:$gutter;
-  }
-}
-blockquote {
+
+%blockquote {
   padding:1.3em 4em 1em;
   color:$font-color;
   font-size:$font-size*1.15;
@@ -160,7 +176,8 @@ blockquote {
     z-index:-1;
   }
 }
-cite {
+
+%cite {
   display:block;
   position:relative;
   left:-1em;
@@ -173,14 +190,29 @@ cite {
     content:'\2014';
   }
 }
-small, .small { font-size:0.8em; }
-big, .big, .large { font-size:1.5em; }
-em, .italic { font-style:italic; }
-b, strong, .bold, .strong { font-weight:900; }
-sup { font-size:0.8em; }
-sub { font-size:0.8em; }
 
-code {
+%abbr {
+  border-bottom:1px dotted;
+  cursor:help;
+}
+
+%small              { @extend %small; }
+%big, %large        { @extend %large; }
+%em, %italic        { font-style:italic; }
+%b, %bold, %strong  { font-weight:900; }
+%sup                { @extend %small; }
+%sub                { @extend %small; }
+%monospace          { font-family:monospace; }
+%del, %strike       { text-decoration: line-through; }
+
+@for $i from 1 through length($modifier-name) {
+  %#{nth($modifier-name, $i)} {
+    color:#{nth($modifier-text, $i)};
+  }
+}
+
+%code {
+  @extend %monospace;
 	white-space:pre-wrap;
 	word-wrap:break-word;
 	min-height:1em;
@@ -193,7 +225,8 @@ code {
 	line-height:inherit;
 }
 
-pre {
+%pre {
+  @extend %monospace;
 	$border:2.6em;
 	color:white;
 	background:#050505;
@@ -202,7 +235,7 @@ pre {
 	display:block;
 	border-left:#{$border} solid gray;
 	counter-reset:linenumber;
-	code {
+	%code {
     display:block;
 		background:inherit;
 		margin:0;
@@ -219,15 +252,12 @@ pre {
 	}
 }
 
-.error, .invalid {
-  color:$error-color;
-}
-.success, .valid {
-  color:$success-color;
-}
-.warning {
-  color:$warning-color;
-}
+%info             { color:$info-color; }
+%alert            { color:$alert-color; }
+%warning          { color:$warning-color; }
+%error, %invalid  { color:$error-color; }
+%success, %valid  { color:$success-color; }
+
 // responsive headings
 .js {
   .responsive:not(table) {
@@ -235,3 +265,85 @@ pre {
     @include transition(font 0.25s);
   }
 }
+
+@if $tags {
+  body {
+    @extend %document;
+  }
+  ::selection {
+    @extend %selection;
+  }
+  ::-moz-selection {
+    @extend %selection;
+  }
+  a, a:visited {
+    @extend %links;
+  }
+  ul, ol {
+    @extend %list;
+    li {
+      @extend %list-item;
+    }
+  }
+  dl {
+    @extend %dl;
+    dt {
+      @extend %dt;
+    }
+    dd {
+      @extend %dd;
+    }
+  }
+  abbr[title], dfn[title],
+  abbr[data-title], dfn[data-title] {
+    @extend %abbr;
+  }
+  $elements: h1 h2 h3 h4 h5 h6 p ul ol dl blockquote cite small big em b strong sup sub del strike code pre;
+  @for $i from 1 through length($elements) {
+		@if not index($tag-elements, nth($elements, $i)) == false {
+			#{nth($elements, $i)} {
+				@extend %#{nth($elements, $i)};
+			}
+		}
+  }
+}
+@if $classes {
+  $names: h1 h2 h3 h4 h5 h6 p blockquote cite small big large em italic b bold strong sup sub del strike code pre info alert warning error invalid success valid;
+  @for $i from 1 through length($names) {
+    .#{nth($names, $i)} {
+      @extend %#{nth($names, $i)};
+    }
+  }
+  @for $i from 1 through length($modifier-name) {
+    .#{nth($modifier-name, $i)} {
+      color:#{nth($modifier-code, $i)};
+    }
+  }
+  ul, ol {
+    &.unstyled {
+      @extend %unstyled-list;
+    }
+  }
+  ul.list {
+    @extend %ul-list;
+    > li {
+      @extend %list-item;
+    }
+  }
+  ol.list {
+    @extend %ol-list;
+
+    @for $i from 1 through length($modifier-name) {
+      &.#{nth($modifier-name, $i)} {
+        li {
+          &:before {
+            background:#{nth($modifier-code, $i)};
+          }
+        }
+      }
+    }
+    > li {
+      @extend %list-item;
+    }
+  }
+}

data/vendor/assets/stylesheets/groundworkcss-scss/type/_webfonts.scss

@@ -0,0 +1,28 @@
+// =============================================
+//                 Web Fonts
+//          Last Updated:2013-4-25
+// =============================================
+
+
+
+
+@for $i from 1 through length($web-font-files) {
+  // @include font-face('#{nth($web-font-names, $i)}', inline-font-files("#{nth($web-font-files, $i)}.eot", "#{nth($web-font-files, $i)}.woff", "#{nth($web-font-files, $i)}.ttf"));
+  @font-face {
+    font-family: '#{nth($web-font-names, $i)}';
+    font-style: normal;
+    font-weight: normal;
+    src: url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}#iefix');
+    src: url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.eot') format('embedded-opentype'), 
+         url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.woff') format('woff'), 
+         url('#{$root_path}#{$fonts_path}#{nth($web-font-files, $i)}.ttf') format('truetype');
+  }
+  %#{nth($web-font-names, $i)} {
+    @include font-stack(#{nth($web-font-names, $i)});
+  }
+  @if $classes {
+    .#{nth($web-font-names, $i)} {
+      @extend %#{nth($web-font-names, $i)};
+    }
+  }
+}

data/vendor/assets/stylesheets/groundworkcss-scss/{_ui-elements.scss → ui/_all.scss}

@@ -8,3 +8,7 @@
 // ui elements
 @import "messages";
 @import "callouts";
+@import "tables";
+@import "tooltips";
+// @import "popovers";     // WIP
+@import "modals";

data/vendor/assets/stylesheets/groundworkcss-scss/ui/_callouts.scss

@@ -0,0 +1,117 @@
+// =============================================
+//              Callout Panels
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
+%callout {
+  position:relative;
+  word-wrap:break-word;
+  padding:1em;
+  background:$button-color;
+  border:1px solid $button-active;
+  color:$button-text;
+  margin-bottom:15px;
+  @include rounded($radius);
+  // content overrides
+  h1, h2, h3, h4, h5, h6, p {
+    color:inherit;
+  }
+  *:last-child {
+    margin-bottom:0;
+  }
+}
+
+%callout-small { @include _small; }
+%callout-large { @include _large; }
+%callout-square { @include _square; }
+%callout-round { @include _round; }
+%callout-disabled { @include state(disabled,normal,desaturate($button-color,20%)); }
+
+%callout-info {
+  background-color:$info-background;
+  color:$info-color;
+  border-color:$info-border;
+  &%callout-disabled {
+    @include state(disabled,normal,desaturate($info-color,20%));
+  }
+}
+
+%callout-alert{
+  background-color:$alert-background;
+  color:$alert-color;
+  border-color:$alert-border;
+  &%callout-disabled {
+    @include state(disabled,normal,desaturate($alert-color,20%));
+  }
+}
+
+%callout-warning {
+  background:$warning-background;
+  color:$warning-color;
+  border-color:$warning-border;
+  &%callout-disabled {
+    @include state(disabled,normal,desaturate($warning-color,20%));
+  }
+}
+
+%callout-error {
+  background:$error-background;
+  color:$error-color;
+  border-color:$error-border;
+  &%callout-disabled {
+    @include state(disabled,normal,desaturate($error-color,20%));
+  }
+}
+
+%callout-success {
+  background:$success-background;
+  color:$success-color;
+  border-color:$success-border;
+  &%callout-disabled {
+    @include state(disabled,normal,desaturate($success-color,20%));
+  }
+}
+
+%callout-dismissible {
+  padding-right:3em;
+  &:after {
+    content:'X';
+    display:block;
+    padding:0.5em 0;
+    font-size:0.8em;
+    text-align:center;
+    position:absolute;
+    top:0;
+    right:1em;
+    line-height:1.5;
+  }
+}
+
+@mixin callout_modifiers() {
+  $modifiers: small large info alert warning error success square round disabled;
+  @for $i from 1 through length($modifiers) {
+    &.#{nth($modifiers, $i)} {
+      @extend %callout-#{nth($modifiers, $i)};
+    }
+  }
+}
+
+@if $classes {
+  .callout {
+    @extend %callout;
+    @include callout_modifiers;
+  }
+}
+
+@if $aria {
+  [role~=status] {
+    @extend %callout;
+    
+    @if $classes {
+      @include callout_modifiers;
+    }
+  }
+}