]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Revert "Icon Bar microgrid cleanup" 5983/head
authorRafi <rafibomb@users.noreply.github.com>
Tue, 28 Oct 2014 22:34:42 +0000 (15:34 -0700)
committerRafi <rafibomb@users.noreply.github.com>
Tue, 28 Oct 2014 22:34:42 +0000 (15:34 -0700)
doc/pages/components/icon-bar.html
scss/foundation/components/_icon-bar.scss

index 90e7144f03fd11792c6c80143b1d1e32d2913af3..aca9089535e06442050bdab5bcbffd20407740c7 100644 (file)
@@ -12,7 +12,7 @@ title: Icon Bar
 
 <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">
@@ -29,7 +29,7 @@ You can create an Icon Bar using minimal markup. Specifying the number of items
 
 <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">
@@ -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.
 
@@ -132,7 +132,7 @@ You can use the `icon-bar()` mixin to create your own icon-bar, like so:
 
 {{#markdown}}
 ```html
-<div class="my-custom-class"> </div>
+<div class="my-custom-class"> </div> 
 ```
 {{/markdown}}
 
@@ -143,7 +143,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.
index c35dcb2ccdf8cc5697cf3aca9882874e747c86d0..bfe4dcae092523c98f78ff5796a75845e5e98529 100644 (file)
@@ -31,7 +31,7 @@ $icon-bar-item-padding: 1.25rem !default;
 // 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;
@@ -45,9 +45,9 @@ $icon-bar-item-padding: 1.25rem !default;
                padding: $icon-bar-item-padding;
                float: left;
 
-               i, img {
+               i, img { 
                        display: block;
-                       margin: 0 auto;
+                       margin: 0 auto; 
 
                        & + label {
                                margin-top: .0625rem;
@@ -67,8 +67,8 @@ $icon-bar-item-padding: 1.25rem !default;
 
        &.label-right > * {
 
-               i, img {
-                       margin: 0 .0625rem 0 0;
+               i, img { 
+                       margin: 0 .0625rem 0 0; 
                        display: inline-block;
 
                        & + label {
@@ -132,7 +132,7 @@ $icon-bar-item-padding: 1.25rem !default;
                font-size: $font-size;
                padding: $padding;
 
-               i, img {
+               i, img { 
 
                        & + label {
                                margin-top: .0625rem;
@@ -160,7 +160,7 @@ $icon-bar-item-padding: 1.25rem !default;
   $base-style:true) {
 
        @if $base-style {
-
+       
                background: $bar-bg;
 
                & > * {
@@ -217,29 +217,77 @@ $icon-bar-item-padding: 1.25rem !default;
 
        .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
+}