groundworkcss-rails 0.2.4 → 0.2.5

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

@@ -7,9 +7,9 @@
 // =============================================
 
 
-/////////////////////////////////////
-//    grid system - placeholders   //
-/////////////////////////////////////
+///////////////////////////////////////////////
+//    grid system - placeholders & classes   //
+///////////////////////////////////////////////
 
 %container {
   max-width: $max-width;
@@ -33,32 +33,112 @@
   margin-right: auto !important;
 }
 
+@if $classes {
+  .container          { @extend %container; }
+  .row                { @extend %row; }
+  .column             { @extend %column; }
+  .centered           { @extend %centered; }
+}
+
+$selectors: if($classes, "%" ".", "%");
+
 $numbers: one two three four five six seven eight nine ten eleven twelve;
 $fractions: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
 $fractions-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
 
-// function to generate the grid code
-@for $i from 1 through length($numbers) {
-  %#{nth($fractions, $i)},
-  %#{nth($fractions-plural, $i)} {
-    width: percentage(1 / $i);
-    @extend %column;
-    @for $width from 1 through $i {
-      &%#{nth($numbers, $width)} {
-        width: percentage($width / $i);
-        @extend %column;
+// function to generate the grid code (placeholders and optionally, classes)
+@for $i from 1 through length($selectors) {
+  @for $j from 1 through length($numbers) {
+    #{nth($selectors, $i) + nth($fractions, $j)},
+    #{nth($selectors, $i) + nth($fractions-plural, $j)} {
+      width: percentage(1 / $j);
+      @extend %column;
+      @for $width from 1 through $j {
+        &#{nth($selectors, $i) + nth($numbers, $width)} {
+          width: percentage($width / $j);
+          @extend %column;
+        }
       }
-    }
-    @for $right-left-skip from 1 through $i - 1 {
-      &%right-#{nth($numbers, $right-left-skip)} {
-        left: percentage($right-left-skip / $i);
+      @for $right-left-skip from 1 through $j - 1 {
+        &#{nth($selectors, $i) + "right-" + nth($numbers, $right-left-skip)} {
+          left: percentage($right-left-skip / $j);
+        }
+        &#{nth($selectors, $i) + "left-" + nth($numbers, $right-left-skip)} {
+          right: percentage($right-left-skip / $j);
+        }
+        &#{nth($selectors, $i) + "skip-" + nth($numbers, $right-left-skip)} {
+          margin-left: percentage($right-left-skip / $j);
+        }
       }
-      &%left-#{nth($numbers, $right-left-skip)} {
-        right: percentage($right-left-skip / $i);
+    }
+  }
+}
+
+// grid classes responsive
+@mixin grid-responsive($both: true) {
+  // responsive grid
+  %half, %halves,
+  %third, %thirds,
+  %fourth, %fourths,
+  %fifth, %fifths,
+  %sixth, %sixths,
+  %seventh, %sevenths,
+  %eighth, %eighths,
+  %ninth, %ninths,
+  %tenth, %tenths,
+  %eleventh, %elevenths,
+  %twelfth, %twelfths#{if($classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
+    @if $both {
+      &:not(.small-tablet):not(.mobile) {
+        @include grid-collapse();
       }
-      &%skip-#{nth($numbers, $right-left-skip)} {
-        margin-left: percentage($right-left-skip / $i);
+    }
+    @else {
+      &:not(.mobile) {
+        @include grid-collapse();
       }
     }
   }
 }
