main.scss

$govuk-new-typography-scale: true;

@import "govuk/settings";
@import "govuk/helpers";
@import "govuk/tools";
@import "govuk/core";
@import "govuk/objects";

@import "govuk/components/back-link";
@import "govuk/components/breadcrumbs";
@import "govuk/components/button";
@import "govuk/components/cookie-banner";
@import "govuk/components/date-input";
@import "govuk/components/details";
@import "govuk/components/error-message";
@import "govuk/components/error-summary";
@import "govuk/components/fieldset";
@import "govuk/components/footer";
@import "govuk/components/header";
@import "govuk/components/hint";
@import "govuk/components/input";
@import "govuk/components/inset-text";
@import "govuk/components/label";
@import "govuk/components/notification-banner";
@import "govuk/components/pagination";
@import "govuk/components/panel";
@import "govuk/components/phase-banner";
@import "govuk/components/radios";
@import "govuk/components/skip-link";
@import "govuk/components/summary-list";
@import "govuk/components/table";
@import "govuk/components/tag";
@import "govuk/components/task-list";
@import "govuk/components/warning-text";

@import "govuk/utilities";

@import "govuk/overrides/spacing";
@import "govuk/overrides/text-align";
@import "govuk/overrides/typography";
@import "govuk/overrides/width";

// App-specific variables
$app-light-grey: #f8f8f8;
$app-code-color: #d13118;

// App-specific components
@import "components/back-to-top";
@import "components/category-nav";
@import "components/contact-panel";
@import "components/cookies-page";
@import "components/call-to-action";
@import "components/promo-banner";
@import "components/embed-card";
@import "components/example";
@import "components/footer";
@import "components/header";
@import "components/highlight";
@import "components/image-card";
@import "components/masthead";
@import "components/navigation";
@import "components/options";
@import "components/page-navigation";
@import "components/phase-banner";
@import "components/site-search";
@import "components/split-pane";
@import "components/subnav";
@import "components/tabs";
@import "components/table";

// We don't change the global width container width so that examples are the current width.
.app-width-container {
  @include govuk-width-container(1100px);
}

.app-content {
  padding: govuk-spacing(3) govuk-spacing(0) govuk-spacing(4);

  @include govuk-media-query($from: tablet) {
    padding: govuk-spacing(6);
    padding-right: 0;
    padding-bottom: govuk-spacing(8);
  }

  h1 {
    max-width: 15em;
  }

  h2 {
    max-width: 20em;
  }

  h3 {
    max-width: 30em;
  }

  h4,
  h5,
  h6,
  p,
  ul:not(.app-tabs),
  ol,
  img,
  video,
  .app-table--constrained {
    max-width: 38em;
  }

  .app-video__player,
  img {
    box-sizing: border-box;
    width: 100%;
    max-width: 722px;
    height: auto;
    @include govuk-responsive-margin(2, "top");
    border: 1px solid $govuk-border-colour;
  }

  img {
    padding: govuk-spacing(2);
    @include govuk-responsive-margin(6, "bottom");
  }

  // img modifier class used to remove the default border around images
  .app-image--no-border {
    margin: 0;
    padding: 0;
    border: none;
  }

  .app-video__player {
    @include govuk-responsive-margin(2, "bottom");
  }

  .app-video__player:focus {
    border-color: $govuk-focus-text-colour;
    outline: $govuk-focus-width solid $govuk-focus-text-colour;
    box-shadow: 0 0 0 ($govuk-focus-width * 2) $govuk-focus-colour;
  }

  .app-video__description {
    @include govuk-responsive-margin(6, "bottom");
  }

  /// System ui-monospace font stack
  ///
  /// @link https://caniuse.com/extended-system-fonts
  /// @link https://www.w3.org/TR/css-fonts-4/#ui-monospace-def
  ///
  /// Android typically avoids the "Courier" based monospace
  /// default but we need to specify fallbacks for others:
  ///
  /// * SF Mono - Font for Safari 13.1+ via ui-monospace
  /// * Menlo - Font for older macOS, OS X versions
  /// * Cascadia Mono, Segoe UI Mono, Consolas - Fonts for Windows 11, 10, 8
  /// * Consolas - Font for older Windows versions
  /// * Liberation Mono - Font for Linux used by GitHub
  pre,
  code {
    // font family in a separate variable to avoid syntax errors when passing
    // to the common typography mixin
    $app-code-font: ui-monospace, menlo, "Cascadia Mono", "Segoe UI Mono", consolas, "Liberation Mono", monospace;
    @include govuk-typography-common($font-family: $app-code-font);
  }
}

// Copy button
.app-copy-button {
  $copy-button-colour: #00823b;

  @include govuk-font(16);
  position: absolute;
  z-index: 1;
  top: govuk-spacing(2);
  right: govuk-spacing(2);
  min-width: 110px;
  padding: 3px 10px;
  border: 1px solid $copy-button-colour;
  color: $copy-button-colour;
  background-color: govuk-colour("white");
  box-shadow: 0 2px 0 0 govuk-colour("green");
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  &:focus:not(:hover) {
    color: $govuk-focus-text-colour;
    background-color: $govuk-focus-colour;
    box-shadow: 0 2px 0 0 $govuk-focus-text-colour;
  }

  &:active,
  &:focus {
    padding: 2px 10px; // Counter increased border size
    border: 2px solid $govuk-focus-colour;
    outline: 2px solid transparent;
    box-shadow: none;
  }

  &:active {
    margin-top: 2px;
    box-shadow: none;
  }
}

