@qite/tide-components 1.0.1

package/styles/components/_navbar.scss

@@ -0,0 +1,765 @@
+@use '../components/mixins' as mixins;
+
+.nav {
+  &__subnav {
+    background: var(--tide-booking-subnav-background);
+    border: var(--tide-booking-subnav-border);
+    border-radius: var(--tide-booking-subnav-border-radius);
+    box-shadow: var(--tide-booking-subnav-box-shadow);
+    height: 40px;
+    display: none;
+    align-items: center;
+
+    @include mixins.media-md {
+      display: flex;
+    }
+
+    &__container {
+      @include mixins.container-wide();
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+    }
+
+    &__links {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      height: 100%;
+    }
+
+    &__link {
+      background: var(--tide-booking-subnav-link-background);
+      border-bottom: var(--tide-booking-subnav-link-border-bottom);
+      text-decoration: var(--tide-booking-subnav-link-text-decoration);
+      color: var(--tide-booking-subnav-link-color);
+      font-weight: var(--tide-booking-subnav-link-font-weight);
+      font-family: var(--tide-booking-subnav-link-font-family);
+      font-size: 12px;
+      padding: 0 8px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        background: var(--tide-booking-subnav-link-hover-background);
+        border-bottom: var(--tide-booking-subnav-link-hover-border-bottom);
+        text-decoration: var(--tide-booking-subnav-link-hover-text-decoration);
+        color: var(--tide-booking-subnav-link-hover-color);
+      }
+    }
+
+    &__member {
+      color: var(--tide-booking-subnav-link-color);
+      font-weight: var(--tide-booking-subnav-link-font-weight);
+      font-family: var(--tide-booking-subnav-link-font-family);
+      font-size: 12px;
+      padding: 0 8px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+    }
+
+    &__languages {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      height: 100%;
+
+      &__icon {
+        opacity: 0.85;
+      }
+
+      &__button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        padding: 0px 8px;
+        height: 100%;
+        font: inherit;
+        color: inherit;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.06);
+        }
+
+        &:focus-visible {
+          outline: 2px solid rgba(0, 0, 0, 0.35);
+          outline-offset: 2px;
+        }
+      }
+
+      &__value {
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+      }
+
+      &__chevron {
+        transition: transform 160ms ease;
+      }
+
+      // rotate chevron when open
+      .is-open ~ &__button &__chevron {
+        transform: rotate(180deg);
+      }
+
+      &__dropdown {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        left: 0;
+        min-width: 190px;
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        padding: 6px;
+
+        opacity: 0;
+        transform: translateY(-6px);
+        pointer-events: none;
+        transition: opacity 140ms ease, transform 140ms ease;
+        z-index: 50;
+
+        @include mixins.media-md {
+          bottom: auto;
+          left: auto;
+          top: calc(100% + 8px);
+          right: 0;
+        }
+
+        &.is-open {
+          opacity: 1;
+          transform: translateY(0);
+          pointer-events: auto;
+        }
+      }
+
+      &__option {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 40px 1fr;
+        gap: 10px;
+        align-items: center;
+        text-align: left;
+
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+
+        padding: 10px 10px;
+        border-radius: 10px;
+        font: inherit;
+        color: inherit;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.06);
+        }
+
+        &:focus-visible {
+          outline: 2px solid rgba(0, 0, 0, 0.35);
+          outline-offset: 2px;
+        }
+
+        &.is-active {
+          background: rgba(0, 0, 0, 0.08);
+        }
+
+        &__code {
+          font-weight: 500;
+          letter-spacing: 0.02em;
+        }
+
+        &__label {
+          opacity: 0.85;
+          font-size: 0.95em;
+        }
+      }
+    }
+  }
+
+  &__primary {
+    background: var(--tide-booking-nav-background);
+    border: var(--tide-booking-nav-border);
+    border-radius: var(--tide-booking-nav-border-radius);
+    box-shadow: var(--tide-booking-nav-box-shadow);
+    position: sticky;
+    display: flex;
+    align-items: center;
+    top: 0px;
+    left: 0;
+    height: 60px;
+    z-index: 20;
+
+    @include mixins.media-md {
+      height: 80px;
+    }
+  }
+
+  &__container {
+    @include mixins.container-wide();
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    height: 100%;
+    z-index: 0;
+    background: var(--tide-booking-nav-container-background);
+    box-shadow: var(--tide-booking-nav-container-box-shadow);
+    border: var(--tide-booking-nav-container-border);
+    border-radius: var(--tide-booking-nav-container-border-radius);
+  }
+
+  &__wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 20px;
+  }
+
+  &__logo {
+    width: auto;
+    height: 100%;
+    padding: 15px 0px;
+    cursor: pointer;
+
+    svg {
+      height: 100%;
+      width: auto;
+      display: block;
+    }
+
+    img {
+      height: 100%;
+      width: auto;
+      display: block;
+    }
+  }
+
+  &__links {
+    display: none;
+    align-items: center;
+    height: 100%;
+
+    @include mixins.media-md {
+      display: flex;
+    }
+  }
+
+  &__link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 0 15px;
+    text-decoration: var(--tide-booking-nav-link-text-decoration);
+    color: var(--tide-booking-nav-link-color);
+    background: var(--tide-booking-nav-link-background);
+    border-bottom: var(--tide-booking-nav-link-border-bottom);
+    line-height: var(--tide-booking-nav-link-font-line-height);
+    font-weight: var(--tide-booking-nav-link-font-weight);
+    font-family: var(--tide-booking-nav-link-font-family);
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+      background: var(--tide-booking-nav-link-hover-background);
+      color: var(--tide-booking-nav-link-hover-color);
+      border-bottom: var(--tide-booking-nav-link-hover-border-bottom);
+      text-decoration: var(--tide-booking-nav-link-hover-text-decoration);
+    }
+
+    &:focus {
+      background: var(--tide-booking-nav-link-active-background);
+      color: var(--tide-booking-nav-link-active-color);
+      border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+      text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+    }
+
+    &--active {
+      background: var(--tide-booking-nav-link-active-background);
+      color: var(--tide-booking-nav-link-active-color);
+      border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+      text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+
+      &:hover {
+        background: var(--tide-booking-nav-link-active-background);
+        color: var(--tide-booking-nav-link-active-color);
+        border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+        text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+      }
+    }
+  }
+
+  &__link-group {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: relative;
+
+    @include mixins.media-md {
+      position: static;
+    }
+
+    &--active {
+      .nav__link--has-dropdown::after {
+        transform: rotate(180deg);
+      }
+
+      .nav__dropdown {
+        position: relative;
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+
+      .nav__dropdown--small {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__link--has-dropdown {
+    &::after {
+      content: '';
+      display: inline-block;
+      margin-left: 8px;
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 5px solid currentColor;
+      opacity: 0.7;
+      transform: rotate(0deg);
+      transition: all 300ms ease-in-out;
+    }
+  }
+
+  &__dropdown {
+    position: absolute;
+    width: 100%;
+    background: #fff;
+    border-top: none;
+    opacity: 0;
+    padding: 20px 0px;
+    transform: translateY(-10px);
+    pointer-events: none;
+    transition: opacity 180ms ease, transform 180ms ease; // below nav (20) but above content
+
+    @include mixins.media-md {
+      position: absolute;
+      left: 0;
+      top: 80px;
+      z-index: 19;
+      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
+    }
+
+    &__container {
+      @include mixins.container-wide();
+    }
+
+    &__cols {
+      display: grid;
+      grid-template-columns: 225px 1fr;
+      gap: 60px;
+    }
+
+    &__toggles {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__toggle {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      background: transparent;
+      color: gray;
+      border: none;
+      border-bottom: none;
+      font-size: 16px;
+      cursor: pointer;
+      padding: 15px;
+      text-align: left;
+      transition: all 0.3s ease-in-out;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background: var(--tide-booking-gray-xlight);
+        border: none;
+        color: gray;
+        border-bottom: none;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      &--active {
+        color: #333399;
+        background: #f8f8fd;
+        border: none;
+        border-bottom: none;
+      }
+    }
+
+    &__col {
+      max-height: 22.125rem;
+      overflow-x: hidden;
+      overflow-y: auto;
+      @extend %scrollbar-thin;
+
+      &__items {
+        column-count: 4;
+        column-gap: 2rem;
+      }
+    }
+
+    &__item {
+      margin-bottom: 20px;
+
+      a {
+        color: #666666;
+        text-decoration: none;
+        transition: all 0.3s ease-in-out;
+
+        &:hover {
+          color: #333399;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &--small {
+      left: 0px;
+      top: 0px;
+      width: auto;
+      border-radius: 0px;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 20px 30px;
+      padding-bottom: 0px;
+      display: flex;
+      flex-direction: column;
+      gap: 0px;
+
+      @include mixins.media-md {
+        width: auto;
+        left: 50%;
+        top: 80px;
+        transform: translate(-50%, -10px);
+        width: auto;
+      }
+    }
+  }
+
+  &__link-group--small {
+    position: relative;
+  }
+
+  &__link-group:hover,
+  &__link-group:focus-within {
+    .nav__link--has-dropdown::after {
+      transform: rotate(180deg);
+    }
+
+    .nav__dropdown {
+      @include mixins.media-md {
+        position: absolute;
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+    }
+
+    .nav__dropdown--small {
+      @include mixins.media-md {
+        position: absolute;
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__search {
+    display: none; // desktop search hidden by default (mobile uses --mobile form)
+    align-items: center;
+    height: 100%;
+
+    @include mixins.media-md {
+      display: flex;
+    }
+
+    &__form {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    &__field {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &__input {
+      width: 220px;
+      height: 100%;
+
+      padding: 0 30px 0 16px; // room for button
+      font: inherit;
+      color: inherit;
+
+      @include mixins.media-md {
+        width: 240px;
+      }
+    }
+
+    &__button {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      width: 34px;
+      height: 34px;
+      border-radius: 999px;
+
+      border: 0;
+      cursor: pointer;
+      background: transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      transition: background 0.3s ease-in-out;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.06);
+        color: inherit;
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba(0, 0, 0, 0.35);
+        outline-offset: 2px;
+      }
+    }
+
+    &__clear {
+      position: absolute;
+      right: 40px; // left of search button
+      top: 50%;
+      transform: translateY(-50%);
+
+      width: 28px;
+      height: 28px;
+      border-radius: 999px;
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease, background 0.15s ease;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.06);
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba(0, 0, 0, 0.35);
+        outline-offset: 2px;
+      }
+    }
+
+    &__field--has-value {
+      .nav__search__clear {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    &__form--mobile {
+      display: flex;
+      width: 100%;
+      padding: 14px 20px 8px;
+
+      // Mobile menu exists only under md, but make sure this doesn't show on desktop
+      @include mixins.media-md {
+        display: none;
+      }
+
+      .nav__search__field {
+        width: 100%;
+        height: 46px;
+      }
+
+      .nav__search__input {
+        width: 100%;
+        padding: 0 44px 0 14px;
+      }
+    }
+  }
+
+  &__menu {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    padding: 0;
+
+    @include mixins.media-md {
+      display: none;
+    }
+
+    &__line {
+      fill: none;
+      stroke: black;
+      stroke-width: 6;
+      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+
+      &--1 {
+        stroke-dasharray: 60 207;
+        stroke-width: 6;
+      }
+
+      &--2 {
+        stroke-dasharray: 60 60;
+        stroke-width: 6;
+      }
+
+      &--3 {
+        stroke-dasharray: 60 207;
+        stroke-width: 6;
+      }
+    }
+
+    &--opened {
+      .nav__menu__line {
+        &--1 {
+          stroke-dasharray: 90 207;
+          stroke-dashoffset: -134;
+          stroke-width: 6;
+        }
+
+        &--2 {
+          stroke-dasharray: 1 60;
+          stroke-dashoffset: -30;
+          stroke-width: 6;
+        }
+
+        &--3 {
+          stroke-dasharray: 90 207;
+          stroke-dashoffset: -134;
+          stroke-width: 6;
+        }
+      }
+    }
+  }
+
+  &__mobile-menu {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 100%;
+    height: 0vh;
+    background: var(--tide-booking-nav-mobile-menu-background);
+    border: var(--tide-booking-nav-mobile-menu-border);
+    border-radius: var(--tide-booking-nav-mobile-menu-border-radius);
+    box-shadow: var(--tide-booking-nav-mobile-menu-box-shadow);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    z-index: -5;
+    opacity: 0;
+    padding-bottom: 20px;
+    transform: translateY(-1000px);
+    transition: all 0.3s ease-in-out;
+
+    @include mixins.media-md {
+      display: none;
+    }
+
+    &--active {
+      opacity: 1;
+      transform: translateY(0);
+      height: calc(100vh - 60px);
+      z-index: -1;
+    }
+
+    &__wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__link {
+      width: 100%;
+      padding: 20px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      gap: 5px;
+      text-decoration: var(--tide-booking-nav-link-text-decoration);
+      color: var(--tide-booking-nav-link-color);
+      background: var(--tide-booking-nav-link-background);
+      border-bottom: solid 1.5px #efefef;
+      line-height: var(--tide-booking-nav-link-font-line-height);
+      font-weight: var(--tide-booking-nav-link-font-weight);
+      font-family: var(--tide-booking-nav-link-font-family);
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        background: var(--tide-booking-nav-link-hover-background);
+        color: var(--tide-booking-nav-link-hover-color);
+        border-bottom: var(--tide-booking-nav-link-hover-border-bottom);
+        text-decoration: var(--tide-booking-nav-link-hover-text-decoration);
+      }
+
+      &--active {
+        background: var(--tide-booking-nav-link-active-background);
+        color: var(--tide-booking-nav-link-active-color);
+        border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+        text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+
+        &:hover {
+          background: var(--tide-booking-nav-link-active-background);
+          color: var(--tide-booking-nav-link-active-color);
+          border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+          text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+        }
+      }
+    }
+
+    .nav__subnav {
+      &__links {
+        height: 30px;
+      }
+    }
+  }
+}