groundworkcss 0.2.2 → 0.2.3

data/vendor/assets/stylesheets/groundworkcss/type/_typography.scss

@@ -6,259 +6,254 @@
 
 
 
-/* vertical rhythm */
+// vertical rhythm
 @include establish-baseline;
 
 %document {
-  font-family:$font-family;
-  color:$font-color;
+  font-family: $font-family;
+  color: $font-color;
 }
 
 @mixin _selection {
-  background:$selection-color;
-  color:$selection-text;
-  text-shadow:none;
+  background: $selection-color;
+  color: $selection-text;
+  text-shadow: none;
 }
 
 %links {
-  color:$link-color;
+  color: $link-color;
   @include transition(color 0.25s);
   &:hover, &:focus {
-    color:$link-active;
-    text-decoration:underline;
+    color: $link-active;
+    text-decoration: underline;
   }
 }
 
 %heading {
-  margin-bottom:15px;
+  margin-bottom: 15px;
 }
 
 %h1 {
   @extend %heading;
-  font-weight:200;
+  font-weight: 200;
   @include adjust-font-size-to($base-font-size * 2.3333333333);
 }
 
 %h2 {
   @extend %heading;
-  font-weight:200;
+  font-weight: 200;
   @include adjust-font-size-to($base-font-size * 2);
 }
 
 %h3 {
   @extend %heading;
-  font-weight:500;
+  font-weight: 500;
   @include adjust-font-size-to($base-font-size * 1.5);
 }
 
 %h4 {
   @extend %heading;
-  font-weight:500;
+  font-weight: 500;
   @include adjust-font-size-to($base-font-size * 1.3333333333);
 }
 
 %h5 {
   @extend %heading;
-  font-weight:900;
+  font-weight: 900;
   @include adjust-font-size-to($base-font-size * 1.1666666667);
 }
 
 %h6 {
   @extend %heading;
-  font-weight:900;
+  font-weight: 900;
   @include adjust-font-size-to($base-font-size * 1.1666666667);
-  text-transform:uppercase;
+  text-transform: uppercase;
 }
 
 %p, %ul, %ol, %dl {
-  margin-bottom:10px;
-  font-weight:normal;
+  margin-bottom: 10px;
+  font-weight: normal;
 }
 
 %list {
-  margin-left:20px;
+  margin-left: 20px;
   %list-item {
-    display:list-item;
+    display: list-item;
   }
 }
 
 %dl {
   %dt {
-    font-weight:bold;
+    font-weight: bold;
   }
   %dd {
-    padding-left:1em;
-    margin-bottom:$gutter;
+    padding-left: 1em;
+    margin-bottom: $gutter;
   }
 }
 
 %unstyled {
-  list-style:none;
+  list-style: none;
 }
 
 %ul-list {
   @extend %unstyled;
-  margin-left:0;
+  margin-left: 0;
   %list-item {
     &:before {
-      content:'\f00c';
-      display:inline-block;
-      width:1.1em;
-      margin-right:0.25em;
-      font-family:FontAwesome;
-      font-weight:normal;
-      font-style:normal;
-      @include adjust-font-size-to($base-font-size * 1.1);
-      text-decoration:inherit;
-      -webkit-font-smoothing:antialiased;
-      vertical-align:baseline;
-      background-image:none;
-      background-position:0% 0%;
-      background-repeat:repeat;
-      margin-top:0;
+      content: '\f00c';
+      display: inline-block;
+      width: 1.1em;
+      margin-right: 0.25em;
+      @include icon-FontAwesome();
+      font-size: 1.2em;
+      vertical-align: baseline;
+      background-image: none;
+      background-position: 0% 0%;
+      background-repeat: repeat;
+      margin-top: 0;
     }
   }
 }
 
 %ol-list {
   @extend %unstyled;
-  counter-reset:li;
-  margin-left:1.5em;
-  @include adjust-font-size-to($base-font-size);
-  line-height:1.6;
+  counter-reset: li;
+  margin-left: 1.5em;
+  line-height: 1.6;
   %list-item {
-    position:relative;
-    padding:2px 6px 0;
+    position: relative;
+    padding: 2px 6px 0;
     &:before {
-      content:counter(li);
-      counter-increment:li;
-      position:absolute;
-      top:2px;
-      left:-2em;
-      width:2em;
-      text-align:center;
-      padding:2px;
-      font-size:0.8em;
-      line-height:1.5;
-      color:$background-color;
-      background:$font-color;
-      font-weight:bold;
-      @include rounded(4px);
+      content: counter(li);
+      counter-increment: li;
+      position: absolute;
+      top: 0.1em;
+      left: -2em;
+      width: 2em;
+      text-align: center;
+      padding: 0.3em 0.1em 0.1em;
+      font-size: 0.8em;
+      line-height: 1.5;
+      color: $background-color;
+      background: $font-color;
+      font-weight: bold;
+      @include rounded($default-radius);
     }
   }
 }
 
 %blockquote {
-  padding:1.3em 4em 1em;
-  color:$font-color;
+  padding: 1.3em 4em 1em;
+  color: $font-color;
   @include adjust-font-size-to($base-font-size, 1.15);
-  font-weight:bold;
-  position:relative;
-  z-index:0;
-  background:darken($background-color, 10%);
-  @include border-radius($radius);
+  font-weight: bold;
+  position: relative;
+  z-index: 0;
+  background: darken($background-color, 10%);
+  @include border-radius($default-radius);
   &:before {
-    content:'\201C';
-    color:darken($background-color, 20%);
-    font-size:6em;
-    display:block;
-    position:absolute;
-    top:0.4em;
-    left:0.1em;
-    z-index:-1;
+    content: '\201C';
+    color: darken($background-color, 20%);
+    font-size: 6em;
+    display: block;
+    position: absolute;
+    top: 0.4em;
+    left: 0.1em;
+    z-index: -1;
   }
   &:after {
-    content:'\201D';
-    color:darken($background-color, 20%);
-    font-size:6em;
-    display:block;
-    position:absolute;
-    top:0.4em;
-    right:0.1em;
-    z-index:-1;
+    content: '\201D';
+    color: darken($background-color, 20%);
+    font-size: 6em;
+    display: block;
+    position: absolute;
+    top: 0.4em;
+    right: 0.1em;
+    z-index: -1;
   }
 }
 
 %cite {
-  display:block;
-  position:relative;
-  left:-1em;
-  margin-top:0.25em;
+  display: block;
+  position: relative;
+  left: -1em;
+  margin-top: 0.25em;
   @include adjust-font-size-to($base-font-size, 0.95);
-  font-weight:normal;
-  font-style:normal;
-  color:lighten($font-color, 15%);
+  font-weight: normal;
+  font-style: normal;
+  color: lighten($font-color, 15%);
   &:before {
-    content:'\2014';
+    content: '\2014';
   }
 }
 
 %abbr {
-  border-bottom:1px dotted;
-  cursor:help;
+  border-bottom: 1px dotted;
+  cursor: help;
 }
 
 %small              { @extend %small; }
 %big, %large        { @extend %large; }
