Menu icon Foundation
Fixes for icon-bar mixin and scss

1st for the mixin @mixin icon-bar the // counts css should be included... Otherwise the counts won't work.

2nd the ability to change the font-size I would assume would be for the label font... this property was not included for the & + label object. oddly there is a font-size for the * setting but that is too for the parent and has no effect on the label element. *** This is also important for the general purpose of changing the label font size in conjunction to the icon-bar in general.

thus the new setting is below which works.

So hopefully this helps someone.

Also, the padding I feel should be set to rem-calc(20) 0 rem-calc(20) but instead of 1.25rem but that can be changed in the settings.

// new code
@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: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, $disabled);

    // 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;
				}
			}
		}
}
            
// new code for font setting
@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;
				font-size: $font-size;
			}
		}

         

mixinscssSassFoundation

1st for the mixin @mixin icon-bar the // counts css should be included... Otherwise the counts won't work.

2nd the ability to change the font-size I would assume would be for the label font... this property was not included for the & + label object. oddly there is a font-size for the * setting but that is too for the parent and has no effect on the label element. *** This is also important for the general purpose of changing the label font size in conjunction to the icon-bar in general.

thus the new setting is below which works.

So hopefully this helps someone.

Also, the padding I feel should be set to rem-calc(20) 0 rem-calc(20) but instead of 1.25rem but that can be changed in the settings.

// new code
@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: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, $disabled);

    // 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;
				}
			}
		}
}
            
// new code for font setting
@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;
				font-size: $font-size;
			}
		}

         
Rafi Benkual over 4 years ago

Christian, I think this would be great for a Pull Request on Foundation. It would be valuable to many people.

Christian Matthias over 4 years ago

I've really been into git lately so let me do those pull requests.

Christian Matthias over 4 years ago

added git pull request

Rafi Benkual over 4 years ago

Sweet! We'll pull them in this week. Thanks!