pwnstyles_rails 0.1.24 → 0.1.25

data/Gemfile

@@ -1,12 +1,13 @@
 source :rubygems
 
+gem 'compass-rails', '>= 1.0.3'
 gem 'rails', '>= 3.2.3'
 gem 'sass-rails', '>= 3.2.5'
 
 group :development do
-  gem 'minitest', '>= 3.0.0'
-  gem 'bundler', '>= 1.1.0'
-  gem 'jeweler', '>= 1.8.3'
+  gem 'minitest', '>= 3.4.0'
+  gem 'bundler', '>= 1.2.0'
+  gem 'jeweler', '>= 1.8.4'
   gem 'rcov', '>= 0', :platform => :mri_18
   gem 'simplecov', '>= 0', :platform => :mri_19
 end

data/Gemfile.lock

@@ -29,8 +29,16 @@ GEM
       i18n (~> 0.6)
       multi_json (~> 1.0)
     arel (3.0.2)
-    builder (3.0.1)
+    builder (3.0.3)
+    chunky_png (1.2.6)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    compass-rails (1.0.3)
+      compass (>= 0.12.2, < 0.14)
     erubis (2.7.0)
+    fssm (0.2.9)
     git (1.2.5)
     hike (1.2.1)
     i18n (0.6.1)
@@ -99,9 +107,10 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  bundler (>= 1.1.0)
-  jeweler (>= 1.8.3)
-  minitest (>= 3.0.0)
+  bundler (>= 1.2.0)
+  compass-rails (>= 1.0.3)
+  jeweler (>= 1.8.4)
+  minitest (>= 3.4.0)
   rails (>= 3.2.3)
   rcov
   sass-rails (>= 3.2.5)

data/VERSION

@@ -1 +1 @@
-0.1.24
+0.1.25

data/app/assets/images/pwnstyles/select-arrow-emph.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="25,42 75,42 50,66" fill="#595959" stroke="none"/>
+</svg>

data/app/assets/images/pwnstyles/select-arrow.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 100 100" width="0.5em" height="0.5em" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <polygon points="35,42 85,42 60,66" fill="#8C8C8C"/>
+<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="25,42 75,42 50,66" fill="#8C8C8C" stroke="none"/>
 </svg>

data/app/assets/stylesheets/_pwnstyles.css.scss

@@ -4,16 +4,18 @@
 @import 'vars/fonts.css.scss';
 @import 'vars/layout_sizes.css.scss';
 
+@import 'generic/compass.css.scss';
 @import 'generic/reset.css.scss';
-@import 'generic/buttons.css.scss';
-@import 'generic/figures.css.scss';
-@import 'generic/forms.css.scss';
-@import 'generic/images.css.scss';
-@import 'generic/inputs.css.scss';
-@import 'generic/links.css.scss';
 @import 'generic/pwnfx.css.scss';
-@import 'generic/tables.css.scss';
-@import 'generic/text.css.scss';
+
+@import 'elements/buttons.css.scss';
+@import 'elements/figures.css.scss';
+@import 'elements/forms.css.scss';
+@import 'elements/images.css.scss';
+@import 'elements/inputs.css.scss';
+@import 'elements/links.css.scss';
+@import 'elements/tables.css.scss';
+@import 'elements/text.css.scss';
 
 @import 'modules/body.css.scss';
 @import 'modules/footer.css.scss';

data/app/assets/stylesheets/{generic → elements}/_forms.css.scss