-%em, %italic        { font-style:italic; }
-%b, %bold, %strong  { font-weight:900; }
+%em, %italic        { font-style: italic; }
+%b, %bold, %strong  { font-weight: 900; }
 %sup                { @extend %small; }
 %sub                { @extend %small; }
-%monospace          { font-family:monospace; }
+%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)};
+    color: #{nth($modifier-text, $i)};
   }
 }
 
 %code {
   @extend %monospace;
-	white-space:pre-wrap;
-	word-wrap:break-word;
-	min-height:1em;
-	display:inline-block;
-	background:lighten(gray, 30%);
-	border:none;
-	padding:0 0.3em;
-	margin:0 0.2em;
-	font-weight:normal;
-	line-height:inherit;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	min-height: 1em;
+	display: inline-block;
+	background: lighten(gray, 30%);
+	border: none;
+	padding: 0 0.3em;
+	margin: 0 0.2em;
+	font-weight: normal;
+	line-height: inherit;
 }
 
 %pre {
   @extend %monospace;
-	$border:2.6em;
-	color:darken(white, 5%);
-	background:#050505;
+	$gutter-column: 2.6em;
+	color: darken(white, 5%);
+	background: #050505;
   @include adjust-font-size-to($base-font-size, 1);
-	padding:0.5em;
-	display:block;
-	border-left:#{$border} solid lighten(#050505, 20%);
-	counter-reset:linenumber;
+	padding: 0.5em;
+	display: block;
+	border-left: #{$gutter-column} solid lighten(#050505, 20%);
+	counter-reset: linenumber;
 	%code {
-    display:block;
-		background:inherit;
-		margin:0;
-		padding:0;
+    display: block;
+		background: inherit;
+		margin: 0;
+		padding: 0;
 		&:before {
-			text-align:right;
-			color:lighten(gray, 10%);
-			counter-increment:linenumber;
-			content:counter(linenumber) ".";
-			position:absolute;
-			left:0.65em;
-			width:#{$border};
+			text-align: right;
+			color: lighten(gray, 10%);
+			counter-increment: linenumber;
+			content: counter(linenumber) ".";
+			position: absolute;
+			left: 0.65em;
+			width: #{$gutter-column};
 		}
 	}
 }
 
