compass-inuit 4.1.1 → 4.1.5

data/stylesheets/partials/objects/_buttons.scss

@@ -25,6 +25,9 @@
         text-decoration:none;
     }
 
+/**
+ * Basic button modifiers
+ */
 .btn--sml { font-size: .75em; }
 .btn--lrg { font-size:1.50em; }
 

data/stylesheets/partials/objects/_columns.scss

@@ -3,20 +3,16 @@
 \*------------------------------------*/
 /**
  * Here we can set elements in columns of text using CSS3, e.g.:
- *
-   <p class=text-cols-2>
+ * 
+   <p class=text-cols--2>
  * 
  * Demo: jsfiddle.net/inuitcss/E26Yd
  * 
  */
-.text-cols,
-.text-cols--2,
-.text-cols--3,
-.text-cols--4,
-.text-cols--5{
+%text-cols{
     @include vendor(column-gap, $base-spacing-unit +px);
 }
-.text-cols--2    { @include vendor(column-count, 2); }
-.text-cols--3    { @include vendor(column-count, 3); }
-.text-cols--4    { @include vendor(column-count, 4); }
-.text-cols--5    { @include vendor(column-count, 5); }
+.text-cols--2    { @extend %text-cols; @include vendor(column-count, 2); }
+.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); }

data/stylesheets/partials/objects/_complex-link.scss

@@ -8,7 +8,7 @@
  * Add hover behaviour to only slected items within links, e.g.:
  * 
    <a href=log-in class=complex-link>
-       <i class="s s--user"></i>
+       <i class="s  s--user"></i>
        <span class=complex-link__target>Log in</span>
    </a>
  * 

data/stylesheets/partials/objects/_flexbox.scss

@@ -28,12 +28,24 @@
    </div>
  * 
  * It’s pretty poorly named I’m afraid, but it works…
+ * 
+ * Demo: jsfiddle.net/inuitcss/ufUh2
+ * 
  */
 .flexbox{
     display:table;
     width:100%;
 }
+
+/**
+ * Nasty hack to circumvent Modernizr conflicts.
+ */
+html.flexbox{
+    display:block;
+    width:auto;
+}
+    
     .flexbox__item{
         display:table-cell;
         vertical-align:middle;
-    }
+    }

data/stylesheets/partials/objects/_flyout.scss

@@ -4,7 +4,7 @@
 /**
  * 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,7 +12,7 @@
            <p>Ipsum</p>
        </div>
    </div>
- *
+ * 
  * Extend these objects in your theme stylesheet.
  * 
  * Demo: jsfiddle.net/inuitcss/B52HG
@@ -42,12 +42,14 @@
     .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.
      */

data/stylesheets/partials/objects/_greybox.scss

@@ -0,0 +1,54 @@
+/*------------------------------------*\
+    $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{
+    @include font-size(12);
+    font-family:sans-serif;
+    text-align:center;
+    background-color:rgba(0,0,0,0.2);
+    color:#fff;
+}
+    .greybox a,
+    .graybox a{
+        color:#fff;
+        text-decoration:underline;
+    }
+
+
+/**
+ * All greyboxes will occupy 100% of their parent’s width, but to alter their
+ * heights we apply incrementally larger line-heights:
+ */
+.greybox--small,
+.graybox--small     { line-height: (2 * $base-line-height) +px; }
+.greybox--medium,
+.graybox--medium    { line-height: (4 * $base-line-height) +px; }
+.greybox--large,
+.graybox--large     { line-height: (8 * $base-line-height) +px; }
+.greybox--huge,
+.graybox--huge      { line-height:(16 * $base-line-height) +px; }
+.greybox--gigantic,
+.graybox--gigantic  { line-height:(32 * $base-line-height) +px; }

data/stylesheets/partials/objects/_grids-ie7.scss

