abc/assets/scss/foundation/components/_icon-bar.scss

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "global";


// @name
// @dependencies _global.scss

$include-html-icon-bar-classes: $include-html-classes !default;

// @variables

// We use these to style the icon-bar and items
$icon-bar-bg: $oil !default;
$icon-bar-font-color: $white !default;
$icon-bar-font-color-hover: $icon-bar-font-color !default;
$icon-bar-font-size: 1rem !default;
$icon-bar-hover-color: $primary-color !default;
$icon-bar-icon-color: $white !default;
$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
$icon-bar-icon-size: 1.875rem !default;
$icon-bar-image-width: 1.875rem !default;
$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-disabled-value !default;


//
// @mixins
//

// We use this mixin to create the base styles for our Icon bar element.
//
@mixin icon-bar-base() {

 	width: 100%;
	font-size: 0;
	display: inline-block;

	& > * {
		text-align: center;
		font-size: $icon-bar-font-size;
		width: 25%;
		margin: 0 auto;
		display: block;
		padding: $icon-bar-item-padding;
		float: left;

		i, img {
			display: block;
			margin: 0 auto;

			& + label {
				margin-top: .0625rem;
			}
		}

		i {
			font-size: $icon-bar-icon-size;
			vertical-align: middle;
		}

		img {
			width: $icon-bar-image-width;
			height: $icon-bar-image-height;
		}
	}

	&.label-right > * {

		i, img {
			margin: 0 .0625rem 0 0;
			display: inline-block;

			& + label {
				margin-top: 0;
			}
		}

		label { display: inline-block; }
	}

	&.vertical.label-right > * {
		text-align: left;
	}

	&.vertical, &.small-vertical{
		height: 100%;
		width: auto;

		.item {
			width: auto;
			margin: auto;
			float: none;
		}
	}

	&.medium-vertical {
		@media #{$medium-up} {
			height: 100%;
			width: auto;

			.item {
				width: auto;
				margin: auto;
				float: none;
			}
		}
	}
	&.large-vertical {
		@media #{$large-up} {
			height: 100%;
			width: auto;

			.item {
				width: auto;
				margin: auto;
				float: none;
			}
		}
	}
}

// We use this mixin to create the size styles for icon bars.
@mixin icon-bar-size(
	$padding: $icon-bar-item-padding,
	$font-size: $icon-bar-font-size,
	$icon-size: $icon-bar-icon-size,
	$image-width: $icon-bar-image-width,
	$image-height: $icon-bar-image-height) {

	& > * {
		font-size: $font-size;
		padding: $padding;

		i, img {

			& + label {
				margin-top: .0625rem;
			}
		}

		i {
			font-size: $icon-size;
		}

		img {
			width: $image-width;
			height: $image-height;
		}
	}

}

@mixin icon-bar-style(
  $bar-bg:$icon-bar-bg,
  $bar-font-color:$icon-bar-font-color,
  $bar-font-color-hover:$icon-bar-font-color-hover,
  $bar-hover-color:$icon-bar-hover-color,
  $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,
  $disabled:false) {

	@if $base-style {

		background: $bar-bg;

		& > * {
			label { color: $bar-font-color; }

			i { color: $bar-icon-color; }
		}

		& > a:hover {

			background: $bar-hover-color;

			label { color: $bar-font-color-hover; }

			i { color: $bar-icon-color-hover; }
		}

        & > a.active {

			background: $bar-active-color;

			label { color: $bar-font-color-hover; }

			i { color: $bar-icon-color-hover; }
		}
	}
  @if $disabled {
    .item.disabled {
      opacity: $icon-bar-disabled-opacity;
      cursor: $icon-bar-disabled-cursor;
      pointer-events: none;
      >* {
        opacity: $icon-bar-disabled-opacity;
        cursor: $icon-bar-disabled-cursor;
      }
    }
  }

}

// We use this to quickly create icon bars with a single mixin
// $height - The overall calculated height of the icon bar (horizontal)
// $bar-bg - the background color of the bar
// $bar-font-color - the font color
// $bar-hover-color - okay these are pretty obvious variables
// $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,
  $bar-font-color:$icon-bar-font-color,
  $bar-font-color-hover:$icon-bar-font-color-hover,
  $bar-hover-color:$icon-bar-hover-color,
  $bar-icon-color:$icon-bar-icon-color,
  $bar-icon-color-hover:$icon-bar-icon-color-hover,
  $bar-active-color:$icon-bar-active-color,
  $padding: $icon-bar-item-padding,
	$font-size: $icon-bar-font-size,
	$icon-size: $icon-bar-icon-size,
	$image-width: $icon-bar-image-width,
	$image-height: $icon-bar-image-height,
  $base-style:true,
  $disabled:true) {
    @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, $disabled);
}

@include exports("icon-bar") {
  @if $include-html-icon-bar-classes {
    .icon-bar {
      @include icon-bar;
    }
  }
}

@if $include-html-icon-bar-classes {

	// toolbar styles

	.icon-bar {

		// Counts

		&.two-up {
			.item { width: 50%; }
			&.vertical .item, &.small-vertical .item { width: auto; }
			&.medium-vertical .item {
				@media #{$medium-up} {
					width: auto;
				}
			}
			&.large-vertical .item {
				@media #{$large-up} {
					width: auto;
				}
			}
		}
		&.three-up {
			.item { width: 33.3333%; }
			&.vertical .item, &.small-vertical .item { width: auto; }
			&.medium-vertical .item {
				@media #{$medium-up} {
					width: auto;
				}
			}
			&.large-vertical .item {
				@media #{$large-up} {
					width: auto;
				}
			}
		}
		&.four-up {
			.item { width: 25%; }
			&.vertical .item, &.small-vertical .item { width: auto; }
			&.medium-vertical .item {
				@media #{$medium-up} {
					width: auto;
				}
			}
			&.large-vertical .item {
				@media #{$large-up} {
					width: auto;
				}
			}
		}
		&.five-up {
			.item { width: 20%; }
			&.vertical .item, &.small-vertical .item { width: auto; }
			&.medium-vertical .item {
				@media #{$medium-up} {
					width: auto;
				}
			}
			&.large-vertical .item {
				@media #{$large-up} {
					width: auto;
				}
			}
		}
		&.six-up {
			.item { width: 16.66667%; }
			&.vertical .item, &.small-vertical .item { width: auto; }
			&.medium-vertical .item {
				@media #{$medium-up} {
					width: auto;
				}
			}
			&.large-vertical .item {
				@media #{$large-up} {
					width: auto;
				}
			}
		}
		&.seven-up {
  		.item { width: 14.28571%; }
  		&.vertical .item, &.small-vertical .item { width: auto; }
  		&.medium-vertical .item {
    		@media #{$medium-up} {
        			width: auto;
    		}
  		}
  		&.large-vertical .item {
      	@media #{$large-up} {
       		width: auto;
      	}
  		}
    }
    &.eight-up {
  		.item { width: 12.5%; }
  		&.vertical .item, &.small-vertical .item { width: auto; }
  		&.medium-vertical .item {
    		@media #{$medium-up} {
        			width: auto;
    		}
  		}
  		&.large-vertical .item {
      	@media #{$large-up} {
       		width: auto;
      	}
  		}
    }
	}
}