pwnstyles_rails 0.1.22 → 0.1.23

data/Gemfile.lock

@@ -1,53 +1,53 @@
 GEM
   remote: http://rubygems.org/
   specs:
-    actionmailer (3.2.3)
-      actionpack (= 3.2.3)
+    actionmailer (3.2.8)
+      actionpack (= 3.2.8)
       mail (~> 2.4.4)
-    actionpack (3.2.3)
-      activemodel (= 3.2.3)
-      activesupport (= 3.2.3)
+    actionpack (3.2.8)
+      activemodel (= 3.2.8)
+      activesupport (= 3.2.8)
       builder (~> 3.0.0)
       erubis (~> 2.7.0)
-      journey (~> 1.0.1)
+      journey (~> 1.0.4)
       rack (~> 1.4.0)
       rack-cache (~> 1.2)
       rack-test (~> 0.6.1)
-      sprockets (~> 2.1.2)
-    activemodel (3.2.3)
-      activesupport (= 3.2.3)
+      sprockets (~> 2.1.3)
+    activemodel (3.2.8)
+      activesupport (= 3.2.8)
       builder (~> 3.0.0)
-    activerecord (3.2.3)
-      activemodel (= 3.2.3)
-      activesupport (= 3.2.3)
+    activerecord (3.2.8)
+      activemodel (= 3.2.8)
+      activesupport (= 3.2.8)
       arel (~> 3.0.2)
       tzinfo (~> 0.3.29)
-    activeresource (3.2.3)
-      activemodel (= 3.2.3)
-      activesupport (= 3.2.3)
-    activesupport (3.2.3)
+    activeresource (3.2.8)
+      activemodel (= 3.2.8)
+      activesupport (= 3.2.8)
+    activesupport (3.2.8)
       i18n (~> 0.6)
       multi_json (~> 1.0)
     arel (3.0.2)
-    builder (3.0.0)
+    builder (3.0.1)
     erubis (2.7.0)
     git (1.2.5)
     hike (1.2.1)
-    i18n (0.6.0)
-    jeweler (1.8.3)
+    i18n (0.6.1)
+    jeweler (1.8.4)
       bundler (~> 1.0)
       git (>= 1.2.5)
       rake
       rdoc
-    journey (1.0.3)
-    json (1.7.1)
+    journey (1.0.4)
+    json (1.7.5)
     mail (2.4.4)
       i18n (>= 0.4.0)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
-    mime-types (1.18)
-    minitest (3.0.0)
-    multi_json (1.3.4)
+    mime-types (1.19)
+    minitest (3.4.0)
+    multi_json (1.3.6)
     polyglot (0.3.3)
     rack (1.4.1)
     rack-cache (1.2)
@@ -56,39 +56,39 @@ GEM
       rack
     rack-test (0.6.1)
       rack (>= 1.0)
-    rails (3.2.3)
-      actionmailer (= 3.2.3)
-      actionpack (= 3.2.3)
-      activerecord (= 3.2.3)
-      activeresource (= 3.2.3)
-      activesupport (= 3.2.3)
+    rails (3.2.8)
+      actionmailer (= 3.2.8)
+      actionpack (= 3.2.8)
+      activerecord (= 3.2.8)
+      activeresource (= 3.2.8)
+      activesupport (= 3.2.8)
       bundler (~> 1.0)
-      railties (= 3.2.3)
-    railties (3.2.3)
-      actionpack (= 3.2.3)
-      activesupport (= 3.2.3)
+      railties (= 3.2.8)
+    railties (3.2.8)
+      actionpack (= 3.2.8)
+      activesupport (= 3.2.8)
       rack-ssl (~> 1.3.2)
       rake (>= 0.8.7)
       rdoc (~> 3.4)
-      thor (~> 0.14.6)
+      thor (>= 0.14.6, < 2.0)
     rake (0.9.2.2)
     rcov (1.0.0)
     rdoc (3.12)
       json (~> 1.4)
-    sass (3.1.17)
+    sass (3.2.1)
     sass-rails (3.2.5)
       railties (~> 3.2.0)
       sass (>= 3.1.10)
       tilt (~> 1.3)
-    simplecov (0.6.2)
-      multi_json (~> 1.3)
+    simplecov (0.6.4)
+      multi_json (~> 1.0)
       simplecov-html (~> 0.5.3)
     simplecov-html (0.5.3)
     sprockets (2.1.3)
       hike (~> 1.2)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
