R/full_width_overrides.R

In shinyGovstyle: Custom Gov Style Inputs for Shiny

#' Styling overrides for to give full width
#'
#' `r lifecycle::badge("experimental")`
#' This is an experimental function that will likely be removed in future
#' releases, as we work through updating the core package styling and
#' adding full width options into the components themselves. This is not
#' well tested and may cause unexpected styling issues when combined with
#' components from other packages, use at your own risk.
#'
#' @return HTML containing CSS styling overrides
#' @family Govstyle styling
#' @export
#' @examples
#' shinyGovstyle::full_width_overrides()
full_width_overrides <- function() {
  shiny::tags$head(
    shiny::tags$style(
      shiny::HTML(
        # Overall overrides
        ".container-fluid { padding: 0; }",
        # Match GOV.UK Frontend's own gutter values: 15px (mobile) and 30px
        # (desktop). Without this, text would start flush against the viewport
        # edge in a full-width layout, which GOV.UK Frontend normally avoids
        # via its max-width container and auto margins.
        ".govuk-width-container { max-width: 100%; padding-left: 15px; }",
        paste0(
          "@media (min-width: 641px) {",
          " .govuk-width-container { padding-left: 30px; } }"
        ),
        ".govuk-grid-row { margin-left: 0; margin-right: 0; }",
        "[class*='govuk-grid-column-'] { padding: 0; }",
        ".govuk-main-wrapper { padding-top: 20px; }",

        # Cookie banner overrides
        ".govuk-button-group { margin-right: 0px; }",

        # Footer overrides
        ".govuk-footer { padding: 2rem; }",
        "html { background-color: #f3f2f1; }",

        # Left content overrides
        ".govuk-contents-box { margin-left: 0; margin-right: 0; }",
        ".govuk-contents-box { padding: 10px; width: fit-content !important; }"
      )
    )
  )
}