From 47ab43cc467755b81767338bd2bc78d3dc84037f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Kone=C4=8Dn=C3=BD?= Date: Mon, 3 Oct 2022 08:32:50 +0200 Subject: [PATCH 1/3] Fix bug - Tables spacing and border with when zoom in browser --- lib/css/components/tables.less | 103 +++++++++++++++++---------------- 1 file changed, 52 insertions(+), 51 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index 5500af65de..07a7dea7be 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -41,13 +41,11 @@ border-collapse: collapse; border-spacing: 0; font-size: var(--fs-body1); - + border: 0.01px solid var(--bc-medium); // A quick and dirty workaround with 0.01px, because the Browser will fallback to at least 1px 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); + border-left: 0.01px solid var(--bc-medium); vertical-align: middle; color: var(--fc-medium); text-align: left; @@ -66,6 +64,11 @@ color: var(--fc-dark); } + tr { + border-bottom: 0.01px solid var(--bc-medium); + position: initial; + } + // Custom styles when in a table head thead th { vertical-align: bottom; @@ -78,17 +81,6 @@ 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); - } - - // If two table bodies are next to each other, visually separate them - tbody + tbody { - border-top: var(--su-static2) solid var(--bc-medium); - } } // ============================================================================ @@ -196,13 +188,12 @@ // ------------------------------------------------------------------------ // -- No Borders &.s-table__b0 { - th, + border: 0; + tr, td, - tr:last-of-type th, - tr:last-of-type td { - border-color: transparent; + th { + border: none } - // Clear Header Styles thead th { background-color: transparent; @@ -214,53 +205,40 @@ // 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); + // border-color: transparent; + // border-width: var(--su-static12); } } // -- Horizontal Only with Table Outline &.s-table__bx { - tr { - > *:not(:first-child) { - border-left-color: transparent; - } - > *:not(:last-child) { - border-right-color: transparent; - } + th, + td { + border-left: none } } // -- Horizontal Only without Table Outline &.s-table__bx-simple { + border: 0; + tr { + &:last-of-type { + border-bottom: 0; + } + } th, td { - border-left-color: transparent; - border-right-color: transparent; + border: none; } thead th { - border-top-color: transparent; - border-bottom-color: var(--bc-darker); + border-bottom: 0.01px solid var(--bc-darker); + // box-shadow: 0 1px 0 0 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 { - border-top-color: transparent; - } - &:last-of-type th, - &:last-of-type td { - border-bottom-color: transparent; - } - } - tfoot th, - tfoot td { - border-bottom-color: transparent; - } } // $$ TOTALS ROW @@ -294,7 +272,6 @@ // $$ Progress Bar // ------------------------------------------------------------------------ td.s-table--progress { - border-right: none; text-align: right; } @@ -302,20 +279,44 @@ border-left: none; padding-left: 0; width: 120px; + box-shadow: none; } // $$ Disabled rows // ------------------------------------------------------------------------ tr.is-disabled { - background-color: var(--black-025); + th, + td { + 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 + color: var(--black-150); } } } +@media (min-resolution: 120dpi) { + table, th, td { + border-width: 0.75px; + } + } + + @media (min-resolution: 144dpi) { + table, th, td { + border-width: 0.666px; + } + } + + @media (min-resolution: 192dpi) { + table, th, td { + border-width: 0.5px; + } + } + + // ============================================================================ // $ TABLE CELL SIZES // ============================================================================ @@ -334,4 +335,4 @@ .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; } +.s-table--cell12 { width: @table-columns * 12; } \ No newline at end of file From 7bd68879de93cbd1561eadf681ac7bf19344b734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Kone=C4=8Dn=C3=BD?= Date: Mon, 3 Oct 2022 09:30:20 +0200 Subject: [PATCH 2/3] reorganizing the code and modifying the method description --- lib/css/components/tables.less | 45 ++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index 07a7dea7be..ca9c940ba4 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -20,6 +20,7 @@ // - Totals row // - Sortable tables // • TABLE CELL SIZES +// • TABLE BORDER WITH SIZES ON ZOOM // // ============================================================================ @@ -41,7 +42,7 @@ border-collapse: collapse; border-spacing: 0; font-size: var(--fs-body1); - border: 0.01px solid var(--bc-medium); // A quick and dirty workaround with 0.01px, because the Browser will fallback to at least 1px + border: 0.01px solid var(--bc-medium); // Using 0.01 is workaround for border-with calculation, because the Browser will fallback to at least 1px th, td { padding: var(--su8); @@ -298,25 +299,6 @@ } } -@media (min-resolution: 120dpi) { - table, th, td { - border-width: 0.75px; - } - } - - @media (min-resolution: 144dpi) { - table, th, td { - border-width: 0.666px; - } - } - - @media (min-resolution: 192dpi) { - table, th, td { - border-width: 0.5px; - } - } - - // ============================================================================ // $ TABLE CELL SIZES // ============================================================================ @@ -335,4 +317,25 @@ .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; } \ No newline at end of file +.s-table--cell12 { width: @table-columns * 12; } + +// ============================================================================ +// $ TABLE BORDER WITH SIZES ON ZOOM +// ============================================================================ +@media (min-resolution: 120dpi) { + table, th, td { + border-width: 0.75px; + } + } + + @media (min-resolution: 144dpi) { + table, th, td { + border-width: 0.666px; + } + } + + @media (min-resolution: 192dpi) { + table, th, td { + border-width: 0.5px; + } + } \ No newline at end of file From cf3a9f12f2a212c8ac9fe979c193c1a318a8934e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Kone=C4=8Dn=C3=BD?= Date: Mon, 3 Oct 2022 12:07:27 +0200 Subject: [PATCH 3/3] Code cleanup --- lib/css/components/tables.less | 8 -------- 1 file changed, 8 deletions(-) diff --git a/lib/css/components/tables.less b/lib/css/components/tables.less index ca9c940ba4..1f9e552ffc 100644 --- a/lib/css/components/tables.less +++ b/lib/css/components/tables.less @@ -202,13 +202,6 @@ font-size: inherit; 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); - } } // -- Horizontal Only with Table Outline @@ -233,7 +226,6 @@ } thead th { border-bottom: 0.01px solid var(--bc-darker); - // box-shadow: 0 1px 0 0 var(--bc-darker); // Clear Header Styles background-color: transparent; text-transform: initial;