_elements-typography.scss

// Typography
// ==========================================================================

// Increase the base font size to 19px for the main content area
// Using the core-19 mixin from the govuk_toolkit _typography.scss file

main {
  @include core-19;
  -webkit-font-smoothing: antialiased;
}

// Core font sizes
.font-xxlarge {
  @include core-80;
}

.font-xlarge {
  @include core-48;
}

.font-large {
  @include core-36;
}

.font-medium {
  @include core-24;
}

.font-small {
  @include core-19;
}

.font-xsmall {
  @include core-16;
}

// Bold font sizes
.bold-xxlarge {
  @include bold-80();
}

.bold-xlarge {
  @include bold-48();
}

.bold-large {
  @include bold-36();
}

.bold-medium {
  @include bold-24();
}

.bold-small {
  @include bold-19();
}

.bold-xsmall {
  @include bold-16();
}

// Bold, without needing a font size
.bold {
  font-weight: 700;
}

// Common heading sizes
// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
// Spacing is set in em, using the px to em function in the elements _helpers.scss file

// Headings
.heading-xlarge {
  @include bold-48();

  margin-top: em(15, 32);
  margin-bottom: em(30, 32);

  @include media(tablet) {
    margin-top: em(30, 48);
    margin-bottom: em(60, 48);
  }

  .heading-secondary {
    @include heading-27();

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

}

.heading-large {
  @include bold-36();

  margin-top: em(25, 24);
  margin-bottom: em(10, 24);

  @include media(tablet) {
    margin-top: em(45, 36);
    margin-bottom: em(20, 36);
  }

  .heading-secondary {
    @include heading-24();

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

}

.heading-medium {
  @include bold-24();

  margin-top: em(25, 20);
  margin-bottom: em(10, 20);

  @include media(tablet) {
    margin-top: em(45, 24);
    margin-bottom: em(20, 24);
  }

}

.heading-small {
  @include bold-19();

  margin-top: em(10, 16);
  margin-bottom: em(5, 16);

  @include media(tablet) {
    margin-top: em(20, 19);
  }

}

// Text
p {
  margin-top: em(5, 16);
  margin-bottom: em(20, 16);

  @include media(tablet) {
    margin-top: em(5);
    margin-bottom: em(20);
  }

}

// Lede, or intro text
.lede {
  @include core-24;
}

// Set a max-width for text blocks
// Less than 75 characters per line of text
.text {
  max-width: 30em;
}

.text-secondary {
  color: $secondary-text-colour;
}

// Link styles
.link {
  color: $link-colour;
  text-decoration: underline;
}

.link:visited {
  color: $link-visited-colour;
}

.link:hover {
  color: $link-hover-colour;
}

.link:active {
  color: $link-colour;
}

// Back link styles - with left pointing arrow

.link-back {
  @include inline-block;
  position: relative;

  @include core-16;

  margin-top: $gutter-half;
  margin-bottom: $gutter-half;
  padding-left: 14px;

  color: $black;

  &:link,
  &:visited,
  &:hover,
  &:active {
    color: $black;
  }

  text-decoration: none;
  border-bottom: 1px solid $black;

  // Back arrow - left pointing black arrow
  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;

    border-top: 5px solid transparent;
    border-right: 6px solid $text-colour;
    border-bottom: 5px solid transparent;

    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
  }

  // Fallback
  // IE8 doesn't support rgba and only supports the single colon syntax for :before
  // IE7 doesn't support pseudo-elements, let's fallback to an image instead.
  // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
  @include ie-lte(8) {
    background: file-url("icon-arrow-left.png") no-repeat 0 4px;
  }

}

// Code styles
.code {
  color: $text-colour;
  background-color: $highlight-colour;

  text-shadow: 0 1px $page-colour;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 14px;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

  border: 1px solid $border-colour;
  padding: 4px 4px 2px;
}

// Horizontal rule style
hr {
  display: block;
  background: $border-colour;
  border: 0;
  height: 1px;
  margin-top: $gutter;
  margin-bottom: $gutter;
  padding: 0;

  @include ie-lte(7) {
    color: $border-colour;
  }
}

// Notice, text with an icon to the left
.notice {
  @extend %contain-floats;
  position: relative;

  .icon {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px; // Half the height of the important icon
  }

  strong {
    display: block;
    padding-left: (35 + 30) + px;
    margin-left: -$gutter-half;
  }
}

// Data
.data {
  margin-top: em(5, 16);
  margin-bottom: em(20, 16);

  @include media(tablet) {
    margin-top: em(5, 19);
    margin-bottom: em(20, 19);
  }
}

.data-item {
  display: block;
  line-height: 1;
}