sled 4.5.5

data/vendor/assets/stylesheets/inuit.css/objects/_icon-text.scss

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    $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;
+}
+
+
+/**
+ * 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>
+   </a>
+ *
+ */
+.icon-text--rev > .icon-text__icon{
+    margin-left:$half-spacing-unit / 2;
+}

data/vendor/assets/stylesheets/inuit.css/objects/_island.scss

@@ -0,0 +1,34 @@
+/*------------------------------------*\
+    $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{
+    display:block;
+    @extend .cf;
+}
+.island{
+    padding:$base-spacing-unit;
+}
+    .island > :last-child,
+    .islet > :last-child{
+        margin-bottom:0;
+    }
+
+
+/**
+ * Just like `.island`, only smaller.
+ */
+.islet{
+    padding:$half-spacing-unit;
+}

data/vendor/assets/stylesheets/inuit.css/objects/_link-complex.scss

@@ -0,0 +1,28 @@
+/*------------------------------------*\
+    $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,
+.link-complex:active,
+.link-complex:focus{
+    text-decoration:none;
+}
+    .link-complex:hover .link-complex__target,
+    .link-complex:active .link-complex__target,
+    .link-complex:focus .link-complex__target{
+        text-decoration:underline;
+    }

data/vendor/assets/stylesheets/inuit.css/objects/_lozenges.scss

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    $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;
+    /**
+     * These numbers set in ems mean that, at its narrowest, a lozenge will be
+     * 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:    ($line-height-ratio * 0.666667) * 1em;
+    padding-right:($line-height-ratio * 0.166667) * 1em;
+    padding-left: ($line-height-ratio * 0.166667) * 1em;
+              /* =1.50em */
+    text-align:center;
+    background-color:#ccc; /* Override this color in your theme stylesheet */
+    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
+     * non-square elements whereas we just want to round the ends of an element.
+     */
+    border-radius:100px;
+}
+
+.loz{
+    @extend .pill;
+    border-radius:$brand-round;
+}

data/vendor/assets/stylesheets/inuit.css/objects/_marginalia.scss

@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    $MARGINALIA
+\*------------------------------------*/
+/**
+ * Marginalia are, per definition, notes in the margin of a document. The
+ * `marginalia__body` class can be applied to all kinds of content, like text or
+ * images, and is joined by a width class:
+ *
+   <div class="marginalia">
+       <div class="marginalia__body  desk-one-fifth"></div>
+   </div>
+ *
+ * Demo: jsfiddle.net/inuitcss/AemkH
+ *
+ */
+.marginalia{
+    @include font-size($milli-size);
+}
+
+/**
+ * Wait for a certain breakpoint to trigger ‘proper' marginalia. Up to this point,
+ * marginalia are inline with the other text.
+ */
+@media (min-width: $desk-start){
+    .marginalia{
+        position:relative;
+    }
+
+    .marginalia__body,
+    .marginalia__body--right{
+        position:absolute;
+    }
+
+    .marginalia__body{
+      right:100%;
+      padding-right:$base-spacing-unit;
+      text-align:right;
+    }
+
+    /**
+     * Align marginalia to the right of the text.
+     */
+    .marginalia__body--right{
+        left:100%;
+        padding-left:$base-spacing-unit;
+        text-align:left;
+    }
+}

data/vendor/assets/stylesheets/inuit.css/objects/_matrix.scss

@@ -0,0 +1,98 @@
+/*------------------------------------*\
+    $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>
+       <li><a href=# class=matrix__link>Sit</a></li>
+       <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;
+    border-left-width:1px;
+    @extend .cf;
+
+     > li{
+        padding:$half-spacing-unit;
+        float:left;
+        border-right-width: 1px;
+        border-bottom-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;
+        }
+
+
+/**
+ * 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;
+    margin-left:0;
+    @extend .cf;
+}
+    .multi-list > li{
+        float:left;
+    }
+
+
+    /**
+     * Apply these classes alongside the `.matrix` or `.multi-list` classes on
+     * lists to determine how wide their columns are.
+     */
+    .two-cols > li{
+        width:50%;
+    }
+    .three-cols > li{
+        width:33.333%;
+    }
+    .four-cols > li{
+        width:25%;
+    }
+    .five-cols > li{
+        width:20%;
+    }
+    /**
+     * Unfortunately we have to qualify this selector in order to bring its
+     * specificity above the `.[number]-cols > li` selectors above.
+     */
+    .matrix > .all-cols,
+    .multi-list > .all-cols{
+        width:100%;
+    }

data/vendor/assets/stylesheets/inuit.css/objects/_media.scss

@@ -0,0 +1,56 @@
+/*------------------------------------*\
+    $MEDIA
+\*------------------------------------*/
+/**
+ * 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;
+    @extend .cf;
+}
+    .media__img{
+        float:left;
+        margin-right:$base-spacing-unit;
+    }
+    /**
+     * Reversed image location (right instead of left).
+     */
+    .media__img--rev{
+        float:right;
+        margin-left:$base-spacing-unit;
+    }
+
+        .media__img img,
+        .media__img--rev img{
+            display:block;
+        }
+
+    .media__body{
+        overflow:hidden;
+    }
+        .media__body,
+        .media__body > :last-child{
+            margin-bottom:0;
+        }
+
+
+    /**
+     * `.img`s in `.islet`s need an appropriately sized margin.
+     */
+    .islet .media__img{
+        margin-right:$half-spacing-unit;
+    }
+    .islet .media__img--rev{
+        margin-left:$half-spacing-unit;
+    }

data/vendor/assets/stylesheets/inuit.css/objects/_nav.scss

@@ -0,0 +1,151 @@
+/*------------------------------------*\
+    $NAV
+\*------------------------------------*/
+/**
+ * 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;
+    margin-left:0;
+    @extend .cf;
+
+    > li{
+
+        &,
+        > a{
+            display:inline-block;
+           *display:inline;
+            zoom:1;
+        }
+    }
+}
+
+
+/**
+ * `.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;
+
+        > a{
+            display:block;
+        }
+    }
+}
+
+
+/**
+ * `.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;
+}
+
+
+/**
+ * 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;
+    /**
+     * Remove whitespace caused by `inline-block`.
+     */
+    letter-spacing:-0.31em;
+    word-spacing:-0.43em;
+    white-space:nowrap;
+
+    > li{
+        letter-spacing:normal;
+        word-spacing:normal;
+
+        > a{
+            padding:$half-spacing-unit;
+        }
+    }
+}
+
+
+/**
+ * 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;
+        }
+    }
+}
+
+
+/**
+ * Make a list of keywords. Extends `.nav`, e.g.:
+ *
+   `<ul class="nav  nav--keywords>`
+ *
+ */
+.nav--keywords{
+
+    > li{
+
+        &:after{
+            content:", ";
+        }
+
+        &:last-child:after{
+            display:none;
+        }
+    }
+}