_mixins.scss

// ==========================================================================
// TOOLS / #MIXINS
// ==========================================================================

//
// Clearfix mixin
//
// Usage: @include clearfix();
// See utilities/clearfix
//

@mixin clearfix() {
  &:after {
    clear: both;
    content: "";
    display: block;
  }
}

//
// Reading width mixin, add a maximum width
// to large pieces of content
//
// Usage: @include reading-width();
// See utilities/reading-width
//

@mixin reading-width() {
  max-width: 44em;
}

//
// Visually hidden mixin, used for hiding
// content visually but keeping it in the DOM
//
// Usage: @include visually-hidden();
// See utilities/visually-hidden
//

@mixin visually-hidden() {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

//
// Visually shown mixin, used for displaying
// content visually that has previously been hidden
// by visually-hidden
// Differences between mobile and desktop views
// Use $display-property to assign display
//
// Usage: @include visually-shown(table-header-group);
//

@mixin visually-shown($display-property) {
  clip: auto;
  -webkit-clip-path: initial;
  clip-path: initial;
  display: $display-property;
  height: auto;
  overflow: auto;
  position: relative;
  width: auto;
}

//
// Top and bottom margin mixin, remove
// the top and bottom margin spacing
//
// Usage: @include top-and-bottom();
// See utilities/top-and-bottom
//

@mixin top-and-bottom() {
  & > *:first-child {
    margin-top: 0;
  }
  & > *:last-child {
    margin-bottom: 0;
  }
}

//
// Panel mixin
//
// Usage: @include panel-with-label($color_nhsuk-blue, $color_nhsuk-white);
// See components/_panel
//

@mixin panel($panel-background-color, $panel-text-color) {
  @include top-and-bottom();
  @include nhsuk-responsive-margin(7, "bottom");
  @include nhsuk-responsive-margin(7, "top");
  @include nhsuk-responsive-padding(5);

  background-color: $panel-background-color;
  color: $panel-text-color;

  @include mq($media-type: print) {
    border: 1px solid $nhsuk-print-text-color;
    page-break-inside: avoid;
  }
}

//
// Panel with label mixin, inherits panel styling
// and removes padding top for the label positioning.
//
// Used in-conjunction with @mixin heading-label
//
// Usage: @include panel-with-label($color_nhsuk-blue, $color_nhsuk-white);
// See components/_warning-component
//

@mixin panel-with-label($panel-background-color, $panel-text-color, $panel-border-color) {
  @include panel($panel-background-color, $panel-text-color);

  border: 1px solid $panel-border-color;
  padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

//
// Heading label mixin, adds a tab heading to
// warning callout, do and don't lists and panel.
//
// Used in-conjunction with @mixin panel-with-label
//
// Usage: @include heading-label($color_nhsuk-blue, $color_nhsuk-white);
// See components/_warning-component
//
// 1. Background colour to be set on the @include.
// 2. Text colour to be set on the @include.
// 3. Display inline-block so it does not take up the full width.
// 4. Margin -24px left and right aligns the heading to the box.
// 5. Top positioning set to minus to make the heading
//    sit just outside the box.
//

@mixin heading-label($heading-background-color, $heading-text-color) {
  @include nhsuk-typography-responsive(24);

  background-color: $heading-background-color; // [1] //
  color: $heading-text-color; // [2] //
  display: inline-block; // [3] //
  margin: nhsuk-spacing(0) nhsuk-spacing(0) nhsuk-spacing(2) -33px;
  padding: nhsuk-spacing(2) nhsuk-spacing(5);
  position: relative;
  top: -16px; // [5] //

  @include mq($until: tablet) {
    margin-left: -25px;
    margin-right: 0;
    padding: nhsuk-spacing(2) nhsuk-spacing(4);
    top: -8px; // [5] //
  }

  @include mq($media-type: print) {
    background: none;
    color: $color_nhsuk-black;
    top: 0;
  }
}

//
// Care card mixin, used for creating
// different coloured care cards.
//
// Usage: @include care-card($color_nhsuk-blue, $color_nhsuk-white, 4px);
// See components/card/card
//

@mixin care-card($heading-background-color, $heading-text-color, $print-border-size) {
  .nhsuk-card--care__heading-container {
    background-color: $heading-background-color;
    color: $heading-text-color;
  }

  @include mq($media-type: print) {
    border: $print-border-size solid $nhsuk-print-text-color;
    color: $nhsuk-print-text-color;
    page-break-inside: avoid;
  }
}

//
// Print colour mixin, sets the text print colour
// warning callout, do and don't lists and panels.
//
// Usage: @include print-color($nhsuk-print-text-color);
// See components/_care-card
//

@mixin print-color($print-color) {
  @include mq($media-type: print) {
    color: $print-color;
    fill: $print-color;

    &:active,
    &:focus,
    &:visited {
      color: $nhsuk-print-text-color;
    }
  }
}

//
// Print hide mixin, hides the element from print.
//
// Usage: @include print-hide();
// See components/_care-card
//

@mixin print-hide() {
  @include mq($media-type: print) {
    display: none;
  }
}

//
// Flex mixin
// Usage: @include flex();
//

@mixin flex() {
  display: flex;
  flex-wrap: wrap;
}

//
// Flex item mixin
// Usage: @include flex-item();
//

@mixin flex-item() {
  display: flex;

  @include mq($until: desktop) {
    flex: 0 0 100%;
  }
}

//
// Remove margin mobile mixin, removes left and right
// margin at tablet breakpoint.
//

@mixin remove-margin-mobile() {
  @include mq($until: tablet) {
    margin-left: -$nhsuk-gutter-half;
    margin-right: -$nhsuk-gutter-half;
  }
}

/// NHS logo size helper
///
/// Saves duplicating the code for when using the logo as a link.
/// Used in the header and footer.

@mixin nhsuk-logo-size {
  height: 40px;
  width: 100px;
}

@mixin nhsuk-logo-size-small {
  height: 32px;
  width: 80px;
}