-    thor (0.14.6)
+    thor (0.16.0)
     tilt (1.3.3)
     treetop (1.4.10)
       polyglot

data/VERSION

@@ -1 +1 @@
-0.1.22
+0.1.23

data/app/assets/javascripts/pwn-fx.js.coffee

@@ -15,7 +15,7 @@ class PwnFxClass
   constructor: ->
     @effects = []
     @effectsByName = {}
-  
+
   # Wires JS to elements with data-pwnfx attributes.
   #
   # @param {Element} root the element whose content is wired; use document at
@@ -34,8 +34,8 @@ class PwnFxClass
         element.setAttribute doneAttrName, attrValue
         scopeId = element.getAttribute scopeAttrName
         new effectClass element, attrValue, scopeId
-    null     
-  
+    null
+
   # Registers a PwnFx effect.
   #
   # @param {String} attrName string following data-pwnfx- in the effect's
@@ -45,7 +45,7 @@ class PwnFxClass
     if @effectsByName[attrPrefix]
       throw new Error("PwnFx effect name {attrPrefix} already registered")
     @effects.push [attrPrefix, klass]
-  
+
   # Finds a scoping container.
   #
   # @param {String} scopeId the scope ID to look for
@@ -58,7 +58,7 @@ class PwnFxClass
     while element != null && element.getAttribute('data-pwnfx-scope') != scopeId
       element = element.parentElement
     element || document
-  
+
   # Performs a scoped querySelectAll.
   #
   # @param {HTMLElement} scope the DOM element serving as the search scope
@@ -68,7 +68,7 @@ class PwnFxClass
   queryScope: (scope, selector) ->
     scopeMatches = false
     if scope != document
-      # TODO: machesSelector is in a W3C spec, but only implemented using 
+      # TODO: machesSelector is in a W3C spec, but only implemented using
       #       prefixes; the code below should be simplified once browsers
       #       implement it without vendor prefixes
       if scope.matchesSelector
@@ -76,37 +76,27 @@ class PwnFxClass
       else if scope.webkitMatchesSelector
         scopeMatches = scope.webkitMatchesSelector selector
       else if scope.mozMatchesSelector
-        scopeMatches = scope.mozMatchesSelector
-    
+        scopeMatches = scope.mozMatchesSelector selector
+
     if scopeMatches
       matches = Array.prototype.slice.call scope.querySelectorAll(selector)
       matches.push scope
       matches
     else
       scope.querySelectorAll selector
-  
-  # Executes the JavaScript inside the <script> tags in a DOM subtree.
-  #
-  # @param {HTMLElement} element the DOM element rooting the subtree that will
-  #                              be searched for <script> tags
-  runScripts: (element) ->
-    # HACK: <script>s are removed and re-inserted so the browser runs them
-    for scriptElement in element.querySelectorAll('script')
-      parent = scriptElement.parentElement
-      nextSibling = scriptElement.nextSibling
-      parent.removeChild scriptElement
-      parent.insertBefore scriptElement.cloneNode(true), nextSibling
-    null
-  
+
   # Replaces an element's contents with some HTML.
   #
-  # The JavaScript inside the HTML's <script> tags will be executed. 
+  # The JavaScript inside the HTML's <script> tags will be executed.
   #
   # @param {HTMLElement} element the element whose contents will be replaced
   # @param {String}
   replaceHtml: (element, html) ->
-    element.innerHTML = html
-    @runScripts element
+    range = document.createRange()
+    range.selectNode document.body
+    fragment = range.createContextualFragment html
+    element.innerHTML = ''
+    element.appendChild fragment
     @wire element
 
   # The closest form element wrapping a node.
@@ -119,7 +109,7 @@ class PwnFxClass
       return element if element.nodeName == 'FORM'
       element = element.parentNode
     null
-  
+
   # Do AJAX.
   #
   # @param {String} url the request URL (e.g., "http://localhost/path/to.html")
@@ -137,14 +127,14 @@ class PwnFxClass
       xhr.send new FormData(form)
     else
       xhr.send null
-  
+
   # Called when an XHR request issued by PwnFx.xhr works out.
   _xhr_onload: ->
     if (@status < 200 || @status >= 300) && (@status != 304)
       throw new Error(
           "XHR result ignored due to HTTP #{@status}: #{@statusText}")
     @pwnfxOnData @responseText
