From 629ad4e651e6b62697d33c23b52104d9534f8f88 Mon Sep 17 00:00:00 2001
From: Allison Chefec <allison.chefec@buzzfeed.com>
Date: Thu, 25 Aug 2016 14:04:32 -0400
Subject: [PATCH] SOLID-365 Create Disabled Opacity Variable (#416)

* added variable for disabled opacity. updated variables docs

* fixed variable name to make more sense
---
 _lib/solid-components/_pagination.scss |  2 +-
 _lib/solid-helpers/_variables.scss     |  3 +++
 _lib/solid-utilities/_buttons.scss     |  2 +-
 _lib/solid-utilities/_forms.scss       |  6 +++---
 docs/_includes/nav.html                |  2 ++
 docs/variables.html                    | 17 +++++++++++++++++
 6 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/_lib/solid-components/_pagination.scss b/_lib/solid-components/_pagination.scss
index 653cca00..535507e1 100644
--- a/_lib/solid-components/_pagination.scss
+++ b/_lib/solid-components/_pagination.scss
@@ -76,7 +76,7 @@
   .pagination__button--disabled {
     .pagination__button--prev-icon,
     .pagination__button--next-icon  {
-      opacity: .3;
+      opacity: $opacity-disabled;
     }
   }
 }
diff --git a/_lib/solid-helpers/_variables.scss b/_lib/solid-helpers/_variables.scss
index 1f00b300..8c89e18e 100644
--- a/_lib/solid-helpers/_variables.scss
+++ b/_lib/solid-helpers/_variables.scss
@@ -127,6 +127,9 @@ $line-height-3: 1.5; // default line-height set on the body
 $line-height-form: 1.5rem;
 $line-height-form-small: 1.25rem;
 
+// Disabled opacity for buttons, forms, pagination
+$opacity-disabled: .3;
+
 // SVG
 // -------------------------
 // encoding this as utf8 is good!
diff --git a/_lib/solid-utilities/_buttons.scss b/_lib/solid-utilities/_buttons.scss
index e6eb2fd0..41835e8c 100644
--- a/_lib/solid-utilities/_buttons.scss
+++ b/_lib/solid-utilities/_buttons.scss
@@ -160,7 +160,7 @@
 
 .button--disabled,
 .button:disabled {
-  opacity: .3 !important;
+  opacity: $opacity-disabled !important;
 
   &:hover {
     cursor: default  !important;
diff --git a/_lib/solid-utilities/_forms.scss b/_lib/solid-utilities/_forms.scss
index 59299c31..98657c11 100644
--- a/_lib/solid-utilities/_forms.scss
+++ b/_lib/solid-utilities/_forms.scss
@@ -36,7 +36,7 @@
   border: $border                !important;
 
   &:disabled {
-    opacity: .35              !important;
+    opacity: $opacity-disabled   !important;
   }
 }
 
@@ -100,7 +100,7 @@ select::-ms-expand,
   }
 
   &:disabled + label {
-    opacity: .35                !important;
+    opacity: $opacity-disabled    !important;
   }
 }
 
@@ -124,7 +124,7 @@ select::-ms-expand,
   }
 
   &:disabled + label {
-    opacity: .35                !important;
+    opacity: $opacity-disabled   !important;
   }
 }
 
diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html
index d7431888..8e160a25 100644
--- a/docs/_includes/nav.html
+++ b/docs/_includes/nav.html
@@ -36,6 +36,8 @@ <h1 class="xs-relative xs-py3 sm-py0 sm-mb4 solid-header">
             <li class="xs-py1"><a href="#colors" class="xs-block xs-px3 solid-nav__subitem">Colors</a></li>
             <li class="xs-py1"><a href="#layout" class="xs-block xs-px3 solid-nav__subitem">Layout</a></li>
             <li class="xs-py1"><a href="#borders" class="xs-block xs-px3 solid-nav__subitem">Borders</a></li>
+            <li class="xs-py1"><a href="#disabled-opacity" class="xs-block xs-px3 solid-nav__subitem">Disabled Opacity</a></li>
+
           </ul>
         {% endif %}
       </li>
diff --git a/docs/variables.html b/docs/variables.html
index 5289fa1b..1015c5bb 100644
--- a/docs/variables.html
+++ b/docs/variables.html
@@ -209,3 +209,20 @@ <h2 class="xs-mb1 bold">Borders</h2>
   <code class="js-highlight xs-block xs-mb1"><span class="nowrap">$border-radius</span></code>
 
 </section>
+
+
+<section class="xs-mb6">
+
+  <a name="disabled-opacity"></a>
+  <h2 class="xs-mb1 bold">Disabled Opacity</h2>
+  <p class="xs-mb2">Used by disabled <a href="/buttons.html#disabled-buttons">buttons,</a> <a href="/forms.html">forms,</a> and <a href="/pagination.html">pagination</a></a>.</p>
+  <div class="xs-mb2">
+  {% highlight scss %}
+.my-custom-element {
+  opacity: $opacity-disabled;
+}
+{% endhighlight %}
+  </div>
+  <code class="js-highlight xs-block"><span class="nowrap">$opacity-disabled</span></code>
+
+</section>