@@ -0,0 +1,47 @@
+/*------------------------------------*\
+    $GRIDS-IE7
+\*------------------------------------*/
+/*
+ * To make the grid system work properly in IE7 we need to add a little more
+ * markup to account for the fact that it doesn’t support `box-sizing`, e.g.:
+ * 
+   <!--[if lte IE 7]><div class=ie7-grid><![endif]-->
+       
+       <div class=gw>
+           
+           <div class="g  one-third"><div class=g__inner>
+               <p>Foo</p>
+           </div></div>
+           
+           <div class="g  one-third"><div class=g__inner>
+               <p>Bar</p>
+           </div></div>
+           
+           <div class="g  one-third"><div class=g__inner>
+               <p>Baz</p>
+           </div></div>
+           
+       </div>
+   
+   <!--[if lte IE 7]></div><![endif]-->
+ * 
+ * Demo: jsfiddle.net/inuitcss/9Euvj
+ * 
+ */
+.ie7-grid{
+    overflow:hidden;
+}
+    .ie7-grid .gw,
+    .ie7-grid .grid-wrapper{
+        margin-right:-$half-spacing-unit +px;
+        margin-left: -$half-spacing-unit +px;
+    }
+        .ie7-grid .g,
+        .ie7-grid .grid{
+            padding:0;
+        }
+            .ie7-grid .g__inner,
+            .ie7-grid .grid__inner{
+                padding-right:$half-spacing-unit +px;
+                padding-left: $half-spacing-unit +px;
+            }

data/stylesheets/partials/objects/_grids.scss

@@ -3,26 +3,26 @@
 \*------------------------------------*/
 /**
  * Fluid and nestable grid system, e.g.:
- *
+ * 
    <div class=gw>
        
-       <div class="g one-third">
+       <div class="g  one-third">
            <p>One third grid</p>
        </div>
        
-       <div class="g two-thirds">
+       <div class="g  two-thirds">
            <p>Two thirds grid</p>
        </div>
        
-       <div class="g one-half">
+       <div class="g  one-half">
            <p>One half grid</p>
        </div>
        
-       <div class="g one-quarter">
+       <div class="g  one-quarter">
            <p>One quarter grid</p>
        </div>
        
-       <div class="g one-quarter">
+       <div class="g  one-quarter">
            <p>One quarter grid</p>
        </div>
        
@@ -31,6 +31,8 @@
  * Demo: jsfiddle.net/inuitcss/CLYUC
  * 
  */
+
+
 /**
  * Grid wrapper
  * 
@@ -49,6 +51,30 @@
     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.
      */
@@ -57,6 +83,7 @@
         margin-left:0;
     }
     
+    
     /**
      * Grid
      * 
@@ -67,88 +94,4 @@
         float:left;
         padding-left:$base-spacing-unit +px;
         @include vendor(box-sizing, border-box);
-    }
-    
-    /**
-     * Grid sizes in human readable format.
-     */
-
-    /**
-     * Whole
-     */
-    .one-whole          { width:100%; }
-
-    /**
-     * Halves
-     */
-    .one-half           { width:50%; }
-
-    /**
-     * Thirds
-     */
-    .one-third          { width:33.333%; }
-    .two-thirds         { width:66.666%; }
-
-    /**
-     * Quarters
-     */
-      .one-quarter      { width:25%; }
-      .two-quarters     { @extend .one-half; }
-    .three-quarters     { width:75%; }
-
-    /**
-     * Fifths
-     */
-      .one-fifth        { width:20%; }
-      .two-fifths       { width:40%; }
-    .three-fifths       { width:60%; }
-     .four-fifths       { width:80%; }
-
-    /**
-     * Sixths
-     */
-      .one-sixth        { width:16.666%; }
-      .two-sixths       { @extend .one-third; }
-    .three-sixths       { @extend .one-half; }
-     .four-sixths       { @extend .two-thirds; }
-     .five-sixths       { width:83.333%; }
-
-    /**
-     * Eighths
-     */
-      .one-eighth       { width:12.5%; }
-      .two-eighths      { @extend .one-quarter; }
-    .three-eighths      { width:37.5%; }
-     .four-eighths      { @extend .one-half; }
-     .five-eighths      { width:62.5%; }
-      .six-eighths      { @extend .three-quarters; }
-    .seven-eighths      { width:87.5%; }
-
-    /**
-     * Tenths
-     */
-      .one-tenth        { width:10%; }
-      .two-tenths       { @extend .one-fifth; }
-    .three-tenths       { width:30%; }
-     .four-tenths       { @extend .one-fifth; }
-     .five-tenths       { @extend .one-half; }
-      .six-tenths       { @extend .three-fifths; }
-    .seven-tenths       { width:70%; }
-    .eight-tenths       { @extend .four-fifths; }
-     .nine-tenths       { width:90%; }
-
-
-    /**
-     * Twelfths
-     */
-       .one-twelfth     { width:8.333%; }
-       .two-twelfths    { @extend .one-sixth; }
-     .three-twelfths    { @extend .one-quarter; }
-      .four-twelfths    { @extend .one-third; }
-      .five-twelfths    { width:41.666% }
-       .six-twelfths    { @extend .one-half; }
-     .seven-twelfths    { width:58.333%; }
-     .eight-twelfths    { @extend .two-thirds; }
-      .nine-twelfths    { @extend .three-quarters; }
-       .ten-twelfths    { @extend .five-sixths; }
-    .eleven-twelfths    { width:91.666%; }
+    }

