wagtail/client/scss/components/_header.scss

@use 'sass:math';
@use 'sass:color';

header {
  @apply w-text-primary w-mb-8;

  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  padding-inline-start: 110px;
  padding-inline-end: 20px;

  a {
    @apply w-text-primary w-underline;
  }

  h1,
  h2 {
    @apply w-text-primary;
    margin: 0;
  }

  h1 {
    @apply w-h1;
    position: relative;

    > svg.icon {
      position: absolute;
      inset-inline-start: -1.5em;
      top: 0.125em;
      max-width: 1em;
      max-height: 1em;
      vertical-align: text-top;
    }

    span {
      margin-inline-start: 0.3125rem;
      font-weight: 400;
    }
  }

  .col {
    float: left;
    margin-inline-end: 2em;
  }

  .left {
    float: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .hasform &:first-child {
      padding-bottom: 0.5em;
      float: none;
    }
  }

  .right {
    text-align: end;
    float: right;
  }

  .search-form .icon {
    @include svg-icon(1.2rem);
    color: theme('colors.primary.DEFAULT');
    position: absolute;
    top: 0;
    height: 100%;
    inset-inline-start: 0.7em;
  }

  // For case where content below header should merge with it
  &.merged {
    margin-bottom: 0;
    padding-bottom: 1rem;
  }

  &.no-border {
    border: 0;

    @include media-breakpoint-down(xs) {
      // To all hamburger menu to be visible
      padding-inline-start: 1.6em;
      padding-inline-end: 1.6em;
      padding-top: 11px;

      .nice-padding {
        margin-inline-start: -$desktop-nice-padding;
      }
    }
  }

  &.merged.no-border {
    padding-bottom: 0;
  }

  &.no-v-padding {
    padding-top: 0;
    padding-bottom: 0;
  }

  .button {
    background-color: $color-teal-darker;

    &:hover {
      background-color: $color-teal-dark;
    }
  }

  .button-secondary {
    color: $color-teal-darker;
    background-color: transparent;
  }

  label {
    @include visuallyhidden();
  }

  .error-message {
    color: inherit;
  }

  .fields {
    margin-top: -0.5em;

    li {
      padding-bottom: 0;
    }

    .field {
      padding: 0;
    }
  }

  .field-content {
    width: auto;
    padding: 0;
  }

  .last-updated {
    ul {
      padding: 0;
    }

    li {
      display: inline;
      margin-inline-end: 2em;
    }

    .avatar.small {
      margin-inline-start: 0;
    }

    a {
      font-weight: bold;
    }
  }
}

// Media for Windows High Contrast
@media (forced-colors: $media-forced-colours) {
  header .field-content {
    border: 0.1em solid $system-color-link-text;
  }
}

@include media-breakpoint-up(sm) {
  header {
    padding-top: 1.5rem;
    padding-inline-start: 90px;
    padding-inline-end: 90px;

    .left {
      float: left;
      margin-inline-end: 0;

      &:first-child {
        padding-bottom: 0;
        float: left;
      }
    }

    .second {
      clear: none;

      .right,
      .left {
        float: right;
      }
    }

    h1.icon:before {
      display: inline-block;
    }

    .col3 {
      @include column(3);
    }

    .col3.actionbutton {
      width: auto;
    }

    .col6 {
      @include column(6);
    }

    .col9 {
      @include column(9);
    }
  }
}