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,60 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $HEADINGS
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
         | 
| 6 | 
            +
             *
         | 
| 7 | 
            +
             * When we define a heading we also define a corresponding class to go with it.
         | 
| 8 | 
            +
             * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
         | 
| 9 | 
            +
             * heading hierarchy.
         | 
| 10 | 
            +
             */
         | 
| 11 | 
            +
            h1,.alpha{
         | 
| 12 | 
            +
                @include font-size($h1-size);
         | 
| 13 | 
            +
            }
         | 
| 14 | 
            +
            h2,.beta{
         | 
| 15 | 
            +
                @include font-size($h2-size);
         | 
| 16 | 
            +
            }
         | 
| 17 | 
            +
            h3,.gamma{
         | 
| 18 | 
            +
                @include font-size($h3-size);
         | 
| 19 | 
            +
            }
         | 
| 20 | 
            +
            h4,.delta{
         | 
| 21 | 
            +
                @include font-size($h4-size);
         | 
| 22 | 
            +
            }
         | 
| 23 | 
            +
            h5,.epsilon{
         | 
| 24 | 
            +
                @include font-size($h5-size);
         | 
| 25 | 
            +
            }
         | 
| 26 | 
            +
            h6,.zeta{
         | 
| 27 | 
            +
                @include font-size($h6-size);
         | 
| 28 | 
            +
            }
         | 
| 29 | 
            +
             | 
| 30 | 
            +
             | 
| 31 | 
            +
            /**
         | 
| 32 | 
            +
             * Heading groups and generic any-heading class.
         | 
| 33 | 
            +
             * To target any heading of any level simply apply a class of `.hN`, e.g.:
         | 
| 34 | 
            +
             *
         | 
| 35 | 
            +
               <hgroup>
         | 
| 36 | 
            +
                   <h1 class=hN>inuit.css</h1>
         | 
| 37 | 
            +
                   <h2 class=hN>Best. Framework. Ever!</h2>
         | 
| 38 | 
            +
               </hgroup>
         | 
| 39 | 
            +
             *
         | 
| 40 | 
            +
             */
         | 
| 41 | 
            +
            .hN{
         | 
| 42 | 
            +
            }
         | 
| 43 | 
            +
            hgroup .hN{
         | 
| 44 | 
            +
                margin-bottom:0;
         | 
| 45 | 
            +
            }
         | 
| 46 | 
            +
             | 
| 47 | 
            +
             | 
| 48 | 
            +
            /**
         | 
| 49 | 
            +
             * A series of classes for setting massive type; for use in heroes, mastheads,
         | 
| 50 | 
            +
             * promos, etc.
         | 
| 51 | 
            +
             */
         | 
| 52 | 
            +
            .giga{
         | 
| 53 | 
            +
                @include font-size($giga-size);
         | 
| 54 | 
            +
            }
         | 
| 55 | 
            +
            .mega{
         | 
| 56 | 
            +
                @include font-size($mega-size);
         | 
| 57 | 
            +
            }
         | 
| 58 | 
            +
            .kilo{
         | 
| 59 | 
            +
                @include font-size($kilo-size);
         | 
| 60 | 
            +
            }
         | 
| @@ -0,0 +1,67 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $IMAGES
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * Demo: jsfiddle.net/inuitcss/yMtur
         | 
| 6 | 
            +
             */
         | 
| 7 | 
            +
            /**
         | 
| 8 | 
            +
             * Fluid images.
         | 
| 9 | 
            +
             */
         | 
| 10 | 
            +
            img{
         | 
| 11 | 
            +
                max-width:100%;
         | 
| 12 | 
            +
            }
         | 
| 13 | 
            +
             | 
| 14 | 
            +
             | 
| 15 | 
            +
            /**
         | 
| 16 | 
            +
             * Non-fluid images if you specify `width` and/or `height` attributes.
         | 
| 17 | 
            +
             */
         | 
| 18 | 
            +
            img[width],
         | 
| 19 | 
            +
            img[height]{
         | 
| 20 | 
            +
                max-width:none;
         | 
| 21 | 
            +
            }
         | 
| 22 | 
            +
             | 
| 23 | 
            +
             | 
