diff --git a/R/sysdata.rda b/R/sysdata.rda index 679e5ba3c..027f090f6 100644 Binary files a/R/sysdata.rda and b/R/sysdata.rda differ diff --git a/inst/builtin/bs5/shiny/_rules.scss b/inst/builtin/bs5/shiny/_rules.scss index 800660543..ca666181a 100644 --- a/inst/builtin/bs5/shiny/_rules.scss +++ b/inst/builtin/bs5/shiny/_rules.scss @@ -1,5 +1,6 @@ /*-- scss:rules --*/ @import "ionrangeslider/_rules.scss"; +@import "tables/_rules.scss"; $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" !default; @if $web-font-path { diff --git a/inst/builtin/bs5/shiny/_variables.scss b/inst/builtin/bs5/shiny/_variables.scss index af8f2e263..cbc6c55aa 100644 --- a/inst/builtin/bs5/shiny/_variables.scss +++ b/inst/builtin/bs5/shiny/_variables.scss @@ -85,3 +85,8 @@ $form-text-color: $gray-600 !default; // Borders $input-border-color: $gray-500 !default; $border-radius: 3px !default; + +// Tables +$table-striped-bg: tint-color($blue, 94%) !default; +$table-hover-bg: tint-color($blue, 90%) !default; +$table-striped-order: even !default; diff --git a/inst/builtin/bs5/shiny/tables/_rules.scss b/inst/builtin/bs5/shiny/tables/_rules.scss new file mode 100644 index 000000000..b55addbfd --- /dev/null +++ b/inst/builtin/bs5/shiny/tables/_rules.scss @@ -0,0 +1,97 @@ +// TODO: Many of these rules could be applied to all bslib themes +.table.dataTable { + // CSS variables are scoped to datatables in Bootstrap + --dt-row-selected: var(--bs-primary-rgb, "0,123,194"); + --dt-row-selected-text: var(--bs-white-rgb, "255,255,255"); + --dt-row-selected-link: var(--bs-light-rgh, "248,248,248"); +} + +// Note CSS specificity hack because DT's CSS deps are loaded after the theme +.table.dataTable.dataTable { + $class-stripe: "even"; + $class-unstriped: "odd"; + + @if $table-striped-order == odd { + $class-stripe: "odd"; + $class-unstriped: "even"; + } + + &.table-striped > tbody > tr.#{$class-unstriped}:not(.selected) > * { + box-shadow: none; + } + + &.table-striped > tbody > tr.#{$class-stripe}:not(.selected) > * { + box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg); + } + + tbody td.active, + tbody tr.active td { + background-color: var(--bs-table-active-bg); + } + + &.table-hover > tbody > tr:hover:not(.selected) > * { + box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg); + } +} + +thead, tbody, tfoot, tr, td, th { + border: none; +} + +.table > thead { + border-bottom: 1px solid var(--bs-table-color); +} + +th { + font-weight: 600; +} + +.datatables { + // Table pagination row tweaks + .dataTables_wrapper div.dataTables_info { + padding-top: calc(var(--bslib-spacer, 1rem) * 1.65); + font-size: .95rem; + } + + .dataTables_paginate { + padding-top: var(--bslib-spacer, 1rem); + } + + .paginate_button a { + font-size: .95rem; + } + + // create space between 'show ___ entries' and 'search' above table + .dataTables_length, .dataTables_filter { + padding-bottom: var(--bslib-spacer, 1rem); + } + + // Scroll the data table container, not the entire wrapper + .dataTables_wrapper .dt-row { + max-width: 100%; + overflow: auto; + } + + // Style the length and search inputs + .dataTables_wrapper .dataTables_length select, + .dataTables_wrapper .dataTables_filter input { + border: none; + border-bottom: 1px solid var(--bs-body-color); + border-radius: 0; + } +} + +// TODO: This could be applied more generally via the card scss +.bslib-card-table-sm { + &.bslib-card[data-full-screen="false"] .datatables .dataTables_wrapper { + font-size: 85%; + + // hide the supporting elements when inside a non-full-screen card + .dataTables_length, // show ___ entries + .dataTables_filter, // search + .dataTables_info, // showing 1 to 10 of 100 entries + .dataTables_paginate { + display: none; + } + } +} diff --git a/inst/themer-demo/R/tips.R b/inst/themer-demo/R/tips.R index 2c04bbe86..aa2df1b70 100644 --- a/inst/themer-demo/R/tips.R +++ b/inst/themer-demo/R/tips.R @@ -62,6 +62,7 @@ tipsUI <- function(id) { ), card( full_screen = TRUE, + class = "bslib-card-table-sm", card_header("Tips data"), DT::dataTableOutput(ns("table")) ),