search

rstudio / bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
https://rstudio.github.io/bslib/
Other
443 stars 49 forks source link

`value_box()` style adjustments (top-right and value font size) #1041

Closed gadenbuie closed 1 month ago

gadenbuie commented 2 months ago

Two adjustments I've recently used in an app are:

  1. Have the value of a showcase_layout = "top right" value box take up the entire value box width with

    .bslib-value-box.showcase-top-right .value-box-grid .value-box-area {
 grid-column: 1 / 3;
}

  2. Use the container query width to drive the value font-size, rather than the viewport width (it currently uses something like font-size: 1.325rem + .9vw).

    .bslib-value-box .value-box-value {
 font-size: calc(1rem + 3cqi);
}

    With this rule, the width of the value box itself drives the font size of the value, so the value shrinks and grows proportional to the value box width.

gadenbuie commented 1 month ago

The font-size comes from applying Bootstraps h2 and h6 font and spacing styles. I think we should stick with that.

https://github.com/rstudio/bslib/blob/00a75085a2dd3f181edc961181d4f67d18a91418/inst/components/scss/value_box.scss#L84-L98

gadenbuie commented 1 month ago

Oh and actually, a better way to approach the width of the top-right showcase is to adjust the showcase width, e.g. showcase = showcase_top_right(width = 0.3).