| 24 | 
            +
            /**
         | 
| 25 | 
            +
             * Image placement variations.
         | 
| 26 | 
            +
             */
         | 
| 27 | 
            +
            .img--right{
         | 
| 28 | 
            +
                float:right;
         | 
| 29 | 
            +
                margin-bottom:$base-spacing-unit;
         | 
| 30 | 
            +
                margin-left:$base-spacing-unit;
         | 
| 31 | 
            +
            }
         | 
| 32 | 
            +
            .img--left{
         | 
| 33 | 
            +
                float:left;
         | 
| 34 | 
            +
                margin-right:$base-spacing-unit;
         | 
| 35 | 
            +
                margin-bottom:$base-spacing-unit;
         | 
| 36 | 
            +
            }
         | 
| 37 | 
            +
            .img--center{
         | 
| 38 | 
            +
                display:block;
         | 
| 39 | 
            +
                margin-right:auto;
         | 
| 40 | 
            +
                margin-bottom:$base-spacing-unit;
         | 
| 41 | 
            +
                margin-left:auto;
         | 
| 42 | 
            +
            }
         | 
| 43 | 
            +
             | 
| 44 | 
            +
             | 
| 45 | 
            +
            /**
         | 
| 46 | 
            +
             * Keep your images on your baseline.
         | 
| 47 | 
            +
             *
         | 
| 48 | 
            +
             * Please note, these will not work too nicely with fluid images and will
         | 
| 49 | 
            +
             * distort when resized below a certain width. Use with caution.
         | 
| 50 | 
            +
             */
         | 
| 51 | 
            +
            .img--short{
         | 
| 52 | 
            +
                height:5 * $base-spacing-unit;
         | 
| 53 | 
            +
            }
         | 
| 54 | 
            +
            .img--medium{
         | 
| 55 | 
            +
                height:10 * $base-spacing-unit;
         | 
| 56 | 
            +
            }
         | 
| 57 | 
            +
            .img--tall{
         | 
| 58 | 
            +
                height:15 * $base-spacing-unit;
         | 
| 59 | 
            +
            }
         | 
| 60 | 
            +
             | 
| 61 | 
            +
             | 
| 62 | 
            +
            /**
         | 
| 63 | 
            +
             * Images in `figure` elements.
         | 
| 64 | 
            +
             */
         | 
| 65 | 
            +
            figure > img{
         | 
| 66 | 
            +
                display:block;
         | 
| 67 | 
            +
            }
         | 
| @@ -0,0 +1,37 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $LINKS
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * Say no to negative hovers, as per: csswizardry.com/2011/05/on-negative-hovers
         | 
| 6 | 
            +
             *
         | 
| 7 | 
            +
             * Sometimes, particularly on larger projects, it is useful to scope link
         | 
| 8 | 
            +
             * styling only to anchors which have `href` attributes.
         | 
| 9 | 
            +
             */
         | 
| 10 | 
            +
            a{
         | 
| 11 | 
            +
                /**
         | 
| 12 | 
            +
                 * Set colors etc in your theme stylesheet.
         | 
| 13 | 
            +
                 */
         | 
| 14 | 
            +
             | 
| 15 | 
            +
                &:hover,
         | 
| 16 | 
            +
                &:active,
         | 
| 17 | 
            +
                &:focus{
         | 
| 18 | 
            +
                    text-decoration:underline;
         | 
| 19 | 
            +
                }
         | 
| 20 | 
            +
            }
         | 
| 21 | 
            +
             | 
| 22 | 
            +
             | 
| 23 | 
            +
            /**
         | 
| 24 | 
            +
             * ‘Current’ states, e.g.:
         | 
| 25 | 
            +
             *
         | 
| 26 | 
            +
               <ul class=nav>
         | 
| 27 | 
            +
                   <li><a href=#>Home</a></li>
         | 
| 28 | 
            +
                   <li><a href=#>About</a></li>
         | 
| 29 | 
            +
                   <li class=current><a href=#>Portfolio</a></li>
         | 
| 30 | 
            +
                   <li><a href=#>Contact</a></li>
         | 
| 31 | 
            +
               </ul>
         | 
| 32 | 
            +
             *
         | 
| 33 | 
            +
             */
         | 
