@nationalarchives/frontend 0.1.18-prerelease → 0.1.20-prerelease

package/nationalarchives/components/header/_index.scss

@@ -1,586 +1 @@
-@use "sass:math";
-@use "../../tools/colour";
-@use "../../variables/colour" as colourVars; // TODO
-@use "../../variables/grid";
-@use "../../tools/typography";
-@use "../../tools/media";
-
-// TODO: Only for the header component at the moment - remove on redesign
-@mixin uninvert {
-  @include colour.colour-css-vars;
-
-  .tna-template--system-theme & {
-    @include colour.colour-css-vars;
-
-    @media (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-dark;
-    }
-
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
-    }
-
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-high-contrast-dark;
-    }
-  }
-
-  .tna-template--light-theme & {
-    @include colour.colour-css-vars;
-  }
-
-  .tna-template--dark-theme & {
-    @include colour.colour-css-vars-dark;
-  }
-
-  .tna-template--high-contrast-theme & {
-    @include colour.colour-css-vars-high-contrast;
-  }
-
-  .tna-template--high-contrast-theme.tna-template--dark-theme & {
-    @include colour.colour-css-vars-high-contrast-dark;
-  }
-}
-
-.tna-header {
-  @include colour.invert;
-
-  color: colour.brand-colour("white");
-
-  background-color: colour.brand-colour("black");
-
-  &__exit {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-
-    text-align: right;
-
-    background-color: colourVars.$dark-grey;
-  }
-
-  &__exit-link {
-    text-decoration: none;
-    @include typography.relative-font-size(16);
-
-    &,
-    &:link,
-    &:visited {
-      color: #fff;
-    }
-
-    &:hover {
-      text-decoration: underline;
-
-      // .tna-header__exit-link-icon {
-      //   border-color: colour.$tna-yellow;
-
-      //   &::before {
-      //     border-top-color: colour.$tna-yellow;
-      //     border-right-color: colour.$tna-yellow;
-      //   }
-
-      //   &::after {
-      //     background-color: colour.$tna-yellow;
-      //   }
-      // }
-    }
-  }
-
-  &__exit-link-icon {
-    width: 0.825rem;
-    height: 0.825rem;
-    margin-right: 0.125rem;
-    margin-left: 0.5rem;
-
-    display: inline-block;
-
-    position: relative;
-
-    vertical-align: middle;
-
-    border: 0.125rem #fff solid;
-
-    &::before {
-      position: absolute;
-      top: -0.25rem;
-      right: -0.25rem;
-      z-index: 2;
-
-      border: 0.25rem transparent solid;
-      border-top-color: #fff;
-      border-right-color: #fff;
-
-      content: "";
-    }
-
-    &::after {
-      width: 0.25rem;
-      height: 0.825rem;
-
-      position: absolute;
-      top: -0.125rem;
-      right: -0.125rem;
-      z-index: 1;
-
-      background-color: #fff;
-
-      outline: 0.2rem colourVars.$dark-grey solid;
-
-      transform: rotate(45deg) translateX(50%);
-      transform-origin: 100% 0;
-
-      content: "";
-    }
-  }
-
-  &__contents {
-    &.tna-container {
-      justify-content: space-between;
-    }
-  }
-
-  &__logo {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  &__logo-link {
-    display: flex;
-    align-items: flex-end;
-
-    color: inherit;
-    text-decoration: none;
-
-    &,
-    &:link,
-    &:visited {
-      color: inherit;
-    }
-
-    // &--href {
-    //   &:hover {
-    //       outline: 0.375rem #fff solid;
-    //       outline-offset: 1px;
-
-    //     // .tna-logo__background {
-    //     //   fill: #fff;
-    //     // }
-
-    //     // .tna-logo__foreground {
-    //     //   fill: #000;
-    //     // }
-    //   }
-    // }
-  }
-
-  .tna-logo {
-    width: 6rem;
-    height: 6rem;
-
-    display: inline-block;
-  }
-
-  &__logo-link--href:hover .tna-logo {
-    outline: 0.375rem #fff solid;
-    outline-offset: 1px;
-  }
-
-  &__logo-link--href:active .tna-logo,
-  &__logo-link--href:focus .tna-logo {
-    outline: none;
-  }
-
-  .tna-logo__foreground {
-    fill: #fff;
-  }
-
-  .tna-logo__background {
-    fill: none;
-  }
-
-  &__logo-strapline {
-    margin: 0 0.75rem;
-
-    display: inline-block;
-
-    line-height: 2.125;
-    text-transform: uppercase;
-  }
-
-  &__navigation-toggle {
-    align-self: center;
-  }
-
-  &__hamburger {
-    width: 2rem;
-    height: 0.25rem;
-
-    display: block;
-
-    background-color: #fff;
-
-    transition: height 1ms 200ms;
-
-    &::before,
-    &::after {
-      height: 0.25rem;
-
-      display: block;
-
-      position: absolute;
-      right: 0;
-      left: 0;
-
-      background-color: inherit;
-
-      transition:
-        top 200ms 200ms,
-        bottom 200ms 200ms,
-        transform 200ms;
-
-      content: "";
-    }
-
-    &::before {
-      top: 0;
-    }
-
-    &::after {
-      bottom: 0;
-    }
-  }
-
-  &__navigation-toggle-button {
-    height: 2rem;
-    padding: 0;
-
-    display: block;
-
-    position: relative;
-
-    appearance: none;
-
-    font-size: 0;
-
-    background: none;
-
-    border: 0 transparent solid;
-    border-width: 0.25rem 0;
-
-    cursor: pointer;
-
-    &--opened {
-      .tna-header__hamburger {
-        height: 0;
-
-        &::before,
-        &::after {
-          transition:
-            top 200ms,
-            bottom 200ms,
-            transform 200ms 200ms;
-        }
-
-        &::before {
-          top: 0.625rem;
-
-          transform: rotate(-135deg);
-        }
-
-        &::after {
-          bottom: 0.625rem;
-
-          transform: rotate(135deg);
-        }
-      }
-    }
-  }
-
-  &--yellow,
-  &--pink,
-  &--orange,
-  &--green,
-  &--blue {
-    color: colour.brand-colour("black");
-
-    .tna-header__logo-link {
-      &:hover {
-        .tna-logo {
-          outline-color: #000;
-        }
-      }
-    }
-
-    .tna-logo__foreground {
-      fill: #000;
-    }
-
-    .tna-header__hamburger {
-      background-color: colour.brand-colour("black");
-    }
-  }
-
-  &--yellow {
-    background-color: colour.brand-colour("yellow");
-  }
-
-  &--pink {
-    background-color: colour.brand-colour("pink");
-  }
-
-  &--orange {
-    background-color: colour.brand-colour("orange");
-  }
-
-  &--green {
-    background-color: colour.brand-colour("green");
-  }
-
-  &--blue {
-    background-color: colour.brand-colour("blue");
-  }
-
-  &__navigation {
-    display: flex;
-    flex-direction: column-reverse;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-
-  &__top-navigation-items {
-    margin: 0;
-    padding: 1.25rem 0;
-
-    // order: 1;
-
-    list-style: none;
-
-    line-height: 1;
-  }
-
-  &__top-navigation-item {
-    margin-left: 1.5rem;
-
-    display: inline-block;
-  }
-
-  &__top-navigation-item-link {
-    display: inline-block;
-
-    text-decoration: none;
-    @include typography.relative-font-size(16);
-
-    &,
-    &:link,
-    &:visited {
-      color: inherit;
-    }
-
-    &:hover,
-    &--selected {
-      &,
-      &:link,
-      &:visited {
-        @include typography.interacted-text-decoration;
-      }
-    }
-  }
-
-  &__navigation-items {
-    margin: 0;
-    padding: 0;
-
-    // order: 2;
-
-    list-style: none;
-
-    white-space: nowrap;
-  }
-
-  &__navigation-item {
-    margin-left: 0.75rem;
-
-    display: inline-block;
-  }
-
-  &__navigation-item-link {
-    padding: 0.5rem 1rem;
-
-    display: inline-block;
-
-    @include typography.heading-font;
-    text-decoration: none;
-    line-height: 2;
-
-    // transition:
-    //   color 200ms,
-    //   background-color 200ms;
-
-    &,
-    &:link,
-    &:visited {
-      color: inherit;
-    }
-
-    &:hover,
-    &--selected {
-      &,
-      &:link,
-      &:visited {
-        @include uninvert;
-        @include colour.colour-font("font-dark");
-        @include colour.colour-background("page-background");
-      }
-      // transition:
-      //   color 50ms,
-      //   background-color 50ms;
-    }
-  }
-
-  @include media.on-larger-than-mobile {
-    .tna-header__navigation-toggle {
-      display: none;
-    }
-  }
-
-  @include media.on-mobile {
-    &__contents {
-      &.tna-container {
-        padding-right: 0;
-        padding-left: 0;
-      }
-    }
-
-    &__logo {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-
-      &.tna-column {
-        padding-right: grid.$gutter-width-mobile;
-        padding-left: grid.$gutter-width-mobile;
-      }
-    }
-
-    .tna-logo {
-      width: 4.5rem;
-      height: 4.5rem;
-    }
-
-    &__logo-strapline {
-      line-height: 1.55;
-    }
-
-    &__navigation-toggle {
-      &.tna-column {
-        padding-right: grid.$gutter-width-mobile;
-        padding-left: 0;
-      }
-    }
-
-    &__navigation {
-      @include uninvert;
-      @include colour.colour-font("font-base");
-      @include typography.relative-font-size(20);
-
-      align-items: stretch;
-      flex-direction: column;
-
-      &.tna-column {
-        padding-right: 0;
-        padding-left: 0;
-      }
-
-      .tna-template--js-enabled & {
-        display: none;
-
-        &--open {
-          display: flex;
-        }
-      }
-    }
-
-    &__top-navigation-items {
-      padding: 0.5rem 1rem;
-
-      // text-align: center;
-
-      @include colour.colour-background("page-background");
-
-      @include colour.colour-border("keyline", 1px, solid, bottom);
-    }
-
-    &__top-navigation-item {
-      margin: 0;
-      padding: 0.5rem;
-    }
-
-    &__top-navigation-item-link {
-    }
-
-    &__navigation-items {
-      width: 100%;
-
-      @include colour.colour-background("page-background");
-    }
-
-    &__navigation-item {
-      margin: 0;
-
-      display: block;
-
-      @include colour.colour-border("keyline", 1px, solid, bottom);
-    }
-
-    &__navigation-item-link {
-      padding-right: grid.$gutter-width-mobile;
-      padding-left: grid.$gutter-width-mobile + 1rem;
-
-      display: block;
-
-      position: relative;
-
-      line-height: #{math.div(1, 1.125) * 2};
-
-      &::after {
-        width: 0;
-
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-
-        @include colour.colour-background("font-dark");
-
-        // transition: width 200ms;
-
-        content: "";
-      }
-
-      &:hover {
-        &::after {
-          width: 0.25rem;
-
-          // transition: width 50ms;
-        }
-      }
-
-      &--selected {
-        &::after,
-        &:hover::after {
-          width: 0.5rem;
-        }
-      }
-    }
-  }
-
-  @include media.on-tiny {
-    .tna-logo {
-      width: 3.5rem;
-      height: 3.5rem;
-    }
-
-    &__logo-strapline {
-      line-height: 1.25;
-    }
-  }
-}
+@use "header";