$colour-list-breakpoint: 980px;

.app-colour-list {
  width: 100%;
  border-collapse: collapse;
}

.app-colour-list-row {
  display: table-row;
  margin-bottom: govuk-spacing(2);
  border-bottom: 10px solid transparent;
  @include govuk-media-query($from: $colour-list-breakpoint) {
    display: table-row;
    margin: auto;
    border-bottom: 0;
  }
}

.app-colour-list-column {
  display: block;
  position: relative;
  padding-left: 50px;
  @include govuk-media-query($from: $colour-list-breakpoint) {
    display: table-cell;
    padding-left: 0;
    vertical-align: middle;
  }
}

.app-swatch {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid transparent; // only light colours need a border
  border-radius: 50%;
  @include govuk-media-query($from: $colour-list-breakpoint) {
    display: inline-block;
    position: static;
    margin-top: 6px;
    margin-right: 10px;
    margin-bottom: 7px; // odd number so the text lines up vertically
    vertical-align: middle;
  }
}

.app-swatch-border {
  border-color: govuk-colour("mid-grey");
}

.app-colour-list-column--name {
  font-weight: normal;
  text-align: left;
  @include govuk-media-query($from: $colour-list-breakpoint) {
    width: 50%;
  }
}

.app-colour-list-column--colour {
  @include govuk-media-query($from: $colour-list-breakpoint) {
    width: 15%;
  }

  code {
    padding: 0;
    color: $govuk-text-colour;
    background: none;
  }
}

.app-colour-list-column--notes {
  @include govuk-media-query($from: $colour-list-breakpoint) {
    width: 35%;
  }
}

// Add styling for inline code
li code,
caption code,
td code,
p code {
  padding: 1px 3px;
  color: $app-code-color;
  background-color: govuk-colour("light-grey");
  @include govuk-font-size($size: 16);
  @include govuk-media-query($from: tablet) {
    padding: 2px 4px;
  }
}

// Add styling for code in headings
.govuk-heading-s code,
.govuk-heading-m code,
.govuk-heading-l code,
.govuk-heading-xl code {
  font-size: inherit;
}

// Add styling for block code
pre code {
  display: block;
  max-width: 38em;
  margin: 0;
  padding: govuk-spacing(4);
  overflow-x: auto;
  border: $govuk-focus-width solid transparent;
  outline: 1px solid $govuk-border-colour;
  background-color: $app-light-grey;
  @include govuk-font-size($size: 19);
  @include govuk-responsive-margin(4, "bottom");

  &:focus {
    border: $govuk-focus-width solid $govuk-input-border-colour;
    outline: $govuk-focus-width solid $govuk-focus-colour;
  }

  .govuk-frontend-supported [data-module="app-copy"] & {
    padding-top: 45px; // Allow extra space for the copy code button
  }
}

// Allow text to wrap
pre .language-markdown,
pre .language-plaintext {
  white-space: pre-wrap;
}

.app-prose-scope {
  h1 {
    @extend %govuk-heading-xl;
  }

  h2 {
    @extend %govuk-heading-l;
  }

  h3 {
    @extend %govuk-heading-m;
  }

  h4 {
    @extend %govuk-heading-s;
  }

  p {
    @extend %govuk-body-m;
  }

  strong,
  b {
    @include govuk-typography-weight-bold;
  }

  // Govuk tags are strong elements and prose scope reinforces strong's being
  // bold, so we need to 'override' it back to regular
  .govuk-tag {
    @include govuk-typography-weight-regular;
  }

  ul,
  ol {
    @extend %govuk-list;
  }

  ol {
    @extend %govuk-list--number;
  }

  ul {
    @extend %govuk-list--bullet;
  }

  a {
    @extend %govuk-link;

    &:focus code {
      color: $govuk-focus-text-colour;
      background: transparent;
    }
  }

  hr {
    @extend %govuk-section-break;
    @extend %govuk-section-break--visible;
    @extend %govuk-section-break--xl;
  }

  pre + h2 {
    padding-top: govuk-spacing(4);
  }

  pre + h3,
  pre + h4 {
    padding-top: govuk-spacing(2);
  }

  // Ensure that content at the bottom of the page does not have margins
  // so that they line up with the back to top link.
  > :last-child {
    margin-bottom: 0;
  }
}

// Add styling for 'what's new' banner
.app-whats-new {
  border-bottom: 1px solid $govuk-border-colour;
  background-color: $app-light-grey;
}

.app-wcag-callout {
  border-left-color: govuk-colour("blue");
}

// Change headings in WCAG callouts to look like H3s,
// even though they semantically are H2s
.app-wcag-callout h2 {
  @extend %govuk-heading-m;
  max-width: 30em;
}

.app-wcag-callout__tag {
  margin-top: 1px;
  margin-bottom: govuk-spacing(2);
}

.app-wcag-note {
  margin-top: govuk-spacing(6);

  // Add highlight styling for WCAG 2.2 content
  &:target {
    outline: 4px solid $govuk-brand-colour;
    outline-offset: 6px;
  }
}

.app-campaign-cookie-banner .govuk-grid-column-two-thirds {
  width: 100%;
}