From 10fc285f57ed53f9dbdfab74d139ac68e7a232b8 Mon Sep 17 00:00:00 2001
From: Alex Coles <alex@alexbcoles.com>
Date: Wed, 4 Jun 2014 14:28:31 +0200
Subject: [PATCH] Create styling for buttons in :disabled state

Task # 8823

Signed-off-by: Alex Coles <alex@alexbcoles.com>
---
 app/assets/stylesheets/content/_buttons.md |  7 +++++++
 app/assets/stylesheets/global/_mixins.sass | 11 +++++++++++
 2 files changed, 18 insertions(+)

diff --git a/app/assets/stylesheets/content/_buttons.md b/app/assets/stylesheets/content/_buttons.md
index 50fd478020..cbde436361 100644
--- a/app/assets/stylesheets/content/_buttons.md
+++ b/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 />
 ```
diff --git a/app/assets/stylesheets/global/_mixins.sass b/app/assets/stylesheets/global/_mixins.sass
index dfb77353fd..5f1be8ce5f 100644
--- a/app/assets/stylesheets/global/_mixins.sass
+++ b/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