groundworkcss 0.2.2

data/vendor/assets/stylesheets/groundworkcss/misc/_all.scss

@@ -0,0 +1,9 @@
+// ===================================
+//               Misc
+// ===================================
+
+
+
+
+// misc components
+@import "social-icons";

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

@@ -0,0 +1,96 @@
+// =============================================
+//        Social icons by Gary Hepting 
+//           Last Updated:2013-1-18
+// =============================================
+
+
+
+
+.social-icon {
+  display: inline-block;
+  background-size: 100%;
+  width:1em;
+  height:1em;
+  text-indent: -999em;
+  text-align: left;
+  @include rounded(2px);
+  margin-bottom: 3px;
+  vertical-align: bottom;
+  @include drop-shadow(rgba(0,0,0,0.2), 5px, 0, 0); // color, alpha, blur, x, y
+  &.small {
+    width: 20px;
+    height: 20px;
+    @include rounded(3px);
+  }
+  &.medium {
+    width: 30px;
+    height: 30px;
+    @include rounded(5px);
+  }
+  &.large {
+    width: 48px;
+    height: 48px;
+    @include rounded(6px);
+  }
+  &.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"); }
+  &.apple         { @include data-image("social-icons/apple.svg"); }
+  &.behance       { @include data-image("social-icons/behance.svg"); }
+  &.bitbucket     { @include data-image("social-icons/bitbucket.svg"); }
+  &.coderwall     { @include data-image("social-icons/coderwall.svg"); }
+  &.creativecloud { @include data-image("social-icons/creativecloud.svg"); }
+  &.dribbble      { @include data-image("social-icons/dribbble.svg"); }
+  &.dropbox       { @include data-image("social-icons/dropbox.svg"); }
+  &.evernote      { @include data-image("social-icons/evernote.svg"); }
+  &.facebook      { @include data-image("social-icons/facebook.svg"); }
+  &.flickr        { @include data-image("social-icons/flickr.svg"); }
+  &.foursquare    { @include data-image("social-icons/foursquare.svg"); }
+  &.git           { @include data-image("social-icons/git.svg"); }
+  &.github        { @include data-image("social-icons/github.svg"); }
+  &.googleplay    { @include data-image("social-icons/googleplay.svg"); }
+  &.googleplus    { @include data-image("social-icons/googleplus.svg"); }
+  &.html5         { @include data-image("social-icons/html5.svg"); }
+  &.icloud        { @include data-image("social-icons/icloud.svg"); }
+  &.instagram     { @include data-image("social-icons/instagram.svg"); }
+  &.lastfm        { @include data-image("social-icons/lastfm.svg"); }
+  &.linkedin      { @include data-image("social-icons/linkedin.svg"); }
+  &.mail          { @include data-image("social-icons/mail.svg"); }
+  &.mixi          { @include data-image("social-icons/mixi.svg"); }
+  &.msn           { @include data-image("social-icons/msn.svg"); }
+  &.pinterest     { @include data-image("social-icons/pinterest.svg"); }
+  &.pocket        { @include data-image("social-icons/pocketapp.svg"); }
+  &.quora         { @include data-image("social-icons/quora.svg"); }
+  &.orkut         { @include data-image("social-icons/orkut.svg"); }
+  &.mercurial     { @include data-image("social-icons/mercurial.svg"); }
+  &.rdio          { @include data-image("social-icons/rdio.svg"); }
+  &.renren        { @include data-image("social-icons/renren.svg"); }
+  &.rss           { @include data-image("social-icons/rss.svg"); }
+  &.skitch        { @include data-image("social-icons/skitch.svg"); }
+  &.skype         { @include data-image("social-icons/skype.svg"); }
+  &.soundcloud    { @include data-image("social-icons/soundcloud.svg"); }
+  &.spotify       { @include data-image("social-icons/spotify.svg"); }
+  &.stackoverflow { @include data-image("social-icons/stackoverflow.svg"); }
+  &.stumbleupon   { @include data-image("social-icons/stumbleupon.svg"); }
+  &.svn           { @include data-image("social-icons/svn.svg"); }
+  &.tent          { @include data-image("social-icons/tent.svg"); }
+  &.tripadvisor   { @include data-image("social-icons/tripadvisor.svg"); }
+  &.tumblr        { @include data-image("social-icons/tumblr.svg"); }
+  &.twitter       { @include data-image("social-icons/twitter.svg"); }
+  &.vimeo         { @include data-image("social-icons/vimeo.svg"); }
+  &.weibo         { @include data-image("social-icons/weibo.svg"); }
+  &.windows       { @include data-image("social-icons/windows.svg"); }
+  &.wordpress     { @include data-image("social-icons/wordpress.svg"); }
+  &.xing          { @include data-image("social-icons/xing.svg"); }
+  &.yelp          { @include data-image("social-icons/yelp.svg"); }
+  &.youtube       { @include data-image("social-icons/youtube.svg"); }
+  &.youversion    { @include data-image("social-icons/youversion.svg"); }
+  &.zerply        { @include data-image("social-icons/zerply.svg"); }
+}

data/vendor/assets/stylesheets/groundworkcss/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/nav/_buttons.scss

@@ -0,0 +1,334 @@
+// =============================================
+//                  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;
+  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-holder {
+	position: relative;
+	display: inline-block;
+}
+
+%dropdown-button {
+  position:relative;
+  padding-right:2em;
+  &:after {
+    content:'...';
+    position:absolute;
+    right:1em;
+    bottom:0.25em;
+  }
+}
+
+%dropdown-list {
+  text-align:left;
+  margin:0;
+  padding:0;
+  list-style:none;
+  display:none;
+  background:white;
+  border:1px solid $border-color;
+  position:absolute;
+  left:0;
+  width:100%;
+  z-index:10;
+  @include drop-shadow(rgba(0,0,0,0.25), 5px, 0, 0);
+  @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;
+      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;
+    }
+  }
+
+	.dropdown {
+		@extend %dropdown-holder;
+		&.on ul {
+			@extend %block;
+		}
+		button {
+			@extend %dropdown-button;
+		}
+		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-holder;
+		&.on ul {
+			@extend %block;
+		}
+		.button {
+			@extend %dropdown-button;
+		}
+		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;
+    li {
+      a {
+        @include button_modifiers;
+      }
+    }
+  }
+}
+
+@if $aria {
+  [role~=button] {
+    @extend %button;
+
+    @if $classes {
+      @include button_modifiers;
+    }
+  }
+}