#5406 Added option for disabled icons

diff --git a/doc/pages/components/icon-bar.html b/doc/pages/components/icon-bar.html
index c65a299ea31a2cf7a1d7c98b30c1e2a1154de900..39c97568a86439c3625cea33d6cffbb24fc13f09 100644 (file)
--- a/doc/pages/components/icon-bar.html
+++ b/doc/pages/components/icon-bar.html
@@ -29,7 +29,7 @@ You can create an Icon Bar using minimal markup. Specifying the number of items
 
 <h3>Vertical Icon Bar</h3>
 
-It's easy. Just add a class of `.vertical` to make the Icon Bar stack up. For an Icon bar that's horizontal on small screens but vertical on larger use '.medium-vertical' and 'large-vertical' to utilize those breakpoints. 
+It's easy. Just add a class of `.vertical` to make the Icon Bar stack up. For an Icon bar that's horizontal on small screens but vertical on larger use '.medium-vertical' and 'large-vertical' to utilize those breakpoints.
 
 <div class="row">
   <div class="large-6 columns">
@@ -88,7 +88,7 @@ For icon bars without text labels, add `aria-label` to each item, with a value r
 
 ***
 
-## Customize with Sass 
+## Customize with Sass
 
 Icon Bar can be easily customized using our provided Sass variables.
 
@@ -113,6 +113,7 @@ $icon-bar-image-width: 1.875rem;
 $icon-bar-image-height: 1.875rem;
 $icon-bar-active-color: $primary-color;
 $icon-bar-item-padding: 1.25rem;
+$icon-bar-disabled-opacity: 0.7
 ```
 {{/markdown}}
   </div>
@@ -134,7 +135,7 @@ You can use the `icon-bar()` mixin to create your own icon-bar, like so:
 
 {{#markdown}}
 ```html
-<div class="my-custom-class"> </div> 
+<div class="my-custom-class"> </div>
 ```
 {{/markdown}}
 
@@ -145,7 +146,7 @@ You can further customize your icon bar using the provided options in the `icon
 ```scss
 .my-custom-class {
 @include icon-bar(
-  
+
   // Set the background color of the icon bar. Default: $icon-bar-bg.
   $bar-bg: $icon-bar-bg,
   //  Set the font color of the icon bar. Default: $icon-bar-font-color.
@@ -167,7 +168,10 @@ You can further customize your icon bar using the provided options in the `icon
   // Set the height of images within the icon bar. Default: $icon-bar-image-height
   $image-height,
   // Assign whether or not base styles usually associated with the icon bar to appear the way it usually does should be included. Default: true.
-  $base-style: true
+  $base-style: true,
+  // Allow disabled icons. Default: false.
+  // If enabled add class disabled.
+  $disabled: false
   );
 }
 

diff --git a/scss/foundation/components/_icon-bar.scss b/scss/foundation/components/_icon-bar.scss
index 8ed083ca9bb33879ab8a529b86d9e84b84f3773d..c5c488954769b073b58845b5c3cdcd1112a4cb2e 100644 (file)
--- a/scss/foundation/components/_icon-bar.scss
+++ b/scss/foundation/components/_icon-bar.scss
@@ -26,6 +26,10 @@ $icon-bar-image-height: 1.875rem !default;
 $icon-bar-active-color: $primary-color !default;
 $icon-bar-item-padding: 1.25rem !default;
 
+// We use this to set default opacity and cursor for disabled icons.
+$icon-bar-disabled-opacity: 0.7 !default;
+$icon-bar-disabled-cursor: $cursor-default-value !default;
+
 //
 // @mixins
 //
@@ -161,7 +165,8 @@ $icon-bar-item-padding: 1.25rem !default;
   $bar-icon-color:$icon-bar-icon-color,
   $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
-  $base-style:true) {
+  $base-style:true,
+  $disabled:false) {
 
        @if $base-style {
 
@@ -191,6 +196,16 @@ $icon-bar-item-padding: 1.25rem !default;
                        i { color: $bar-icon-color-hover; }
                }
        }
+  @if $disabled {
+    .item.disabled {
+      opacity: $icon-bar-disabled-opacity;
+      cursor: $icon-bar-disabled-cursor;
+      >* {
+        opacity: $icon-bar-disabled-opacity;
+        cursor: $icon-bar-disabled-cursor;
+      }
+    }
+  }
 
 }
 
@@ -202,6 +217,7 @@ $icon-bar-item-padding: 1.25rem !default;
 // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
 // $bar-active-color - the color of an active / hover state
 // $base-style - Apply base styles? Default: true.
+// $disabled - Allow disabled icons? Default: false.
 
 @mixin icon-bar(
   $bar-bg:$icon-bar-bg,
@@ -216,10 +232,11 @@ $icon-bar-item-padding: 1.25rem !default;
        $icon-size: $icon-bar-icon-size,
        $image-width: $icon-bar-image-width,
        $image-height: $icon-bar-image-height,
-  $base-style:true) {
+  $base-style:true,
+  $disabled:false) {
     @include icon-bar-base();
     @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
-    @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
 }
 
 @include exports("icon-bar") {