-%info             { color:$info-color; }
-%alert            { color:$alert-color; }
-%warning          { color:$warning-color; }
-%error, %invalid  { color:$error-color; }
-%success, %valid  { color:$success-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 {
@@ -268,7 +263,7 @@
   }
 }
 
-@if $tags {
+@if $type-tags {
   body {
     @extend %document;
   }
@@ -300,27 +295,14 @@
   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)};
-			}
+  @for $i from 1 through length($type-elements) {
+		#{nth($type-elements, $i)} {
+			@extend %#{nth($type-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 unstyled;
-  @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)};
-    }
-  }
+
+@if $styled-lists {
   ul, ol {
     &.unstyled {
       @extend %unstyled;
@@ -335,26 +317,51 @@
   ol.list {
     @extend %ol-list;
 
-    @for $i from 1 through length($modifier-name) {
-      &.#{nth($modifier-name, $i)} {
-        li {
-          &:before {
-            background:#{nth($modifier-code, $i)};
+    @if $type-colors {
+      @for $i from 1 through length($modifier-name) {
+        &.#{nth($modifier-name, $i)} {
+          li {
+            &:before {
+              background: #{nth($modifier-code, $i)};
+            }
           }
         }
       }
-    }
-    li {
-      @for $i from 1 through length($modifier-name) {
-        &.#{nth($modifier-name, $i)} {
-          &:before {
-            background:#{nth($modifier-code, $i)};
+      li {
+        @for $i from 1 through length($modifier-name) {
+          &.#{nth($modifier-name, $i)} {
+            &:before {
+              background: #{nth($modifier-code, $i)};
+            }
           }
         }
       }
     }
+
     > li {
       @extend %list-item;
     }
   }
 }
+
+@if $type-colors {
+  @for $i from 1 through length($modifier-name) {
+    .#{nth($modifier-name, $i)} {
+      color: #{nth($modifier-code, $i)};
+    }
+  }
+}
+
+@for $i from 1 through length($ui-states) {
+  .#{nth($ui-states, $i)} {
+    @extend %#{nth($ui-states, $i)};
+  }
+}
+
+@if $type-classes {
+  @for $i from 1 through length($type-classnames) {
+    .#{nth($type-classnames, $i)} {
+      @extend %#{nth($type-classnames, $i)};
+    }
+  }
+}

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

@@ -20,7 +20,7 @@
   %#{nth($web-font-names, $i)} {
     @include font-stack(#{nth($web-font-names, $i)});
   }
-  @if $classes {
+  @if $webfont-classes {
     .#{nth($web-font-names, $i)} {
       @extend %#{nth($web-font-names, $i)};
     }

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

@@ -0,0 +1,14 @@
+// =============================================
+//                UI Elements
+//          Last Updated:2013-6-25
+// =============================================
+
+
+
+
+// ui elements
+@import "messages";
+@import "callouts";
+@import "tables";
+@import "tooltips";
+@import "modals";

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

@@ -13,8 +13,8 @@
   background:$button-color;
   border:1px solid $button-active;
   color:$button-text;
-  margin-bottom:15px;
-  @include rounded($radius);
+  margin-bottom: $gutter;
+  @include rounded($default-radius);
   // content overrides
   h1, h2, h3, h4, h5, h6, p {
     color:inherit;
@@ -78,15 +78,14 @@
 %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;
+    @include icon-FontAwesome();
+    content: "\f00d";
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.2em 0.3em;
+    font-size: 1.2em;
+    cursor: pointer;
   }
 }
 
@@ -99,10 +98,24 @@
 }
 
 @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)};
