From 685af243733e6086d71f3cf41db678cb51f93545 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 5 Dec 2022 17:37:42 -0500 Subject: [PATCH 1/9] refactor(tables): use pseudo private custom properties See https://stackoverflow.atlassian.net/browse/STACKS-66 --- lib/css/components/tables.less | 335 ++++++++++++++------------------- 1 file changed, 143 insertions(+), 192 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index 4a93ae28ba..bb6931bd6a 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -1,177 +1,61 @@ -// ============================================================================ -// $ CONTAINER -// Give tables an optional container for responsive scrolling -// ---------------------------------------------------------------------------- .s-table-container { overflow-x: auto; @scrollbar-styles(); } -// ============================================================================ -// $ BASE TABLE STYLE -// ---------------------------------------------------------------------------- .s-table { - display: table; - width: 100%; - max-width: 100%; - border-collapse: collapse; - border-spacing: 0; - font-size: var(--fs-body1); - - th, - td { - padding: var(--su8); - border-top: 1px solid var(--bc-medium); - border-left: 1px solid var(--bc-medium); - border-right: 1px solid var(--bc-medium); - vertical-align: middle; - color: var(--fc-medium); - text-align: left; - - &.s-table--bulk { - width: calc(var(--su32) - var(--su2)); - } - - .s-checkbox { - display: block; - } - } - - th { - font-weight: bold; - color: var(--fc-dark); - } - - // Custom styles when in a table head - thead th { - vertical-align: bottom; - white-space: nowrap; - background-color: var(--black-025); - line-height: var(--lh-sm); - } - - // When in a table body, don't make it bold. - tbody th { - font-weight: normal; - } - - // If it's the last row, add a bottom border - tr:last-of-type td, - tr:last-of-type th { - border-bottom: 1px solid var(--bc-medium); - } + @ta-cell-border: var(--su-static1) solid var(--bc-medium); + @ta-columns: (100% / 12); - // If two table bodies are next to each other, visually separate them - tbody + tbody { - border-top: var(--su-static2) solid var(--bc-medium); - } -} + --_ta-cell-bb: unset; + --_ta-cell-ta: left; + --_ta-cell-va: middle; + --_ta-cell-w: unset; -// ============================================================================ -// $ ALIGNMENTS -// ---------------------------------------------------------------------------- -.s-table { - // $$ VERTICAL ALIGNMENT - // This applies vertical alignment classes to all of a table's cells. - // ------------------------------------------------------------------------ - // -- TOP - &.va-top { - th, - td { - vertical-align: top; - } - } + --_ta-th-fw: bold; - // -- MIDDLE - &.va-middle { - th, - td { - vertical-align: middle; + // VARIANTS + &&__stripes { // TODO: PPCP-ify + // Darken the header + thead th { + background-color: var(--black-050); } - } - - // -- BOTTOM - &.va-bottom { - th, - td { - vertical-align: bottom; + // Add in stripes + tbody tr:nth-child(even) { + background-color: var(--black-025); } } - // $$ TEXT ALIGNMENT - // This applies the text alignment classes to all of a table's cells. - // ------------------------------------------------------------------------ - // -- LEFT ALIGN + // MODIFIERS &.ta-left { - th, - td { - text-align: left; - } + --_ta-cell-ta: left; } - // -- CENTER ALIGN &.ta-center { - th, - td { - text-align: center; - } + --_ta-cell-ta: center; } - // -- RIGHT ALIGN &.ta-right { - th, - td { - text-align: right; - } + --_ta-cell-ta: right; } - // -- JUSTIFY ALIGN &.ta-justify { - th, - td { - text-align: justify; - } + --_ta-cell-ta: justify; } -} -// ============================================================================ -// $ LAYOUT VARIATIONS -// ---------------------------------------------------------------------------- -.s-table { - // $$ STRIPES - // ------------------------------------------------------------------------ - &.s-table__stripes { - // Darken the header - thead th { - background-color: var(--black-050); - } - // Add in stripes - tbody tr:nth-child(even) { - background-color: var(--black-025); - } + &.va-top { + --_ta-cell-va: top; } - // $$ SPACING - // ------------------------------------------------------------------------ - // -- SMALL - &.s-table__sm { - th, - td { - padding: var(--su4); - } + &.va-middle { + --_ta-cell-va: middle; } - // -- LARGE - &.s-table__lg { - th, - td { - padding: var(--su12); - } + + &.va-bottom { + --_ta-cell-va: bottom; } - // $$ BORDERS - // ------------------------------------------------------------------------ - // -- No Borders - &.s-table__b0 { + &&__b0 { // No Borders // TODO: PPCP-ify th, td, tr:last-of-type th, @@ -195,8 +79,7 @@ } } - // -- Horizontal Only with Table Outline - &.s-table__bx { + &&__bx { // Horizontal Only with Table Outline // TODO: PPCP-ify tr { > *:not(:first-child) { border-left-color: transparent; @@ -207,8 +90,7 @@ } } - // -- Horizontal Only without Table Outline - &.s-table__bx-simple { + &&__bx-simple { // Horizontal Only without Table Outline // TODO: PPCP-ify th, td { border-left-color: transparent; @@ -239,20 +121,21 @@ } } - // $$ TOTALS ROW - // ------------------------------------------------------------------------ - .s-table--totals { + &&__sm { // TODO: PPCP-ify th, td { - padding-top: var(--su12); - font-size: var(--fs-subheading); - font-weight: bold; + padding: var(--su4); + } + } + + &&__lg { // TODO: PPCP-ify + th, + td { + padding: var(--su12); } } - // $$ Sortable Table Columns - // ------------------------------------------------------------------------ - &.s-table__sortable thead th { + &&__sortable thead th { // TODO: PPCP-ify color: var(--fc-light); cursor: pointer; @@ -267,47 +150,115 @@ } } - // $$ Progress Bar - // ------------------------------------------------------------------------ - td.s-table--progress { - border-right: none; - text-align: right; + // CHILD ELEMENTS + td, + th { + .s-checkbox { + display: block; + } + + border-bottom: var(--_ta-cell-bb); + text-align: var(--_ta-cell-ta); + width: var(--_ta-cell-w); + + border-left: @ta-cell-border; + border-right: @ta-cell-border; + border-top: @ta-cell-border; + padding: var(--su8); } - td.s-table--progress-bar { - border-left: none; - padding-left: 0; - width: 120px; + tbody { + + tbody { + border-top: var(--su-static2) solid var(--bc-medium); // If two table bodies are next to each other, visually separate them + } + + th { + --_ta-th-fw: normal; // When in a table body, don't make it bold. + } } - // $$ Disabled rows - // ------------------------------------------------------------------------ - tr.is-disabled { + td { + vertical-align: var(--_ta-cell-va); + + color: var(--fc-medium); + } + + th { + font-weight: var(--_ta-th-fw); + vertical-align: var(--_ta-th-va, var(--_ta-cell-va)); + + color: var(--fc-dark); + } + + thead th { // Custom styles when in a table head + --_ta-th-va: bottom; + background-color: var(--black-025); + line-height: var(--lh-sm); + white-space: nowrap; + } + + tr { + &:last-of-type { + --_ta-cell-bb: @ta-cell-border; // If it's the last row, add a bottom border + } - th:not(.is-enabled), - td:not(.is-enabled) { - opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3 + &.is-disabled { // Disabled rows // TODO: PPCP-ify + background-color: var(--black-025); + + th:not(.is-enabled), + td:not(.is-enabled) { + opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3 + } } } -} -// ============================================================================ -// $ TABLE CELL SIZES -// ============================================================================ -// $$ General Column Sizes -// ---------------------------------------------------------------------------- -@table-columns: (100% / 12); - -.s-table--cell1 { width: @table-columns * 1; } -.s-table--cell2 { width: @table-columns * 2; } -.s-table--cell3 { width: @table-columns * 3; } -.s-table--cell4 { width: @table-columns * 4; } -.s-table--cell5 { width: @table-columns * 5; } -.s-table--cell6 { width: @table-columns * 6; } -.s-table--cell7 { width: @table-columns * 7; } -.s-table--cell8 { width: @table-columns * 8; } -.s-table--cell9 { width: @table-columns * 9; } -.s-table--cell10 { width: @table-columns * 10; } -.s-table--cell11 { width: @table-columns * 11; } -.s-table--cell12 { width: @table-columns * 12; } + & &--bulk { + &td, + &th { // TODO: investigate this style + --_ta-cell-w: calc(var(--su32) - var(--su2)); + } + } + + & &--cell { + .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) { + &@{i} { // generates iterated cell classes + width: @ta-columns * @i; + } + .generate-cell-widths-classes(@n, (@i + 1)); + } + + .generate-cell-widths-classes(12); + } + + & &--progress { // TODO: PPCP-ify + &td { + border-right: none; + text-align: right; + } + } + + & &--progress-bar { // TODO: PPCP-ify + &td { + border-left: none; + padding-left: 0; + width: 120px; + } + } + + & &--totals { // TODO: PPCP-ify + th, + td { + padding-top: var(--su12); + font-size: var(--fs-subheading); + font-weight: bold; + } + } + + border-collapse: collapse; + border-spacing: 0; + display: table; + font-size: var(--fs-body1); + max-width: 100%; + width: 100%; +} From bb3116ac9a882d0aa2e35cdf59feebc9db02fc16 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 7 Dec 2022 17:47:09 -0500 Subject: [PATCH 2/9] More PPCP refactoring --- lib/css/components/tables.less | 321 ++++++++++++++++++--------------- 1 file changed, 179 insertions(+), 142 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index bb6931bd6a..6a66c4c53f 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -7,79 +7,83 @@ @ta-cell-border: var(--su-static1) solid var(--bc-medium); @ta-columns: (100% / 12); - --_ta-cell-bb: unset; - --_ta-cell-ta: left; - --_ta-cell-va: middle; - --_ta-cell-w: unset; - - --_ta-th-fw: bold; + --_ta-tbody-tbody-bc: var(--bc-medium); + --_ta-tbody-tbody-bw: var(--su-static2); + --_ta-tbody-tr-even-bg: unset; + --_ta-td-bbw: 0; + --_ta-td-bc: var(--bc-medium); + --_ta-td-fs: unset; + --_ta-td-fw: unset; + --_ta-td-p: var(--su8); + --_ta-td-ta: left; + --_ta-td-va: middle; + --_ta-th-w: unset; + --_ta-thead-th-bg: var(--black-025); + --_ta-th-bbw: 0; + --_ta-th-bc: var(--bc-medium); + --_ta-th-fs: unset; + --_ta-th-p: var(--su8); + --_ta-th-ta: left; + --_ta-th-va: middle; + --_ta-th-w: unset; // VARIANTS - &&__stripes { // TODO: PPCP-ify - // Darken the header - thead th { - background-color: var(--black-050); - } - // Add in stripes - tbody tr:nth-child(even) { - background-color: var(--black-025); - } + &&__stripes { + --_ta-tbody-tr-even-bg: var(--black-025); + --_ta-thead-th-bg: var(--black-050); } // MODIFIERS &.ta-left { - --_ta-cell-ta: left; + --_ta-td-ta: left; + --_ta-th-ta: left; } &.ta-center { - --_ta-cell-ta: center; + --_ta-td-ta: center; + --_ta-th-ta: center; } &.ta-right { - --_ta-cell-ta: right; + --_ta-td-ta: right; + --_ta-th-ta: right; } &.ta-justify { - --_ta-cell-ta: justify; + --_ta-td-ta: justify; + --_ta-th-ta: justify; } &.va-top { - --_ta-cell-va: top; + --_ta-td-va: top; + --_ta-th-va: top; } &.va-middle { - --_ta-cell-va: middle; + --_ta-td-va: middle; + --_ta-th-va: middle; } &.va-bottom { - --_ta-cell-va: bottom; + --_ta-td-va: bottom; + --_ta-th-va: bottom; } - &&__b0 { // No Borders // TODO: PPCP-ify - th, - td, - tr:last-of-type th, - tr:last-of-type td { - border-color: transparent; - } + &&__b0 { + --_ta-td-bc: transparent; + --_ta-th-bc: transparent; + --_ta-tbody-tbody-bc: transparent; // [1] + --_ta-tbody-tbody-bw: var(--su-static12); // [1] + --_ta-thead-th-bg: transparent; - // Clear Header Styles thead th { - background-color: transparent; - text-transform: initial; font-size: inherit; + text-transform: initial; letter-spacing: initial; } - - // This makes the border transparent, so we need to use whitespace - // to achieve the same effect a 2px gray border achieves. - tbody + tbody { - border-color: transparent; - border-width: var(--su-static12); - } } - &&__bx { // Horizontal Only with Table Outline // TODO: PPCP-ify + &&__bx { tr { > *:not(:first-child) { border-left-color: transparent; @@ -90,21 +94,17 @@ } } - &&__bx-simple { // Horizontal Only without Table Outline // TODO: PPCP-ify - th, - td { + &&__bx-simple { + --_ta-thead-th-bg: transparent; + --_ta-foot-td-bc: transparent; + --_ta-foot-th-bc: transparent; + + td, + th { border-left-color: transparent; border-right-color: transparent; } - thead th { - border-top-color: transparent; - border-bottom-color: var(--bc-darker); - // Clear Header Styles - background-color: transparent; - text-transform: initial; - font-size: inherit; - letter-spacing: initial; - } + tbody tr { &:first-of-type th, &:first-of-type td { @@ -115,143 +115,177 @@ border-bottom-color: transparent; } } - tfoot th, - tfoot td { - border-bottom-color: transparent; - } - } - &&__sm { // TODO: PPCP-ify - th, - td { - padding: var(--su4); + thead th { + border-top-color: transparent; + border-bottom-color: var(--bc-darker); + font-size: inherit; + text-transform: initial; + letter-spacing: initial; } } - &&__lg { // TODO: PPCP-ify - th, - td { - padding: var(--su12); - } - } + &&__sortable { + thead th { + a { // If an anchor is used, it should appear like a normal header + color: inherit; + } - &&__sortable thead th { // TODO: PPCP-ify - color: var(--fc-light); - cursor: pointer; + &.is-sorted { // Selected state + color: var(--black-900); + } - // If an anchor is used, it should appear like a normal header - a { - color: inherit; + color: var(--fc-light); + cursor: pointer; } + } - // Selected state - &.is-sorted { - color: var(--black-900); - } + &&__sm { + --_ta-td-p: var(--su4); + --_ta-th-p: var(--su4); + } + + &&__lg { + --_ta-td-p: var(--su12); + --_ta-th-p: var(--su12); } // CHILD ELEMENTS - td, - th { - .s-checkbox { - display: block; + & &--cell { + .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) { + &@{i} { // generates iterated cell classes + @ta-cell-w: @ta-columns * @i; + --_ta-td-w: @ta-cell-w; + --_ta-th-w: @ta-cell-w; + } + .generate-cell-widths-classes(@n, (@i + 1)); } + + .generate-cell-widths-classes(12); + } + + & &--progress { + } - border-bottom: var(--_ta-cell-bb); - text-align: var(--_ta-cell-ta); - width: var(--_ta-cell-w); + & &--progress-bar { + } - border-left: @ta-cell-border; - border-right: @ta-cell-border; - border-top: @ta-cell-border; - padding: var(--su8); + & &--totals { + --_ta-td-fs: var(--fs-subheading); + --_ta-td-pt: var(--su12); + --_ta-td-fw: bold; + --_ta-th-fs: var(--fs-subheading); + --_ta-th-pt: var(--su12); } tbody { - + tbody { - border-top: var(--su-static2) solid var(--bc-medium); // If two table bodies are next to each other, visually separate them + + tbody { // If two table bodies are next to each other, visually separate them + border-top: var(--_ta-tbody-tbody-bw) solid var(--_ta-tbody-tbody-bc); } th { - --_ta-th-fw: normal; // When in a table body, don't make it bold. + font-weight: normal; + } + + tr { + &:nth-child(2n) { + background-color: var(--_ta-tbody-tr-even-bg); + } } } td { - vertical-align: var(--_ta-cell-va); + .s-checkbox { + display: block; + } - color: var(--fc-medium); - } + &.s-table--bulk { + --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px; + } - th { - font-weight: var(--_ta-th-fw); - vertical-align: var(--_ta-th-va, var(--_ta-cell-va)); + &.s-table--progress { + --_ta-td-ta: right; + --_ta-td-brw: 0; + } - color: var(--fc-dark); - } + &.s-table--progress-bar { + --_ta-td-blw: 0; + --_ta-td-pl: 0; + --_ta-td-w: 120px; + } - thead th { // Custom styles when in a table head - --_ta-th-va: bottom; + border: var(--su-static1) solid var(--_ta-td-bc); + border-bottom-width: var(--_ta-td-bbw, var(--su-static1)); + border-left-width: var(--_ta-td-blw, var(--su-static1)); + border-right-width: var(--_ta-td-brw, var(--su-static1)); + border-top-width: var(--_ta-td-btw, var(--su-static1)); + font-size: var(--_ta-td-fs); + font-weight: var(--_ta-td-fw); + padding: var(--_ta-td-p); + padding-left: var(--_ta-td-pl, var(--_ta-td-p)); + padding-top: var(--_ta-td-pt, var(--_ta-td-p)); + text-align: var(--_ta-td-ta); + vertical-align: var(--_ta-td-va); + width: var(--_ta-td-w); - background-color: var(--black-025); - line-height: var(--lh-sm); - white-space: nowrap; + color: var(--fc-medium); } - tr { - &:last-of-type { - --_ta-cell-bb: @ta-cell-border; // If it's the last row, add a bottom border + tfoot { + td { + border-bottom-color: var(--_ta-foot-td-bc, var(--_ta-td-bc)); } - &.is-disabled { // Disabled rows // TODO: PPCP-ify - background-color: var(--black-025); - - th:not(.is-enabled), - td:not(.is-enabled) { - opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3 - } + th { + border-bottom-color: var(--_ta-foot-th-bc, var(--_ta-td-bc)); } } - & &--bulk { - &td, - &th { // TODO: investigate this style - --_ta-cell-w: calc(var(--su32) - var(--su2)); + th { + .s-checkbox { + display: block; } - } - & &--cell { - .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) { - &@{i} { // generates iterated cell classes - width: @ta-columns * @i; - } - .generate-cell-widths-classes(@n, (@i + 1)); + &.s-table--bulk { + --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px; } - .generate-cell-widths-classes(12); + border: var(--su-static1) solid var(--_ta-th-bc); + border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw); + font-size: var(--_ta-th-fs); + padding: var(--_ta-th-p); + padding-top: var(--_ta-th-pt, var(--_ta-th-p)); + text-align: var(--_ta-th-ta); + vertical-align: var(--_ta-th-va); + width: var(--_ta-th-w); + + color: var(--fc-dark); + font-weight: bold; } - & &--progress { // TODO: PPCP-ify - &td { - border-right: none; - text-align: right; + thead { + th { + background-color: var(--_ta-thead-th-bg); + + line-height: var(--lh-sm); + vertical-align: bottom; + white-space: nowrap; } } - & &--progress-bar { // TODO: PPCP-ify - &td { - border-left: none; - padding-left: 0; - width: 120px; + tr { + &:last-of-type { + --_ta-td-bbw: var(--su-static1); + --_ta-th-bbw: var(--su-static1); } - } - & &--totals { // TODO: PPCP-ify - th, - td { - padding-top: var(--su12); - font-size: var(--fs-subheading); - font-weight: bold; + &.is-disabled { + background-color: var(--black-025); + + th:not(.is-enabled), + td:not(.is-enabled) { + opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3 + } } } @@ -262,3 +296,6 @@ max-width: 100%; width: 100%; } + +// [1] This makes the border transparent, so we need to use whitespace +// to achieve the same effect a 2px gray border achieves. From dff6dd1218ed0a98d62ebc91a1885dd8c816618e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 7 Dec 2022 17:47:30 -0500 Subject: [PATCH 3/9] Fix docs-specific .s-table td styling --- docs/assets/less/stacks-documentation.less | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less index 37f3cf6f86..031e405d73 100644 --- a/docs/assets/less/stacks-documentation.less +++ b/docs/assets/less/stacks-documentation.less @@ -318,12 +318,15 @@ // ---------------------------------------------------------------------------- .stacks-flex-example--item { - padding: var(--su8); - border: 1px solid var(--bc-medium); - background-color: var(--black-075); - font-family: var(--ff-mono); - font-size: var(--fs-caption); - color: var(--fc-dark); + &, + .s-table td& { + padding: var(--su8); + border: 1px solid var(--bc-medium); + background-color: var(--black-075); + font-family: var(--ff-mono); + font-size: var(--fs-caption); + color: var(--fc-dark); + } } // ============================================================================ From 823408b44dc6e6e234d6653f99d27045faf9e285 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 7 Dec 2022 17:52:13 -0500 Subject: [PATCH 4/9] Remove empty child element declarations --- lib/css/components/tables.less | 6 ------ 1 file changed, 6 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index 6a66c4c53f..5c863c4163 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -164,12 +164,6 @@ .generate-cell-widths-classes(12); } - & &--progress { - } - - & &--progress-bar { - } - & &--totals { --_ta-td-fs: var(--fs-subheading); --_ta-td-pt: var(--su12); From 0b2e5e22d618a0e1165f537d2ed4f30ddbb73963 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 12 Dec 2022 10:33:55 -0500 Subject: [PATCH 5/9] Cleanup --- lib/css/components/tables.less | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index 5c863c4163..6899a6a000 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -34,19 +34,14 @@ } // MODIFIERS - &.ta-left { - --_ta-td-ta: left; - --_ta-th-ta: left; - } - &.ta-center { --_ta-td-ta: center; --_ta-th-ta: center; } - &.ta-right { - --_ta-td-ta: right; - --_ta-th-ta: right; + &.ta-left { + --_ta-td-ta: left; + --_ta-th-ta: left; } &.ta-justify { @@ -54,9 +49,14 @@ --_ta-th-ta: justify; } - &.va-top { - --_ta-td-va: top; - --_ta-th-va: top; + &.ta-right { + --_ta-td-ta: right; + --_ta-th-ta: right; + } + + &.va-bottom { + --_ta-td-va: bottom; + --_ta-th-va: bottom; } &.va-middle { @@ -64,9 +64,9 @@ --_ta-th-va: middle; } - &.va-bottom { - --_ta-td-va: bottom; - --_ta-th-va: bottom; + &.va-top { + --_ta-td-va: top; + --_ta-th-va: top; } &&__b0 { @@ -140,6 +140,7 @@ } } + // Sizes &&__sm { --_ta-td-p: var(--su4); --_ta-th-p: var(--su4); From 43dc24ec023534deb0cf116c51d738b5db4188d5 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Dec 2022 10:45:02 -0500 Subject: [PATCH 6/9] Fix custom property typo Addresses https://github.com/StackExchange/Stacks/pull/1204#discussion_r1047073639 --- lib/css/components/tables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index 6899a6a000..ce6ede6985 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -17,7 +17,7 @@ --_ta-td-p: var(--su8); --_ta-td-ta: left; --_ta-td-va: middle; - --_ta-th-w: unset; + --_ta-td-w: unset; --_ta-thead-th-bg: var(--black-025); --_ta-th-bbw: 0; --_ta-th-bc: var(--bc-medium); From 7a8ae537944212dc8ac94cd08424b04b17e500be Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Dec 2022 10:50:39 -0500 Subject: [PATCH 7/9] Fix .is-disabled tr background color override --- lib/css/components/tables.less | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index ce6ede6985..fc11a794a9 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -276,6 +276,7 @@ &.is-disabled { background-color: var(--black-025); + --_ta-tbody-tr-even-bg: var(--black-025); th:not(.is-enabled), td:not(.is-enabled) { From 48e0e29303b29ee4fce42969c3179e4986061c95 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Dec 2022 10:54:40 -0500 Subject: [PATCH 8/9] Sort properties alphabetically --- docs/assets/less/stacks-documentation.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less index 031e405d73..1fc55fcff5 100644 --- a/docs/assets/less/stacks-documentation.less +++ b/docs/assets/less/stacks-documentation.less @@ -320,12 +320,12 @@ .stacks-flex-example--item { &, .s-table td& { - padding: var(--su8); - border: 1px solid var(--bc-medium); background-color: var(--black-075); + border: var(--su-static1) solid var(--bc-medium); + color: var(--fc-dark); font-family: var(--ff-mono); font-size: var(--fs-caption); - color: var(--fc-dark); + padding: var(--su8); } } From b8167bfe60f1d0c5fe40ea0abd6c00fde88c2487 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Dec 2022 10:56:46 -0500 Subject: [PATCH 9/9] Renaming tables.less to table.less --- lib/css/components/{tables.less => table.less} | 0 lib/css/stacks-static.less | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename lib/css/components/{tables.less => table.less} (100%) diff --git a/lib/css/components/tables.less b/lib/css/components/table.less similarity index 100% rename from lib/css/components/tables.less rename to lib/css/components/table.less diff --git a/lib/css/stacks-static.less b/lib/css/stacks-static.less index 86b0a99c24..547571f677 100644 --- a/lib/css/stacks-static.less +++ b/lib/css/stacks-static.less @@ -39,7 +39,7 @@ @import "components/prose.less"; @import "components/sidebar-widgets.less"; @import "components/spinner.less"; -@import "components/tables.less"; +@import "components/table.less"; @import "components/toggle-switches.less"; @import "components/topbar.less"; @import "components/uploader.less";