sled 4.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/LICENSE +13 -0
- data/README.md +24 -0
- data/lib/generators/inuit/install/USAGE +9 -0
- data/lib/generators/inuit/install/install_generator.rb +10 -0
- data/lib/generators/inuit/install/templates/inuit_and_override.css.scss +3 -0
- data/lib/sled.rb +8 -0
- data/lib/sled/version.rb +3 -0
- data/vendor/assets/stylesheets/_vars.scss +124 -0
- data/vendor/assets/stylesheets/assets/batch/batch.eot +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch.svg +360 -0
- data/vendor/assets/stylesheets/assets/batch/batch.ttf +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch.woff +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch_webfont_reference.pdf +0 -0
- data/vendor/assets/stylesheets/inuit.css/_inuit.scss +210 -0
- data/vendor/assets/stylesheets/inuit.css/base/_code.scss +63 -0
- data/vendor/assets/stylesheets/inuit.css/base/_forms.scss +174 -0
- data/vendor/assets/stylesheets/inuit.css/base/_headings.scss +60 -0
- data/vendor/assets/stylesheets/inuit.css/base/_images.scss +67 -0
- data/vendor/assets/stylesheets/inuit.css/base/_links.scss +37 -0
- data/vendor/assets/stylesheets/inuit.css/base/_lists.scss +19 -0
- data/vendor/assets/stylesheets/inuit.css/base/_main.scss +8 -0
- data/vendor/assets/stylesheets/inuit.css/base/_paragraphs.scss +11 -0
- data/vendor/assets/stylesheets/inuit.css/base/_quotes.scss +96 -0
- data/vendor/assets/stylesheets/inuit.css/base/_smallprint.scss +13 -0
- data/vendor/assets/stylesheets/inuit.css/base/_tables.scss +163 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_brand.scss +18 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_debug.scss +168 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_helper.scss +112 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_mixins.scss +299 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_normalize.scss +396 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_pull.scss +123 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_push.scss +123 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_reset.scss +80 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_shared.scss +61 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_widths.scss +154 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_arrows.scss +143 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_batch.scss +15 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_block-list.scss +40 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_breadcrumb.scss +59 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_buttons.scss +44 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_columns.scss +18 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_flexbox.scss +51 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_flyout.scss +59 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_greybox.scss +54 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_grids.scss +99 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_icon-text.scss +36 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_island.scss +34 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_link-complex.scss +28 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_lozenges.scss +42 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_marginalia.scss +48 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_matrix.scss +98 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_media.scss +56 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_nav.scss +151 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_options.scss +41 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_pagination.scss +46 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_rules.scss +61 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_split.scss +35 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_sprite.scss +92 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_stats.scss +48 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_this-or-this.scss +34 -0
- data/vendor/assets/stylesheets/style.scss +23 -0
- metadata +126 -0
| @@ -0,0 +1,18 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $BRAND
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * `.brand` is a quick and simple way to apply your brand face and/or color to
         | 
| 6 | 
            +
             * any element using a handy helper class.
         | 
| 7 | 
            +
             */
         | 
| 8 | 
            +
            .brand{
         | 
| 9 | 
            +
                font-family:$brand-face +!important;
         | 
| 10 | 
            +
                color:$brand-color +!important;
         | 
| 11 | 
            +
            }
         | 
| 12 | 
            +
            .brand-face{
         | 
| 13 | 
            +
                font-family:$brand-face +!important;
         | 
| 14 | 
            +
            }
         | 
| 15 | 
            +
            .brand-color,
         | 
| 16 | 
            +
            .brand-colour{
         | 
| 17 | 
            +
                color:$brand-color +!important;
         | 
| 18 | 
            +
            }
         | 
| @@ -0,0 +1,15 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $CLEARFIX
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
         | 
| 6 | 
            +
             * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
         | 
| 7 | 
            +
             * and over in your markup.
         | 
| 8 | 
            +
             */
         | 
| 9 | 
            +
            .cf{
         | 
| 10 | 
            +
                &:after{
         | 
| 11 | 
            +
                    content:"";
         | 
| 12 | 
            +
                    display:table;
         | 
| 13 | 
            +
                    clear:both;
         | 
| 14 | 
            +
                }
         | 
| 15 | 
            +
            }
         | 
