compass-inuit 4.1.1 → 4.1.5

data/stylesheets/partials/generic/_pull.scss

@@ -0,0 +1,91 @@
+/*------------------------------------*\
+    $PULL
+\*------------------------------------*/
+/**
+ * Pull classes, to move grid items over to the left by certain amounts.
+ */
+.pull{
+    position:relative;
+}
+    
+    
+/**
+ * Halves
+ */
+.pull--one-half             { @extend .pull; right:50%; }
+
+
+/**
+ * Thirds
+ */
+.pull--one-third            { @extend .pull; right:33.333%; }
+.pull--two-thirds           { @extend .pull; right:66.666%; }
+
+
+/**
+ * Quarters
+ */
+  .pull--one-quarter        { @extend .pull; right:25%; }
+  .pull--two-quarters       { @extend .pull--one-half; }
+.pull--three-quarters       { @extend .pull; right:75%; }
+
+
+/**
+ * Fifths
+ */
+  .pull--one-fifth          { @extend .pull; right:20%; }
+  .pull--two-fifths         { @extend .pull; right:40%; }
+.pull--three-fifths         { @extend .pull; right:60%; }
+ .pull--four-fifths         { @extend .pull; right:80%; }
+
+
+/**
+ * Sixths
+ */
+  .pull--one-sixth          { @extend .pull; right:16.666%; }
+  .pull--two-sixths         { @extend .pull--one-third; }
+.pull--three-sixths         { @extend .pull--one-half; }
+ .pull--four-sixths         { @extend .pull--two-thirds; }
+ .pull--five-sixths         { @extend .pull; right:83.333%; }
+
+
+/**
+ * Eighths
+ */
+   .pull--one-eighth        { @extend .pull; right:12.5%; }
+   .pull--two-eighths       { @extend .pull--one-quarter; }
+ .pull--three-eighths       { @extend .pull; right:37.5%; }
+  .pull--four-eighths       { @extend .pull--one-half; }
+  .pull--five-eighths       { @extend .pull; right:62.5%; }
+   .pull--six-eighths       { @extend .pull--three-quarters; }
+ .pull--seven-eighths       { @extend .pull; right:87.5%; }
+
+
+/**
+ * Tenths
+ */
+   .pull--one-tenth         { @extend .pull; right:10%; }
+   .pull--two-tenths        { @extend .pull--one-fifth; }
+ .pull--three-tenths        { @extend .pull; right:30%; }
+  .pull--four-tenths        { @extend .pull--two-fifths; }
+  .pull--five-tenths        { @extend .pull; right:50%; }
+   .pull--six-tenths        { @extend .pull--three-fifths; }
+ .pull--seven-tenths        { @extend .pull; right:70%; }
+ .pull--eight-tenths        { @extend .pull--four-fifths; }
+  .pull--nine-tenths        { @extend .pull; right:90%; }
+
+
+/**
+ * Twelfths
+ */
+     .pull--one-twelfth     { @extend .pull; right:8.333%; }
+     .pull--two-twelfths    { @extend .pull--one-sixth; }
+   .pull--three-twelfths    { @extend .pull--one-quarter; }
+    .pull--four-twelfths    { @extend .pull--one-third; }
+    .pull--five-twelfths    { @extend .pull; right:41.666%; }
+     .pull--six-twelfths    { @extend .pull--one-half; }
+   .pull--seven-twelfths    { @extend .pull; right:58.333%; }
+   .pull--eight-twelfths    { @extend .pull--two-thirds; }
+    .pull--nine-twelfths    { @extend .pull--three-quarters; }
+     .pull--ten-twelfths    { @extend .pull--five-sixths; }
+  .pull--eleven-twelfths    { @extend .pull; right:91.666%; }

data/stylesheets/partials/generic/_push.scss