data/stylesheets/partials/objects/_icon-text.scss

@@ -4,16 +4,15 @@
 /**
  * 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
+       <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
+       <i class="icon-text__icon  s  s--help"></i>Help &amp; support
    </a>
- *
  * 
  * Demo: jsfiddle.net/inuitcss/Q6Lbf
  * 
@@ -22,15 +21,16 @@
     margin-right:8px;
 }
 
+
 /**
  * We can also reverse the direction of the margin for icons that appear to the
  * right of the text content, thus:
  *
    <a href=# class=icon-text--rev>
-       Help &amp; support<i class="icon-text__icon s s--help"></i>
+       Help &amp; support<i class="icon-text__icon  s  s--help"></i>
    </a>
  *
  */
 .icon-text--rev > .icon-text__icon{
     margin-left:8px;
-}
+}

data/stylesheets/partials/objects/_island.scss

@@ -4,7 +4,7 @@
 /**
  * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
  * E.g.:
- *
+ * 
    <div class=island>
        I am boxed off.
    </div>
@@ -25,6 +25,7 @@
         margin-bottom:0;
     }
 
+
 /**
  * Just like `.island`, only smaller.
  */

data/stylesheets/partials/objects/_lozenges.scss

@@ -2,25 +2,27 @@
     $LOZENGES
 \*------------------------------------*/
 /**
- * Create pill-like runs of text, e.g.:
- *
-   <p>This <span class=loz>here</span> is a lozenge!</p>
- *
-   <h1>This <span class=loz>here</span> is also a lozenge!</h1>
+ * 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
- *
+ * 
  */
-.loz{
+.pill{
     display:inline-block;
     /**
      * These numbers set in ems mean that, at its narrowest, a lozenge will be
-     * the same width as the 1.5 `line-height` set on the `html` element.
-     * This allows us to use the `.loz` in any `font-size` we wish.
+     * the same width as the `line-height` set on the `html` element.
+     * This allows us to use the `.loz` in almost any `font-size` we wish.
      */
-    min-width:    1.00em;
-    padding-right:0.25em;
-    padding-left: 0.25em;
+    min-width:    ($line-height-ratio * 0.666667) +em;
+    padding-right:($line-height-ratio * 0.166667) +em;
+    padding-left: ($line-height-ratio * 0.166667) +em;
               /* =1.50em */
     text-align:center;
     background-color:#ccc; /* Override this color in your theme stylesheet */
@@ -31,5 +33,10 @@
      * overly large number; `border-radius:100%;` would create an oval on
      * non-square elements whereas we just want to round the ends of an element.
      */
-    @include vendor(border-radius, 100px);
-}
+    border-radius:100px;
+}
+
+.loz{
+    @extend .pill;
+    border-radius:$brand-round +px;
+}