-  
+
 # Singleton instance.
 PwnFx = new PwnFxClass
 
@@ -163,7 +153,7 @@ class PwnFxMove
     scope = PwnFx.resolveScope scopeId, element
     method = element.getAttribute('data-pwnfx-move-method') || 'append'
     target = document.querySelector "[data-pwnfx-move-target=\"#{identifier}\"]"
-     
+
     switch method
       when 'append'
         target.appendChild element
@@ -172,11 +162,11 @@ class PwnFxMove
         target.appendChild element
       else
         throw new Error("pwnfx-move-method #{method} not implemented")
-  
+
 
 PwnFx.registerEffect 'move', PwnFxMove
-    
-    
+
+
 # Renders the contents of a template into a DOM element.
 #
 # Attributes:
@@ -186,9 +176,9 @@ PwnFx.registerEffect 'move', PwnFxMove
 #   data-pwnfx-render-randomize: regexp pattern whose matches will be replaced
 #       with a random string; useful for generating unique IDs
 #   data-pwnfx-render-target: set on the element(s) receiving the rendered HTML;
-#       set to the identifier in data-pwnfx-render 
+#       set to the identifier in data-pwnfx-render
 #   data-pwnfx-render-source: set to the identifier in data-pwnfx-render, on the
-#       <script> tag containing the source HTML 
+#       <script> tag containing the source HTML
 class PwnFxRender
   constructor: (element, identifier, scopeId) ->
     sourceSelector = "script[data-pwnfx-render-source=\"#{identifier}\"]"
@@ -200,7 +190,7 @@ class PwnFxRender
       randomizeRegExp = new RegExp(randomizedPatten, 'g')
     else
       randomizeRegExp = null
-    
+
     onClick = (event) ->
       scope = PwnFx.resolveScope scopeId, element
       source = scope.querySelector sourceSelector
@@ -218,7 +208,7 @@ class PwnFxRender
 PwnFx.registerEffect 'render', PwnFxRender
 
 
-# Loads some content after the main page load via an AJAX request. 
+# Loads some content after the main page load via an AJAX request.
 #
 # The text / HTML returned by the request is placed in another element. Scripts
 # in <script> tags are executed.
@@ -245,7 +235,7 @@ class PwnFxDelayed
         scope = PwnFx.resolveScope scopeId, element
         for targetElement in PwnFx.queryScope(scope, targetSelector)
           PwnFx.replaceHtml targetElement, data
-          
+
     window.setTimeout ajaxLoad, delay
 
 PwnFx.registerEffect 'delayed', PwnFxDelayed
@@ -272,31 +262,31 @@ class PwnFxRefresh
     xhrForm = PwnFx.parentForm element
     refreshDelay = parseInt(
         element.getAttribute('data-pwnfx-refresh-ms') || '200');
-    
+
     onXhrData = (data) ->
       scope = PwnFx.resolveScope scopeId, element
       for targetElement in PwnFx.queryScope(scope, targetSelector)
         PwnFx.replaceHtml targetElement, data
-            
+
     changeTimeout = null
     refreshOldValue = null
     ajaxRefresh = ->
       changeTimeout = null
       PwnFx.xhr xhrUrl, xhrMethod, xhrForm, onXhrData
-      
+
     onChange = ->
       value = element.value
       return true if value == refreshOldValue
       refreshOldValue = value
-      
+
       window.clearTimeout changeTimeout if changeTimeout != null
       changeTimeout = window.setTimeout ajaxRefresh, refreshDelay
       true
-      
+
     element.addEventListener 'change', onChange, false
     element.addEventListener 'keydown', onChange, false
     element.addEventListener 'keyup', onChange, false
-    
+
 PwnFx.registerEffect 'refresh', PwnFxRefresh
 
 
@@ -338,7 +328,7 @@ class PwnFxConfirm
         targetElement.classList.add hiddenClass
       true
     onChange()
-      
+
     element.addEventListener 'change', onChange, false
     element.addEventListener 'keydown', onChange, false
     element.addEventListener 'keyup', onChange, false
@@ -371,7 +361,7 @@ class PwnFxHide
       positive = (trigger == 'click') || element.checked
       hideSelector = if positive then positiveSelector else negativeSelector
       showSelector = if positive then negativeSelector else positiveSelector
