Contents

.gem-c-big-number {
  margin-bottom: govuk-spacing(3);
  @include govuk-typography-common;
  @include govuk-text-colour;
}

.gem-c-big-number__value {
  font-size: 80px;
  @include govuk-typography-weight-bold;
  line-height: 1;

  @if $govuk-typography-use-rem {
    font-size: govuk-px-to-rem(80px);
  }
}

.gem-c-big-number__label {
  font-size: 16px;
  @include govuk-typography-weight-bold;

  @if $govuk-typography-use-rem {
    font-size: govuk-px-to-rem(16px);
  }

  // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
  // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
  &:before {
    content: "";
    display: block;
  }
}

.gem-c-big-number__link {
  display: inline-block;
  text-decoration: none;

  // Add govuk-link hover decoration to main value if no label present but a href attribute is
  .gem-c-big-number__value--decorated {
    @include govuk-link-decoration;
    @include govuk-link-style-no-underline;
  }

  .gem-c-big-number__label {
    @include govuk-link-decoration;
  }

  &:hover,
  &:active {
    .gem-c-big-number__label,
    .gem-c-big-number__value--decorated {
      @include govuk-link-hover-decoration;
    }
  }

  &:focus,
  &:focus:hover {
    .gem-c-big-number__label,
    .gem-c-big-number__value--decorated {
      text-decoration: none;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
govuk_publishing_components-27.16.0	app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss