compass-inuit 4.5.5.1 → 5.0.1

data/stylesheets/compass-inuit/objects/_block-list.scss

@@ -1,26 +1,28 @@
+@if $use-block-list == true or $use-matrix == true{
+
 /*------------------------------------*\
     $BLOCK-LIST
 \*------------------------------------*/
 /**
  * Create big blocky lists of content, e.g.:
- * 
+ *
    <ul class=block-list>
       <li>Foo</li>
       <li>Bar</li>
       <li>Baz</li>
       <li><a href=# class=block-list__link>Foo Bar Baz</a></li>
    </ul>
- * 
+ *
  * Extend this object in your theme stylesheet.
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/hR57q
- * 
+ *
  */
 .block-list{
-    
+
     &,
     > li{
-        border:0 solid #ccc; /* Override this color in your theme stylesheet */
+        border:0 solid $base-ui-color;
     }
 }
 .block-list{
@@ -38,3 +40,5 @@
             padding:$half-spacing-unit;
             margin:-$half-spacing-unit;
         }
+
+}//endif

data/stylesheets/compass-inuit/objects/_breadcrumb.scss

@@ -1,53 +1,55 @@
+@if $use-breadcrumb == true{
+
 /*------------------------------------*\
     $BREADCRUMB
 \*------------------------------------*/
 /**
  * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
- * 
+ *
    <ol class="nav  breadcrumb">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>The Board</a></li>
        <li class=current><a href=#>Directors</a></li>
    </ol>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/rkAY9
- * 
+ *
  */
 .breadcrumb > li + li:before{
-    content:"» ";
+    content:"\00BB" "\00A0";
 }
 
 
 /**
  * For denoting a path-like structure, GitHub style, e.g.:
- * 
+ *
    <ol class="nav  breadcrumb--path">
        <li class=breadcrumb__root><a href=#>inuit.css</a></li>
        <li><a href=#>inuit.css</a></li>
        <li><a href=#>partials</a></li>
        <li class=current><a href=#>objects</a></li>
    </ol>
- * 
+ *
  */
 .breadcrumb--path > li + li:before{
-    content:"/ ";
+    content:"\002F" "\00A0";
 }
 
 
 /**
  * Assign a delimiter on the fly through a data attribute, e.g.:
- * 
+ *
    <ol class="nav  breadcrumb">
        <li><a href=#>Home</a></li>
        <li data-breadcrumb="|"><a href=#>About</a></li>
        <li data-breadcrumb="|"><a href=#>The Board</a></li>
        <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
    </ol>
- * 
+ *
  */
 .breadcrumb > li + li[data-breadcrumb]:before{
-    content:attr(data-breadcrumb)" ";
+    content:attr(data-breadcrumb) "\00A0";
 }
 
 
@@ -57,3 +59,5 @@
 .breadcrumb__root{
     font-weight:bold;
 }
+
+}//endif

data/stylesheets/compass-inuit/objects/_columns.scss