-      
+
       scope = PwnFx.resolveScope scopeId, element
       for targetElement in PwnFx.queryScope(scope, hideSelector)
         targetElement.classList.add hiddenClass
@@ -382,7 +372,7 @@ class PwnFxHide
         false
       else
         true
-    
+
     if trigger == 'click'
       element.addEventListener 'click', onChange, false
     else if trigger == 'checked'
@@ -411,21 +401,21 @@ class PwnFxShowIf
     hiddenClass = element.getAttribute('data-pwnfx-showif-class') || 'hidden'
     showValue = element.getAttribute 'data-pwnfx-showif-is'
     sourceSelector = "[data-pwnfx-showif-source=\"#{identifier}\"]"
-    
+
     replacementTag = element.getAttribute 'data-pwnfx-showif-replace'
     if replacementTag
       replacement = document.createElement replacementTag
       replacement.setAttribute 'class', hiddenClass
     else
       replacement = null
-    
+
     isHidden = false
     onChange = (event) ->
       value = event.target.value
       willHide = value != showValue
       return if isHidden == willHide
       isHidden = willHide
-      
+
       if replacement
         if willHide
           element.parentElement.replaceChild replacement, element
@@ -453,7 +443,7 @@ PwnFx.registerEffect 'showif', PwnFxShowIf
 # Attributes:
 #   data-pwnfx-remove: an identifier connecting the elements to be removed
 #   data-pwnfx-remove-target: set to the same value as data-pwnfx-remove on
-#       elements that will be removed when the element is clicked 
+#       elements that will be removed when the element is clicked
 class PwnFxRemove
   constructor: (element, identifier, scopeId) ->
     targetSelector = "[data-pwnfx-remove-target=\"#{identifier}\"]"

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

@@ -5,7 +5,7 @@ input[type=text], input[type=email], input[type=tel], input[type=password],
   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;
@@ -14,27 +14,27 @@ input[type=text], input[type=email], input[type=tel], input[type=password],
   font: inherit;
   line-height: inherit;
   text-decoration: none;
-    
+
   background-color: $input-background-color;
 
   -webkit-transition: all .218s;
   -moz-transition: all .218s;
-  transition: all .218s;  
+  transition: all .218s;
 
   &:hover {
-    border-color: $input-hover-border-color;    
+    border-color: $input-hover-border-color;
 
-    -moz-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
-    box-shadow: inset 0px 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;
+    box-shadow: inset 0 1px 2px $input-hover-shadow-color;
   }
   &:focus {
     border-color: $input-focus-border-color;
     outline: none;
 
-    -moz-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
-    box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
+    -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 {
@@ -58,19 +58,19 @@ input[type=radio], input[type=checkbox] {
 
   &:hover {
     border-color: $input-hover-border-color;
-    
-    box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
-    -moz-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $input-hover-shadow-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 0px 1px 2px $input-focus-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
-    box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
-  }  
+    -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.
@@ -89,17 +89,17 @@ select {
   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 0px 1px 2px #FF8888;
-    -moz-box-shadow: inset 0px 1px 2px #FF8888;
-    -webkit-box-shadow: inset 0px 1px 2px #FF8888;
+    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 0px 1px 2px #FF8888;
-    -moz-box-shadow: inset 0px 1px 2px #FF8888;
-    -webkit-box-shadow: inset 0px 1px 2px #FF8888;
+    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;
   }
 }

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

@@ -7,6 +7,7 @@ html, body {
     weight: normal;
   }
   line-height: $main-line-height;
+  text-rendering: optimizeLegibility;
 }
 
 p {
@@ -17,6 +18,14 @@ h1, h2, h3, h4, h5, h6 {
   font-family: $heading-font;
   font-weight: bold;
   margin: 0.25em 0 0.2em 0;
+  text-rendering: geometricPrecision;
+
+  // This patch makes buttons in headings look less weird.
+  input[type=submit], input[type=button], button, a.button {
+    font-family: $main-font;
+    font-size: 1.1em;
+    text-rendering: optimizeLegibility;
+  }
 }
 
 h1 {

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

@@ -1,7 +1,7 @@
 #header {
   background-color: $header-background-color;
-  border-bottom: 1px solid $header-border-color;  
-  
+  border-bottom: 1px solid $header-border-color;
+
   #main-menu {
     width: $page-width;
     margin: 0 auto;
@@ -19,45 +19,57 @@
         $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;
+
+      > li {
+        > a:after {
+          content: "\FEFF";
+          display: inline-block;
+          font-family: $heading-font;
+          font-size: ($header-height - 4px);
+          font-variant: small-caps;
+          line-height: $header-height;
+          margin: 0;
+          padding: 0;
+          vertical-align: baseline;
+          width: 0;
+        }
+        &:first-child > a:after {
+          content: "";
+          content: none;
+        }
       }
     }
   }
-  
+
   h1 {
     display: inline-block;
     margin: 0;
     padding: 0;
-  
+
     font-size: ($header-height - 4px);
     line-height: $header-height;
     font-variant: small-caps;
     color: $header-title-color;
-    
+
     img {
       display: inline-block;
       margin: auto 0;
     }
-    
+
     span {
       line-height: $header-height;
     }
-    
+
     // Padding between the image and the title.
     img + span {
       padding-left: 0.2em;
     }
   }
-}
 
