design: add styling for disabled buttons

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;
     }

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"