From 2d9f4c39841043c030d6fbc0b92a7dca1b78e933 Mon Sep 17 00:00:00 2001 From: matthewalbani-moovweb Date: Wed, 3 Dec 2014 10:54:09 -0600 Subject: [PATCH] #5406 Added option for disabled icons --- doc/pages/components/icon-bar.html | 14 +++++++++----- scss/foundation/components/_icon-bar.scss | 23 ++++++++++++++++++++--- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/doc/pages/components/icon-bar.html b/doc/pages/components/icon-bar.html index c65a299ea..39c97568a 100644 --- 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

Vertical Icon Bar

-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.
@@ -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}}
@@ -134,7 +135,7 @@ You can use the `icon-bar()` mixin to create your own icon-bar, like so: {{#markdown}} ```html -
+
``` {{/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 8ed083ca9..c5c488954 100644 --- 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") { -- 2.47.2