-img.logo {
-  vertical-align: -$logo-image-baseline;
+  img.logo {
+    vertical-align: -$logo-image-baseline;
+  }
 }
+

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

@@ -3,6 +3,7 @@
     $color,
     $border-color,
     $text-color,
+    $font-weight: inherit,
     $hover-text-color: $text-color,
     $hover-border-color: $border-color,
     $active-text-color: $text-color,
@@ -18,37 +19,40 @@
   -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;
+  font-weight: $font-weight;
   text-decoration: none;
-  text-overflow: ellipsis;  
-  
+  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%))); 
-  
+  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%);
+
   -webkit-transition: all .218s;
   -moz-transition: all .218s;
-  transition: all .218s;  
-  
+  transition: all .218s;
+
   @if $subdued {
     img {
-      -webkit-filter: grayscale(0.66);
+      -webkit-filter: grayscale(0.4);
     }
   }
   @if not $subdued {
     img {
-      -webkit-filter: brightness(-0.2);
+      -webkit-filter: brightness(-0.05);
     }
   }
-  
+
   &:visited {
     color: $text-color;
   }
@@ -59,11 +63,6 @@
     @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);
@@ -71,23 +70,30 @@
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
       img {
-        -webkit-filter: grayscale(0.33);
+        -webkit-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);      
+      -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);
+        -webkit-filter: brightness(0.05);
       }
     }
   }
   &:active {
     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%);
+
     @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);
@@ -99,13 +105,13 @@
     }
     @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);      
+      -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);
+        -webkit-filter: brightness(0.05);
       }
     }
   }
@@ -119,6 +125,7 @@
     $border-color: change-color($main-color, $saturation: 5%, $lightness: 86%),
     $hover-border-color: change-color($main-color, $saturation: 5%,
                                                    $lightness: 78%),
+    $font-weight: 400,
     $subdued: true
   );
 }
@@ -126,9 +133,11 @@
 // 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%),
+    $color: change-color($main-color, $saturation: 100%, $lightness: 40%),
     $text-color: change-color($main-color, $saturation: 0%, $lightness: 100%),
-    $border-color: change-color($main-color, $saturation: 57%, $lightness: 32%),
+    $font-weight: 600,
+    $border-color: change-color($main-color, $saturation: 57%,
+                                             $lightness: 32%),
     $hover-border-color: change-color($main-color, $saturation: 100%,
                                                    $lightness: 22%),
     $subdued: false

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

@@ -5,7 +5,7 @@
     $background-color: inherit,
     $hover-border-color: darken($border-color, 19%),
     $hover-shadow-color: lighten($hover-border-color, 3%),
-    $focus-border-color: saturate(darken($border-color, 55%), 100%), 
+    $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%)
@@ -14,7 +14,7 @@
   padding: 0.1em 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;
@@ -23,30 +23,30 @@
   font-size: inherit;
   line-height: inherit;
   text-decoration: none;
-    
+
   background-color: $background-color;
 
   -webkit-transition: all .218s;
   -moz-transition: all .218s;