| 34 | 
            +
            .current > a{
         | 
| 35 | 
            +
                cursor:text;
         | 
| 36 | 
            +
                text-decoration:underline;
         | 
| 37 | 
            +
            }
         | 
| @@ -0,0 +1,19 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $LISTS
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * Remove vertical spacing from nested lists.
         | 
| 6 | 
            +
             */
         | 
| 7 | 
            +
            li{
         | 
| 8 | 
            +
                > ul,
         | 
| 9 | 
            +
                > ol{
         | 
| 10 | 
            +
                     margin-bottom:0;
         | 
| 11 | 
            +
                 }
         | 
| 12 | 
            +
            }
         | 
| 13 | 
            +
             | 
| 14 | 
            +
            /**
         | 
| 15 | 
            +
             * Have a numbered `ul` without the semantics implied by using an `ol`.
         | 
| 16 | 
            +
             */
         | 
| 17 | 
            +
            /*ul*/.numbered-list{
         | 
| 18 | 
            +
                list-style-type:decimal;
         | 
| 19 | 
            +
            }
         | 
| @@ -0,0 +1,11 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $PARAGRAPHS
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * The `.lede` class is used to make the introductory text (usually a paragraph)
         | 
| 6 | 
            +
             * of a document slightly larger.
         | 
| 7 | 
            +
             */
         | 
| 8 | 
            +
            .lede,
         | 
| 9 | 
            +
            .lead{
         | 
| 10 | 
            +
                @include font-size($base-font-size * 1.125);
         | 
| 11 | 
            +
            }
         | 
| @@ -0,0 +1,96 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $QUOTES
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * If English quotes are set in `_vars.scss`, define them here.
         | 
| 6 | 
            +
             */
         | 
| 7 | 
            +
            @if $english-quotes == true{
         | 
| 8 | 
            +
                $open-quote:    “;
         | 
| 9 | 
            +
                $close-quote:   ”;
         | 
| 10 | 
            +
            }
         | 
| 11 | 
            +
             | 
| 12 | 
            +
             | 
| 13 | 
            +
            /**
         | 
| 14 | 
            +
             * Big up @boblet: html5doctor.com/blockquote-q-cite
         | 
| 15 | 
            +
             */
         | 
| 16 | 
            +
             | 
| 17 | 
            +
            /**
         | 
| 18 | 
            +
             * Inline quotes.
         | 
| 19 | 
            +
             */
         | 
| 20 | 
            +
            q{
         | 
| 21 | 
            +
                quotes:"‘" "’" "#{$open-quote}" "#{$close-quote}";
         | 
| 22 | 
            +
             | 
| 23 | 
            +
                &:before{
         | 
| 24 | 
            +
                    content:"‘";
         | 
| 25 | 
            +
                    content:open-quote;
         | 
| 26 | 
            +
                }
         | 
| 27 | 
            +
                &:after{
         | 
| 28 | 
            +
                    content:"’";
         | 
| 29 | 
            +
                    content:close-quote;
         | 
| 30 | 
            +
                }
         | 
| 31 | 
            +
             | 
| 32 | 
            +
                q:before{
         | 
| 33 | 
            +
                    content:"“";
         | 
| 34 | 
            +
                    content:open-quote;
         | 
| 35 | 
            +
                }
         | 
| 36 | 
            +
                q:after{
         | 
| 37 | 
            +
                    content:"”";
         | 
| 38 | 
            +
                    content:close-quote;
         | 
| 39 | 
            +
                }
         | 
| 40 | 
            +
            }
         | 
| 41 | 
            +
             | 
