_govuk-logo.scss

/**
 * GOV.UK Logo Component
 *
 * Based on the existing GOV.UK logo from the header in GOV.UK Template.
 *
 * Notes:
 *
 * - The printable-crown element is an image that is included when the page is
 *   printed. It's hidden for the screen media type, where the background image
 *   is used instead.
 *
 * Example Usage:
 *
 * <span class="govuk-logo">
 *   <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
 *   GOV.UK
 * </span>
 */

.govuk-logo {
  font-weight: bold;

  @include screen {
    background-image: image-url('govuk_template/source/assets/stylesheets/images/gov.uk_logotype_crown-1x.png');
    background-repeat: no-repeat;

    @include device-pixel-ratio {
      background-image: image-url('govuk_template/source/assets/stylesheets/images/gov.uk_logotype_crown.png');
      background-size: 36px 32px;
    }

    @include media(tablet) {
      background-position: 0 3px;
    }
  }
}

.govuk-logo__printable-crown {
  vertical-align: middle;

  @include screen {
    visibility: hidden;
  }
}