pwnstyles_rails 0.1.20 → 0.1.21

data/Gemfile

@@ -1,12 +1,12 @@
 source :rubygems
 
-gem 'rails', '>= 3.2.0'
-gem 'sass-rails', '>= 3.2.4'
+gem 'rails', '>= 3.2.3'
+gem 'sass-rails', '>= 3.2.5'
 
 group :development do
   gem 'shoulda', '>= 0'
-  gem 'bundler', '~> 1.0.0'
-  gem 'jeweler', '>= 1.8.0'
+  gem 'bundler', '>= 1.1.0'
+  gem 'jeweler', '>= 1.8.3'
   gem 'rcov', '>= 0', :platform => :mri_18
   gem 'simplecov', '>= 0', :platform => :mri_19
 end

data/Gemfile.lock

@@ -1,31 +1,31 @@
 GEM
   remote: http://rubygems.org/
   specs:
-    actionmailer (3.2.1)
-      actionpack (= 3.2.1)
-      mail (~> 2.4.0)
-    actionpack (3.2.1)
-      activemodel (= 3.2.1)
-      activesupport (= 3.2.1)
+    actionmailer (3.2.3)
+      actionpack (= 3.2.3)
+      mail (~> 2.4.4)
+    actionpack (3.2.3)
+      activemodel (= 3.2.3)
+      activesupport (= 3.2.3)
       builder (~> 3.0.0)
       erubis (~> 2.7.0)
       journey (~> 1.0.1)
       rack (~> 1.4.0)
-      rack-cache (~> 1.1)
+      rack-cache (~> 1.2)
       rack-test (~> 0.6.1)
       sprockets (~> 2.1.2)
-    activemodel (3.2.1)
-      activesupport (= 3.2.1)
+    activemodel (3.2.3)
+      activesupport (= 3.2.3)
       builder (~> 3.0.0)
-    activerecord (3.2.1)
-      activemodel (= 3.2.1)
-      activesupport (= 3.2.1)
-      arel (~> 3.0.0)
+    activerecord (3.2.3)
+      activemodel (= 3.2.3)
+      activesupport (= 3.2.3)
+      arel (~> 3.0.2)
       tzinfo (~> 0.3.29)
-    activeresource (3.2.1)
-      activemodel (= 3.2.1)
-      activesupport (= 3.2.1)
-    activesupport (3.2.1)
+    activeresource (3.2.3)
+      activemodel (= 3.2.3)
+      activesupport (= 3.2.3)
+    activesupport (3.2.3)
       i18n (~> 0.6)
       multi_json (~> 1.0)
     arel (3.0.2)
@@ -41,31 +41,31 @@ GEM
       rdoc
     journey (1.0.3)
     json (1.6.5)
-    mail (2.4.1)
+    mail (2.4.4)
       i18n (>= 0.4.0)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
-    mime-types (1.17.2)
+    mime-types (1.18)
     multi_json (1.1.0)
     polyglot (0.3.3)
     rack (1.4.1)
-    rack-cache (1.1)
+    rack-cache (1.2)
       rack (>= 0.4)
     rack-ssl (1.3.2)
       rack
     rack-test (0.6.1)
       rack (>= 1.0)
-    rails (3.2.1)
-      actionmailer (= 3.2.1)
-      actionpack (= 3.2.1)
-      activerecord (= 3.2.1)
-      activeresource (= 3.2.1)
-      activesupport (= 3.2.1)
+    rails (3.2.3)
+      actionmailer (= 3.2.3)
+      actionpack (= 3.2.3)
+      activerecord (= 3.2.3)
+      activeresource (= 3.2.3)
+      activesupport (= 3.2.3)
       bundler (~> 1.0)
-      railties (= 3.2.1)
-    railties (3.2.1)
-      actionpack (= 3.2.1)
-      activesupport (= 3.2.1)
+      railties (= 3.2.3)
+    railties (3.2.3)
+      actionpack (= 3.2.3)
+      activesupport (= 3.2.3)
       rack-ssl (~> 1.3.2)
       rake (>= 0.8.7)
       rdoc (~> 3.4)
@@ -75,7 +75,7 @@ GEM
     rdoc (3.12)
       json (~> 1.4)
     sass (3.1.15)
-    sass-rails (3.2.4)
+    sass-rails (3.2.5)
       railties (~> 3.2.0)
       sass (>= 3.1.10)
       tilt (~> 1.3)