+
+@mixin grid-collapse() {
+  width:100% !important;
+  float:none;
+  clear:both;
+  // reset push
+  &%right-one,
+  &%right-two,
+  &%right-three,
+  &%right-four,
+  &%right-five,
+  &%right-six,
+  &%right-seven,
+  &%right-eight,
+  &%right-nine,
+  &%right-ten,
+  &%right-eleven#{if($classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")}  { left:0; }
+  // reset pull
+  &%left-one,
+  &%left-two,
+  &%left-three,
+  &%left-four,
+  &%left-five,
+  &%left-six,
+  &%left-seven,
+  &%left-eight,
+  &%left-nine,
+  &%left-ten,
+  &%left-eleven#{if($classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")}   { right:0; }
+  // reset offset
+  &%skip-one,
+  &%skip-two,
+  &%skip-three,
+  &%skip-four,
+  &%skip-five,
+  &%skip-six,
+  &%skip-seven,
+  &%skip-eight,
+  &%skip-nine,
+  &%skip-ten,
+  &%skip-eleven#{if($classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")}   { margin-left:0; }
+}

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

@@ -1,11 +1,10 @@
 // ====================
 //    layout helpers 
 // ====================
-%inline           { display:inline-block; width:auto; }
-%block            { display:block; }
-%zero             { margin:0; padding:0; }
-%pull-right       { float:right; }
-%pull-left        { float:left; }
+
+%clear, %clearfix { clear:both;
+  &:after         { content:''; display:block; clear:both; }
+}
 %padded           { padding:$gutter;
   &%double        { padding:$gutter*2; }
   &%triple        { padding:$gutter*3; }
@@ -46,33 +45,69 @@
   &%double        { margin-left:$gutter*2; }
   &%triple        { margin-left:$gutter*3; }
 }
-%border-right     { border-right:1px solid $border-color; }
-%border-left      { border-left:1px solid $border-color; }
+%stick            { position:fixed; z-index:1;
+  &%top           { top:0; }
+  &%right         { right:0; }
+  &%bottom        { bottom:0; }
+  &%left          { left:0; }
+  &%middle        { top:50%; }
+  &%center        { left:50%; }
+}
+%inline           { display:inline-block; width:auto; }
+%block            { display:block; }
+%zero             { margin:0; padding:0; }
+%pull-right       { float:right; }
+%pull-left        { float:left; }
+%bordered         { border: 1px solid $border-color; }
 %border-top       { border-top:1px solid $border-color; }
+%border-right     { border-right:1px solid $border-color; }
 %border-bottom    { border-bottom:1px solid $border-color; }
-%align-top        { display:table-cell; vertical-align:top; } // must have height
+%border-left      { border-left:1px solid $border-color; }
+%align-top        { display:table-cell; vertical-align:top; } // must have height (experimental)
 %align-right      { text-align:right; }
-%align-bottom     { display:table-cell; vertical-align:bottom; } // must have height
+%align-bottom     { display:table-cell; vertical-align:bottom; } // must have height (experimental)
 %align-left       { text-align:left; }
 %align-center     { text-align:center; }
 %justify          { text-align:justify; }
-%center           { display:block; margin:0 auto; }
-%clear, %clearfix { display:block; clear:both;
-  &:after         { content:''; display:block; clear:both; }
-}
+%center           { @extend %block; margin:0 auto; }
 %space            { height:$gutter; }
-%stick            { position:fixed; z-index:1;
-  &%middle        { top:50%; }
-  &%center        { left:50%; }
-  &%right         { right:0; }
-  &%left          { left:0; }
-  &%top           { top:0; }
-  &%bottom        { bottom:0; }
-}
 %round            { @include rounded(9999px); }