@@ -0,0 +1,91 @@
+/*------------------------------------*\
+    $PUSH
+\*------------------------------------*/
+/**
+ * Push classes, to move grid items over to the right by certain amounts.
+ */
+.push{
+    position:relative;
+}
+    
+    
+/**
+ * Halves
+ */
+.push--one-half             { @extend .push; left:50%; }
+
+
+/**
+ * Thirds
+ */
+.push--one-third            { @extend .push; left:33.333%; }
+.push--two-thirds           { @extend .push; left:66.666%; }
+
+
+/**
+ * Quarters
+ */
+  .push--one-quarter        { @extend .push; left:25%; }
+  .push--two-quarters       { @extend .push--one-half; }
+.push--three-quarters       { @extend .push; left:75%; }
+
+
+/**
+ * Fifths
+ */
+  .push--one-fifth          { @extend .push; left:20%; }
+  .push--two-fifths         { @extend .push; left:40%; }
+.push--three-fifths         { @extend .push; left:60%; }
+ .push--four-fifths         { @extend .push; left:80%; }
+
+
+/**
+ * Sixths
+ */
+  .push--one-sixth          { @extend .push; left:16.666%; }
+  .push--two-sixths         { @extend .push--one-third; }
+.push--three-sixths         { @extend .push--one-half; }
+ .push--four-sixths         { @extend .push--two-thirds; }
+ .push--five-sixths         { @extend .push; left:83.333%; }
+
+
+/**
+ * Eighths
+ */
+   .push--one-eighth        { @extend .push; left:12.5%; }
+   .push--two-eighths       { @extend .push--one-quarter; }
+ .push--three-eighths       { @extend .push; left:37.5%; }
+  .push--four-eighths       { @extend .push--one-half; }
+  .push--five-eighths       { @extend .push; left:62.5%; }
+   .push--six-eighths       { @extend .push--three-quarters; }
+ .push--seven-eighths       { @extend .push; left:87.5%; }
+
+
+/**
+ * Tenths
+ */
+   .push--one-tenth         { @extend .push; left:10%; }
+   .push--two-tenths        { @extend .push--one-fifth; }
+ .push--three-tenths        { @extend .push; left:30%; }
+  .push--four-tenths        { @extend .push--two-fifths; }
+  .push--five-tenths        { @extend .push; left:50%; }
+   .push--six-tenths        { @extend .push--three-fifths; }
+ .push--seven-tenths        { @extend .push; left:70%; }
+ .push--eight-tenths        { @extend .push--four-fifths; }
+  .push--nine-tenths        { @extend .push; left:90%; }
+
+
+/**
+ * Twelfths
+ */
+     .push--one-twelfth     { @extend .push; left:8.333%; }
+     .push--two-twelfths    { @extend .push--one-sixth; }
+   .push--three-twelfths    { @extend .push--one-quarter; }
+    .push--four-twelfths    { @extend .push--one-third; }
+    .push--five-twelfths    { @extend .push; left:41.666%; }
+     .push--six-twelfths    { @extend .push--one-half; }
+   .push--seven-twelfths    { @extend .push; left:58.333%; }
+   .push--eight-twelfths    { @extend .push--two-thirds; }
+    .push--nine-twelfths    { @extend .push--three-quarters; }
+     .push--ten-twelfths    { @extend .push--five-sixths; }
+  .push--eleven-twelfths    { @extend .push; left:91.666%; }

data/stylesheets/partials/generic/_reset.scss

@@ -55,6 +55,25 @@ textarea{
     font:inherit;
 }
 
+
+/**
+ * Normalize `sup` and `sub` elements.
+ */
+sub,
+sup{
+    font-size:75%;
+    line-height:0;
+    position:relative;
+    vertical-align:baseline;
+}
+sup{
+    top:-0.5em;
+}
+sub{
+    bottom:-0.25em;
+}
+
+
 /**
  * Give form elements some cursor interactions...
  */
@@ -72,4 +91,4 @@ option{
     textarea:focus{
         cursor:text;
         outline:none;
-    }
+    }

data/stylesheets/partials/generic/_shared.scss

@@ -15,11 +15,10 @@ blockquote,p,address,
 table,
 fieldset,figure,
 pre,
-hr,
 /**
  * Objects and abstractions
  */
-.sass-margin-bottom,
+%sass-margin-bottom,
 .media,
 .island,
 .islet{
@@ -32,6 +31,7 @@ hr,
     }
 }
 
+
 /**
  * Doubled up `margin-bottom` helper class.
  */
@@ -40,6 +40,17 @@ hr,
     margin-bottom:2 * $base-spacing-unit / $base-font-size +rem;
 }
 
+
+/**
+ * `hr` elements only take up a few pixels, so we need to give them special
+ * treatment regarding vertical rhythm.
+ */
+hr{
+    margin-bottom:($base-spacing-unit - 2) +px;
+    margin-bottom:($base-spacing-unit - 2) / $base-font-size +rem;
+}
+
+
 /**
  * Where `margin-left` is concerned we want to try and indent certain elements
  * by a consistent amount. Define that amount once, here.
@@ -47,4 +58,4 @@ hr,
 ul,ol,dd{
     margin-left:2 * $base-spacing-unit +px;
     margin-left:2 * $base-spacing-unit / $base-font-size +rem;
-}
+}

data/stylesheets/partials/generic/_widths.scss

@@ -0,0 +1,95 @@
+/*------------------------------------*\
+    $WIDTHS
+\*------------------------------------*/
+/**
+ * Sizes in human readable format. These are used in conjunction with other
+ * objects and abstractions found in inuit.css, most commonly the grid system
+ * and faux flexbox.
+ */
+
+/**
+ * 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 .two-fifths; }
+ .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/_block-list.scss

@@ -3,34 +3,38 @@
 \*------------------------------------*/
 /**
  * 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.
+ * 
+ * Extend this object in your theme stylesheet.
  * 
  * Demo: jsfiddle.net/inuitcss/hR57q
  * 
  */
-.block-list,
-    .block-list > li{
+.block-list{
+    
+    &,
+    > li{
         border:0 solid #ccc; /* Override this color in your theme stylesheet */
     }
+}
 .block-list{
     list-style:none;
     margin-left:0;
     border-top-width:1px;
-}
-    .block-list > li{
+
+    > li{
         border-bottom-width:1px;
         padding:$half-spacing-unit +px;
     }
+}
         .block-list__link{
             display:block;
             padding:$half-spacing-unit +px;
             margin:-$half-spacing-unit +px;
-        }
+        }

data/stylesheets/partials/objects/_breadcrumb.scss

@@ -0,0 +1,59 @@
+/*------------------------------------*\
+    $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:"» ";
+}
+
+
+/**
+ * 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:"/ ";
+}
+
+
+/**
+ * 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)" ";
+}
+
+
+/**
+ * Denote the root of the tree.
+ */
+.breadcrumb__root{
+    font-weight:bold;
+}