| @@ -0,0 +1,168 @@ | |
| 1 | 
            +
            @if $debug-mode == true{
         | 
| 2 | 
            +
            /*------------------------------------*\
         | 
| 3 | 
            +
                $DEBUG
         | 
| 4 | 
            +
            \*------------------------------------*/
         | 
| 5 | 
            +
            /**
         | 
| 6 | 
            +
             * Enable this stylesheet to visually detect any improperly nested or
         | 
| 7 | 
            +
             * potentially invalid markup, or any potentially inaccessible code.
         | 
| 8 | 
            +
             *
         | 
| 9 | 
            +
             * Red          ==      definite error
         | 
| 10 | 
            +
             * Yellow       ==      double-check
         | 
| 11 | 
            +
             * None         ==      should be fine
         | 
| 12 | 
            +
             *
         | 
| 13 | 
            +
             * Please note that this method of checking markup quality should not be relied
         | 
| 14 | 
            +
             * upon entirely. Validate your markup!
         | 
| 15 | 
            +
             */
         | 
| 16 | 
            +
             | 
| 17 | 
            +
             | 
| 18 | 
            +
            /**
         | 
| 19 | 
            +
             * Are there any empty elements in your page?
         | 
| 20 | 
            +
             */
         | 
| 21 | 
            +
            :empty{
         | 
| 22 | 
            +
                outline:5px solid yellow;
         | 
| 23 | 
            +
            }
         | 
| 24 | 
            +
             | 
| 25 | 
            +
             | 
| 26 | 
            +
            /**
         | 
| 27 | 
            +
             * Images require `alt` attributes, empty `alt`s are fine but should be
         | 
| 28 | 
            +
             * double-checked, no `alt` is bad and is flagged red.
         | 
| 29 | 
            +
             */
         | 
| 30 | 
            +
            img{
         | 
| 31 | 
            +
                outline:5px solid red;
         | 
| 32 | 
            +
            }
         | 
| 33 | 
            +
            img[alt]{
         | 
| 34 | 
            +
                outline:none;
         | 
| 35 | 
            +
            }
         | 
| 36 | 
            +
            img[alt=""]{
         | 
| 37 | 
            +
                outline:5px solid yellow;
         | 
| 38 | 
            +
            }
         | 
| 39 | 
            +
             | 
| 40 | 
            +
             | 
| 41 | 
            +
            /**
         | 
| 42 | 
            +
             * Links sometimes, though not always, benefit from `title` attributes. Links
         | 
| 43 | 
            +
             * without are never invalid but it’s a good idea to check.
         | 
| 44 | 
            +
             */
         | 
| 45 | 
            +
            a{
         | 
| 46 | 
            +
                outline:5px solid yellow;
         | 
| 47 | 
            +
            }
         | 
| 48 | 
            +
            a[title]{
         | 
| 49 | 
            +
                outline:none;
         | 
| 50 | 
            +
            }
         | 
| 51 | 
            +
             | 
| 52 | 
            +
             | 
| 53 | 
            +
            /**
         | 
| 54 | 
            +
             * Double-check any links whose `href` is something questionable.
         | 
| 55 | 
            +
             */
         | 
| 56 | 
            +
            a[href="#"],
         | 
| 57 | 
            +
            a[href*="javascript"]{
         | 
| 58 | 
            +
                outline:5px solid yellow;
         | 
| 59 | 
            +
            }
         | 
| 60 | 
            +
             | 
| 61 | 
            +
             | 
| 62 | 
            +
            /**
         | 
| 63 | 
            +
             * The `target` attribute ain’t too nice...
         | 
| 64 | 
            +
             */
         | 
| 65 | 
            +
            a[target]{
         | 
| 66 | 
            +
                outline:5px solid yellow;
         | 
| 67 | 
            +
            }
         | 
| 68 | 
            +
             | 
| 69 | 
            +
             | 
| 70 | 
            +
            /**
         | 
| 71 | 
            +
             * Ensure any lists only contain `li`s as children.
         | 
| 72 | 
            +
             */
         | 
| 73 | 
            +
            ul,
         | 
| 74 | 
            +
            ol{
         | 
| 75 | 
            +
                > *:not(li){
         | 
| 76 | 
            +
                    outline:5px solid red;
         | 
| 77 | 
            +
                }
         | 
| 78 | 
            +
            }
         | 
| 79 | 
            +
             | 
| 80 | 
            +
             | 
| 81 | 
            +
            /**
         | 
| 82 | 
            +
             * It’s always nice to give `th`s `scope` attributes.
         | 
| 83 | 
            +
             */
         | 
| 84 | 
            +
            th{
         | 
| 85 | 
            +
                outline:5px solid yellow;
         | 
| 86 | 
            +
            }
         | 
| 87 | 
            +
            th[scope]{
         | 
| 88 | 
            +
                outline:none;
         | 
| 89 | 
            +
            }
         | 
| 90 | 
            +
             | 
| 91 | 
            +
             | 
| 92 | 
            +
            /**
         | 
| 93 | 
            +
             * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
         | 
| 94 | 
            +
             */
         | 
| 95 | 
            +
            table > tr{
         | 
| 96 | 
            +
                outline:5px solid yellow;
         | 
| 97 | 
            +
            }
         | 
| 98 | 
            +
             | 
| 99 | 
            +
             | 
| 100 | 
            +
            /**
         | 
| 101 | 
            +
             * `tfoot` needs to come *before* `tbody`.
         | 
| 102 | 
            +
             */
         | 
| 103 | 
            +
            tbody + tfoot{
         | 
| 104 | 
            +
                outline:5px solid yellow;
         | 
| 105 | 
            +
            }
         | 
| 106 | 
            +
             | 
| 107 | 
            +
             | 
| 108 | 
            +
            /**
         | 
| 109 | 
            +
             * Forms require `action` attributes
         | 
| 110 | 
            +
             */
         | 
| 111 | 
            +
            form{
         | 
| 112 | 
            +
                outline:5px solid red;
         | 
| 113 | 
            +
            }
         | 
| 114 | 
            +
            form[action]{
         | 
| 115 | 
            +
                outline:none;
         | 
| 116 | 
            +
            }
         | 
| 117 | 
            +
             | 
| 118 | 
            +
             | 
| 119 | 
            +
            /**
         | 
| 120 | 
            +
             * Various form-field types have required attributes. `input`s need `type`
         | 
| 121 | 
            +
             * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
         | 
| 122 | 
            +
             * need a `value` attribute.
         | 
| 123 | 
            +
             */
         | 
| 124 | 
            +
            textarea,
         | 
| 125 | 
            +
            input{
         | 
| 126 | 
            +
                outline:5px solid red;
         | 
| 127 | 
            +
            }
         | 
| 128 | 
            +
            input[type]{
         | 
| 129 | 
            +
                outline:none;
         | 
| 130 | 
            +
            }
         | 
| 131 | 
            +
            textarea[rows][cols]{
         | 
| 132 | 
            +
                outline:none;
         | 
| 133 | 
            +
            }
         | 
| 134 | 
            +
            input[type=submit]{
         | 
| 135 | 
            +
                outline:5px solid red;
         | 
| 136 | 
            +
            }
         | 
| 137 | 
            +
            input[type=submit][value]{
         | 
| 138 | 
            +
                outline:none;
         | 
| 139 | 
            +
            }
         | 
| 140 | 
            +
             | 
| 141 | 
            +
             | 
| 142 | 
            +
            /**
         | 
| 143 | 
            +
             * Avoid inline styles where possible.
         | 
| 144 | 
            +
             */
         | 
| 145 | 
            +
            [style]{
         | 
| 146 | 
            +
            	outline:5px solid yellow;
         | 
| 147 | 
            +
            }
         | 
| 148 | 
            +
             | 
| 149 | 
            +
             | 
| 150 | 
            +
            /**
         | 
| 151 | 
            +
             * You should avoid using IDs for CSS, is this doing any styling?
         | 
| 152 | 
            +
             */
         | 
| 153 | 
            +
            [id]{
         | 
| 154 | 
            +
            	outline:5px solid yellow;
         | 
| 155 | 
            +
            }
         | 
| 156 | 
            +
             | 
| 157 | 
            +
             | 
| 158 | 
            +
            /**
         | 
| 159 | 
            +
             * Are you using the grid system correctly?
         | 
| 160 | 
            +
             */
         | 
| 161 | 
            +
            .gw > :not(.g),
         | 
| 162 | 
            +
            .grid-wrapper > :not(.grid),
         | 
| 163 | 
            +
            .gw--rev > :not(.g),
         | 
| 164 | 
            +
            .grid-wrapper--rev > :not(.grid){
         | 
| 165 | 
            +
            	outline:5px solid red;
         | 
| 166 | 
            +
            }
         | 
| 167 | 
            +
             | 
| 168 | 
            +
            }/* endif */
         | 