-%rotate-90        { @include rotate(90deg); }
-%rotate-180       { @include rotate(180deg); }
-%rotate-270       { @include rotate(270deg); }
-%rotate-90-ctr    { @include rotate(-90deg); }
-%rotate-180-ctr   { @include rotate(-180deg); }
-%rotate-270-ctr   { @include rotate(-270deg); }
+%rotate-90        { @extend %inline; @include rotate(90deg); }
+%rotate-180       { @extend %inline; @include rotate(180deg); }
+%rotate-270       { @extend %inline; @include rotate(270deg); }
+%rotate-90-ctr    { @extend %inline; @include rotate(-90deg); }
+%rotate-180-ctr   { @extend %inline; @include rotate(-180deg); }
+%rotate-270-ctr   { @extend %inline; @include rotate(-270deg); }
+
+@if $classes {
+
+  $helpers: inline block zero pull-right pull-left border-right border-left border-top border-bottom align-top align-right align-bottom align-left align-center justify center space round rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
+  // function to generate the helpers
+  @for $i from 1 through length($helpers) {
+    .#{nth($helpers, $i)} { @extend %#{nth($helpers, $i)}; }
+  }
+
+  $spacers: padded pad-top pad-right pad-bottom pad-left gapped gap-top gap-right gap-bottom gap-left;
+  $modifiers: double triple;
+  // function to generate the spacers
+  @for $i from 1 through length($spacers) {
+    .#{nth($spacers, $i)} { @extend %#{nth($spacers, $i)};
+      &.double        { @extend %double; }
+      &.triple        { @extend %triple; }
+    }
+  }
+
+  .clear, .clearfix { @extend %clear;
+    &:after         { content:''; display:block; clear:both; }
+  }
+
+  .stick            { @extend %stick;
+    &.top           { @extend %top; }
+    &.right         { @extend %right; }
+    &.bottom        { @extend %bottom; }
+    &.left          { @extend %left; }
+    &.middle        { @extend %middle; }
+    &.center        { @extend %center; }
+  }
+
+}

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

@@ -235,12 +235,3 @@
     }
   }
 }
-
-
-
-
-// ====================
-//       classes
-// ====================
-
-@import "classes";

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

@@ -32,7 +32,7 @@
   div.modal.active {
     visibility:visible;
     opacity:1;
-    z-index:99;
+    z-index:999;
   }
 }
 
@@ -44,7 +44,7 @@
   left:0;
   bottom:0;
   right:0;
-  z-index:98;
+  z-index:998;
   width:100%;
   height:100%;
   @include inner-shadow(#000000, 200px, 0, 0);
@@ -81,7 +81,7 @@ div.modal {
   }
   .close, .fullscreen {
     position:absolute;
-    z-index:100;
+    z-index:1000;
     font-size:1.25em;
     top:10px;
     right:10px;

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

@@ -61,7 +61,8 @@ form, fieldset, legend, label, input, textarea, select, button,
 table, caption, tbody, tfoot, thead, tr, th, td, 
 header, footer, aside, menu, nav, section, article, details, 
 pre, code, iframe, object, canvas, audio, video {
-  @extend %zero;
+  margin:0;
+  padding:0;
   border: 0;
 }
 
@@ -72,5 +73,5 @@ pre, code, iframe, object, canvas, audio, video {
 // HTML5 display fix //
 ///////////////////////
 header, footer, aside, menu, nav, section, article, details {
-  @extend %block;
+  display:block;
 }

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

@@ -32,9 +32,7 @@
 //   small tablets   //
 ///////////////////////
 @include small-tablet {
-  @if $classes {
-    @include grid-responsive();
-  }
+  @include grid-responsive();
   nav:not(.pagination), nav.inline {
     width:100%;
     ul, ul.row {
@@ -168,9 +166,7 @@
 //     handhelds     //
 ///////////////////////
 @include mobile {
-  @if $classes {
-    @include grid-responsive(false);
-  }
+  @include grid-responsive(false);
   .tabs:not(.mobile) {
     > ul {
       li {

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

@@ -0,0 +1,92 @@
+// =============================================
+//        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%);
+  }
+  &.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-scss/groundwork.scss

@@ -16,15 +16,6 @@
 
 // grid
 @import "grid";
-@if $classes {
-  @include grid-classes();
-}
-
-// helper classes
-@import "helpers";
-@if $classes {
-  @include helper-classes();
-}
 
 // components
 @import "typography";
@@ -41,5 +32,8 @@
 // @import "popovers";
 @import "modals";
 
+// helper classes
+@import "helpers";
+
 // responsive adjustments
 @import "responsive";