<h3>Basic</h3>
-You can create an Icon Bar using minimal markup. Specifying the number of items `one-up` through `twelve-up` will ensure the items are evenly spaced.
+You can create an Icon Bar using minimal markup. Specifying the number of items `one-up` through `six-up` will ensure the items are evenly spaced.
<div class="row">
<div class="large-6 columns">
<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">
***
-## Customize with Sass
+## Customize with Sass
Icon Bar can be easily customized using our provided Sass variables.
{{#markdown}}
```html
-<div class="my-custom-class"> </div>
+<div class="my-custom-class"> </div>
```
{{/markdown}}
```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.
// 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;
padding: $icon-bar-item-padding;
float: left;
- i, img {
+ i, img {
display: block;
- margin: 0 auto;
+ margin: 0 auto;
& + label {
margin-top: .0625rem;
&.label-right > * {
- i, img {
- margin: 0 .0625rem 0 0;
+ i, img {
+ margin: 0 .0625rem 0 0;
display: inline-block;
& + label {
font-size: $font-size;
padding: $padding;
- i, img {
+ i, img {
& + label {
margin-top: .0625rem;
$base-style:true) {
@if $base-style {
-
+
background: $bar-bg;
& > * {
.icon-bar {
- &.vertical .item, &.small-vertical .item { width: auto; }
- &.medium-vertical .item {
- @media #{$medium-up} {
- width: auto;
+ // 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;
+ }
}
}
- &.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;
+ }
}
}
-
- // Counts
- &.two-up .item { width: percentage(1 / 2); }
- &.three-up .item { width: percentage(1 / 3); }
- &.four-up .item { width: percentage(1 / 4); }
- &.five-up .item { width: percentage(1 / 5); }
- &.six-up .item { width: percentage(1 / 6); }
- &.seven-up .item { width: percentage(1 / 7); }
- &.eight-up .item { width: percentage(1 / 8); }
- &.nine-up .item { width: percentage(1 / 9); }
- &.ten-up .item { width: percentage(1 / 10); }
- &.eleven-up .item { width: percentage(1 / 11); }
- &.twelve-up .item { width: percentage(1 / 12); }
}
-}
\ No newline at end of file
+}