kneath / kss

A methodology for documenting CSS and generating styleguides.
warpspire.com/kss
MIT License
4.04k stars 275 forks source link

Documentation markup not being recognised in large SCSS file? #126

Closed ghost closed 7 years ago

ghost commented 7 years ago

Hi team. Really bizarre issue. I have my markup in it's rightful place, above the CSS, referencing the correct .hbs file, but on build and browser refresh it isn't appearing on localhost:1333

// Curved Tables
//
// Used on module list pages.
//
// Markup: curved_table.hbs
//
// Style guide: Tables.Curved
.curve_header_vert_table {
    thead {
        td {
            background:#e6e6e6;
            font-size:13px;
            padding:8px 6px;
            border-bottom:3px solid #ccc;
            border-right:1px solid #ddd;
            &:first-child {
                border-top-left-radius: 5px;
            }
            &:last-child {
                border-top-right-radius: 5px;
                border-right:none;
            }
        }
        td.col_title_select_all {
            .col_focus_arrow {
                background: url("../images/bg/tool_tip_arrow.png") no-repeat scroll left top transparent;
                display: none;
                height: 6px;
                margin-top: 8px;
                position: absolute;
                width: 12px;
                z-index: 30;
            }
            &:hover {
                background:#000000;
                color:#fff;
                cursor:pointer;
                text-shadow:0 1px 1px #000;
                .col_focus_arrow {
                    display:block;
                }
            }
        }
        td.button_cell {
            padding:6px 1px;
            width:30px;
        }
        td.icon_cell {
            padding:9px 1px;
            width:22px;
        }           
        td.select_cell {
            padding:7px 5px;
        }
        td.inline_edit_cell {
            padding:2px 5px;
        }
    }
    thead.neon_blue {
        td {
            background:#fff;
            border-bottom:1px solid #e2e6e9 !important;
            border-right:none;
            &:last-child {
                border-right:none;
            }
            .boxed_arr_toggle {
              background:#87D4ED;

              .toggle_arr_inside, .toggle_arr_inside_ang {background-position:-50px -81px;width:8px;}
              .toggle_arrow_exp, .toggle_arrow_exp_ang {background-position:-50px -74px;width:9px}
              &:hover {
                background:#50abc9;
              }
            }   
        }
        td.sort_cell {
            cursor:pointer;
            position:relative;
            .cell_sort_arr {
                opacity:0.8 !important;
            }
            &:hover {
                background:#eee;
                border-bottom:3px solid #ed8557;
                .cell_sort_arr {
                    opacity:1 !important;
                }
            }
            &.sort_focused {
                background:#F6F6F6;
                border-bottom:3px solid #ed8557;

                // Arrow up
                .cell_sort_arr {
                    &:before {
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: 0 4.5px 5px 4.5px;
                        border-color: transparent transparent #333 transparent;
                    }
                    &:after {
                        display:none
                    }
                }
            }
            &.toggle_expense_asce {
                .cell_sort_arr {
                    &:after {
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: 0 4.5px 5px 4.5px;
                        border-color: transparent transparent #333 transparent;
                    }
                }
            }
            // Arrow down
            &.toggle_expense_desc {
                // Only when focused too, so dark background
                &.sort_focused {
                    .cell_sort_arr {
                        &:before {
                            width: 0;
                            height: 0;
                            border-style: solid;
                            border-width: 5px 4.5px 0 4.5px;
                            border-color: #333 transparent transparent transparent;
                        }
                    }
                }
            }
            // IF its aligned right, give the arrow some more space
            &.text_right {
                .sort_title {
                    padding-right:14px;
                }
            }
            .cell_sort_arr {
                width:9px;
                height:10px;
                float:right;
                margin:6px 6px 0 0;
                position:absolute;
                top:8px;
                right:0;
                &:before {
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 0px 4.5px 4px 4.5px;
                    border-color: transparent transparent #333 transparent;
                    content:"";
                    display:block;
                    position:absolute;
                    top:-2px;
                }
                &:after {
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 4px 4.5px 0px 4.5px;
                    border-color: #333 transparent transparent transparent;
                    content:"";
                    display:block;
                    position:absolute;
                    bottom:2px;
                }
                &.inactive{
                  opacity: 0;
                }
                &.show{
                    opacity:1 !important;
                    top:10px;
                }
            }
        }
    }
    thead.orange{
        td {
            background:#FFEBC7;
            border-bottom:3px solid #ffc880 !important;
            border-right:none;
            &:last-child {
                border-right:none;
            }
        }
    }
    thead.dull_grey{
        td {
            background:#f5f5f5;
            border-bottom:3px solid #bbbbbb;
        }
    }
    thead.status_line {
        td {
            background:#fff;
            border-bottom:4px solid #cbcbcb;
            color:#6c6c6c;
            border-right:none;
            padding-right:0;
            padding-top:5px;
            &:last-child {
                border-right:none;
            }           
        }
        .green_lined {
            border-bottom:4px solid #1c9a0e;
            color:#137c07;
        }
    }
    tbody.mid_align {
        tr {
            td {
                vertical-align:middle;
            }
        }
    }
    tbody {
        &.force_last_bord {
            tr {
                &:last-child {
                    td {
                        border-bottom:1px solid #e0e0e0;
                    }
                }
            }
        }
        tr {
            &:last-child {
                td {
                    border-bottom:1px solid transparent; /* Experiment, was #fff before */
                }
            }
        }

        td {
            border-bottom:1px solid #e3e6e9;
            padding:8px 6px;
            // font-size:13px;
            vertical-align: middle;
            border-right:1px solid #efefef;
            &:last-child {
                border-right:none;
            }
            table {
                tr.no_inherit {
                    td {
                        padding:0;
                    }
                    &:hover {
                        td {
                            background:none;
                            border:none;
                        }
                    }
                }
            }       
        }
        td.checked_cell {
            background:#dbf7d6;
        }
        td.button_cell {
            padding:6px 1px;
            width:30px;
        }
        td.icon_cell {
            padding:9px 1px;
            width:22px;
        }       
        td.select_cell {padding:7px 5px;}
        td.tight_select_cell {padding:5px;}
        td.inline_edit_cell {
            padding:2px 5px;
            width:30px;
        }    
    }
    tbody.no_vert_bord {
        td {
            border-right:none;
            div.inner-cell-wrapper{
                position: relative;
                div.affil_list_company_bubble{
                    position: absolute;
                    top:21px;
                    left:0;
                    padding: 10px;
                    width: 520px;
                    tr{
                        td{
                            background-color: #fff !important;
                        }
                        &:last-child{
                            td{
                                background-color: #fff !important;
                                border-bottom: 1px solid transparent;
                            }
                        }
                    }
                }
            }
        }
        tr.green_row {
            td {
                background:#e5ffd2;
            }
            &:hover {
                td {
                    background:#ccf5ac;
                }
            }
        }
    }
    tbody.no_horizontal_border {
        td{
            border-bottom: none;
        }
    }
    tbody.row_hovers {
        .hover-display {
            display:none;
        }
        tr:hover > td {
            background: #F1F1F1;
            transition: 0.2s;

            // Show inline edit states
            .inline_edit_input, .inline_edit_textarea {
                &.edit_enabled:not(.inline_no_edit_icon) {
                    border:1px solid #d0d0d0;
                    .inline_edit_rhs {
                        display:block;
                    }
                }
            }
            .inline_edit_input, .inline_edit_textarea {
                &.inline_no_edit_icon:not(.edit_disabled) {
                    border:1px solid #d0d0d0;
                    background: #fff;
                    width: 100%;
                    box-sizing: border-box;
                    box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset;
                    vertical-align: top;
                }
            }
            .hover-display {
                display:block;
            }
        }
        tr:hover{
            .boxed_arr_toggle {
                background:#d5d5d5;
            }
        }
        tr.inactive_row {
            td {
                background:#eee;
            }
        }
        &.hover_blue{
            tr:hover > td {
                background: #f5fbfd;
            }
        }
    }
    tbody.mini_table, thead.mini_table {
        td {
            padding:7px 4px;
        }
    }
    tbody.tight_table, thead.tight_table {
        td {
            padding: $curved-header-vert-table-tight-cell-padding;
            vertical-align: middle;
        }
        td.non_bill {width:210px;}
        td.bill_cell {width:294px;padding-left:6px;}
    }
    tbody.no_vert_padding_table {
        td {
            padding: 0 4px;
        }
    }   
    tbody.multi_row_list {
        tr {
            &:first-child {
                td {border-top:0;}
            }
        }
        tr.parent_row {
            td {
                border-top:1px solid #E0E0E0;
                border-bottom:none;
                padding:5px 6px;
            }
            td.button_cell {
                padding:3px 1px;
            }           
        }
        tr.child_row {
            td {
                border:none;
                padding:1px 6px;
            }
            td.button_cell {
                padding:1px 1px;
            }
        }
    }
    tbody.heading_nested {
        td.title_cell {padding:0 4px 0 1px}
        td.time_cell {width:75px;padding:0 4px;}
        td.button_cell {padding:0 9px 0 4px}
    }
    tbody.status_body {
        td {
            border-right:none;
            padding:6px 0 6px 6px;
        }
    }
    tfoot.totals_foot {
        td {
            background:#e6e6e6;
            font-weight:bold;
            padding:8px 6px;
        }
        td.whitespace_total {
            background:#fff;    
        }
        td.total_foot_start {
            border-radius:0 0 0 4px;
        }
        td.total_foot_end {
            border-radius:0 0 4px 0;
        }
    }
    tfoot.totals_curved {
        tr {
            &:first-child {
                td {
                    border-top:3px solid #bbb;
                }
            }
            &:last-child {
                td {
                    border-bottom:none;
                }
            }
        }
        td {
            border-bottom:0;
            padding:6px 6px;
            font-size:14px;
            font-weight:normal;
            border-bottom:1px solid #ddd;
            background:#f0f0f0;
        }
        td.whitespace_total {
            border-bottom:none;
        }
    }
}

The CSS class it's (the documentation markup) is trying to reference is ~450 lines. Is there an issue with size?

Oddly enough when I move the exact same markup to a completely difference CSS class, in a different .scss file, it works perfectly. Any hints?