Create styling for buttons in :disabled state

Task # 8823

Signed-off-by: Alex Coles <alex@alexbcoles.com>

app/assets/stylesheets/content/_buttons.md

@@ -3,7 +3,14 @@
 ```
 <a href="#" class="button">Click me</a>
 <a href="#" class="button_highlight">Click me</a>
+```
 
+```
 <input type="submit" class="button" value="Submit me"/>
+<input type="submit" class="button" value="Do not submit" disabled />
+```
+
+```
 <input type="submit" class="button_highlight" value="Submit me"/>
+<input type="submit" class="button_highlight" value="Do not submit" disabled />
 ```

app/assets/stylesheets/global/_mixins.sass

@@ -25,6 +25,8 @@
  *
  * See doc/COPYRIGHT.rdoc for more details.  ++*/
 
+@import compass/css3
+
 $vendors: "-webkit-", "-moz-", "-ms-", "-o-", ""
 $button_gray_font_color: #222222
 
@@ -155,11 +157,18 @@ $button_gray_font_color: #222222
 @mixin button-big-size
   padding: 7px 16px 5px
 
+@mixin button-disableable
+  @include transition(opacity .5s ease-out)
+  &:disabled
+    opacity: 0.5
+    cursor:  default
+
 @mixin button-highlight
   color: $button_highlight_font_color
   @include button-common
   @include button-normal-size
   @include button-highlight-background
+  @include button-disableable
   color: $button_highlight_font_hover_color
   &:hover
     text-decoration: none
@@ -169,6 +178,7 @@ $button_gray_font_color: #222222
   @include button-common
   @include button-normal-size
   @include button-background
+  @include button-disableable
   color: $button_font_hover_color
   &:hover
     text-decoration: none
@@ -178,6 +188,7 @@ $button_gray_font_color: #222222
   @include button-common
   @include button-normal-size
   @include button-active-background
+  @include button-disableable
 
   &:hover
     text-decoration: none