| 42 | 
            +
            blockquote{
         | 
| 43 | 
            +
                quotes:"#{$open-quote}" "#{$close-quote}";
         | 
| 44 | 
            +
             | 
| 45 | 
            +
                p:before{
         | 
| 46 | 
            +
                    content:"#{$open-quote}";
         | 
| 47 | 
            +
                    content:open-quote;
         | 
| 48 | 
            +
                }
         | 
| 49 | 
            +
                p:after{
         | 
| 50 | 
            +
                    content:"";
         | 
| 51 | 
            +
                    content:no-close-quote;
         | 
| 52 | 
            +
                }
         | 
| 53 | 
            +
                p:last-of-type:after{
         | 
| 54 | 
            +
                    content:"#{$close-quote}";
         | 
| 55 | 
            +
                    content:close-quote;
         | 
| 56 | 
            +
                }
         | 
| 57 | 
            +
             | 
| 58 | 
            +
                q:before{
         | 
| 59 | 
            +
                    content:"‘";
         | 
| 60 | 
            +
                    content:open-quote;
         | 
| 61 | 
            +
                }
         | 
| 62 | 
            +
                q:after{
         | 
| 63 | 
            +
                    content:"’";
         | 
| 64 | 
            +
                    content:close-quote;
         | 
| 65 | 
            +
                }
         | 
| 66 | 
            +
            }
         | 
| 67 | 
            +
             | 
| 68 | 
            +
             | 
| 69 | 
            +
            /**
         | 
| 70 | 
            +
             *
         | 
| 71 | 
            +
               <blockquote>
         | 
| 72 | 
            +
                   <p>Insanity: doing the same thing over and over again and expecting
         | 
| 73 | 
            +
                   different results.</p>
         | 
| 74 | 
            +
                   <b class=source>Albert Einstein</b>
         | 
| 75 | 
            +
               </blockquote>
         | 
| 76 | 
            +
             *
         | 
| 77 | 
            +
             */
         | 
| 78 | 
            +
            blockquote{
         | 
| 79 | 
            +
                /**
         | 
| 80 | 
            +
                 * .4em is roughly equal to the width of the opening “ that we wish to hang.
         | 
| 81 | 
            +
                 */
         | 
| 82 | 
            +
                text-indent:-0.41em;
         | 
| 83 | 
            +
             | 
| 84 | 
            +
                p:last-of-type{
         | 
| 85 | 
            +
                    margin-bottom:0;
         | 
| 86 | 
            +
                }
         | 
| 87 | 
            +
            }
         | 
| 88 | 
            +
             | 
| 89 | 
            +
            .source{
         | 
| 90 | 
            +
                display:block;
         | 
| 91 | 
            +
                text-indent:0;
         | 
| 92 | 
            +
             | 
| 93 | 
            +
                &:before{
         | 
| 94 | 
            +
                    content:"—";
         | 
| 95 | 
            +
                }
         | 
| 96 | 
            +
            }
         | 
| @@ -0,0 +1,13 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $SMALLPRINT
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * A series of classes for setting tiny type; for use in smallprint etc.
         | 
| 6 | 
            +
             */
         | 
| 7 | 
            +
            .smallprint,
         | 
| 8 | 
            +
            .milli{
         | 
| 9 | 
            +
                @include font-size($milli-size);
         | 
| 10 | 
            +
            }
         | 
| 11 | 
            +
            .micro{
         | 
| 12 | 
            +
                @include font-size($micro-size);
         | 
| 13 | 
            +
            }
         | 
| @@ -0,0 +1,163 @@ | |
| 1 | 
            +
            /*------------------------------------*\
         | 
| 2 | 
            +
                $TABLES
         | 
| 3 | 
            +
            \*------------------------------------*/
         | 