-  transition: all .218s;  
+  transition: all .218s;
 
   &:hover {
     border-color: $hover-border-color;
     border-top-color: darken($hover-border-color, 10%);
 
 
-    -moz-box-shadow: inset 0px 1px 2px $hover-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $hover-shadow-color;
-    box-shadow: inset 0px 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;
+    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 0px 1px 2px $focus-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $focus-shadow-color;
-    box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
+    -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;
   }
 
   &::-webkit-input-placeholder {
@@ -67,7 +67,7 @@
     $background-color: inherit,
     $hover-border-color: darken($border-color, 19%),
     $hover-shadow-color: lighten($hover-border-color, 3%),
-    $focus-border-color: saturate(darken($border-color, 55%), 100%), 
+    $focus-border-color: saturate(darken($border-color, 55%), 100%),
     $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%)
 ) {
   border: 1px solid $border-color;
@@ -75,23 +75,23 @@
 
   -webkit-transition: all .218s;
   -moz-transition: all .218s;
-  transition: all .218s;  
+  transition: all .218s;
 
   &:hover {
     border-color: $hover-border-color;
-    
-    box-shadow: inset 0px 1px 2px $hover-shadow-color;
-    -moz-box-shadow: inset 0px 1px 2px $hover-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $hover-shadow-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;
   }
   &:focus {
     border-color: $focus-border-color;
     outline: none;
 
-    -moz-box-shadow: inset 0px 1px 2px $focus-shadow-color;
-    -webkit-box-shadow: inset 0px 1px 2px $focus-shadow-color;
-    box-shadow: inset 0px 1px 2px $focus-shadow-color;
-  }  
+    -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;
+  }
 }
 
 @mixin gplus-form-select(
@@ -100,7 +100,7 @@
     $background-color: inherit,
     $hover-border-color: darken($border-color, 19%),
     $hover-shadow-color: lighten($hover-border-color, 3%),
-    $focus-border-color: saturate(darken($border-color, 55%), 100%), 
+    $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%)
@@ -111,7 +111,7 @@
     $background-color: $background-color,
     $hover-border-color: $hover-border-color,
     $hover-shadow-color: $hover-shadow-color,
-    $focus-border-color: $focus-border-color, 
+    $focus-border-color: $focus-border-color,
     $focus-shadow-color: $focus-shadow-color,
     $placeholder-text-color: $placeholder-text-color
   );
@@ -133,7 +133,7 @@
   border-color: $highlight-color;
   background-color: $highlight-background;
 
-  box-shadow: inset 0px 1px 2px $highlight-shadow;
-  -moz-box-shadow: inset 0px 1px 2px $highlight-shadow;
-  -webkit-box-shadow: inset 0px 1px 2px $highlight-shadow;
+  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;
 }

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

@@ -12,25 +12,27 @@
   color: $text-color;
   margin: 0;
   padding: 0;
-  
+
   @if $last-item-right {
     position: relative;
   }
   @include pwnplus-clearfix;
-  
+
   li {
     margin: 0;
     padding: 0;
   }
-  
+
+  vertical-align: bottom;
   > li {
     display: inline-block;
     background-color: $bar-color;
-    
+    vertical-align: bottom;
+
     > a {
       display: inline-block;
     }
-    
+
     > ol {
       list-style: none;
       display: none;
@@ -40,11 +42,11 @@
       border: 1px solid $border-color;
       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);
-      
+
       a {
         padding: 0 2.5em 0 0.5em;
       }
@@ -56,7 +58,7 @@
     }
   }
   li:hover > a {
-    background-color: $hover-bar-color; 
+    background-color: $hover-bar-color;
     color: $hover-text-color;
     img {
       -webkit-filter: grayscale(0);
@@ -75,7 +77,7 @@
   a:visited {
     color: inherit;
   }
-  
+
   >li:first-child > a {
     padding-left: 1px;
   }

data/pwnstyles_rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "pwnstyles_rails"
-  s.version = "0.1.22"
+  s.version = "0.1.23"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Victor Costan"]
-  s.date = "2012-05-09"
+  s.date = "2012-09-07"
   s.description = "Included CSS was designed for reuse across pwnb.us apps."
   s.email = "victor@costan.us"
   s.extra_rdoc_files = [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pwnstyles_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.22
+  version: 0.1.23
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-09 00:00:00.000000000 Z
+date: 2012-09-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -194,7 +194,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3682663604570600785
+      hash: -1794675598573096078
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: