Closed ghost closed 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
.hbs
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?
.scss
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 onlocalhost:1333
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?