@@ -3,30 +3,41 @@ form {
     display: table;
     border-collapse: collapse;
     width: 100%;
-    
+
     &.hidden {
       display: none;
     }
-  
+
     .field {
       display: table-row;
       margin: 0;
-      padding: 0 0 0.2em 0;
+      padding: 0 0 0.25em 0;
+      vertical-align: top;
       &.hidden {
         display: none;
       }
-  
+
       > * {
         display: table-cell;
-        vertical-align: middle;
+        // When browsers implement inline-box-align, use it.
+        // inline-box-align: initial;
+        // vertical-align: baseline;
+        vertical-align: top;
         margin: 0;
       }
-      > label {
-        padding: 0 0.4em 0 0;
+      > label, > .label, > .field_with_errors {
+        display: block; // gets wrapped by table-cell
+        padding-right: 0.375em;
         text-align: right;
       }
       > .value {
-        padding: 0 0 0.25em 0;
+        padding-bottom: 0.25em;
+        > input, select, textarea {
+          vertical-align: top;
+        }
+        > input[type=checkbox], > input[type=radio] {
+          vertical-align: middle;
+        }
         > .field_with_errors {
          display: block;
         }
@@ -34,27 +45,26 @@ form {
       > .comment {
         padding: 0 0 0 0.5em;
       }
-      
+
       input, select, textarea {
         font-size: inherit;
       }
-      input, select:first-child:last-child, textarea { 
+      input, select:first-child:last-child, textarea {
         width: 100%;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
+        @include box-sizing(border-box);
       }
       input[type=radio], input[type=checkbox] {
-        width: auto;
+        width: 1.2em;
+        @include box-sizing(content-box);
       }
     }
   }
-  
+
   .action {
     margin: 0;
     padding: 0;
     text-align: center;
-    
+
     input[type=submit], input[type=button], button {
       min-width: 7em;
     }

data/app/assets/stylesheets/elements/_inputs.css.scss

@@ -0,0 +1,25 @@
+input, textarea {
+  @include pwnplus-text-field($input-border-color);
+}
+textarea {
+  height: 5.25em;
+}
+
+input[type=radio], input[type=checkbox] {
+  @include pwnplus-box-field($input-border-color);
+}
+
+select {
+  @include pwnplus-select-field($input-border-color);
+}
+
+label, .label {
+  @include pwnplus-label;
+}
+
+.field_with_errors {
+  input[type=text], select, textarea {
+    @include pwnplus-field-error-highlighting;
+  }
+}
+

data/app/assets/stylesheets/{generic → elements}/_tables.css.scss

@@ -1,5 +1,5 @@
 th, td {
-  padding: 0.1em 0.3em 0.2em 0;
+  padding: 0.125em 0.375em 0.25em 0;
 }
 tr, th, td {
   vertical-align: middle;

data/app/assets/stylesheets/{generic → elements}/_text.css.scss

@@ -11,13 +11,13 @@ html, body {
 }
 
 p {
-  margin: 0.1em 0 0.2em 0;
+  margin: 0.125em 0 0.25em 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: $heading-font;
   font-weight: bold;
-  margin: 0.25em 0 0.2em 0;
+  margin: 0.25em 0 0.1875em 0;
   text-rendering: geometricPrecision;
 
   // This patch makes buttons in headings look less weird.

data/app/assets/stylesheets/generic/_compass.css.scss

@@ -0,0 +1,19 @@
+$experimental-support-for-mozilla: true;
+$experimental-support-for-webkit: true;
+$experimental-support-for-microsoft: true;
+$experimental-support-for-pie: false;
+$experimental-support-for-opera: false;
+$experimental-support-for-khtml: false;
+$legacy-support-for-ie: false;
+$legacy-support-for-ie6: false;
+$legacy-support-for-ie7: false;
+$legacy-support-for-ie8: false;
+$legacy-support-for-mozilla: false;
+$support-for-original-webkit-gradients: false;
+
+@import "compass";
+@import "compass/typography";
+@import "compass/utilities";
+@import "compass/reset/utilities";
+@import "compass/layout";
+

data/app/assets/stylesheets/generic/_reset.css.scss

@@ -1,36 +1,45 @@
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
-    pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
-    strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
-    legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
-    canvas, details, dialog, figcaption, figure,  footer, header, hgroup, menu,
-    nav, section, summary, time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-size: inherit;
-  line-height: inherit;
-  font: inherit;
-  vertical-align: baseline;
-  background: transparent;
-}
-
-article, aside, details, figcaption, figure, dialog, footer, header, hgroup,
-    menu, nav, section { 
-  display: block;
+@each $tag in html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+    blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
+    samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form,
+    label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
+    aside, canvas, details, dialog, figcaption, figure,  footer, header,
+    hgroup, menu, nav, section, summary, time, mark, audio, video {
+  #{$tag} {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font: inherit;
+    vertical-align: baseline;
+    background: transparent;
+  }
 }
 
-dl, ul, ol {
-  list-style: none;
+@each $html5_tag in article, aside, details, figcaption, figure, dialog,
+    footer, header, hgroup, menu, nav, section {
+  #{$html5_tag} {
+    display: block;
+  }
 }
 
-blockquote, q {
-  quotes: none;
+@each $list_tag in dl, ul, ol {
+  #{$list_tag} {
+    list-style: none;
+  }
 }
 
-blockquote:before, blockquote:after, q:before, q:after {
-  content: '';
-  content: none;
+@each $tag in blockquote, q {
+  #{$tag} {
+    quotes: none;
+    @each $side in before, after {
+      &:#{$side} {
+        content: '';
+        content: none;
+      }
+    }
+  }
 }
 
 a {
@@ -62,9 +71,13 @@ del {
   text-decoration: line-through;
 }
 
-abbr[title], dfn[title] {
-  border-bottom: 1px dotted;
-  cursor: help;
+@each $tag in abbr, dfn {
+  #{$tag} {
+    &[title] {
+      border-bottom: 1px dotted;
+      cursor: help;
+    }
+  }
 }
 
 table {
@@ -84,6 +97,8 @@ hr {
   padding: 0;
 }
 
-input, select {
-  vertical-align: middle;
+@each $tag in input, select {
+  #{$tag} {
+    vertical-align: middle;
+  }
 }

data/app/assets/stylesheets/modules/_body.css.scss

@@ -18,6 +18,8 @@ body {
 }
 
 #real-body {
+  position: absolute;
+  width: 100%;
   background-color: #ffffff;
   -moz-box-flex: 1;
   -webkit-box-flex: 1;

data/app/assets/stylesheets/pwnplus/_buttons.css.scss

@@ -10,46 +10,37 @@
     $active-border-color: $hover-border-color,
     $subdued: true
 ) {
-  display: inline-block;
+  @include inline-block;
 
   margin: 0;
   padding: 0.1em 1ex;
   border: 1px solid $border-color;
-
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  @include border-radius(2px);
 
   color: $text-color;
   @if not $subdued {
-    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+    @include text-shadow(0 1px rgba(0, 0, 0, 0.1));
   }
-  font-size: 1.21em;
-  line-height: 1.35em;
+  font-size: 1.25em;
+  line-height: 1.375em;
   font-weight: $font-weight;
   text-decoration: none;
   text-overflow: ellipsis;
 
   background-color: $color;
-  background: -webkit-linear-gradient(top, lighten($color, 1%),
-                                           darken($color, 2%));
-  background: -moz-linear-gradient(top, lighten($color, 1%),
-                                        darken($color, 2%));
-  background: linear-gradient(to bottom, lighten($color, 1%) 0%,
-                                         darken($color, 2%) 100%);
+  @include background(linear-gradient(lighten($color, 1%),
+                                      darken($color, 2%)));
 
-  -webkit-transition: all .218s;
-  -moz-transition: all .218s;
-  transition: all .218s;
+  @include transition(all .218s);
 
   @if $subdued {
     img {
-      -webkit-filter: grayscale(0.4);
+      @include filter(grayscale(0.4));
     }
   }
   @if not $subdued {
     img {
-      -webkit-filter: brightness(-0.05);
+      @include filter(brightness(-0.05));
     }
   }
 
@@ -61,25 +52,19 @@
     color: $hover-text-color;
     border-color: $hover-border-color;
     @if not $subdued {
-      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+      @include text-shadow(0 1px rgba(0, 0, 0, 0.3));
     }
 
     @if $subdued {
-      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-
+      @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
       img {
-        -webkit-filter: grayscale(0);
+        @include filter(grayscale(0));
       }
     }
     @if not $subdued {
-      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-
+      @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
       img {
-        -webkit-filter: brightness(0.05);
+        @include filter(brightness(0.05));
       }
     }
   }
@@ -87,31 +72,20 @@
     color: $active-text-color;
     border-color: $active-border-color;
 
-    background: -webkit-linear-gradient(top, darken($color, 2%),
-                                             lighten($color, 2%));
-    background: -moz-linear-gradient(top, darken($color, 2%),
-                                          lighten($color, 2%));
-    background: linear-gradient(to bottom, darken($color, 2%) 0%,
-                                           lighten($color, 2%) 100%);
+    @include background(linear-gradient(lighten($color, 2%),
+                                        darken($color, 2%)));
 
     @if $subdued {
-      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-
+      @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
       img {
         -webkit-filter: grayscale(0);
       }
     }
     @if not $subdued {
-      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-
-      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-
+      @include text-shadow(0 1px rgba(0, 0, 0, 0.3));
+      @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
       img {
-        -webkit-filter: brightness(0.05);
+        @include filter(brightness(0.05));
       }
     }
   }

data/app/assets/stylesheets/pwnplus/_form_fields.css.scss

@@ -1,52 +1,43 @@
 // Make form fields look like Google Plus fields.
-@mixin pwnplus-text-input(
+@mixin pwnplus-text-field(
     $border-color,
     $text-color: inherit,
     $background-color: inherit,
     $hover-border-color: darken($border-color, 19%),
-    $hover-shadow-color: lighten($hover-border-color, 3%),
+    $hover-shadow-color: lighten($hover-border-color, 22%),
     $focus-border-color: saturate(darken($border-color, 55%), 100%),
-    $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%),
-    $placeholder-text-color: change-color($border-color, $saturation: 95%,
-                                                         $lightness: 55%)
+    $focus-shadow-color: desaturate(lighten($focus-border-color, 44%), 33%),
+    $placeholder-text-color: change-color($border-color, $saturation: 5%,
+                                                         $lightness: 68%)
 ) {
   margin: 0;
-  padding: 0.1em 0.5ex;
+  padding: 0.125em 0.5ex;
   border: 1px solid $border-color;
   border-top-color: darken($border-color, 10%);
 
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
+  @include border-radius(2px);
 
   color: $text-color;
-  font-size: inherit;
+  font: inherit;
   line-height: inherit;
   text-decoration: none;
 
   background-color: $background-color;
 
-  -webkit-transition: all .218s;
-  -moz-transition: all .218s;
-  transition: all .218s;
+  @include transition(all .218s);
 
   &:hover {
     border-color: $hover-border-color;
     border-top-color: darken($hover-border-color, 10%);
 
-
-    -moz-box-shadow: inset 0 1px 2px $hover-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $hover-shadow-color;
-    box-shadow: inset 0 1px 2px $hover-shadow-color;
+    @include box-shadow(inset 0 1px 2px $hover-shadow-color);
   }
   &:focus {
     border-color: $focus-border-color;
     border-top-color: darken($focus-border-color, 10%);
     outline: none;
 
-    -moz-box-shadow: inset 0 1px 2px $focus-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $focus-shadow-color;
-    box-shadow: inset 0 1px 2px $input-focus-shadow-color;
+    @include box-shadow(inset 0 1px 2px $focus-shadow-color);
   }
 
   &::-webkit-input-placeholder {
@@ -62,78 +53,86 @@
 }
 
 // Google Plus-like stylng for box-like form fields (radio, checkbox).
-@mixin gplus-box-form-field(
+@mixin pwnplus-box-field(
     $border-color,
     $background-color: inherit,
     $hover-border-color: darken($border-color, 19%),
-    $hover-shadow-color: lighten($hover-border-color, 3%),
+    $hover-shadow-color: lighten($hover-border-color, 22%),
     $focus-border-color: saturate(darken($border-color, 55%), 100%),
-    $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%)
+    $focus-shadow-color: desaturate(lighten($focus-border-color, 44%), 33%)
 ) {
   border: 1px solid $border-color;
   background-color: $background-color;
+  width: 1.2em;
+  height: 1.2em;
 
-  -webkit-transition: all .218s;
-  -moz-transition: all .218s;
-  transition: all .218s;
+  @include transition(all .218s);
 
   &:hover {
     border-color: $hover-border-color;
 
-    box-shadow: inset 0 1px 2px $hover-shadow-color;
-    -moz-box-shadow: inset 0 1px 2px $hover-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $hover-shadow-color;
+    @include box-shadow(inset 0 1px 2px $hover-shadow-color);
   }
   &:focus {
     border-color: $focus-border-color;
     outline: none;
 
-    -moz-box-shadow: inset 0 1px 2px $focus-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $focus-shadow-color;
-    box-shadow: inset 0 1px 2px $focus-shadow-color;
+    @include box-shadow(inset 0 1px 2px $focus-shadow-color);
   }
 }
 
-@mixin gplus-form-select(
+// Google Plus-like styling for drop-downs.
+@mixin pwnplus-select-field(
     $border-color,
     $text-color: inherit,
     $background-color: inherit,
     $hover-border-color: darken($border-color, 19%),
-    $hover-shadow-color: lighten($hover-border-color, 3%),
+    $hover-shadow-color: lighten($hover-border-color, 22%),
     $focus-border-color: saturate(darken($border-color, 55%), 100%),
-    $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%),
-    $placeholder-text-color: change-color($border-color, $saturation: 95%,
-                                                         $lightness: 55%)
+    $focus-shadow-color: desaturate(lighten($focus-border-color, 44%), 33%)
 ) {
-  @include gplus-text-input(
+  @include pwnplus-text-field(
     $border-color: $border-color,
     $text-color: $text-color,
     $background-color: $background-color,
     $hover-border-color: $hover-border-color,
     $hover-shadow-color: $hover-shadow-color,
     $focus-border-color: $focus-border-color,
-    $focus-shadow-color: $focus-shadow-color,
-    $placeholder-text-color: $placeholder-text-color
+    $focus-shadow-color: $focus-shadow-color
   );
-  padding: 0.1em 2ex 0.1em 0.5ex;
+  padding: 0.125em 2ex 0.125em 0.5ex;
   text-overflow: ellipsis;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  background: asset_data_url("pwnstyles/select-arrow.svg") no-repeat center
-              right;
+  @include appearance(textfield);
+  background-image: asset_data_url("pwnstyles/select-arrow.svg");
+  background-repeat: no-repeat;
+  background-position: center right;
+  background-size: auto 1em;
+  &:hover, &:focus {
+    background-image: asset_data_url("pwnstyles/select-arrow-emph.svg");
+  }
+  // Animating the arrow SVG is glitchy on Chrome.
+  @include transition(all .218s, background-image 0s);
 }
 
 // Import to highlight a form field to indicate errors in the input.
-@mixin gplus-form-field-error-highlighting(
+@mixin pwnplus-field-error-highlighting(
     $highlight-border: hsl(0deg, 100%, 50%),
     $highlight-background: change-color($highlight-border, $lightness: 97%),
     $highlight-shadow: lighten($highlight-border, 27%)
 ) {
-  border-color: $highlight-color;
+  border-color: $highlight-border;
   background-color: $highlight-background;
 
-  box-shadow: inset 0 1px 2px $highlight-shadow;
-  -moz-box-shadow: inset 0 1px 2px $highlight-shadow;
-  -webkit-box-shadow: inset 0 1px 2px $highlight-shadow;
+  @include box-shadow(inset 0 1px 2px $highlight-shadow);
 }
+
+// Add the same padding to labels, so they align nicely with text fields.
+@mixin pwnplus-label {
+  display: inline-block;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+  border: 1px solid rgba(255, 255, 255, 0);
+  padding: 0.125em 0;
+}
+

data/app/assets/stylesheets/pwnplus/_menu_bar.css.scss

@@ -25,12 +25,12 @@
 
   vertical-align: bottom;
   > li {
-    display: inline-block;
+    @include inline-block;
     background-color: $bar-color;
     vertical-align: bottom;
 
     > a {
-      display: inline-block;
+      @include inline-block;
     }
 
     > ol {
@@ -43,9 +43,7 @@
       position: absolute;
       z-index: $z-index;
 
-      -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
-      -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
-      box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
+      @include box-shadow(0 1px 1px 1px rgba(0, 0, 0, 0.1));
 
       a {
         padding: 0 2.5em 0 0.5em;
@@ -61,7 +59,7 @@
     background-color: $hover-bar-color;
     color: $hover-text-color;
     img {
-      -webkit-filter: grayscale(0);
+      @include filter(grayscale(0));
     }
   }
 
@@ -71,7 +69,7 @@
     text-decoration: none;
     color: inherit;
     img {
-      -webkit-filter: grayscale(0.33);
+      @include filter(grayscale(0.33));
     }
   }
   a:visited {
@@ -99,7 +97,7 @@
       padding: 0 1px 0 0.5em;
     }
     > li:last-child a span {
-      display: inline-block;
+      @include inline-block;
     }
   }
 }

data/lib/pwnstyles_rails.rb

@@ -1,3 +1,6 @@
 if defined? Rails
+  # Load up Compass, so we can use its CSS helpers.
+  require 'compass-rails'
+
   require 'pwnstyles_rails/engine.rb'
 end

data/pwnstyles_rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "pwnstyles_rails"
-  s.version = "0.1.24"
+  s.version = "0.1.25"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Victor Costan"]
-  s.date = "2012-09-07"
+  s.date = "2012-09-17"
   s.description = "Included CSS was designed for reuse across pwnb.us apps."
   s.email = "victor@costan.us"
   s.extra_rdoc_files = [
@@ -25,21 +25,23 @@ Gem::Specification.new do |s|
     "README.rdoc",
     "Rakefile",
     "VERSION",
+    "app/assets/images/pwnstyles/select-arrow-emph.svg",
     "app/assets/images/pwnstyles/select-arrow.svg",
     "app/assets/javascripts/pwn-fx.js.coffee",
     "app/assets/stylesheets/_pwnplus.css.scss",
     "app/assets/stylesheets/_pwnstyles.css.scss",
-    "app/assets/stylesheets/generic/_buttons.css.scss",
-    "app/assets/stylesheets/generic/_figures.css.scss",
-    "app/assets/stylesheets/generic/_forms.css.scss",
-    "app/assets/stylesheets/generic/_images.css.scss",
-    "app/assets/stylesheets/generic/_inputs.css.scss",
-    "app/assets/stylesheets/generic/_links.css.scss",
-    "app/assets/stylesheets/generic/_lists.css.scss",
+    "app/assets/stylesheets/elements/_buttons.css.scss",
+    "app/assets/stylesheets/elements/_figures.css.scss",
+    "app/assets/stylesheets/elements/_forms.css.scss",
+    "app/assets/stylesheets/elements/_images.css.scss",
+    "app/assets/stylesheets/elements/_inputs.css.scss",
+    "app/assets/stylesheets/elements/_links.css.scss",
+    "app/assets/stylesheets/elements/_lists.css.scss",
+    "app/assets/stylesheets/elements/_tables.css.scss",
+    "app/assets/stylesheets/elements/_text.css.scss",
+    "app/assets/stylesheets/generic/_compass.css.scss",
     "app/assets/stylesheets/generic/_pwnfx.css.scss",
     "app/assets/stylesheets/generic/_reset.css.scss",
-    "app/assets/stylesheets/generic/_tables.css.scss",
-    "app/assets/stylesheets/generic/_text.css.scss",
     "app/assets/stylesheets/modules/_body.css.scss",
     "app/assets/stylesheets/modules/_footer.css.scss",
     "app/assets/stylesheets/modules/_header.css.scss",
@@ -76,28 +78,31 @@ Gem::Specification.new do |s|
     s.specification_version = 3
 
     if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<compass-rails>, [">= 1.0.3"])
       s.add_runtime_dependency(%q<rails>, [">= 3.2.3"])
       s.add_runtime_dependency(%q<sass-rails>, [">= 3.2.5"])
-      s.add_development_dependency(%q<minitest>, [">= 3.0.0"])
-      s.add_development_dependency(%q<bundler>, [">= 1.1.0"])
-      s.add_development_dependency(%q<jeweler>, [">= 1.8.3"])
+      s.add_development_dependency(%q<minitest>, [">= 3.4.0"])
+      s.add_development_dependency(%q<bundler>, [">= 1.2.0"])
+      s.add_development_dependency(%q<jeweler>, [">= 1.8.4"])
       s.add_development_dependency(%q<rcov>, [">= 0"])
       s.add_development_dependency(%q<simplecov>, [">= 0"])
     else
+      s.add_dependency(%q<compass-rails>, [">= 1.0.3"])
       s.add_dependency(%q<rails>, [">= 3.2.3"])
       s.add_dependency(%q<sass-rails>, [">= 3.2.5"])
-      s.add_dependency(%q<minitest>, [">= 3.0.0"])
-      s.add_dependency(%q<bundler>, [">= 1.1.0"])
-      s.add_dependency(%q<jeweler>, [">= 1.8.3"])
+      s.add_dependency(%q<minitest>, [">= 3.4.0"])
+      s.add_dependency(%q<bundler>, [">= 1.2.0"])
+      s.add_dependency(%q<jeweler>, [">= 1.8.4"])
       s.add_dependency(%q<rcov>, [">= 0"])
       s.add_dependency(%q<simplecov>, [">= 0"])
     end
   else
+    s.add_dependency(%q<compass-rails>, [">= 1.0.3"])
     s.add_dependency(%q<rails>, [">= 3.2.3"])
     s.add_dependency(%q<sass-rails>, [">= 3.2.5"])
-    s.add_dependency(%q<minitest>, [">= 3.0.0"])
-    s.add_dependency(%q<bundler>, [">= 1.1.0"])
-    s.add_dependency(%q<jeweler>, [">= 1.8.3"])
+    s.add_dependency(%q<minitest>, [">= 3.4.0"])
+    s.add_dependency(%q<bundler>, [">= 1.2.0"])
+    s.add_dependency(%q<jeweler>, [">= 1.8.4"])
     s.add_dependency(%q<rcov>, [">= 0"])
     s.add_dependency(%q<simplecov>, [">= 0"])
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pwnstyles_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.24
+  version: 0.1.25
   prerelease: 
 platform: ruby
 authors:
@@ -9,8 +9,24 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-09-07 00:00:00.000000000 Z
+date: 2012-09-17 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.3
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -50,7 +66,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: 3.0.0
+        version: 3.4.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -58,7 +74,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: 3.0.0
+        version: 3.4.0
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -66,7 +82,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: 1.1.0
+        version: 1.2.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -74,7 +90,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: 1.1.0
+        version: 1.2.0
 - !ruby/object:Gem::Dependency
   name: jeweler
   requirement: !ruby/object:Gem::Requirement
@@ -82,7 +98,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: 1.8.3
+        version: 1.8.4
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -90,7 +106,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: 1.8.3
+        version: 1.8.4
 - !ruby/object:Gem::Dependency
   name: rcov
   requirement: !ruby/object:Gem::Requirement
@@ -139,21 +155,23 @@ files:
 - README.rdoc
 - Rakefile
 - VERSION
+- app/assets/images/pwnstyles/select-arrow-emph.svg
 - app/assets/images/pwnstyles/select-arrow.svg
 - app/assets/javascripts/pwn-fx.js.coffee
 - app/assets/stylesheets/_pwnplus.css.scss
 - app/assets/stylesheets/_pwnstyles.css.scss
-- app/assets/stylesheets/generic/_buttons.css.scss
-- app/assets/stylesheets/generic/_figures.css.scss
-- app/assets/stylesheets/generic/_forms.css.scss
-- app/assets/stylesheets/generic/_images.css.scss
-- app/assets/stylesheets/generic/_inputs.css.scss
-- app/assets/stylesheets/generic/_links.css.scss
-- app/assets/stylesheets/generic/_lists.css.scss
+- app/assets/stylesheets/elements/_buttons.css.scss
+- app/assets/stylesheets/elements/_figures.css.scss
+- app/assets/stylesheets/elements/_forms.css.scss
+- app/assets/stylesheets/elements/_images.css.scss
+- app/assets/stylesheets/elements/_inputs.css.scss
+- app/assets/stylesheets/elements/_links.css.scss
+- app/assets/stylesheets/elements/_lists.css.scss
+- app/assets/stylesheets/elements/_tables.css.scss
+- app/assets/stylesheets/elements/_text.css.scss
+- app/assets/stylesheets/generic/_compass.css.scss
 - app/assets/stylesheets/generic/_pwnfx.css.scss
 - app/assets/stylesheets/generic/_reset.css.scss
-- app/assets/stylesheets/generic/_tables.css.scss
-- app/assets/stylesheets/generic/_text.css.scss
 - app/assets/stylesheets/modules/_body.css.scss
 - app/assets/stylesheets/modules/_footer.css.scss
 - app/assets/stylesheets/modules/_header.css.scss
@@ -194,7 +212,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1394846384795810116
+      hash: 420375135802959521
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:

data/app/assets/stylesheets/generic/_inputs.css.scss

@@ -1,105 +0,0 @@
-// Text fields.
-input[type=text], input[type=email], input[type=tel], input[type=password],
-    input[type=search], input[type=number], textarea, select {
-  margin: 0;
-  padding: 0.1em 0.5ex;
-  border: 1px solid $input-border-color;
-  border-top-color: $input-border-top-color;
-
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-
-  color: $input-text-color;
-  font: inherit;
-  line-height: inherit;
-  text-decoration: none;
-
-  background-color: $input-background-color;
-
-  -webkit-transition: all .218s;
-  -moz-transition: all .218s;
-  transition: all .218s;
-
-  &:hover {
-    border-color: $input-hover-border-color;
-
-    -moz-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
-    box-shadow: inset 0 1px 2px $input-hover-shadow-color;
-  }
-  &:focus {
-    border-color: $input-focus-border-color;
-    outline: none;
-
-    -moz-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
-    box-shadow: inset 0 1px 2px $input-focus-shadow-color;
-  }
-}
-textarea {
-  height: 5.25em;
-}
-::-webkit-input-placeholder {
-  font: inherit;
-  text-shadow: none;
-  color: $input-placeholder-text-color;
-}
-:-moz-placeholder {
-  font: inherit;
-  text-shadow: none;
-  color: $input-placeholder-text-color;
-}
-
-// Multiple-choice fields.
-input[type=radio], input[type=checkbox] {
-  border: 1px solid $input-border-color;
-  background-color: $input-background-color;
-
-  &:hover {
-    border-color: $input-hover-border-color;
-
-    box-shadow: inset 0 1px 2px $input-hover-shadow-color;
-    -moz-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
-  }
-  &:focus {
-    border-color: $input-focus-border-color;
-    outline: none;
-
-    -moz-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
-    -webkit-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
-    box-shadow: inset 0 1px 2px $input-focus-shadow-color;
-  }
-}
-
-// Drop-downs.
-select {
-  padding: 0.1em 2ex 0.1em 0.5ex;
-  text-overflow: ellipsis;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  background: asset_data_url("pwnstyles/select-arrow.svg") no-repeat center
-              right;
-}
-
-// Error highlighting.
-.field_with_errors {
-  input[type=text], input[type=email], input[type=tel], input[type=password],
-      input[type=search], input[type=number], select, textarea {
-    border: 1px solid #FF0000;
-    box-shadow: inset 0 1px 2px #FF8888;
-    -moz-box-shadow: inset 0 1px 2px #FF8888;
-    -webkit-box-shadow: inset 0 1px 2px #FF8888;
-    background-color: #FFEEEE;
-  }
-
-  input[type=radio], input[type=checkbox] {
-    border: 1px solid #FF0000;
-    box-shadow: inset 0 1px 2px #FF8888;
-    -moz-box-shadow: inset 0 1px 2px #FF8888;
-    -webkit-box-shadow: inset 0 1px 2px #FF8888;
-    background-color: #FFEEEE;
-  }
-}