@ndla/ui 33.4.4 → 33.4.5

package/src/TopicMenu/component.topic-menu.scss

@@ -1,960 +0,0 @@
-/**
-** TOPIC MENU (MAIN MENU)
-** 1. Container div (w/active toggle class)
-** 2. Active menu content
-** 5. Masthead when menu is active
-**/
-
-/* 1. */
-
-$padding-left-narrow: 32px;
-$left-margin-narrow-screen: 20px;
-$link-height: 52px;
-$navigation-row-width: 980px / 3;
-
-/* 2. */
-.c-topic-menu-container {
-  @include mq(tabletWide) {
-    display: inline-block;
-  }
-}
-.c-topic-menu-container .active {
-  background: transparent;
-  border: 2px solid transparent;
-  box-shadow: none;
-  color: $brand-color;
-  &:hover,
-  &:focus {
-    color: $brand-color;
-    box-shadow: $link--hover;
-    &:before {
-      @include svg_icon('close', $brand-color);
-    }
-  }
-  &:before {
-    @include svg_icon('close', $brand-color);
-    width: 32px;
-    height: 32px;
-    top: 12px;
-    left: 7px;
-  }
-}
-
-.c-topic-menu__content {
-  width: 100%;
-  background: $brand-grey--lightest;
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  padding: 0;
-  min-height: 100%;
-  &--fill-page {
-    min-height: calc(100vh - 77px);
-  }
-
-  @include mq(desktop) {
-    min-height: auto;
-    padding: 0 0 $spacing--large 0;
-    overflow: auto;
-  }
-}
-
-.c-topic-menu__subject-navigation {
-  position: relative;
-  flex-grow: 1;
-  display: flex;
-  flex-flow: column;
-  flex-flow: row;
-
-  @include mq($until: tabletWide) {
-    padding-bottom: 100px;
-    > :not(:last-child) {
-      display: none;
-    }
-  }
-
-  @include mq(tabletWide) {
-    transition: transform 400ms ease;
-    padding-bottom: $spacing--large;
-    min-height: 500px;
-    &--slide-0,
-    &--slide-1 {
-      transform: none;
-    }
-    &--slide-2 {
-      transform: translate3d(-$navigation-row-width, 0, 0);
-    }
-    &--slide-3 {
-      transform: translate3d(-$navigation-row-width * 2, 0, 0);
-    }
-    &--slide-4 {
-      transform: translate3d(-$navigation-row-width * 3, 0, 0);
-    }
-    &--slide-5 {
-      transform: translate3d(-$navigation-row-width * 4, 0, 0);
-    }
-    &--slide-6 {
-      transform: translate3d(-$navigation-row-width * 5, 0, 0);
-    }
-    &--slide-7 {
-      transform: translate3d(-$navigation-row-width * 6, 0, 0);
-    }
-    &--slide-8 {
-      transform: translate3d(-$navigation-row-width * 7, 0, 0);
-    }
-    &--slide-9 {
-      transform: translate3d(-$navigation-row-width * 8, 0, 0);
-    }
-    &--slide-10 {
-      transform: translate3d(-$navigation-row-width * 9, 0, 0);
-    }
-  }
-
-  @include mq(wide) {
-    &--slide-2 {
-      transform: none;
-    }
-    &--slide-3 {
-      transform: translate3d(-$navigation-row-width, 0, 0);
-    }
-    &--slide-4 {
-      transform: translate3d(-$navigation-row-width * 2, 0, 0);
-    }
-    &--slide-5 {
-      transform: translate3d(-$navigation-row-width * 3, 0, 0);
-    }
-    &--slide-6 {
-      transform: translate3d(-$navigation-row-width * 4, 0, 0);
-    }
-    &--slide-7 {
-      transform: translate3d(-$navigation-row-width * 5, 0, 0);
-    }
-    &--slide-8 {
-      transform: translate3d(-$navigation-row-width * 6, 0, 0);
-    }
-    &--slide-9 {
-      transform: translate3d(-$navigation-row-width * 7, 0, 0);
-    }
-    &--slide-10 {
-      transform: translate3d(-$navigation-row-width * 8, 0, 0);
-    }
-  }
-
-  @include mq(ultraWide) {
-    &--slide-2,
-    &--slide-3 {
-      transform: none;
-    }
-    &--slide-4 {
-      transform: translate3d(-$navigation-row-width, 0, 0);
-    }
-    &--slide-5 {
-      transform: translate3d(-$navigation-row-width * 2, 0, 0);
-    }
-    &--slide-6 {
-      transform: translate3d(-$navigation-row-width * 3, 0, 0);
-    }
-    &--slide-7 {
-      transform: translate3d(-$navigation-row-width * 4, 0, 0);
-    }
-    &--slide-8 {
-      transform: translate3d(-$navigation-row-width * 5, 0, 0);
-    }
-    &--slide-9 {
-      transform: translate3d(-$navigation-row-width * 6, 0, 0);
-    }
-    &--slide-10 {
-      transform: translate3d(-$navigation-row-width * 7, 0, 0);
-    }
-  }
-}
-
-.c-topic-menu__list {
-  padding: 0;
-  margin: 0 0 $spacing--large;
-  list-style: none;
-  overflow: visible;
-  @include mq($until: tabletWide) {
-    margin-bottom: 0;
-  }
-}
-
-.c-topic-menu__section {
-  flex-grow: 1;
-  flex-shrink: 0;
-  padding: 0 0 $spacing--large 0;
-  width: 100%;
-
-  @include mq(tabletWide) {
-    padding: 0 $spacing--small;
-    border-left: 1px solid $brand-color--light;
-    width: $navigation-row-width;
-    flex-grow: 0;
-  }
-  @include mq(desktop) {
-    padding: 0 $spacing;
-  }
-
-  &--main {
-    padding-bottom: 0;
-    flex-grow: 0;
-    border-left: 0;
-    .c-topic-menu__link--big {
-      @include mq($until: tabletWide) {
-        display: none;
-      }
-    }
-  }
-
-  &--sub-topic {
-    @include mq($until: tabletWide) {
-      @include font-size(16px, 20px);
-      padding-top: $spacing--large + $spacing;
-      padding-left: $spacing--large - 4px;
-
-      .c-topic-menu__link--big {
-        margin-bottom: 1px;
-        background: $brand-color--lighter;
-        display: flex;
-        align-items: center;
-        &:hover,
-        &:focus {
-          background: $brand-color--lighter;
-        }
-        .c-topic-menu__link-target {
-          box-shadow: none !important;
-        }
-        .c-topic-menu__link-label,
-        .c-topic-menu__arrow {
-          display: none;
-        }
-        > :last-child {
-          display: none;
-        }
-      }
-    }
-    @include mq($until: tabletWide) {
-      padding-left: 0;
-    }
-  }
-}
-
-.c-topic-menu {
-  &__competence {
-    flex-grow: 1;
-    background: $brand-color--lighter;
-    overflow: visible;
-
-    @include mq($until: tabletWide) {
-      padding: $spacing $spacing $spacing--large;
-      margin: 0;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      overflow-y: scroll;
-    }
-
-    @include mq(tabletWide) {
-      padding: $spacing $spacing $spacing--large;
-      margin: -$spacing--large $spacing 0 $spacing;
-      height: auto;
-    }
-
-    @include mq(desktop) {
-      padding: $spacing--large;
-      margin: -($spacing + $spacing--small) $spacing + $spacing--small 0 $spacing + $spacing--small;
-    }
-
-    & > * {
-      animation-name: fadeInLeft;
-      animation-duration: 0.5s;
-      transform: translate3d(0px, 0px, 0px);
-    }
-  }
-
-  &__filter-wrapper {
-    @include mq($until: tabletWide) {
-      padding: $left-margin-narrow-screen 0 0;
-    }
-  }
-
-  &__competence-close-button {
-    @include mq(tabletWide) {
-      display: none;
-    }
-    display: flex;
-    align-items: center;
-    border: 0;
-    padding: 0;
-    color: $brand-color;
-    background: none;
-    @include font-size(16px, 20px);
-    margin-bottom: $spacing;
-    @include mq($from: mobileWide) {
-      padding-left: $spacing--small;
-    }
-    .c-icon {
-      width: 24px;
-      height: 24px;
-      margin-right: 9px;
-    }
-  }
-
-  &__arrow {
-    margin-left: $spacing--small / 2;
-    .c-icon {
-      display: block;
-    }
-  }
-}
-
-/* 4. */
-.c-topic-menu__subject {
-  flex-shrink: 0;
-  margin-top: 0;
-  margin-bottom: $spacing;
-  padding: 0 $spacing;
-
-  @include mq($until: tabletWide) {
-    animation-name: fadeInLeft;
-    animation-duration: 0.5s;
-    transform: translate3d(0px, 0px, 0px);
-    padding: $left-margin-narrow-screen;
-  }
-
-  @include mq(desktop) {
-    margin-bottom: $spacing--small;
-    padding-left: $spacing + $spacing--small;
-    padding-right: $spacing + $spacing--small;
-  }
-
-  a {
-    @include mq(tabletWide) {
-      box-shadow: none;
-    }
-  }
-
-  &__header {
-    margin: 0 0 $spacing 0;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    @include mq(tabletWide) {
-      border-bottom: 1px solid rgba($brand-color, 0.3);
-      padding-bottom: $spacing--small;
-    }
-
-    @include mq($until: tabletWide) {
-      margin-bottom: 0;
-    }
-
-    & > h1 {
-      @include inuit-font-size(17px, 20px);
-      font-weight: $font-weight-semibold;
-      margin: 0;
-
-      @include mq(tabletWide) {
-        @include inuit-font-size(26px);
-      }
-
-      a,
-      button {
-        padding: 0;
-        padding-right: $spacing--small;
-        border: 0;
-        background: 0;
-        color: $brand-color;
-        font-weight: inherit;
-        margin: 0;
-        line-height: 1;
-        svg {
-          transition: transform 100ms ease;
-        }
-        &:hover,
-        &:focus {
-          svg {
-            transform: translateX($spacing--small / 4);
-          }
-        }
-        &:focus {
-          @include restore-outline();
-        }
-      }
-
-      @include mq($until: tabletWide) {
-        width: 100%;
-        a,
-        button {
-          background: $brand-color--lighter;
-          box-shadow: none;
-          width: 100%;
-          height: $link-height;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 0 $spacing;
-          &:hover,
-          &:focus {
-            background: $brand-color--lighter;
-          }
-        }
-      }
-      @include mq($until: mobileWide) {
-        a,
-        button {
-          padding: 0 $left-margin-narrow-screen;
-        }
-      }
-    }
-    &__menu-filter {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: -$spacing--small;
-      button {
-        margin: $spacing--small $spacing--small 0 0;
-      }
-    }
-  }
-
-  &--hasFilter {
-    margin-bottom: 1px;
-
-    & > h1 {
-      margin: 0 0 $spacing--medium 0;
-
-      @include mq(tabletWide) {
-        margin: 0 0 $spacing 0;
-      }
-    }
-  }
-
-  .c-filter {
-    position: relative;
-    &__list {
-      padding-top: 0;
-      border-top: 0;
-    }
-
-    &__item {
-      margin-bottom: $spacing--small;
-    }
-
-    &__label {
-      margin-left: 0;
-      font-weight: 600;
-      @include mq($until: tabletWide) {
-        @include visually-hidden();
-      }
-    }
-  }
-}
-
-.c-topic-menu__back-button {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  color: $brand-color;
-  background: none;
-  @include font-size(14px, 20px);
-  position: absolute;
-  transform: translateX(28px);
-  @include mq($until: mobileWide) {
-    transform: translateX($left-margin-narrow-screen);
-  }
-  top: $spacing;
-
-  @include mq(tabletWide) {
-    display: none;
-  }
-  .c-icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 9px;
-  }
-}
-
-.c-topic-menu__back-button-slide-wrapper {
-  @include mq($until: tabletWide) {
-    display: none;
-  }
-  height: $spacing;
-  .c-topic-menu__back-button-slides {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    border: 0;
-    padding: 0;
-    color: $brand-color;
-    background: none;
-    display: none;
-    @include font-size(14px, 20px);
-    .c-icon {
-      width: 24px;
-      height: 24px;
-      margin-right: 9px;
-    }
-    animation-duration: 400ms;
-    animation-delay: 400ms;
-    animation-fill-mode: forwards;
-    opacity: 0;
-    &--slide-0,
-    &--slide-1,
-    &--slide-2,
-    &--slide-3,
-    &--slide-4,
-    &--slide-5,
-    &--slide-6,
-    &--slide-7,
-    &--slide-8,
-    &--slide-9,
-    &--slide-10 {
-      display: flex;
-    }
-    @include mq(tabletWide) {
-      &--slide-2,
-      &--slide-3,
-      &--slide-4,
-      &--slide-5,
-      &--slide-6,
-      &--slide-7,
-      &--slide-8,
-      &--slide-9,
-      &--slide-10 {
-        display: flex;
-        animation-name: fadeIn;
-      }
-      &--slide-0,
-      &--slide-1 {
-        display: none;
-      }
-    }
-    @include mq(desktop) {
-      &--slide-2,
-      &--slide-3,
-      &--slide-4,
-      &--slide-5,
-      &--slide-6,
-      &--slide-7,
-      &--slide-8,
-      &--slide-9,
-      &--slide-10 {
-        display: flex;
-        animation-name: fadeIn;
-      }
-      &--slide-0,
-      &--slide-1 {
-        display: none;
-      }
-    }
-    @include mq(wide) {
-      &--slide-3,
-      &--slide-4,
-      &--slide-5,
-      &--slide-6,
-      &--slide-7,
-      &--slide-8,
-      &--slide-9,
-      &--slide-10 {
-        display: flex;
-        animation-name: fadeIn;
-      }
-      &--slide-2 {
-        display: none;
-      }
-    }
-    @include mq(ultraWide) {
-      &--slide-4,
-      &--slide-5,
-      &--slide-6,
-      &--slide-7,
-      &--slide-8,
-      &--slide-9,
-      &--slide-10 {
-        display: flex;
-        animation-name: fadeIn;
-      }
-      &--slide-3 {
-        display: none;
-      }
-    }
-  }
-}
-
-.c-topic-menu__close-button {
-  color: $brand-color;
-  background: none;
-  border: 0;
-  display: flex;
-  align-items: center;
-  padding: $spacing--small;
-  cursor: pointer;
-
-  @include mq($until: mobileWide) {
-    padding-left: 0;
-    margin-left: 0;
-  }
-
-  .c-icon {
-    height: 24px;
-    width: 24px;
-    margin-right: $spacing--small;
-  }
-}
-
-.c-topic-menu__home-icon {
-  margin-top: -5px;
-  margin-right: $spacing--small/2;
-}
-
-.c-topic-menu__back {
-  margin-top: $spacing--large;
-  margin-bottom: $spacing--medium;
-  padding: 0 $spacing + $spacing--small;
-
-  @include font-size(18px, 23px);
-  display: block;
-  color: $brand-color;
-
-  &--wide {
-    @include mq($until: tabletWide) {
-      display: none;
-    }
-  }
-  &--narrow {
-    @include mq(tabletWide) {
-      display: none;
-    }
-  }
-  @include mq($until: desktop) {
-    padding: 0 $spacing;
-  }
-  @include mq($until: tabletWide) {
-    animation-name: fadeInLeft;
-    animation-duration: 0.5s;
-    transform: translate3d(0px, 0px, 0px);
-    position: fixed;
-    bottom: 0;
-    transition: bottom 300ms ease;
-    left: 0;
-    right: 0;
-    z-index: 9999;
-    padding: 0;
-    margin: 0;
-    .c-topic-menu__back-link {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      color: #fff;
-      height: $link-height;
-      background: $brand-color;
-      line-height: 24px;
-      box-shadow: none;
-      padding-left: $spacing;
-      &:hover,
-      &:focus {
-        box-shadow: none;
-      }
-    }
-    animation-name: fadeInBottomFixed;
-    opacity: 0;
-    animation-duration: 450ms;
-    animation-delay: 600ms;
-    animation-fill-mode: forwards;
-    &--hidden-phone {
-      bottom: -52px;
-    }
-  }
-  @include mq($until: mobileWide) {
-    .c-topic-menu__back-link {
-      padding-left: $left-margin-narrow-screen;
-    }
-  }
-}
-
-.c-topic-menu__back-link {
-  box-shadow: none;
-  color: $brand-color;
-  &:hover {
-    box-shadow: $link;
-  }
-}
-
-.c-topic-menu__link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  min-height: $link-height;
-  line-height: 24px;
-  padding: $spacing--small / 2 $spacing--small;
-
-  transition: all 0.1s ease-in-out;
-  animation-name: fadeInLeft;
-  animation-duration: 0.5s;
-  transform: translate3d(0px, 0px, 0px);
-
-  > span {
-    display: flex;
-  }
-  @include mq($until: tabletWide) {
-    @include font-size(17px, 20px);
-    font-weight: $font-weight-normal;
-    padding-left: $spacing;
-    padding-right: $spacing;
-    background-color: $brand-color--lighter;
-    .c-tooltip__content {
-      transform: translate3d(2px, -2px, 0);
-    }
-    > :last-child {
-      display: flex;
-    }
-  }
-
-  @include mq($until: mobileWide) {
-    padding-left: $left-margin-narrow-screen;
-    padding-right: $left-margin-narrow-screen;
-  }
-
-  @include mq(tabletWide) {
-    font-weight: $font-weight-semibold;
-    &--big > .c-icon {
-      display: none;
-    }
-    &:not(&--big) {
-      > :last-child {
-        display: none;
-      }
-    }
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $brand-color--light;
-    }
-  }
-
-  &--big {
-    display: block;
-    margin-bottom: $spacing--medium;
-    box-shadow: none;
-    height: auto;
-    min-height: $link-height;
-
-    .c-topic-menu__link-wrapper {
-      border-bottom: 1px solid $brand-color--dark;
-      padding-bottom: $spacing--small;
-      display: flex;
-      flex-wrap: wrap;
-      @include mq($until: tabletWide) {
-        border: 0;
-        padding-bottom: 0;
-      }
-    }
-    .c-topic-menu__link-label {
-      display: block;
-      flex: 0 0 auto;
-    }
-
-    .c-topic-menu__link-target {
-      display: flex;
-      align-items: center;
-      .c-icon {
-        transition: transform 100ms ease;
-      }
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-    .c-topic-menu__link-target-name {
-      word-break: break-word;
-    }
-
-    &:hover {
-      .c-topic-menu__link-target {
-        .c-icon {
-          transform: translateX($spacing--small / 4);
-        }
-      }
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: transparent;
-    }
-
-    @include mq(desktop) {
-      line-height: 30px;
-    }
-  }
-
-  background: none;
-  border: 0;
-  color: $brand-color--dark;
-}
-
-.c-topic-menu__link-label {
-  color: $black;
-  text-decoration: none;
-  padding-right: $spacing--small;
-  display: inline;
-  font-weight: 400;
-}
-
-.c-topic-menu__link-target {
-  font-weight: 600;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.c-topic-menu__topic-item,
-.c-topic-menu__subtopic-item {
-  margin-bottom: 1px;
-
-  &--active {
-    & > .c-topic-menu__link {
-      background-color: $brand-color--light;
-    }
-  }
-}
-
-.c-topic-menu__subtopic-item {
-  a {
-    font-weight: 400;
-    box-shadow: none;
-  }
-}
-
-/* 5. */
-.c-topic-menu__masthead {
-  width: 100%;
-  background: $white;
-  z-index: 99;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: $masthead-height;
-  padding: 0 $spacing;
-  border-bottom: 1px solid $brand-grey--lighter;
-  @include mq($until: mobileWide) {
-    padding: 0 $left-margin-narrow-screen;
-  }
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  @include mq(desktop) {
-    position: absolute;
-    padding: 0 $spacing--large;
-  }
-
-  .c-logo {
-    display: none;
-    @include mq(desktop) {
-      display: block;
-    }
-  }
-
-  &-left,
-  &-right {
-    display: flex;
-    align-items: center;
-  }
-
-  &-right {
-    justify-content: flex-end;
-    margin-right: 16px;
-  }
-}
-.c-topic-menu__search {
-  display: none;
-  @include mq(desktop) {
-    display: inline-block;
-  }
-  width: 200px;
-  text-align: center;
-  color: $brand-color;
-  padding: 0 $spacing--large;
-  padding-top: 2px;
-  cursor: pointer;
-  flex-grow: 0;
-  @include inuit-font-size(16px);
-}
-.c-topic-menu__search-icon {
-  width: 30px;
-  height: 30px;
-  display: inline-block;
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-}
-.c-topic-menu__right-filler {
-  @include mq(desktop) {
-    width: 200px;
-    height: 100px;
-    align-self: flex-end;
-    flex-grow: 2;
-  }
-}
-.c-topic-menu__topic-title-icon {
-  border: 0;
-  background: none;
-  color: $brand-color;
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.c-topic-menu__tooltipContainer {
-  padding-left: $spacing--small / 2;
-  display: flex;
-  align-items: center;
-  .c-tooltip__content {
-    animation-name: delayShowTooltipIcon;
-    animation-duration: 1s;
-  }
-}
-
-.c-topic-menu__all-subjects {
-  margin-top: 0;
-  margin-bottom: $spacing;
-  padding: 0 $spacing;
-  max-width: 1024px;
-  animation-name: fadeInLeft;
-  animation-duration: 0.5s;
-
-  @include mq($until: tabletWide) {
-    padding: 0 $left-margin-narrow-screen 100px;
-  }
-
-  @include mq(desktop) {
-    margin-bottom: $spacing--small;
-    padding-left: $spacing + $spacing--small;
-    padding-right: $spacing + $spacing--small;
-  }
-  & > nav:first-child {
-    margin-top: 0;
-  }
-}
-
-@keyframes delayShowTooltipIcon {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 100;
-  }
-}