| @@ -0,0 +1,112 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $HELPER
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * A series of helper classes to use arbitrarily. Only use a helper class if an
         | 
| 6 | 
            +
             * element/component doesn’t already have a class to which you could apply this
         | 
| 7 | 
            +
             * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
         | 
| 8 | 
            +
             * that ruleset as opposed to adding the `.float--left` class to the markup.
         | 
| 9 | 
            +
             *
         | 
| 10 | 
            +
             * A lot of these classes carry `!important` as you will always want them to win
         | 
| 11 | 
            +
             * out over other selectors.
         | 
| 12 | 
            +
             */
         | 
| 13 | 
            +
            .float--right   { float:right!important; }
         | 
| 14 | 
            +
            .float--left    { float:left !important; }
         | 
| 15 | 
            +
             | 
| 16 | 
            +
            .text--left     { text-align:left  !important; }
         | 
| 17 | 
            +
            .text--center   { text-align:center!important; }
         | 
| 18 | 
            +
            .text--right    { text-align:right !important; }
         | 
| 19 | 
            +
             | 
| 20 | 
            +
            .flush          { margin:       0!important; }
         | 
| 21 | 
            +
            .flush--top     { margin-top:   0!important; }
         | 
| 22 | 
            +
            .flush--right   { margin-right: 0!important; }
         | 