+  @for $i from 1 through length($ui-modifiers) {
+    &.#{nth($ui-modifiers, $i)} {
+      @extend %callout-#{nth($ui-modifiers, $i)};
+    }
+  }
+  @for $i from 1 through length($ui-states) {
+    &.#{nth($ui-states, $i)} {
+      @extend %callout-#{nth($ui-states, $i)};
+    }
+  }
+  @for $i from 1 through length($radius-helpers) {
+    &.#{nth($radius-helpers, $i)} {
+      @extend %callout-#{nth($radius-helpers, $i)};
+    }
+  }
+  @for $i from 1 through length($size-helpers) {
+    &.#{nth($size-helpers, $i)} {
+      @extend %callout-#{nth($size-helpers, $i)};
     }
   }
   @for $i from 1 through length($modifier-name) {
@@ -112,18 +125,18 @@
   }
 }
 
-@if $classes {
+@if $ui-classes {
   .callout {
     @extend %callout;
     @include callout_modifiers;
   }
 }
 
-@if $aria {
+@if $aria-selectors {
   [role~=status] {
     @extend %callout;
     
-    @if $classes {
+    @if $ui-classes {
       @include callout_modifiers;
     }
   }

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

@@ -15,7 +15,7 @@
   color:$button-text;
   font-weight:bold;
   text-decoration:none;
-  @include rounded($radius);
+  @include rounded($default-radius);
 }
 
 %message-small { @include _small; }
@@ -70,17 +70,16 @@
 }
 
 %message-dismissible {
-  padding-right:3em;
+  padding-right: 2em;
   &: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;
+    @include icon-FontAwesome();
+    content: "\f00d";
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.2em 0.3em;
+    font-size: 1.2em;
+    cursor: pointer;
   }
 }
 
@@ -93,10 +92,24 @@
 }
 
 @mixin message-modifiers() {
-  $modifiers: small large info alert warning error success square round disabled dismissible;
-  @for $i from 1 through length($modifiers) {
-    &.#{nth($modifiers, $i)} {
-      @extend %message-#{nth($modifiers, $i)};
+  @for $i from 1 through length($ui-modifiers) {
+    &.#{nth($ui-modifiers, $i)} {
+      @extend %message-#{nth($ui-modifiers, $i)};
+    }
+  }
+  @for $i from 1 through length($ui-states) {
+    &.#{nth($ui-states, $i)} {
+      @extend %message-#{nth($ui-states, $i)};
+    }
+  }
+  @for $i from 1 through length($radius-helpers) {
+    &.#{nth($radius-helpers, $i)} {
+      @extend %message-#{nth($radius-helpers, $i)};
+    }
+  }
+  @for $i from 1 through length($size-helpers) {
+    &.#{nth($size-helpers, $i)} {
+      @extend %message-#{nth($size-helpers, $i)};
     }
   }
   @for $i from 1 through length($modifier-name) {
@@ -106,18 +119,18 @@
   }
 }
 
-@if $classes {
+@if $ui-classes {
   .message {
     @extend %message;
     @include message-modifiers;
   }
 }
 
-@if $aria {
+@if $aria-selectors {
   [role~=alert] {
     @extend %message;
     
-    @if $classes {
+    @if $ui-classes {
       @include message-modifiers;
     }
   }