compass-inuit 4.5.5.1 → 5.0.1

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

@@ -1,16 +1,18 @@
+@if $use-island == true{
+
 /*------------------------------------*\
     $ISLAND
 \*------------------------------------*/
 /**
  * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
  * E.g.:
- * 
+ *
    <div class=island>
        I am boxed off.
    </div>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/u8pV3
- * 
+ *
  */
 .island,
 .islet{
@@ -31,4 +33,6 @@
  */
 .islet{
     padding:$half-spacing-unit;
-}
+}
+
+}//endif

data/stylesheets/compass-inuit/objects/_link-complex.scss

@@ -1,19 +1,21 @@
+@if $use-link-complex == true{
+
 /*------------------------------------*\
     $LINK-COMPLEX
 \*------------------------------------*/
 /**
  * As inspired by @necolas:
  * github.com/necolas/suit-utils/blob/master/link.css#L18
- * 
+ *
  * Add hover behaviour to only selected items within links, e.g.:
- * 
+ *
    <a href=log-in class=link-complex>
        <i class="s  s--user"></i>
        <span class=link-complex__target>Log in</span>
    </a>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/rt9M3
- * 
+ *
  */
 .link-complex,
 .link-complex:hover,
@@ -26,3 +28,5 @@
     .link-complex:focus .link-complex__target{
         text-decoration:underline;
     }
+
+}//endif

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

@@ -1,17 +1,19 @@
+@if $use-lozenges == true{
+
 /*------------------------------------*\
     $LOZENGES
 \*------------------------------------*/
 /**
  * Create pill- and lozenge-like runs of text, e.g.:
- * 
+ *
    <p>This <span class=pill>here</span> is a pill!</p>
- * 
+ *
    <p>This <span class=loz>here</span> is also a lozenge!</p>
- * 
+ *
  * Pills have fully rounded ends, lozenges have only their corners rounded.
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/N3pGm
- * 
+ *
  */
 .pill{
     display:inline-block;
@@ -25,9 +27,9 @@
     padding-left: ($line-height-ratio * 0.166667) * 1em;
               /* =1.50em */
     text-align:center;
-    background-color:#ccc; /* Override this color in your theme stylesheet */
+    background-color:$base-ui-color;
     color:#fff; /* Override this color in your theme stylesheet */
-    
+
     /**
      * Normally we’d use border-radius:100%; but instead here we just use an
      * overly large number; `border-radius:100%;` would create an oval on
@@ -40,3 +42,5 @@
     @extend .pill;
     border-radius:$brand-round;
 }
+
+}//endif

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

@@ -1,3 +1,5 @@
+@if $use-marginalia == true{
+
 /*------------------------------------*\
     $MARGINALIA
 \*------------------------------------*/
@@ -30,7 +32,7 @@
     .marginalia__body--right{
         position:absolute;
     }
-  
+
     .marginalia__body{
       right:100%;
       padding-right:$base-spacing-unit;
@@ -46,3 +48,5 @@
         text-align:left;
     }
 }
+
+}//endif

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

@@ -1,9 +1,11 @@
+@if $use-matrix == true{
+
 /*------------------------------------*\
     $MATRIX
 \*------------------------------------*/
 /**
  * Create a grid of items out of a single list, e.g.:
- * 
+ *
    <ul class="matrix  three-cols">
        <li class=all-cols>Lorem</li>
        <li>Ipsum <a href=#>dolor</a></li>
@@ -11,56 +13,43 @@
        <li>Amet</li>
        <li class=all-cols>Consectetuer</li>
    </ul>
- * 
+ *
  * Extend this object in your theme stylesheet.
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/Y2zrU
- * 
+ *
  */
 .matrix{
-
-    &,
-    > li{
-        border:0 solid #ccc; /* Override this color in your theme stylesheet */
-    }
-}
-.matrix{
-    list-style:none;
-    margin-left:0;
-    border-top-width: 1px;
+    @extend .block-list;
     border-left-width:1px;
     @extend .cf;
 
      > li{
-        padding:$half-spacing-unit;
         float:left;
-        border-right-width: 1px;
-        border-bottom-width:1px;
+        border-right-width:1px;
         @if $global-border-box == false{
             @include vendor(box-sizing, border-box);
         }
     }
 }
         .matrix__link{
-            display:block;
-            padding:$half-spacing-unit;
-            margin:-$half-spacing-unit;
+            @extend .block-list__link;
         }
 
 
 /**
  * The `.multi-list` object is a lot like the `.matrix` object only without the
  * blocky borders and padding.
- * 
+ *
    <ul class="multi-list  four-cols">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
    </ul>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/Y2zrU
- * 
+ *
  */
 .multi-list{
     list-style:none;
@@ -70,8 +59,8 @@
     .multi-list > li{
         float:left;
     }
-    
-    
+
+
     /**
      * Apply these classes alongside the `.matrix` or `.multi-list` classes on
      * lists to determine how wide their columns are.
@@ -96,3 +85,5 @@
     .multi-list > .all-cols{
         width:100%;
     }
+
+}//endif

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

@@ -1,3 +1,5 @@
+@if $use-media == true{
+
 /*------------------------------------*\
     $MEDIA
 \*------------------------------------*/
@@ -5,15 +7,15 @@
  * Place any image- and text-like content side-by-side, as per:
  * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
  * E.g.:
- * 
+ *
    <div class=media>
        <img src=http://placekitten.com/200/300 alt="" class=media__img>
        <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/cf4Qs
- * 
+ *
  */
 .media{
     display:block;
@@ -30,12 +32,12 @@
         float:right;
         margin-left:$base-spacing-unit;
     }
-    
+
         .media__img img,
         .media__img--rev img{
             display:block;
         }
-    
+
     .media__body{
         overflow:hidden;
     }
@@ -43,8 +45,8 @@
         .media__body > :last-child{
             margin-bottom:0;
         }
-    
-    
+
+
     /**
      * `.img`s in `.islet`s need an appropriately sized margin.
      */
@@ -53,4 +55,6 @@
     }
     .islet .media__img--rev{
         margin-left:$half-spacing-unit;
-    }
+    }
+
+}//endif

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