| 23 | 
            +
            .flush--bottom  { margin-bottom:0!important; }
         | 
| 24 | 
            +
            .flush--left    { margin-left:  0!important; }
         | 
| 25 | 
            +
            .flush--ends    { margin-top:   0!important; margin-bottom:0!important; }
         | 
| 26 | 
            +
            .flush--sides   { margin-right: 0!important; margin-left:  0!important; }
         | 
| 27 | 
            +
             | 
| 28 | 
            +
             | 
| 29 | 
            +
            /**
         | 
| 30 | 
            +
             * Pull items full width of `.island` parents.
         | 
| 31 | 
            +
             */
         | 
| 32 | 
            +
            .full-bleed{
         | 
| 33 | 
            +
                margin-right:-$base-spacing-unit!important;
         | 
| 34 | 
            +
                margin-left: -$base-spacing-unit!important;
         | 
| 35 | 
            +
             | 
| 36 | 
            +
                .islet &{
         | 
| 37 | 
            +
                    margin-right:-($half-spacing-unit)!important;
         | 
| 38 | 
            +
                    margin-left: -($half-spacing-unit)!important;
         | 
| 39 | 
            +
                }
         | 
| 40 | 
            +
            }
         | 
| 41 | 
            +
             | 
| 42 | 
            +
             | 
| 43 | 
            +
            /**
         | 
| 44 | 
            +
             * Add a help cursor to any element that gives the user extra information on
         | 
| 45 | 
            +
             * `:hover`.
         | 
| 46 | 
            +
             */
         | 
| 47 | 
            +
            .informative{
         | 
| 48 | 
            +
                cursor:help;
         | 
| 49 | 
            +
            }
         | 
| 50 | 
            +
             | 
| 51 | 
            +
             | 
| 52 | 
            +
            /**
         | 
| 53 | 
            +
             * Mute an object by reducing its opacity.
         | 
| 54 | 
            +
             */
         | 
| 55 | 
            +
            .muted{
         | 
| 56 | 
            +
                opacity:0.5;
         | 
| 57 | 
            +
                filter:alpha(opacity = 50);
         | 
| 58 | 
            +
            }
         | 
| 59 | 
            +
             | 
| 60 | 
            +
             | 
| 61 | 
            +
            /**
         | 
| 62 | 
            +
             * Align items to the right where they imply progression/movement forward, e.g.:
         | 
| 63 | 
            +
             *
         | 
| 64 | 
            +
               <p class=proceed><a href=#>Read more...</a></p>
         | 
| 65 | 
            +
             *
         | 
| 66 | 
            +
             */
         | 
| 67 | 
            +
            .proceed{
         | 
| 68 | 
            +
                text-align:right;
         | 
| 69 | 
            +
            }
         | 
| 70 | 
            +
             | 
| 71 | 
            +
             | 
| 72 | 
            +
            /**
         | 
| 73 | 
            +
             * Add a right-angled quote to links that imply movement, e.g.:
         | 
| 74 | 
            +
             *
         | 
| 75 | 
            +
               <a href=# class=go>Read more</a>
         | 
| 76 | 
            +
             *
         | 
| 77 | 
            +
             */
         | 
| 78 | 
            +
            .go:after{
         | 
| 79 | 
            +
                content:" »";
         | 
| 80 | 
            +
            }
         | 
| 81 | 
            +
             | 
| 82 | 
            +
             | 
| 83 | 
            +
            /**
         | 
| 84 | 
            +
             * Apply capital case to an element (usually a `strong`).
         | 
| 85 | 
            +
             */
         | 
| 86 | 
            +
            .caps{
         | 
| 87 | 
            +
                text-transform:uppercase;
         | 
| 88 | 
            +
            }
         | 
| 89 | 
            +
             | 
| 90 | 
            +
             | 
| 91 | 
            +
            /**
         | 
| 92 | 
            +
             * Hide content off-screen without resorting to `display:none;`
         | 
| 93 | 
            +
             */
         | 
| 94 | 
            +
            .accessibility              { position:absolute; left:-99999px; }
         | 
| 95 | 
            +
            [dir=rtl] .accessibility    { left:auto; right:-99999px; }
         | 
| 96 | 
            +
             | 
| 97 | 
            +
             | 
| 98 | 
            +
            /**
         | 
| 99 | 
            +
             * Hide content based on breakpoint
         | 
| 100 | 
            +
             */
         | 
| 101 | 
            +
            .hide{
         | 
| 102 | 
            +
                position:absolute;
         | 
| 103 | 
            +
                left:-9999px;
         | 
| 104 | 
            +
            }
         | 
| 105 | 
            +
            @each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
         | 
| 106 | 
            +
                @include media-query(#{$state}){
         | 
| 107 | 
            +
                    .hide--#{$state}{
         | 
| 108 | 
            +
                        position:absolute;
         | 
| 109 | 
            +
                        left:-9999px;
         | 
| 110 | 
            +
                    }
         | 
| 111 | 
            +
                }
         | 
| 112 | 
            +
            }
         | 
| @@ -0,0 +1,299 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $MIXINS
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * Create a fully formed type style (sizing and vertical rhythm) by passing in a
         | 
| 6 | 
            +
             * single value, e.g.:
         | 
| 7 | 
            +
             *
         | 
| 8 | 
            +
               `@include font-size(10px);`
         | 
| 9 | 
            +
             *
         | 
| 10 | 
            +
             * Thanks to @redclov3r for the `line-height` Sass:
         | 
| 11 | 
            +
             * twitter.com/redclov3r/status/250301539321798657
         | 
| 12 | 
            +
             */
         | 
| 13 | 
            +
            @mixin font-size($font-size){
         | 
| 14 | 
            +
                font-size:$font-size;
         | 
| 15 | 
            +
                font-size:($font-size / $base-font-size)*1rem;
         | 
| 16 | 
            +
                line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
         | 
| 17 | 
            +
            }
         | 
| 18 | 
            +
             | 
| 19 | 
            +
             | 
| 20 | 
            +
            /**
         | 
| 21 | 
            +
             * Create vendor-prefixed CSS in one go, e.g.
         | 
| 22 | 
            +
             *
         | 
| 23 | 
            +
               `@include vendor(border-radius, 4px);`
         | 
| 24 | 
            +
             *
         | 
| 25 | 
            +
             */
         | 
| 26 | 
            +
            @mixin vendor($property, $value...){
         | 
| 27 | 
            +
                -webkit-#{$property}:$value;
         | 
| 28 | 
            +
                   -moz-#{$property}:$value;
         | 
| 29 | 
            +
                    -ms-#{$property}:$value;
         | 
| 30 | 
            +
                     -o-#{$property}:$value;
         | 
| 31 | 
            +
                        #{$property}:$value;
         | 
| 32 | 
            +
            }
         | 
| 33 | 
            +
             | 
| 34 | 
            +
             | 
| 35 | 
            +
            /**
         | 
| 36 | 
            +
             * Create CSS keyframe animations for all vendors in one go, e.g.:
         | 
| 37 | 
            +
             *
         | 
| 38 | 
            +
               .foo{
         | 
| 39 | 
            +
                   @include vendor(animation, shrink 3s);
         | 
| 40 | 
            +
               }
         | 
| 41 | 
            +
             | 
| 42 | 
            +
               @include keyframe(shrink){
         | 
| 43 | 
            +
                   from{
         | 
| 44 | 
            +
                       font-size:5em;
         | 
| 45 | 
            +
                   }
         | 
| 46 | 
            +
               }
         | 
| 47 | 
            +
             *
         | 
| 48 | 
            +
             * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
         | 
| 49 | 
            +
             */
         | 