| 4 | 
            +
            /**
         | 
| 5 | 
            +
             * We have a lot at our disposal for making very complex table constructs, e.g.:
         | 
| 6 | 
            +
             *
         | 
| 7 | 
            +
               <table class="table--bordered  table--striped  table--data">
         | 
| 8 | 
            +
                   <colgroup>
         | 
| 9 | 
            +
                       <col class=t10>
         | 
| 10 | 
            +
                       <col class=t10>
         | 
| 11 | 
            +
                       <col class=t10>
         | 
| 12 | 
            +
                       <col>
         | 
| 13 | 
            +
                   </colgroup>
         | 
| 14 | 
            +
                   <thead>
         | 
| 15 | 
            +
                       <tr>
         | 
| 16 | 
            +
                           <th colspan=3>Foo</th>
         | 
| 17 | 
            +
                           <th>Bar</th>
         | 
| 18 | 
            +
                       </tr>
         | 
| 19 | 
            +
                       <tr>
         | 
| 20 | 
            +
                           <th>Lorem</th>
         | 
| 21 | 
            +
                           <th>Ipsum</th>
         | 
| 22 | 
            +
                           <th class=numerical>Dolor</th>
         | 
| 23 | 
            +
                           <th>Sit</th>
         | 
| 24 | 
            +
                       </tr>
         | 
| 25 | 
            +
                   </thead>
         | 
| 26 | 
            +
                   <tbody>
         | 
| 27 | 
            +
                       <tr>
         | 
| 28 | 
            +
                           <th rowspan=3>Sit</th>
         | 
| 29 | 
            +
                           <td>Dolor</td>
         | 
| 30 | 
            +
                           <td class=numerical>03.788</td>
         | 
| 31 | 
            +
                           <td>Lorem</td>
         | 
| 32 | 
            +
                       </tr>
         | 
| 33 | 
            +
                       <tr>
         | 
| 34 | 
            +
                           <td>Dolor</td>
         | 
| 35 | 
            +
                           <td class=numerical>32.210</td>
         | 
| 36 | 
            +
                           <td>Lorem</td>
         | 
| 37 | 
            +
                       </tr>
         | 
| 38 | 
            +
                       <tr>
         | 
| 39 | 
            +
                           <td>Dolor</td>
         | 
| 40 | 
            +
                           <td class=numerical>47.797</td>
         | 
| 41 | 
            +
                           <td>Lorem</td>
         | 
| 42 | 
            +
                       </tr>
         | 
| 43 | 
            +
                       <tr>
         | 
| 44 | 
            +
                           <th rowspan=2>Sit</th>
         | 
| 45 | 
            +
                           <td>Dolor</td>
         | 
| 46 | 
            +
                           <td class=numerical>09.640</td>
         | 
| 47 | 
            +
                           <td>Lorem</td>
         | 
| 48 | 
            +
                       </tr>
         | 
| 49 | 
            +
                       <tr>
         | 
| 50 | 
            +
                           <td>Dolor</td>
         | 
| 51 | 
            +
                           <td class=numerical>12.117</td>
         | 
| 52 | 
            +
                           <td>Lorem</td>
         | 
| 53 | 
            +
                       </tr>
         | 
| 54 | 
            +
                   </tbody>
         | 
| 55 | 
            +
               </table>
         | 
| 56 | 
            +
             *
         | 
| 57 | 
            +
             */
         | 
| 58 | 
            +
            table{
         | 
| 59 | 
            +
                width:100%;
         | 
| 60 | 
            +
            }
         | 
| 61 | 
            +
            th,
         | 
| 62 | 
            +
            td{
         | 
| 63 | 
            +
                padding:$base-spacing-unit / 4;
         | 
| 64 | 
            +
                @media screen and (min-width:480px){
         | 
| 65 | 
            +
                    padding:$half-spacing-unit;
         | 
| 66 | 
            +
                }
         | 
| 67 | 
            +
                text-align:left;
         | 
| 68 | 
            +
            }
         | 
| 69 | 
            +
             | 
| 70 | 
            +
             | 
| 71 | 
            +
            /**
         | 
| 72 | 
            +
             * Cell alignments
         | 
| 73 | 
            +
             */
         | 
| 74 | 
            +
            [colspan]{
         | 
| 75 | 
            +
                text-align:center;
         | 
| 76 | 
            +
            }
         | 
| 77 | 
            +
            [colspan="1"]{
         | 
| 78 | 
            +
                text-align:left;
         | 
| 79 | 
            +
            }
         | 
| 80 | 
            +
            [rowspan]{
         | 
| 81 | 
            +
                vertical-align:middle;
         | 
| 82 | 
            +
            }
         | 
| 83 | 
            +
            [rowspan="1"]{
         | 
| 84 | 
            +
                vertical-align:top;
         | 
| 85 | 
            +
            }
         | 
| 86 | 
            +
            .numerical{
         | 
| 87 | 
            +
                text-align:right;
         | 
| 88 | 
            +
            }
         | 
| 89 | 
            +
             | 
| 90 | 
            +
            /**
         | 
| 91 | 
            +
             * In the HTML above we see several `col` elements with classes whose numbers
         | 
| 92 | 
            +
             * represent a percentage width for that column. We leave one column free of a
         | 
| 93 | 
            +
             * class so that column can soak up the effects of any accidental breakage in
         | 
| 94 | 
            +
             * the table.
         | 
| 95 | 
            +
             */
         | 