@@ -93,16 +93,16 @@ GEM
     treetop (1.4.10)
       polyglot
       polyglot (>= 0.3.1)
-    tzinfo (0.3.31)
+    tzinfo (0.3.33)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bundler (~> 1.0.0)
-  jeweler (>= 1.8.0)
-  rails (>= 3.2.0)
+  bundler (>= 1.1.0)
+  jeweler (>= 1.8.3)
+  rails (>= 3.2.3)
   rcov
-  sass-rails (>= 3.2.4)
+  sass-rails (>= 3.2.5)
   shoulda
   simplecov

data/VERSION

@@ -1 +1 @@
-0.1.20
+0.1.21

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

@@ -0,0 +1,4 @@
+@import 'pwnplus/hacks.css.scss';
+@import 'pwnplus/buttons.css.scss';
+@import 'pwnplus/form_fields.css.scss';
+@import 'pwnplus/menu_bar.css.scss';

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

@@ -1,3 +1,5 @@
+@import 'pwnplus.css.scss';
+
 @import 'vars/color_scheme.css.scss';
 @import 'vars/fonts.css.scss';
 @import 'vars/layout_sizes.css.scss';
@@ -9,8 +11,6 @@
 @import 'generic/images.css.scss';
 @import 'generic/inputs.css.scss';
 @import 'generic/links.css.scss';
-@import 'generic/lists.css.scss';
-@import 'generic/menu.css.scss';
 @import 'generic/pwnfx.css.scss';
 @import 'generic/tables.css.scss';
 @import 'generic/text.css.scss';

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

@@ -1,128 +1,7 @@
 input[type=submit], input[type=button], button, a.button {
-  display: inline-block;
+  @include pwnplus-subdued-button($button-base-color);
 
-  margin: 0;
-  padding: 0.1em 1ex;
-  border: 1px solid $button-border-color;
   &.emphasized {
-    border-color: $color-button-border-color;
-  }
-  
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  
-  color: $button-text-color;
-  &.emphasized {
-    color: $color-button-text-color;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
-  }
-  font-size: 1.21em;
-  line-height: 1.35em;
-  text-decoration: none;
-  text-overflow: ellipsis;  
-  
-  background-color: $button-color;
-  background: -webkit-gradient(linear, 0% 40%, 0% 70%,
-      from(darken($button-color, 1%)), to(lighten($button-color, 1%)));
-  background: -moz-gradient(linear, 0% 40%, 0% 70%,
-      from(darken($button-color, 1%)), to(lighten($button-color, 1%))); 
-  &.emphasized {
-    background-color: $color-button-color;
-    background: -webkit-gradient(linear, 0% 40%, 0% 70%,
-        from(darken($color-button-color, 1%)),
-        to(lighten($color-button-color, 1%)));
-    background: -moz-gradient(linear, 0% 40%, 0% 70%,
-        from(darken($color-button-color, 1%)),
-        to(lighten($color-button-color, 1%))); 
-  }
-  
-  -webkit-transition: all .218s;
-  -moz-transition: all .218s;
-  transition: all .218s;  
-  
-  img {
-    -webkit-filter: grayscale(0.66);
-  }
-  &.emphasized {
-    img {
-      -webkit-filter: brightness(-0.2);
-    }
-  }
-  
-  &:visited {
-    color: $button-text-color;
-    &.emphasized {
-      color: $color-button-text-color;
-    }
-  }
-
-  &:hover {
-    color: $button-hover-text-color;
-    border-color: $button-hover-border-color;
-    &.emphasized {
-      color: $color-button-hover-text-color;
-      border-color: $color-button-hover-border-color;
-      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-    }
-    
-    background: -webkit-gradient(linear, 0% 40%, 0% 70%,
-        from(darken($button-color, 1%)), to(lighten($button-color, 2%)));
-    background: -moz-gradient(linear, 0% 40%, 0% 70%,
-        from(darken($button-color, 1%)), to(lighten($button-color, 2%)));     
-    &.emphasized {
-      background: -webkit-gradient(linear, 0% 40%, 0% 70%,
-          from(darken($color-button-color, 1%)),
-          to(lighten($color-button-color, 2%)));
-      background: -moz-gradient(linear, 0% 40%, 0% 70%,
-          from(darken($color-button-color, 1%)),
-          to(lighten($color-button-color, 2%)));     
-    }
-
-    -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);
-    &.emphasized {
-      -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);
-    }
-    
-    img {
-      -webkit-filter: grayscale(0.33);
-    }
-    &.emphasized {
-      img {
-        -webkit-filter: brightness(-0.1);
-      }
-    }    
-  }
-  &:active {
-    color: $button-active-text-color;
-    border-color: $button-active-border-color;
-    &.emphasized {
-      color: $color-button-active-text-color;
-      border-color: $color-button-active-border-color;      
-    }
-    
-    -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);
-    &.emphasized {
-      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);
-    }
-
-    img {
-      -webkit-filter: grayscale(0);
-    }
-    &.emphasized {
-      img {
-        -webkit-filter: brightness(0);
-      }
-    }    
+    @include pwnplus-emphasized-button($color-button-base-color);
   }
 }

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