| 50 | 
            +
            @mixin keyframe ($animation-name){
         | 
| 51 | 
            +
                @-webkit-keyframes $animation-name{
         | 
| 52 | 
            +
                    @content;
         | 
| 53 | 
            +
                }
         | 
| 54 | 
            +
             | 
| 55 | 
            +
                @-moz-keyframes $animation-name{
         | 
| 56 | 
            +
                    @content;
         | 
| 57 | 
            +
                }
         | 
| 58 | 
            +
             | 
| 59 | 
            +
                @-ms-keyframes $animation-name{
         | 
| 60 | 
            +
                    @content;
         | 
| 61 | 
            +
                }
         | 
| 62 | 
            +
             | 
| 63 | 
            +
                @-o-keyframes $animation-name{
         | 
| 64 | 
            +
                    @content;
         | 
| 65 | 
            +
                }
         | 
| 66 | 
            +
             | 
| 67 | 
            +
                @keyframes $animation-name{
         | 
| 68 | 
            +
                    @content;
         | 
| 69 | 
            +
                }
         | 
| 70 | 
            +
            }
         | 
| 71 | 
            +
             | 
| 72 | 
            +
             | 
| 73 | 
            +
            /**
         | 
| 74 | 
            +
             * Force overly long spans of text to truncate, e.g.:
         | 
| 75 | 
            +
             *
         | 
| 76 | 
            +
               `@include truncate(100%);`
         | 
| 77 | 
            +
             *
         | 
| 78 | 
            +
             * Where `$truncation-boundary` is a united measurement.
         | 
| 79 | 
            +
             */
         | 
| 80 | 
            +
            @mixin truncate($truncation-boundary){
         | 
| 81 | 
            +
                max-width:$truncation-boundary;
         | 
| 82 | 
            +
                white-space:nowrap;
         | 
| 83 | 
            +
                overflow:hidden;
         | 
| 84 | 
            +
                text-overflow:ellipsis;
         | 
| 85 | 
            +
            }
         | 
| 86 | 
            +
             | 
| 87 | 
            +
             | 
| 88 | 
            +
            /**
         | 
| 89 | 
            +
             * CSS arrows!!! But... before you read on, you might want to grab a coffee...
         | 
| 90 | 
            +
             *
         | 
| 91 | 
            +
             * This mixin creates a CSS arrow on a given element. We can have the arrow
         | 
| 92 | 
            +
             * appear in one of 12 locations, thus:
         | 
| 93 | 
            +
             *
         | 
| 94 | 
            +
             *       01    02    03
         | 
| 95 | 
            +
             *    +------------------+
         | 
| 96 | 
            +
             * 12 |                  | 04
         | 
| 97 | 
            +
             *    |                  |
         | 
| 98 | 
            +
             * 11 |                  | 05
         | 
| 99 | 
            +
             *    |                  |
         | 
| 100 | 
            +
             * 10 |                  | 06
         | 
| 101 | 
            +
             *    +------------------+
         | 
| 102 | 
            +
             *       09    08    07
         | 
| 103 | 
            +
             *
         | 
| 104 | 
            +
             * You pass this position in along with a desired arrow color and optional
         | 
| 105 | 
            +
             * border color, for example:
         | 
| 106 | 
            +
             *
         | 
| 107 | 
            +
             * `@include arrow(top, left, red)`
         | 
| 108 | 
            +
             *
         | 
| 109 | 
            +
             * for just a single, red arrow, or:
         | 
| 110 | 
            +
             *
         | 
| 111 | 
            +
             * `@include arrow(bottom, center, red, black)`
         | 
| 112 | 
            +
             *
         | 
| 113 | 
            +
             * which will create a red triangle with a black border which sits at the bottom
         | 
| 114 | 
            +
             * center of the element. Call the mixin thus:
         | 
| 115 | 
            +
             *
         | 
| 116 | 
            +
               .foo{
         | 
| 117 | 
            +
                   background-color:#BADA55;
         | 
| 118 | 
            +
                   border:1px solid #ACE;
         | 
| 119 | 
            +
                   @include arrow(top, left, #BADA55, #ACE);
         | 
| 120 | 
            +
               }
         | 
| 121 | 
            +
             *
         | 
| 122 | 
            +
             */
         | 
| 123 | 
            +
            @mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
         | 
| 124 | 
            +
             | 
| 125 | 
            +
                @if $arrow-edge == top{
         | 
| 126 | 
            +
             | 
| 127 | 
            +
                    @extend %arrow--top;
         | 
| 128 | 
            +
             | 
| 129 | 
            +
                    &:before{
         | 
| 130 | 
            +
                        border-bottom-color:$border-color!important;
         | 
| 131 | 
            +
                    }
         | 
| 132 | 
            +
             | 
| 133 | 
            +
                    &:after{
         | 
| 134 | 
            +
                        border-bottom-color:$arrow-color!important;
         | 
| 135 | 
            +
                    }
         | 
| 136 | 
            +
             | 
| 137 | 
            +
                    @if $arrow-location == left{
         | 
| 138 | 
            +
                        @extend %arrow--left;
         | 
| 139 | 
            +
                    }
         | 
| 140 | 
            +
             | 
| 141 | 
            +
                    @if $arrow-location == center{
         | 
| 142 | 
            +
                        @extend %arrow--center;
         | 
| 143 | 
            +
                    }
         | 
| 144 | 
            +
             | 
| 145 | 
            +
                    @if $arrow-location == right{
         | 
| 146 | 
            +
                        @extend %arrow--right;
         | 
| 147 | 
            +
                    }
         | 
| 148 | 
            +
             | 
| 149 | 
            +
                }
         | 
| 150 | 
            +
             | 
| 151 | 
            +
                @if $arrow-edge == right{
         | 
| 152 | 
            +
             | 
| 153 | 
            +
                    @extend %arrow--far;
         | 
| 154 | 
            +
             | 
| 155 | 
            +
                    &:before{
         | 
| 156 | 
            +
                        border-left-color:$border-color!important;
         | 
| 157 | 
            +
                    }
         | 
| 158 | 
            +
             | 
| 159 | 
            +
                    &:after{
         | 
| 160 | 
            +
                        border-left-color:$arrow-color!important;
         | 
| 161 | 
            +
                    }
         | 
| 162 | 
            +
             | 
| 163 | 
            +
                    @if $arrow-location == top{
         | 
| 164 | 
            +
                        @extend %arrow--upper;
         | 
| 165 | 
            +
                    }
         | 
| 166 | 
            +
             | 
| 167 | 
            +
                    @if $arrow-location == center{
         | 
| 168 | 
            +
                        @extend %arrow--middle;
         | 
| 169 | 
            +
                    }
         | 
| 170 | 
            +
             | 
| 171 | 
            +
                    @if $arrow-location == bottom{
         | 
| 172 | 
            +
                        @extend %arrow--lower;
         | 
| 173 | 
            +
                    }
         | 
| 174 | 
            +
             | 
| 175 | 
            +
                }
         | 
| 176 | 
            +
             | 
| 177 | 
            +
                @if $arrow-edge == bottom{
         | 
| 178 | 
            +
             | 
| 179 | 
            +
                    @extend %arrow--bottom;
         | 
| 180 | 
            +
             | 
| 181 | 
            +
                    &:before{
         | 
| 182 | 
            +
                        border-top-color:$border-color!important;
         | 
| 183 | 
            +
                    }
         | 
| 184 | 
            +
             | 
| 185 | 
            +
                    &:after{
         | 
| 186 | 
            +
                        border-top-color:$arrow-color!important;
         | 
| 187 | 
            +
                    }
         | 
| 188 | 
            +
             | 
| 189 | 
            +
                    @if $arrow-location == left{
         | 
| 190 | 
            +
                        @extend %arrow--left;
         | 
| 191 | 
            +
                    }
         | 
| 192 | 
            +
             | 
| 193 | 
            +
                    @if $arrow-location == center{
         | 
| 194 | 
            +
                        @extend %arrow--center;
         | 
| 195 | 
            +
                    }
         | 
| 196 | 
            +
             | 
| 197 | 
            +
                    @if $arrow-location == right{
         | 
| 198 | 
            +
                        @extend %arrow--right;
         | 
| 199 | 
            +
                    }
         | 
| 200 | 
            +
             | 
| 201 | 
            +
                }
         | 
| 202 | 
            +
             | 
| 203 | 
            +
                @if $arrow-edge == left{
         | 
| 204 | 
            +
             | 
| 205 | 
            +
                    @extend %arrow--near;
         | 
| 206 | 
            +
             | 
| 207 | 
            +
                    &:before{
         | 
| 208 | 
            +
                        border-right-color:$border-color!important;
         | 
| 209 | 
            +
                    }
         | 
| 210 | 
            +
             | 
| 211 | 
            +
                    &:after{
         | 
| 212 | 
            +
                        border-right-color:$arrow-color!important;
         | 
| 213 | 
            +
                    }
         | 
| 214 | 
            +
             | 
| 215 | 
            +
                    @if $arrow-location == top{
         | 
| 216 | 
            +
                        @extend %arrow--upper;
         | 
| 217 | 
            +
                    }
         | 
| 218 | 
            +
             | 
| 219 | 
            +
                    @if $arrow-location == center{
         | 
| 220 | 
            +
                        @extend %arrow--middle;
         | 
| 221 | 
            +
                    }
         | 
| 222 | 
            +
             | 
| 223 | 
            +
                    @if $arrow-location == bottom{
         | 
| 224 | 
            +
                        @extend %arrow--lower;
         | 
| 225 | 
            +
                    }
         | 
| 226 | 
            +
             | 
| 227 | 
            +
                }
         | 