@@ -1,13 +1,15 @@
+@if $use-columns == true{
+
 /*------------------------------------*\
     $COLUMNS
 \*------------------------------------*/
 /**
  * Here we can set elements in columns of text using CSS3, e.g.:
- * 
+ *
    <p class=text-cols--2>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/E26Yd
- * 
+ *
  */
 %text-cols{
     @include vendor(column-gap, $base-spacing-unit);
@@ -16,3 +18,5 @@
 .text-cols--3    { @extend %text-cols; @include vendor(column-count, 3); }
 .text-cols--4    { @extend %text-cols; @include vendor(column-count, 4); }
 .text-cols--5    { @extend %text-cols; @include vendor(column-count, 5); }
+
+}//endif

data/stylesheets/compass-inuit/objects/_flexbox.scss

@@ -1,36 +1,38 @@
+@if $use-flexbox == true{
+
 /*------------------------------------*\
     $FLEXBOX
 \*------------------------------------*/
 /**
  * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
  * it, in a way... e.g.:
- * 
+ *
    <header class=flexbox>
-       
+
        <div class=flexbox__item>
            <b>Welcome to</b>
        </div>
-       
+
        <div class=flexbox__item>
            <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
        </div>
-   
+
    </header>
- * 
+ *
  * We can also combine our grid system classes with `.flexbox__item` classes,
  * e.g.:
- * 
+ *
    <div class=flexbox>
        <div class="flexbox__item  one-quarter">
        </div>
        <div class="flexbox__item  three-quarters">
        </div>
    </div>
- * 
- * It’s pretty poorly named I’m afraid, but it works…
- * 
+ *
+ * It’s pretty poorly named I’m afraid, but it works...
+ *
  * Demo: jsfiddle.net/inuitcss/ufUh2
- * 
+ *
  */
 .flexbox{
     display:table;
@@ -44,8 +46,10 @@ html.flexbox{
     display:block;
     width:auto;
 }
-    
+
     .flexbox__item{
         display:table-cell;
         vertical-align:middle;
     }
+
+}//endif

data/stylesheets/compass-inuit/objects/_flyout.scss

@@ -1,10 +1,12 @@
+@if $use-flyout == true{
+
 /*------------------------------------*\
     $FLYOUT
 \*------------------------------------*/
 /**
  * Flyouts are pieces of content that fly out of a parent when said parent is
  * hovered. They typically appear bottom-left of the parent.
- * 
+ *
    <div class=flyout>
        Foo
        <div class=flyout__content>
@@ -12,11 +14,11 @@
            <p>Ipsum</p>
        </div>
    </div>
- * 
+ *
  * Extend these objects in your theme stylesheet.
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/B52HG
- * 
+ *
  */
 .flyout,
 .flyout--alt{
@@ -32,7 +34,7 @@
         top:100%;
         left:-99999px;
     }
-    
+
     /**
      * Bring the flyouts into view when you hover their parents.
      * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
@@ -42,18 +44,20 @@
     .flyout--alt:hover{
         overflow:visible;
     }
-    
+
     /**
      * Regular flyouts sit all the way from the top, flush left.
      */
     .flyout:hover > .flyout__content{
         left:0;
     }
-    
+
     /**
      * Alternative flyouts sit all the way from the left, flush top.
      */
     .flyout--alt:hover > .flyout__content{
         top:0;
         left:100%;
-    }
+    }
+
+}//endif

data/stylesheets/compass-inuit/objects/_greybox.scss

@@ -1,27 +1,29 @@
+@if $use-greybox == true{
+
 /*------------------------------------*\
     $GREYBOX
 \*------------------------------------*/
 /**
  * Quickly throw together greybox wireframes. Use in conjunction with other
  * inuit.css objects to create simple greybox prototypes, e.g.:
- * 
+ *
    <div class="island  greybox  greybox--medium">Header</div>
-   
+
    <ul class="nav  nav--fit  nav--block  greybox">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Portfolio</a></li>
        <li><a href=#>Contact</a></li>
    </ul>
- * 
+ *
  * The beauty of combining the greyboxing with inuit.css objects is that any
  * prototyping can quickly be converted into/used as production code.
- * 
+ *
  * For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
  * adamwhitcroft.com/proto
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/qCXfh/
- * 
+ *
  */
 .greybox,
 .graybox{
@@ -51,4 +53,6 @@
 .greybox--huge,
 .graybox--huge      { line-height:16 * $base-line-height; }
 .greybox--gigantic,
-.graybox--gigantic  { line-height:32 * $base-line-height; }
+.graybox--gigantic  { line-height:32 * $base-line-height; }
+
+}//endif

data/stylesheets/compass-inuit/objects/_grids.scss

@@ -1,99 +1,69 @@
+@if $use-grids == true{
+
 /*------------------------------------*\
     $GRIDS
 \*------------------------------------*/
 /**
  * Fluid and nestable grid system, e.g.:
- * 
-   <div class=gw>
-       
-       <div class="g  one-third">
+ *
+   <div class="grid">
+
+       <div class="grid__item  one-third">
            <p>One third grid</p>
-       </div>
-       
-       <div class="g  two-thirds">
+       </div><!--
+
+    --><div class="grid__item  two-thirds">
            <p>Two thirds grid</p>
-       </div>
-       
-       <div class="g  one-half">
+       </div><!--
+
+    --><div class="grid__item  one-half">
            <p>One half grid</p>
-       </div>
-       
-       <div class="g  one-quarter">
+       </div><!--
+
+    --><div class="grid__item  one-quarter">
            <p>One quarter grid</p>
-       </div>
-       
-       <div class="g  one-quarter">
+       </div><!--
+
+    --><div class="grid__item  one-quarter">
            <p>One quarter grid</p>
        </div>
-       
+
    </div>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/CLYUC
- * 
+ *
  */
 
 
 /**
  * Grid wrapper
- * 
- * Shorthand and verbose
  */
-.gw,
-.grid-wrapper{
-    /**
-     * Negative margin to negate the padding on the first grid child. 
-     */
+.grid{
     margin-left:-$base-spacing-unit;
-    /**
-     * The following declarations allow us to use the `.gw` class on lists.
-     */
     list-style:none;
     margin-bottom:0;
-    @extend .cf;
-}
-
-
-/**
- * Reverse grid order
- * 
-   <div class="gw  gw--rev">
-       
-       <div class="g  one-third">
-           <p>Appears on the right</p>
-       </div>
-       
-       <div class="g  two-thirds">
-           <p>Appears on the left</p>
-       </div>
-       
-   </div>
- * 
- */
-.gw--rev > .g,
-.grid-wrapper--rev > .grid{
-    float:right;
 }
 
 
     /**
      * Very infrequently occuring grid wrappers as children of grid wrappers.
      */
-    .gw > .gw,
-    .grid-wrapper > .grid-wrapper{
+    .grid > .grid{
         margin-left:0;
     }
-    
-    
+
+
     /**
      * Grid
-     * 
-     * Shorthand and verbose
      */
-    .g,
-    .grid{
-        float:left;
+    .grid__item{
+        display:inline-block;
+        width:100%;
         padding-left:$base-spacing-unit;
+        vertical-align:top;
         @if $global-border-box == false{
             @include vendor(box-sizing, border-box);
         }
     }
+
+}//endif

data/stylesheets/compass-inuit/objects/_icon-text.scss

@@ -1,21 +1,23 @@
+@if $use-icon-text == true{
+
 /*------------------------------------*\
     $ICON-TEXT
 \*------------------------------------*/
 /**
  * For text-links etc that have an icon with them. Sometimes whitespace would
  * suffice in creating a gap between the icon and text, for example:
- * 
+ *
    <a href=#>
        <i class="s  s--help"></i> Help &amp; support
    </a>
- * 
+ *
  * However we will sometimes want a larger, explicity set gap:
    <a href=# class=icon-text>
        <i class="icon-text__icon  s  s--help"></i>Help &amp; support
    </a>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/Q6Lbf
- * 
+ *
  */
 .icon-text > .icon-text__icon{
     margin-right:$half-spacing-unit / 2;
@@ -34,3 +36,5 @@
 .icon-text--rev > .icon-text__icon{
     margin-left:$half-spacing-unit / 2;
 }
+
+}//endif