@@ -23,7 +23,7 @@ body {
   -webkit-box-flex: 1;
   box-flex: 1;
 }
-header, footer {
+#header, #footer {
   -moz-box-flex: 0;
   -webkit-box-flex: 0;
   box-flex: 0;

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

@@ -1,42 +1,47 @@
-footer {
+#footer {
   margin: 0;
   border-top: 6px solid $footer-border-color;
 
   color: $footer-text-color;
   font-size: 11pt;
-}
-footer nav {
-  margin: 0 auto;
-  padding: 5px 8px 0 8px;
-  width: $page-width;
-}
-footer p {
-  margin: 0;
-}
-footer p.copyright img {
-  float: left;
-  margin-right: 5px;
-}
-footer p.copyright {
-  line-height: 16px;
-}
-footer p.design {
-  font-size: 9pt;
-  display: block;
-  padding: 36px 0 4px 0;
-  text-align: center;
-}
-footer a {
-  color: $footer-text-color;
-}
-footer nav ul {
-  margin: 0;
-  padding: 0 0 8px 0;
-}
-footer nav ul li {
-  display: inline-block;
-}
-footer nav ul a {
-  display: inline-block;
-  padding: 5px;
+
+  nav {
+    margin: 0 auto;
+    padding: 5px 8px 0 8px;
+    width: $page-width;
+    ul {
+      margin: 0;
+      padding: 0 0 8px 0;
+      li {
+        display: inline-block;
+      }
+      a {
+        display: inline-block;
+        padding: 5px;
+      }
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+
+  p.copyright {
+    line-height: 16px;
+    img {
+      float: left;
+      margin-right: 5px;
+    }
+  }
+
+  p.design {
+    font-size: 9pt;
+    display: block;
+    padding: 36px 0 4px 0;
+    text-align: center;
+  }
+  
+  a {
+    color: $footer-text-color;
+  }  
 }

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

@@ -1,75 +1,59 @@
-header {
+#header {
   background-color: $header-background-color;
   border-bottom: 1px solid $header-border-color;  
-
-  hgroup {
+  
+  #main-menu {
     width: $page-width;
-    height: $header-height;
-    margin: 0 auto;    
-    position: relative;
+    margin: 0 auto;
 
     color: $header-text-color;
     font-family: $heading-font;
-    font-weight: bold;
+    vertical-align: baseline;
+
+    > ol {
+      @include pwnplus-menu-bar(
+        $bar-color: $header-background-color,
+        $text-color: $header-text-color,
+        $border-color: $header-border-color,
+        $hover-bar-color: $header-menu-hover-color,
+        $hover-text-color: $header-menu-hover-text-color,
+        $last-item-right: true
+      );
+  
+      font-size: $header-menu-font-size;
+      
+      > li > a:after {
+        content: "\FEFF";
+        display: inline-block;
+        font-size: ($header-height - 4px);
+        line-height: $header-height;
+        width: 0px;
+      }
+    }
   }
   
   h1 {
     display: inline-block;
-    overflow: hidden;
     margin: 0;
+    padding: 0;
   
     font-size: ($header-height - 4px);
     line-height: $header-height;
     font-variant: small-caps;
     color: $header-title-color;
-  
-    vertical-align: top;
     
     img {
-      display: block;
-      padding: 2px 0;
-      float: left;
+      display: inline-block;
+      margin: auto 0;
     }
     
     span {
-      display: block;
-      padding-right: 0.5em;
-      float: left;
-      height: 100%;
+      line-height: $header-height;
     }
     
     // Padding between the image and the title.
     img + span {
-      padding-left: 0.5em;
-    }
-    
-    a, a:visited, a:hover, a:active {
-      color: inherit;
-      text-decoration: none;
+      padding-left: 0.2em;
     }
   }
-  
-  nav {
-    display: inline-block;
-    font-weight: normal;
-    height: 100%;
-  }
-  nav > ol {
-    @include menu-list($hover-color: $header-menu-hover-color,
-                       $hover-text-color: $header-menu-hover-text-color,
-                       $border-color: $header-border-color,
-                       $last-item-right: true);
-    background-color: $header-background-color;
-
-    font-size: $header-menu-font-size;
-    line-height: $header-menu-line-height;
-    height: 100%;
-    > li > a {
-      padding-top: $header-height - $header-menu-line-height;
-      height: $header-menu-line-height;
-    }
-  }
-  nav a img {
-    vertical-align: baseline;
-  }
 }

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

@@ -0,0 +1,136 @@
+// Low-level function for a Google Plus-style button.
+@mixin pwnplus-button(
+    $color,
+    $border-color,
+    $text-color,
+    $hover-text-color: $text-color,
+    $hover-border-color: $border-color,
+    $active-text-color: $text-color,
+    $active-border-color: $hover-border-color,
+    $subdued: true
+) {
+  display: inline-block;
+
+  margin: 0;
+  padding: 0.1em 1ex;
+  border: 1px solid $border-color;
+
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  
+  color: $text-color;
+  @if not $subdued {
+    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+  }
+  font-size: 1.21em;
+  line-height: 1.35em;
+  text-decoration: none;
+  text-overflow: ellipsis;  
+  
+  background-color: $color;
+  background: -webkit-gradient(linear, 0% 40%, 0% 70%,
+              from(darken($color, 1%)), to(lighten($color, 1%)));
+  background: -moz-gradient(linear, 0% 40%, 0% 70%,
+              from(darken($color, 1%)), to(lighten($color, 1%))); 
+  
+  -webkit-transition: all .218s;
+  -moz-transition: all .218s;
+  transition: all .218s;  
+  
+  @if $subdued {
+    img {
+      -webkit-filter: grayscale(0.66);
+    }
+  }
+  @if not $subdued {
+    img {
+      -webkit-filter: brightness(-0.2);
+    }
+  }
+  
+  &:visited {
+    color: $text-color;
+  }
+
+  &:hover {
+    color: $hover-text-color;
+    border-color: $hover-border-color;
+    @if not $subdued {
+      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    }
+    
+    background: -webkit-gradient(linear, 0% 40%, 0% 70%,
+        from(darken($color, 1%)), to(lighten($color, 2%)));
+    background: -moz-gradient(linear, 0% 40%, 0% 70%,
+        from(darken($color, 1%)), to(lighten($color, 2%)));     
+
+    @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);
+
+      img {
+        -webkit-filter: grayscale(0.33);
+      }
+    }
+    @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);
+
+      img {
+        -webkit-filter: brightness(-0.1);
+      }
+    }
+  }
+  &:active {
+    color: $active-text-color;
+    border-color: $active-border-color;
+    
+    @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);
+
+      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);
+
+      img {
+        -webkit-filter: brightness(0);
+      }
+    }
+  }
+}
+
+// Handy mixin for a gray-ish Google Plus-like button.
+@mixin pwnplus-subdued-button($main-color) {
+  @include pwnplus-button(
+    $color: change-color($main-color, $saturation: 5%, $lightness: 95%),
+    $text-color: change-color($main-color, $saturation: 5%, $lightness: 43%),
+    $border-color: change-color($main-color, $saturation: 5%, $lightness: 86%),
+    $hover-border-color: change-color($main-color, $saturation: 5%,
+                                                   $lightness: 78%),
+    $subdued: true
+  );
+}
+
+// Handy mixin for a colored Google Plus-like button.
+@mixin pwnplus-emphasized-button($main-color) {
+  @include pwnplus-button(
+    $color: change-color($main-color, $saturation: 100%, $lightness: 36%),
+    $text-color: change-color($main-color, $saturation: 0%, $lightness: 100%),
+    $border-color: change-color($main-color, $saturation: 57%, $lightness: 32%),
+    $hover-border-color: change-color($main-color, $saturation: 100%,
+                                                   $lightness: 22%),
+    $subdued: false
+  );
+}