From 70104926e9e20b3cec4e2b8e9d61a1438d130617 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 18:31:14 -0300 Subject: [PATCH 01/31] feat(b-table): new sorting icons using SVG, plus option to place icon on left of header cell --- src/components/table/helpers/mixin-sorting.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-sorting.js b/src/components/table/helpers/mixin-sorting.js index 4064fcf75c9..49a1ce9daa9 100644 --- a/src/components/table/helpers/mixin-sorting.js +++ b/src/components/table/helpers/mixin-sorting.js @@ -73,6 +73,11 @@ export default { noFooterSorting: { type: Boolean, default: false + }, + sortIconLeft: { + // Place the sorting icon on the left of the header cells + type: Boolean, + default: false } }, data() { @@ -226,8 +231,8 @@ export default { // methods to compute classes and attrs for thead>th cells sortTheadThClasses(key, field, isFoot) { return { - // No Classes for sorting currently... - // All styles targeted using aria-* attrs + // If sortable and sortIconLeft are true, then place sort icon on the left + 'b-table-sort-icon-left': field.sortable && this.sortIconLeft && !(isFoot && this.noFooterSorting) } }, sortTheadThAttrs(key, field, isFoot) { From 924f39aa7f37d87d0f31ab0ff79f1d47a8bd9013 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 18:43:25 -0300 Subject: [PATCH 02/31] Update mixin-sorting.js --- src/components/table/helpers/mixin-sorting.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/table/helpers/mixin-sorting.js b/src/components/table/helpers/mixin-sorting.js index 49a1ce9daa9..3048d86459e 100644 --- a/src/components/table/helpers/mixin-sorting.js +++ b/src/components/table/helpers/mixin-sorting.js @@ -232,7 +232,8 @@ export default { sortTheadThClasses(key, field, isFoot) { return { // If sortable and sortIconLeft are true, then place sort icon on the left - 'b-table-sort-icon-left': field.sortable && this.sortIconLeft && !(isFoot && this.noFooterSorting) + 'b-table-sort-icon-left': + field.sortable && this.sortIconLeft && !(isFoot && this.noFooterSorting) } }, sortTheadThAttrs(key, field, isFoot) { From e55945e2a6faf8d794de71434b4506bf8da3a5d3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:00:54 -0300 Subject: [PATCH 03/31] Update _variables.scss --- src/_variables.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/_variables.scss b/src/_variables.scss index 7a7803cd408..f469a3d6ec8 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -64,13 +64,20 @@ $b-custom-file-height-inner-sm: calc( // Table busy state $b-table-busy-opacity: 0.55 !default; -// Table sorting +// Table sorting (removed) $b-table-sort-icon-null: "\2195" !default; // Up-Down arrow $b-table-sort-icon-ascending: "\2193" !default; // Down arrow $b-table-sort-icon-descending: "\2191" !default; // Up arrow $b-table-sort-icon-margin-left: 0.5em !default; $b-table-sort-icon-width: 0.5em !default; +// Table sorting +$b-table-sort-icon-bg-width: 1em !default; +$b-table-sort-icon-bg-height: $b-table-sort-icon-width !default +$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; + // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; // Default max-height for tables with sticky headers From deefcfde494c955c26879b06851b0b2225e5cbf7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:04:03 -0300 Subject: [PATCH 04/31] Update _table.scss --- src/components/table/_table.scss | 76 ++++++++++++++++++++------------ 1 file changed, 47 insertions(+), 29 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 67dbf7612c3..e181189f4a0 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -186,39 +186,57 @@ // --- Header sort styling --- .table.b-table { - > thead, + > thead, > tfoot { - > tr { - > th { - &[aria-sort] { - // `&.sorting` - cursor: pointer; - - // Up/down `sort=null` indicator - &::before { - float: right; - margin-left: $b-table-sort-icon-margin-left; - width: $b-table-sort-icon-width; - font-size: inherit; - line-height: inherit; - opacity: 0.4; - content: $b-table-sort-icon-null; // Up/down arrow - speak: none; - } + > tr { + > [aria-sort] { + cursor: pointer; + background-image: none; + background-repeat: no-repeat; + background-size: $b-table-sort-icon-bg-wdith $b-table-sort-icon-bg-height; + + &:not(.b-table-sort-icon-bg-left) { + // Default is icon on the right + background-position: right $table-cell-padding center; + padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-wdith); + } - // Ascending indicator - &[aria-sort="ascending"]::before { - // `&.sorting_asc::after.sorting_asc` - opacity: 1; - content: $b-table-sort-icon-ascending; // Down arrow - } + &.b-table-sort-icon-bg-left { + // Left allign sort icon + background-position: left $table-cell-padding center center; + padding-left: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-wdith); + } + } + + > [aria-sort="none"] { + background-image: escape-svg($b-table-sort-icon-bg-not-sorted); + } + + > [aria-sort="ascending"] { + background-image: escape-svg($b-table-sort-icon-bg-ascending); + } + + > [aria-sort="descending"] { + background-image: escape-svg($b-table-sort-icon-bg-descending); + } + } + } - // Descending indicator - &[aria-sort="descending"]::before { - // `&.sorting_desc::after` - opacity: 1; - content: $b-table-sort-icon-descending; // Up arrow + // Padding and position adjustment for small tables + &.table-sm { + > thead, + > tfoot { + > tr > [aria-sort] { + &:not(.b-table-sort-icon-bg-left) { + // Default is icon on the right + background-position: right $table-cell-padding center; + padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-wdith); } + + &.b-table-sort-icon-bg-left { + // Left allign sort icon + background-position: left $table-cell-padding-sm center; + padding-left: calc(#{$table-cell-padding-sm * 2} + $b-table-sort-icon-bg-wdith); } } } From b2a0a9ec58fea6c974417ae74c7fe0413be0e577 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:12:21 -0300 Subject: [PATCH 05/31] Update _table.scss --- src/components/table/_table.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index e181189f4a0..b24cbb57d71 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -193,18 +193,18 @@ cursor: pointer; background-image: none; background-repeat: no-repeat; - background-size: $b-table-sort-icon-bg-wdith $b-table-sort-icon-bg-height; + background-size: $b-table-sort-icon-bg-width $b-table-sort-icon-bg-height; &:not(.b-table-sort-icon-bg-left) { // Default is icon on the right background-position: right $table-cell-padding center; - padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-wdith); + padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-width); } &.b-table-sort-icon-bg-left { // Left allign sort icon background-position: left $table-cell-padding center center; - padding-left: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-wdith); + padding-left: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-width); } } @@ -230,13 +230,13 @@ &:not(.b-table-sort-icon-bg-left) { // Default is icon on the right background-position: right $table-cell-padding center; - padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-wdith); + padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-width); } &.b-table-sort-icon-bg-left { // Left allign sort icon background-position: left $table-cell-padding-sm center; - padding-left: calc(#{$table-cell-padding-sm * 2} + $b-table-sort-icon-bg-wdith); + padding-left: calc(#{$table-cell-padding-sm * 2} + $b-table-sort-icon-bg-width); } } } From f9a048ae0d33c9d83df6148a2465a99f4e570b0b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:19:16 -0300 Subject: [PATCH 06/31] Update _table.scss --- src/components/table/_table.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index b24cbb57d71..f7841c5e046 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -198,13 +198,13 @@ &:not(.b-table-sort-icon-bg-left) { // Default is icon on the right background-position: right $table-cell-padding center; - padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-width); + padding-right: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); } &.b-table-sort-icon-bg-left { // Left allign sort icon background-position: left $table-cell-padding center center; - padding-left: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-width); + padding-left: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); } } @@ -230,13 +230,13 @@ &:not(.b-table-sort-icon-bg-left) { // Default is icon on the right background-position: right $table-cell-padding center; - padding-right: calc(#{$table-cell-padding * 2} + $b-table-sort-icon-bg-width); + padding-right: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); } &.b-table-sort-icon-bg-left { // Left allign sort icon background-position: left $table-cell-padding-sm center; - padding-left: calc(#{$table-cell-padding-sm * 2} + $b-table-sort-icon-bg-width); + padding-left: calc(#{$table-cell-padding-sm * 2} + #{$b-table-sort-icon-bg-width}); } } } From 9d48a86958d51bea0211ce16865809bb893872ea Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:38:59 -0300 Subject: [PATCH 07/31] Update _table.scss --- src/components/table/_table.scss | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index f7841c5e046..dd86bb91e28 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -185,6 +185,25 @@ // --- Header sort styling --- +// Bootstrap v4.4 will include this variable as `escaped-characters` +$bv-escaped-characters: ( + ("<","%3c"), + (">","%3e"), + ("#","%23"), +); + +// Bootstrap v4.4 will include this method as `escape-svg` +// See https://codepen.io/kevinweber/pen/dXWoRw +@function bv-escape-svg($string) { + @if str-index($string, "data:image/svg+xml") { + @each $char, $encoded in $bv-escaped-characters { + $string: str-replace($string, $char, $encoded); + } + } + + @return $string; +} + .table.b-table { > thead, > tfoot { @@ -209,15 +228,15 @@ } > [aria-sort="none"] { - background-image: escape-svg($b-table-sort-icon-bg-not-sorted); + background-image: bv-escape-svg($b-table-sort-icon-bg-not-sorted); } > [aria-sort="ascending"] { - background-image: escape-svg($b-table-sort-icon-bg-ascending); + background-image: bv-escape-svg($b-table-sort-icon-bg-ascending); } > [aria-sort="descending"] { - background-image: escape-svg($b-table-sort-icon-bg-descending); + background-image: bv-escape-svg($b-table-sort-icon-bg-descending); } } } From 77759fa8bd06a356e40c559c0ffb2b8331ef48e2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:46:02 -0300 Subject: [PATCH 08/31] Update _variables.scss --- src/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index f469a3d6ec8..1ca063b7e8f 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -72,8 +72,8 @@ $b-table-sort-icon-margin-left: 0.5em !default; $b-table-sort-icon-width: 0.5em !default; // Table sorting -$b-table-sort-icon-bg-width: 1em !default; -$b-table-sort-icon-bg-height: $b-table-sort-icon-width !default +$b-table-sort-icon-bg-width: 0.75em !default; +$b-table-sort-icon-bg-height: 1em !default; $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; From 6778d257de4ae6d20079cf9382ec6b7992fd39bd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 19:48:11 -0300 Subject: [PATCH 09/31] Update _variables.scss --- src/_variables.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 1ca063b7e8f..a02d2e62bb1 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -64,16 +64,10 @@ $b-custom-file-height-inner-sm: calc( // Table busy state $b-table-busy-opacity: 0.55 !default; -// Table sorting (removed) -$b-table-sort-icon-null: "\2195" !default; // Up-Down arrow -$b-table-sort-icon-ascending: "\2193" !default; // Down arrow -$b-table-sort-icon-descending: "\2191" !default; // Up arrow -$b-table-sort-icon-margin-left: 0.5em !default; -$b-table-sort-icon-width: 0.5em !default; - // Table sorting $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; +// Sort icons are square, but "squished" horizontally by the above variables $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; From f7c4b96cbd3e7199c62a95dea5d9aee7a2aea1e6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 20:26:26 -0300 Subject: [PATCH 10/31] Update README.md --- src/components/table/README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index c58141dd346..3801f0bd51f 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1658,9 +1658,10 @@ rows. ## Sorting As mentioned in the [Fields](#fields-column-definitions) section above, you can make columns -sortable. Clicking on a sortable column header will sort the column in ascending direction (smallest -first), while clicking on it again will switch the direction of sorting. Clicking on a non-sortable -column will clear the sorting. The prop `no-sort-reset` can be used to disable this feature. +sortable in ``. Clicking on a sortable column header will sort the column in ascending +direction (smallest first), while clicking on it again will switch the direction of sorting to +descending (largest first). Clicking on a non-sortable column will clear the sorting (the prop +`no-sort-reset` can be used to disable this feature). You can control which column is pre-sorted and the order of sorting (ascending or descending). To pre-specify the column to be sorted, set the `sort-by` prop to the field's key. Set the sort @@ -1668,11 +1669,9 @@ direction by setting `sort-desc` to either `true` (for descending) or `false` (f default). - **Ascending**: Items are sorted lowest to highest (i.e. `A` to `Z`) and will be displayed with the - lowest value in the first row with progressively higher values in the following rows. The header - indicator arrow will point in the direction of lowest to highest. (i.e. down for ascending). + lowest value in the first row with progressively higher values in the following rows. - **Descending**: Items are sorted highest to lowest (i.e. `Z` to `A`) and will be displayed with - the highest value in the first row with progressively lower values in the following rows. The - header indicator arrow will point in the direction of lowest to highest (i.e. up for descending). + the highest value in the first row with progressively lower values in the following rows. The props `sort-by` and `sort-desc` can be turned into _two-way_ (syncable) props by adding the `.sync` modifier. Your bound variables will then be updated accordingly based on the current sort @@ -1730,6 +1729,11 @@ clicks in the footer, set the `no-footer-sorting` prop to true. ``` +### Sort icon alignment + +By default the sorting icons appear right aligned in the header cell. You can change the icons to be +left aligned by setting the prop `sort-icon-left` on `` + ### Sort-compare routine The internal built-in default `sort-compare` function sorts the specified field `key` based on the From 3efb9f39819772165c57818955a882cf749b034d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 20:38:31 -0300 Subject: [PATCH 11/31] Update _variables.scss --- src/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index a02d2e62bb1..3a3acaa81b9 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -68,9 +68,9 @@ $b-table-busy-opacity: 0.55 !default; $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables -$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From 30d3e62d1fdb17995839458aafa8136367fcc39c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 20:58:55 -0300 Subject: [PATCH 12/31] Update _variables.scss --- src/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 3a3acaa81b9..dfe885d8f2f 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -68,9 +68,9 @@ $b-table-busy-opacity: 0.55 !default; $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables -$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From 8a1692bbcff38e094417a265f86fd4cb4fb912ac Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:07:00 -0300 Subject: [PATCH 13/31] Update _variables.scss --- src/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_variables.scss b/src/_variables.scss index dfe885d8f2f..0f1ec5e792c 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -69,7 +69,7 @@ $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation From fb4954d5153fbd2c44a70ce770f6f339c300f5ae Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:08:44 -0300 Subject: [PATCH 14/31] Update _variables.scss --- src/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_variables.scss b/src/_variables.scss index 0f1ec5e792c..c1c590d1fc8 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -68,7 +68,7 @@ $b-table-busy-opacity: 0.55 !default; $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables -$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; From 7292a38c27dcdac85aba37c7270c33025fdd1d2a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:09:40 -0300 Subject: [PATCH 15/31] Update _variables.scss --- src/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index c1c590d1fc8..7a8f10f7e17 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -69,8 +69,8 @@ $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From 2df6cb9eafe31512b4b33aca54d27093c695d5d4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:19:29 -0300 Subject: [PATCH 16/31] Update _variables.scss --- src/_variables.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 7a8f10f7e17..9b2847403b3 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -68,9 +68,13 @@ $b-table-busy-opacity: 0.55 !default; $b-table-sort-icon-bg-width: 0.75em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables -$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +// Icons to use on dark table or dark header (lighter color icons) +$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From df5bc1f3b33a30dffb5850dc19ffc4778b744bbc Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:27:11 -0300 Subject: [PATCH 17/31] Update _table.scss --- src/components/table/_table.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index dd86bb91e28..31ab504108d 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -186,6 +186,7 @@ // --- Header sort styling --- // Bootstrap v4.4 will include this variable as `escaped-characters` +// But if we want to preserve backwards compatability with v4.3, we leave this in $bv-escaped-characters: ( ("<","%3c"), (">","%3e"), @@ -193,6 +194,7 @@ $bv-escaped-characters: ( ); // Bootstrap v4.4 will include this method as `escape-svg` +// But if we want to preserve backwards compatability with v4.3, we leave this in // See https://codepen.io/kevinweber/pen/dXWoRw @function bv-escape-svg($string) { @if str-index($string, "data:image/svg+xml") { @@ -241,6 +243,23 @@ $bv-escaped-characters: ( } } + // Sort icons for dark tables + &.table-dark > thead > tr, + &.table-dark > tfoot > tr, + > .thead-dark > tr { + > [aria-sort="none"] { + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted); + } + + > [aria-sort="ascending"] { + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-ascending); + } + + > [aria-sort="descending"] { + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending); + } + } + // Padding and position adjustment for small tables &.table-sm { > thead, From 8fc923d88032c5a7a7916d1fe8d54de2ae83b049 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:41:24 -0300 Subject: [PATCH 18/31] Update _variables.scss --- src/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_variables.scss b/src/_variables.scss index 9b2847403b3..7d1482ef94b 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -65,7 +65,7 @@ $b-custom-file-height-inner-sm: calc( $b-table-busy-opacity: 0.55 !default; // Table sorting -$b-table-sort-icon-bg-width: 0.75em !default; +$b-table-sort-icon-bg-width: 0.65em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; From 002349224cdedad092bad7a5b450291f16a85929 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:44:32 -0300 Subject: [PATCH 19/31] Update _table.scss --- src/components/table/_table.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 31ab504108d..0cc324d7548 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -218,14 +218,14 @@ $bv-escaped-characters: ( &:not(.b-table-sort-icon-bg-left) { // Default is icon on the right - background-position: right $table-cell-padding center; - padding-right: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); + background-position: right calc(#{$table-cell-padding} / 2) center; + padding-right: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width}); } &.b-table-sort-icon-bg-left { // Left allign sort icon - background-position: left $table-cell-padding center center; - padding-left: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); + background-position: left calc(#{$table-cell-padding} / 2) center center; + padding-left: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width}); } } @@ -267,14 +267,14 @@ $bv-escaped-characters: ( > tr > [aria-sort] { &:not(.b-table-sort-icon-bg-left) { // Default is icon on the right - background-position: right $table-cell-padding center; + background-position: right calc(#{$table-cell-padding-sm} /2) center; padding-right: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); } &.b-table-sort-icon-bg-left { // Left allign sort icon - background-position: left $table-cell-padding-sm center; - padding-left: calc(#{$table-cell-padding-sm * 2} + #{$b-table-sort-icon-bg-width}); + background-position: left calc(#{$table-cell-padding-sm} /2) center; + padding-left: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); } } } From 1fc0e41c36d25c6f9d4d8dd91a4224779b29254d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:49:31 -0300 Subject: [PATCH 20/31] Update _variables.scss --- src/_variables.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 7d1482ef94b..5b338249c76 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -71,10 +71,11 @@ $b-table-sort-icon-bg-height: 1em !default; $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; -// Icons to use on dark table or dark header (lighter color icons) -$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,") !default; +// Icons to use on dark table or dark header/footer (lighter color icons) +// We simply just replace the fill color 'black' white 'white' +$b-table-sort-icon-bg-dark-not-sorted: str-replace($b-table-sort-icon-bg-not-sorted, "'black'", "'white'") !default; +$b-table-sort-icon-bg-dark-descending: str-replace($b-table-sort-icon-bg-descending, "'black'", "'white'") !default; +$b-table-sort-icon-bg-dark-ascending: str-replace($b-table-sort-icon-bg-ascending, "'black'", "'white'") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From b2d493a820117248fa97e0427c7362dcf30d870c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:51:03 -0300 Subject: [PATCH 21/31] Update _table.scss --- src/components/table/_table.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 0cc324d7548..509f06250cd 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -216,15 +216,15 @@ $bv-escaped-characters: ( background-repeat: no-repeat; background-size: $b-table-sort-icon-bg-width $b-table-sort-icon-bg-height; - &:not(.b-table-sort-icon-bg-left) { + &:not(.b-table-sort-icon-left) { // Default is icon on the right background-position: right calc(#{$table-cell-padding} / 2) center; padding-right: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width}); } - &.b-table-sort-icon-bg-left { + &.b-table-sort-icon-left { // Left allign sort icon - background-position: left calc(#{$table-cell-padding} / 2) center center; + background-position: left calc(#{$table-cell-padding} / 2) center; padding-left: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width}); } } From 9fffb02df939dcd432e5204365fbf55833c2fe01 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 21:54:32 -0300 Subject: [PATCH 22/31] Update _variables.scss --- src/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 5b338249c76..368bacec46b 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -68,9 +68,9 @@ $b-table-busy-opacity: 0.55 !default; $b-table-sort-icon-bg-width: 0.65em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables -$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; // Icons to use on dark table or dark header/footer (lighter color icons) // We simply just replace the fill color 'black' white 'white' $b-table-sort-icon-bg-dark-not-sorted: str-replace($b-table-sort-icon-bg-not-sorted, "'black'", "'white'") !default; From 3607652e90b2427744ade7b63ebd9daa7f0ab877 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 22:03:04 -0300 Subject: [PATCH 23/31] Update _table.scss --- src/components/table/_table.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 509f06250cd..b50990d1e0c 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -243,7 +243,7 @@ $bv-escaped-characters: ( } } - // Sort icons for dark tables + // Sort icons for dark tables, headers, footers &.table-dark > thead > tr, &.table-dark > tfoot > tr, > .thead-dark > tr { @@ -260,6 +260,21 @@ $bv-escaped-characters: ( } } + // Sort icons when header cell has `table-dark` class + > thead > tr > .table-dark, + > tfoot > tr > .table-dark { + &[aria-sort="none"] { + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted); + } + + &[aria-sort="ascending"] { + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-ascending); + } + + &[aria-sort="descending"] { + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending); + } + // Padding and position adjustment for small tables &.table-sm { > thead, From 3300824c49c00fe6ea1f4fb8c4308e8a9b1c290b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 22:08:19 -0300 Subject: [PATCH 24/31] Update _table.scss --- src/components/table/_table.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index b50990d1e0c..14c99a8fa58 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -274,6 +274,7 @@ $bv-escaped-characters: ( &[aria-sort="descending"] { background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending); } + } // Padding and position adjustment for small tables &.table-sm { From 5dffe2940ad2e23fc63714f09e87bede0e6059c6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 22:24:24 -0300 Subject: [PATCH 25/31] Update _variables.scss --- src/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 368bacec46b..9a8378b7cde 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -73,9 +73,9 @@ $b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; // Icons to use on dark table or dark header/footer (lighter color icons) // We simply just replace the fill color 'black' white 'white' -$b-table-sort-icon-bg-dark-not-sorted: str-replace($b-table-sort-icon-bg-not-sorted, "'black'", "'white'") !default; -$b-table-sort-icon-bg-dark-descending: str-replace($b-table-sort-icon-bg-descending, "'black'", "'white'") !default; -$b-table-sort-icon-bg-dark-ascending: str-replace($b-table-sort-icon-bg-ascending, "'black'", "'white'") !default; +$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From 5f3c742b1c87a45059f84e60d1bf286dd22335bb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 22:46:26 -0300 Subject: [PATCH 26/31] Update _table.scss --- src/components/table/_table.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 14c99a8fa58..2575f8fd86f 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -281,15 +281,15 @@ $bv-escaped-characters: ( > thead, > tfoot { > tr > [aria-sort] { - &:not(.b-table-sort-icon-bg-left) { + &:not(.b-table-sort-icon-left) { // Default is icon on the right - background-position: right calc(#{$table-cell-padding-sm} /2) center; - padding-right: calc(#{$table-cell-padding * 2} + #{$b-table-sort-icon-bg-width}); + background-position: right calc(#{$table-cell-padding-sm} / 2) center; + padding-right: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); } - &.b-table-sort-icon-bg-left { + &.b-table-sort-icon-left { // Left allign sort icon - background-position: left calc(#{$table-cell-padding-sm} /2) center; + background-position: left calc(#{$table-cell-padding-sm} / 2) center; padding-left: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); } } From 4aff2c510566a5454c1a15c1a6bec2e679de65bf Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 23:17:30 -0300 Subject: [PATCH 27/31] Update README.md --- src/components/table/README.md | 47 +++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 3801f0bd51f..f29aa0e91c1 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1732,7 +1732,52 @@ clicks in the footer, set the `no-footer-sorting` prop to true. ### Sort icon alignment By default the sorting icons appear right aligned in the header cell. You can change the icons to be -left aligned by setting the prop `sort-icon-left` on `` +left aligned by setting the prop `sort-icon-left` on ``. + +```html + + + + + +``` ### Sort-compare routine From b9e98e3423858ea36c44b6b363d20e3735434db0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 23:34:37 -0300 Subject: [PATCH 28/31] Update README.md --- src/components/table/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/table/README.md b/src/components/table/README.md index f29aa0e91c1..7c7f574ad9f 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1779,6 +1779,13 @@ left aligned by setting the prop `sort-icon-left` on ``. ``` +### Customizing the sort icons + +The sorting icons are generated via the use of SVG background images. The icons can be altered by +updating SASS/SCSS variables and recompiling the SCSS source code. Refer to the +[theming](/docs/reference/theming) section for details on customizing Bootstrap and BootstrapVue's +CSS. + ### Sort-compare routine The internal built-in default `sort-compare` function sorts the specified field `key` based on the From 0ea8bd333ffec6928c7ced9e86cd08131aa8e9b9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 23:35:19 -0300 Subject: [PATCH 29/31] Update _variables.scss --- src/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 9a8378b7cde..a806b76ac8f 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -69,13 +69,13 @@ $b-table-sort-icon-bg-width: 0.65em !default; $b-table-sort-icon-bg-height: 1em !default; // Sort icons are square, but "squished" horizontally by the above variables $b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-descending: url("data:image/svg+xml,") !default; // Icons to use on dark table or dark header/footer (lighter color icons) // We simply just replace the fill color 'black' white 'white' $b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,") !default; -$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,") !default; $b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,") !default; +$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,") !default; // Flag to enable sticky table header and column CSS generation $bv-enable-table-sticky: true !default; From 5ba05f29435ff20a5d572043e1911d13f90b52f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 29 Aug 2019 13:40:51 +0200 Subject: [PATCH 30/31] Prettify + fix typos --- src/components/table/_table.scss | 46 +++++++++++++++----------------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 2575f8fd86f..e39f067c394 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -186,15 +186,11 @@ // --- Header sort styling --- // Bootstrap v4.4 will include this variable as `escaped-characters` -// But if we want to preserve backwards compatability with v4.3, we leave this in -$bv-escaped-characters: ( - ("<","%3c"), - (">","%3e"), - ("#","%23"), -); +// But if we want to preserve backwards compatibility with v4.3, we leave this in +$bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23")); // Bootstrap v4.4 will include this method as `escape-svg` -// But if we want to preserve backwards compatability with v4.3, we leave this in +// But if we want to preserve backwards compatibility with v4.3, we leave this in // See https://codepen.io/kevinweber/pen/dXWoRw @function bv-escape-svg($string) { @if str-index($string, "data:image/svg+xml") { @@ -207,9 +203,9 @@ $bv-escaped-characters: ( } .table.b-table { - > thead, + > thead, > tfoot { - > tr { + > tr { > [aria-sort] { cursor: pointer; background-image: none; @@ -223,14 +219,14 @@ $bv-escaped-characters: ( } &.b-table-sort-icon-left { - // Left allign sort icon + // Left aligned sort icon background-position: left calc(#{$table-cell-padding} / 2) center; padding-left: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width}); } } > [aria-sort="none"] { - background-image: bv-escape-svg($b-table-sort-icon-bg-not-sorted); + background-image: bv-escape-svg($b-table-sort-icon-bg-not-sorted); } > [aria-sort="ascending"] { @@ -248,7 +244,7 @@ $bv-escaped-characters: ( &.table-dark > tfoot > tr, > .thead-dark > tr { > [aria-sort="none"] { - background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted); + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted); } > [aria-sort="ascending"] { @@ -264,7 +260,7 @@ $bv-escaped-characters: ( > thead > tr > .table-dark, > tfoot > tr > .table-dark { &[aria-sort="none"] { - background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted); + background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted); } &[aria-sort="ascending"] { @@ -278,19 +274,19 @@ $bv-escaped-characters: ( // Padding and position adjustment for small tables &.table-sm { - > thead, - > tfoot { - > tr > [aria-sort] { - &:not(.b-table-sort-icon-left) { - // Default is icon on the right - background-position: right calc(#{$table-cell-padding-sm} / 2) center; - padding-right: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); - } + > thead, + > tfoot { + > tr > [aria-sort] { + &:not(.b-table-sort-icon-left) { + // Default is icon on the right + background-position: right calc(#{$table-cell-padding-sm} / 2) center; + padding-right: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); + } - &.b-table-sort-icon-left { - // Left allign sort icon - background-position: left calc(#{$table-cell-padding-sm} / 2) center; - padding-left: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); + &.b-table-sort-icon-left { + // Left aligned sort icon + background-position: left calc(#{$table-cell-padding-sm} / 2) center; + padding-left: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width}); } } } From dc06b1b1b59280814448f15476d4a35f8f214331 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 29 Aug 2019 12:31:28 -0300 Subject: [PATCH 31/31] Update _table.scss --- src/components/table/_table.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index e39f067c394..ae8733ce003 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -185,7 +185,7 @@ // --- Header sort styling --- -// Bootstrap v4.4 will include this variable as `escaped-characters` +// Bootstrap v4.4 will include this variable as `$escaped-characters` // But if we want to preserve backwards compatibility with v4.3, we leave this in $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));