From 030562a32fdfadbd0f56f186da2d16111bbb3c97 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Wed, 18 Jul 2018 16:20:51 +0200
Subject: [PATCH] design: add styling for disabled buttons

---
 .../stylesheets/new_design/buttons.scss       | 19 ++++++++++++-------
 app/views/root/patron.html.haml               |  9 +++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss
index 230529883..130dc98d8 100644
--- a/app/assets/stylesheets/new_design/buttons.scss
+++ b/app/assets/stylesheets/new_design/buttons.scss
@@ -10,11 +10,11 @@
   line-height: 20px;
   background-color: #FFFFFF;
   color: $black;
-  cursor: pointer;
   text-align: center;
   -webkit-appearance: none;
 
-  &:hover {
+  &:hover:not(:disabled) {
+    cursor: pointer;
     background: $light-grey;
     text-decoration: none;
   }
@@ -24,12 +24,17 @@
     outline: none;
   }
 
+  &:disabled {
+    opacity: 0.5;
+    filter: saturate(50%);
+  }
+
   &.primary {
     color: #FFFFFF;
     border-color: $blue;
     background-color: $blue;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background: $light-blue;
     }
   }
@@ -39,7 +44,7 @@
     border-color: $blue;
     background-color: #FFFFFF;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: #FFFFFF;
       background: $light-blue;
     }
@@ -62,7 +67,7 @@
     border-color: $green;
     background-color: $green;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: $green;
       background-color: #FFFFFF;
     }
@@ -73,7 +78,7 @@
     border-color: $black;
     background-color: $black;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: $black;
       background-color: #FFFFFF;
     }
@@ -84,7 +89,7 @@
     border-color: $dark-red;
     background-color: $dark-red;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: $dark-red;
       background-color: #FFFFFF;
     }
diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml
index be5252fce..69d0400af 100644
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@@ -58,6 +58,15 @@
       = link_to "#", class: "button icon-only" do
         %span.icon.follow
 
+    %p
+      %button.button{ disabled: true } .button.disabled
+
+      %button.button.primary{ disabled: true } .button.primary.disabled
+
+      %button.button.secondary{ disabled: true } .button.secondary.disabled
+
+      %button.button.danger{ disabled: true } .button.danger.disabled
+
     %p
       = link_to ".button.accepted", "#", class: "button accepted"