SOLID-365 Create Disabled Opacity Variable (#416)

* added variable for disabled opacity. updated variables docs * fixed variable name to make more sense
buzzfeed · Aug 25, 2016 · 629ad4e · 629ad4e
1 parent fdbeab4
commit 629ad4e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>