| 228 | 
            +
             | 
| 229 | 
            +
            }
         | 
| 230 | 
            +
             | 
| 231 | 
            +
             | 
| 232 | 
            +
            /**
         | 
| 233 | 
            +
             * Media query mixin.
         | 
| 234 | 
            +
             *
         | 
| 235 | 
            +
             * It’s not great practice to define solid breakpoints up-front, preferring to
         | 
| 236 | 
            +
             * modify your design when it needs it, rather than assuming you’ll want a
         | 
| 237 | 
            +
             * change at ‘mobile’. However, as inuit.css is required to take a hands off
         | 
| 238 | 
            +
             * approach to design decisions, this is the closest we can get to baked-in
         | 
| 239 | 
            +
             * responsiveness. It’s flexible enough to allow you to set your own breakpoints
         | 
| 240 | 
            +
             * but solid enough to be frameworkified.
         | 
| 241 | 
            +
             *
         | 
| 242 | 
            +
             * We define some broad breakpoints in our vars file that are picked up here
         | 
| 243 | 
            +
             * for use in a simple media query mixin. Our options are:
         | 
| 244 | 
            +
             *
         | 
| 245 | 
            +
             * palm
         | 
| 246 | 
            +
             * lap
         | 
| 247 | 
            +
             * lap-and-up
         | 
| 248 | 
            +
             * portable
         | 
| 249 | 
            +
             * desk
         | 
| 250 | 
            +
             * desk-wide
         | 
| 251 | 
            +
             *
         | 
| 252 | 
            +
             * Not using a media query will, naturally, serve styles to all devices.
         | 
| 253 | 
            +
             *
         | 
| 254 | 
            +
             * `@include media-query(palm){ [styles here] }`
         | 
| 255 | 
            +
             *
         | 
| 256 | 
            +
             * We work out your end points for you:
         | 
| 257 | 
            +
             */
         | 
| 258 | 
            +
            $palm-end:              $lap-start - 1px;
         | 
| 259 | 
            +
            $lap-end:               $desk-start - 1px;
         | 
| 260 | 
            +
             | 
| 261 | 
            +
            @mixin media-query($media-query){
         | 
| 262 | 
            +
             | 
| 263 | 
            +
                @if $media-query == palm{
         | 
| 264 | 
            +
             | 
| 265 | 
            +
                    @media only screen and (max-width:$palm-end) { @content; }
         | 
| 266 | 
            +
             | 
| 267 | 
            +
                }
         | 
| 268 | 
            +
             | 
| 269 | 
            +
                @if $media-query == lap{
         | 
| 270 | 
            +
             | 
| 271 | 
            +
                    @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
         | 
| 272 | 
            +
             | 
| 273 | 
            +
                }
         | 
| 274 | 
            +
             | 
| 275 | 
            +
                @if $media-query == lap-and-up{
         | 
| 276 | 
            +
             | 
| 277 | 
            +
                    @media only screen and (min-width:$lap-start) { @content; }
         | 
| 278 | 
            +
             | 
| 279 | 
            +
                }
         | 
| 280 | 
            +
             | 
| 281 | 
            +
                @if $media-query == portable{
         | 
| 282 | 
            +
             | 
| 283 | 
            +
                    @media only screen and (max-width:$lap-end) { @content; }
         | 
| 284 | 
            +
             | 
| 285 | 
            +
                }
         | 
| 286 | 
            +
             | 
| 287 | 
            +
                @if $media-query == desk{
         | 
| 288 | 
            +
             | 
| 289 | 
            +
                    @media only screen and (min-width:$desk-start) { @content; }
         | 
| 290 | 
            +
             | 
| 291 | 
            +
                }
         | 
| 292 | 
            +
             | 
| 293 | 
            +
                @if $media-query == desk-wide{
         | 
| 294 | 
            +
             | 
| 295 | 
            +
                    @media only screen and (min-width: $desk-wide-start) { @content; }
         | 
| 296 | 
            +
             | 
| 297 | 
            +
                }
         | 
| 298 | 
            +
             | 
| 299 | 
            +
            }
         |