Skip to content

Commit

Permalink
add breakpoints to icon-bar
Browse files Browse the repository at this point in the history 
adds medium and large breakpoints to icon bar
  • Loading branch information
Brandon Arnold committed Aug 21, 2014
1 parent 1d767aa commit a7ff4ae
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 20 deletions.
20 changes: 20 additions & 0 deletions doc/includes/icon-bar/examples_icon_bar_vert.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,25 @@
<label>Like</label>
</a>
</div>

<div class="icon-bar large-vertical four-up">
<a class="item">
<img src="{{assets}}/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="{{assets}}/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="{{assets}}/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="{{assets}}/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
</div>

```
{{/markdown}}
19 changes: 19 additions & 0 deletions doc/includes/icon-bar/examples_icon_bar_vert_rendered.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,23 @@
<img src="{{assets}}/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>

<div class="icon-bar large-vertical four-up">
<a class="item">
<img src="{{assets}}/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="{{assets}}/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="{{assets}}/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="{{assets}}/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
</div>
2 changes: 1 addition & 1 deletion doc/pages/components/icon-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h4>Rendered HTML</h4>

<h3>Vertical Icon Bar</h3>

It's easy. Just add a class of `.vertical` to make the Icon Bar stack up.
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">
Expand Down
101 changes: 82 additions & 19 deletions scss/foundation/components/_icon-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
// @mixins
//

// We use this mixin to create the base styles for our switch element.
// We use this mixin to create the base styles for our Icon bar element.
//
// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
@mixin icon-bar-base() {

width: 100%;
Expand Down Expand Up @@ -85,7 +83,7 @@ $icon-bar-item-padding: 1.25rem !default;
text-align: left;
}

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

Expand All @@ -95,12 +93,34 @@ $icon-bar-item-padding: 1.25rem !default;
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.
//
// $height - Height (in px) of the switch. Default: $switch-height-med.
// $font-size - Font size of text in switch. Default: $switch-font-size-med.
@mixin icon-bar-size(
$padding: $icon-bar-item-padding,
$font-size: $icon-bar-font-size,
Expand Down Expand Up @@ -131,13 +151,6 @@ $icon-bar-item-padding: 1.25rem !default;

}

// We use this mixin to add color and other fanciness to the switches.
//
// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
// $radius - Radius to apply to switch. Default: false.
// $base-style - Apply base styles? Default: true.
@mixin icon-bar-style(
$bar-bg:$icon-bar-bg,
$bar-font-color:$icon-bar-font-color,
Expand Down Expand Up @@ -208,23 +221,73 @@ $icon-bar-item-padding: 1.25rem !default;

&.two-up {
.item { width: 50%; }
&.vertical .item { width: auto; }
&.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 { width: auto; }
&.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 { width: auto; }
&.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 { width: auto; }
&.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 { width: auto; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
}
}

0 comments on commit a7ff4ae

Please sign in to comment.