_typography.scss

/* ==========================================================================
   STYLES / #TYPOGRAPHY
   ========================================================================== */

/* Headings */

// The % (silent class) allows code to be extended (@extend) to other elements
// without bloating the code.
//
// @example scss
//  .foo {
//   @extend %nhsuk-heading-xl;
//  }

%nhsuk-heading-xl {
  @include nhsuk-typography-responsive(48);

  display: block;
  font-weight: $nhsuk-font-bold;
  margin-top: 0;

  @include nhsuk-responsive-margin(7, "bottom");
}

h1,
.nhsuk-heading-xl {
  @extend %nhsuk-heading-xl;
}

%nhsuk-heading-l {
  @include nhsuk-typography-responsive(32);

  display: block;
  font-weight: $nhsuk-font-bold;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

h2,
.nhsuk-heading-l {
  @extend %nhsuk-heading-l;
}

%nhsuk-heading-m {
  @include nhsuk-typography-responsive(24);

  display: block;
  font-weight: $nhsuk-font-bold;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

h3,
.nhsuk-heading-m {
  @extend %nhsuk-heading-m;
}

%nhsuk-heading-s {
  @include nhsuk-typography-responsive(22);

  display: block;
  font-weight: $nhsuk-font-bold;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

h4,
.nhsuk-heading-s {
  @extend %nhsuk-heading-s;
}

%nhsuk-heading-xs {
  @include nhsuk-typography-responsive(19);

  display: block;
  font-weight: $nhsuk-font-bold;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

h5,
.nhsuk-heading-xs {
  @extend %nhsuk-heading-xs;
}

%nhsuk-heading-xxs {
  @include nhsuk-typography-responsive(19);

  display: block;
  font-weight: $nhsuk-font-bold;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

h6,
.nhsuk-heading-xxs {
  @extend %nhsuk-heading-xxs;
}

/* Captions to be used inside headings */

.nhsuk-caption-xl {
  @include nhsuk-font(32);

  color: $nhsuk-secondary-text-color;
  display: block;
  margin-bottom: nhsuk-spacing(1);
}

.nhsuk-caption-l {
  @include nhsuk-font(24);

  color: $nhsuk-secondary-text-color;
  display: block;
  margin-bottom: nhsuk-spacing(1);
}

.nhsuk-caption-m {
  @include nhsuk-font(19);

  color: $nhsuk-secondary-text-color;
  display: block;
}

.nhsuk-caption--bottom {
  margin-bottom: nhsuk-spacing(0);
  margin-top: nhsuk-spacing(1);
}

/* Body (paragraphs) */

%nhsuk-body-l {
  @include nhsuk-typography-responsive(24);

  display: block;
  margin-top: 0;

  @include nhsuk-responsive-margin(5, "bottom");
}

.nhsuk-body-l {
  @extend %nhsuk-body-l;
}

%nhsuk-body-m {
  @include nhsuk-typography-responsive(19);

  display: block;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

p,
.nhsuk-body-m {
  @extend %nhsuk-body-m;
  color: inherit;
}

%nhsuk-body-s {
  @include nhsuk-typography-responsive(16);

  display: block;
  margin-top: 0;

  @include nhsuk-responsive-margin(4, "bottom");
}

.nhsuk-body-s {
  @extend %nhsuk-body-s;
}

address {
  @extend %nhsuk-body-m;

  font-style: normal;
}

/**
 * Lede text
 *
 * 1. Apply lede text styling to p and ul within the lede element
 * 2. Reduces the spacing between the page heading and the lede text
 */

.nhsuk-lede-text {
  @include nhsuk-font(24);
  @include nhsuk-responsive-margin(7, "bottom");
  /* [1] */
  p,
  ul {
    @include nhsuk-font(24);
  }
}

.nhsuk-lede-text--small {
  @include nhsuk-font(19);
  @include nhsuk-responsive-margin(5, "bottom");
}

/* [2] */
h1 + .nhsuk-lede-text,
h1 + .nhsuk-lede-text--small {
  margin-top: -(nhsuk-spacing(2));
}

/**
 * Contextual adjustments
 *
 * Add top padding to headings that appear directly after paragraphs.
 *
 * 1. Removes the padding-top because of the lede-text's increased margin-bottom
 *
 * Original code taken from GDS (Government Digital Service)
 * https://github.com/alphagov/nhsuk-frontend
 */

%nhsuk-body-l + %nhsuk-heading-l {
  padding-top: nhsuk-spacing(1);

  @include mq($from: tablet) {
    padding-top: nhsuk-spacing(2);
  }
}

%nhsuk-body-m + %nhsuk-heading-l,
%nhsuk-body-s + %nhsuk-heading-l,
%nhsuk-list + %nhsuk-heading-l {
  @include nhsuk-responsive-padding(4, "top");
}

%nhsuk-body-m + %nhsuk-heading-m,
%nhsuk-body-s + %nhsuk-heading-m,
%nhsuk-list + %nhsuk-heading-m,
%nhsuk-body-m + %nhsuk-heading-s,
%nhsuk-body-s + %nhsuk-heading-s,
%nhsuk-list + %nhsuk-heading-s {
  padding-top: nhsuk-spacing(1);

  @include mq($from: tablet) {
    padding-top: nhsuk-spacing(2);
  }
}

/* [1] */
.nhsuk-lede-text + %nhsuk-heading-l {
  padding-top: 0;
}

/* Font weight for <strong> and <b> */

strong,
b {
  font-weight: $nhsuk-font-bold;
}