@@ -1,3 +1,5 @@
+@if $use-nav == true or $use-options == true or $use-pagination == true or $use-breadcrumb == true{
+
 /*------------------------------------*\
     $NAV
 \*------------------------------------*/
@@ -5,16 +7,16 @@
  * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
  * When used on an `ol` or `ul`, this class throws the list into horizontal mode
  * e.g.:
- * 
+ *
    <ul class=nav>
        <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>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/Vnph4
- * 
+ *
  */
 .nav{
     list-style:none;
@@ -35,17 +37,17 @@
 
 /**
  * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
- * 
+ *
    <ul class="nav  nav--stacked">
        <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>
- * 
+ *
  */
 .nav--stacked{
-    
+
     > li{
         display:list-item;
 
@@ -58,14 +60,14 @@
 
 /**
  * `.nav--banner` extends `.nav` and centres the list, e.g.:
- * 
+ *
    <ul class="nav  nav--banner">
        <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>
- * 
+ *
  */
 .nav--banner{
     text-align:center;
@@ -74,14 +76,14 @@
 
 /**
  * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
- * 
+ *
    <ul class="nav  nav--block">
        <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>
- * 
+ *
  */
 .nav--block{
     line-height:1;
@@ -91,11 +93,11 @@
     letter-spacing:-0.31em;
     word-spacing:-0.43em;
     white-space:nowrap;
-    
+
     > li{
         letter-spacing:normal;
         word-spacing:normal;
-        
+
         > a{
             padding:$half-spacing-unit;
         }
@@ -106,23 +108,23 @@
 /**
  * Force a nav to occupy 100% of the available width of its parent. Extends
  * `.nav`, e.g.:
- * 
+ *
    <ul class="nav  nav--fit">
        <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>
- * 
+ *
  * Thanks to @pimpl for this idea!
  */
 .nav--fit{
     display:table;
     width:100%;
-        
+
     > li{
         display:table-cell;
-        
+
         > a{
             display:block;
         }
@@ -132,20 +134,22 @@
 
 /**
  * Make a list of keywords. Extends `.nav`, e.g.:
- * 
+ *
    `<ul class="nav  nav--keywords>`
- * 
+ *
  */
 .nav--keywords{
-    
+
     > li{
-        
+
         &:after{
-            content:", ";
+            content:"\002C" "\00A0";
         }
-         
+
         &:last-child:after{
             display:none;
         }
     }
 }
+
+}//endif

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

@@ -1,3 +1,5 @@
+@if $use-options == true{
+
 /*------------------------------------*\
     $OPTIONS
 \*------------------------------------*/
@@ -5,16 +7,16 @@
  * Link-group nav, used for displaying related options. Extends `.nav--block`
  * but could also extend `.nav--fit`. Extend with colours and ‘current states’
  * in your theme stylesheet.
- * 
+ *
   <ul class="nav  options">
       <li><a></a></li>
       <li><a></a></li>
       <li><a></a></li>
       <li><a></a></li>
    </ul>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/vwfaf
- * 
+ *
  */
 .options{
     @extend .nav--block;
@@ -22,7 +24,7 @@
     > li{
 
         > a{
-            border:0 solid #ccc; /* Extend in your theme stylesheet */
+            border:0 solid $base-ui-color;
             border-width:1px;
             border-left-width:0;
         }
@@ -39,3 +41,5 @@
         }
     }
 }
+
+}//endif