| 96 | 
            +
            .t5     { width: 5% }
         | 
| 97 | 
            +
            .t10    { width:10% }
         | 
| 98 | 
            +
            .t12    { width:12.5% }     /* 1/8 */
         | 
| 99 | 
            +
            .t15    { width:15% }
         | 
| 100 | 
            +
            .t20    { width:20% }
         | 
| 101 | 
            +
            .t25    { width:25% }       /* 1/4 */
         | 
| 102 | 
            +
            .t30    { width:30% }
         | 
| 103 | 
            +
            .t33    { width:33.333% }   /* 1/3 */
         | 
| 104 | 
            +
            .t35    { width:35% }
         | 
| 105 | 
            +
            .t37    { width:37.5% }     /* 3/8 */
         | 
| 106 | 
            +
            .t40    { width:40% }
         | 
| 107 | 
            +
            .t45    { width:45% }
         | 
| 108 | 
            +
            .t50    { width:50% }       /* 1/2 */
         | 
| 109 | 
            +
            .t55    { width:55% }
         | 
| 110 | 
            +
            .t60    { width:60% }
         | 
| 111 | 
            +
            .t62    { width:62.5% }     /* 5/8 */
         | 
| 112 | 
            +
            .t65    { width:65% }
         | 
| 113 | 
            +
            .t66    { width:66.666% }   /* 2/3 */
         | 
| 114 | 
            +
            .t70    { width:70% }
         | 
| 115 | 
            +
            .t75    { width:75% }       /* 3/4*/
         | 
| 116 | 
            +
            .t80    { width:80% }
         | 
| 117 | 
            +
            .t85    { width:85% }
         | 
| 118 | 
            +
            .t87    { width:87.5% }     /* 7/8 */
         | 
| 119 | 
            +
            .t90    { width:90% }
         | 
| 120 | 
            +
            .t95    { width:95% }
         | 
| 121 | 
            +
             | 
| 122 | 
            +
             | 
| 123 | 
            +
            /**
         | 
| 124 | 
            +
             * Bordered tables
         | 
| 125 | 
            +
             */
         | 
| 126 | 
            +
            .table--bordered{
         | 
| 127 | 
            +
             | 
| 128 | 
            +
                th,
         | 
| 129 | 
            +
                td{
         | 
| 130 | 
            +
                    border:1px solid #ccc; /* Override this color in your theme stylesheet */
         | 
| 131 | 
            +
             | 
| 132 | 
            +
                    &:empty{
         | 
| 133 | 
            +
                        border:none;
         | 
| 134 | 
            +
                    }
         | 
| 135 | 
            +
                }
         | 
| 136 | 
            +
             | 
| 137 | 
            +
                thead tr:last-child th{
         | 
| 138 | 
            +
                    border-bottom-width:2px;
         | 
| 139 | 
            +
                }
         | 
| 140 | 
            +
             | 
| 141 | 
            +
                tbody tr th:last-of-type{
         | 
| 142 | 
            +
                    border-right-width:2px;
         | 
| 143 | 
            +
                }
         | 
| 144 | 
            +
            }
         | 
| 145 | 
            +
             | 
| 146 | 
            +
             | 
| 147 | 
            +
            /**
         | 
| 148 | 
            +
             * Striped tables
         | 
| 149 | 
            +
             */
         | 
| 150 | 
            +
            .table--striped{
         | 
| 151 | 
            +
             | 
| 152 | 
            +
                tbody tr:nth-of-type(odd){
         | 
| 153 | 
            +
                    background-color:#ffc; /* Override this color in your theme stylesheet */
         | 
| 154 | 
            +
                }
         | 
| 155 | 
            +
            }
         | 
| 156 | 
            +
             | 
| 157 | 
            +
             | 
| 158 | 
            +
            /**
         | 
| 159 | 
            +
             * Data table
         | 
| 160 | 
            +
             */
         | 
| 161 | 
            +
            .table--data{
         | 
| 162 | 
            +
                font:12px/1.5 sans-serif;
         | 
| 163 | 
            +
            }
         |