pixel-react 1.13.43 → 1.13.44

package/lib/styles/MegaMenu.scss

@@ -1,778 +0,0 @@
-@use '../../../breakpoints.scss' as *;
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-@mixin flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-@mixin flex-space-between {
-  display: flex;
-  justify-content: space-between;
-}
-.ff-navbar-bg {
-  position: sticky;
-  z-index: 1000;
-  top: 0;
-}
-.ff-navbar {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 10px 20px;
-  position: relative;
-  @include groupXsSmMd {
-    justify-content: space-between;
-  }
-  .logo {
-    position: relative;
-    left: 0px;
-  }
-  a {
-    text-decoration: none;
-    color: var(--base-bg-color);
-    transition: color 0.3s ease;
-    letter-spacing: 0.005em;
-  }
-}
-.ff-menu {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  .ff-menu-item {
-    position: relative;
-
-    a {
-      padding: 10px 15px;
-      display: flex;
-
-      &:hover {
-        color: var(--button-text-color);
-        background-color: var(--white-color);
-        border-radius: 32px;
-      }
-      span svg {
-        width: 10px;
-        height: 10px;
-      }
-    }
-    .menu-item-hover-bg {
-      background: var(--base-bg-color);
-      border-radius: 32px;
-      color: var(--ff-primary-color);
-      &:hover {
-        // background: var(--base-bg-color);
-        border-radius: 32px;
-        color: var(--ff-primary-color);
-      }
-    }
-    .menu-item-hover-bg-none {
-      background: none;
-    }
-    // Dropdown Menu
-    .ff-dropdown {
-      display: none;
-      position: absolute;
-      top: 60px;
-      overflow: hidden;
-      background-color: var(--base-bg-color);
-      color: var(--description-text);
-      list-style: none;
-      margin: 0;
-      box-shadow: 0 0 24px -8px var(--toggle-strip-shadow);
-      z-index: 1000;
-      visibility: hidden;
-      opacity: 0;
-      border-radius: 10px;
-      min-width: 1200px;
-      padding: 25px;
-      transition: height 0.3s ease;
-      &.show {
-        visibility: visible;
-        animation: dropdown-open 2s ease forwards;
-      }
-
-      &.hide {
-        animation: dropdown-close 2s ease forwards;
-        visibility: hidden;
-      }
-      li {
-        padding: 8px;
-        border: 2px solid transparent;
-        border-radius: 8px;
-        box-sizing: border-box;
-        &:hover {
-          .right-arrow {
-            display: block;
-            transform: translateY(0);
-            opacity: 1;
-            transition: transform 0.3s ease-in, opacity 0.3s ease-in;
-          }
-        }
-
-        a {
-          padding: 10px 20px;
-          display: block;
-        }
-        p {
-          margin-right: 50px;
-          letter-spacing: 0.005em;
-          line-height: 20px;
-        }
-        h3 {
-          margin-top: 1px;
-        }
-      }
-    }
-    .product-left {
-      left: -24vw;
-    }
-    .solution-left {
-      left: -33vw;
-    }
-    .resource-left {
-      left: -43vw;
-    }
-    .product-left,
-    .solution-left,
-    .resource-left {
-      visibility: visible;
-      opacity: 1;
-      transform: scaleY(1);
-    }
-  }
-}
-
-.item-header {
-  flex: 1;
-}
-.item-description {
-  flex: 100%;
-}
-.hover-container {
-  border: 1px solid transparent;
-  transition: background-color 0.3s ease, border 0.3s ease;
-  @include xs {
-    border: 1px solid transparent;
-    border-bottom: 1px solid var(--border-color);
-  }
-  @include sm {
-    border: 1px solid transparent;
-    border-bottom: 1px solid var(--border-color);
-  }
-  &:hover,
-  &.active {
-    cursor: pointer;
-
-    background-color: var(--ff-primary-10-color);
-    @include sm {
-      background-color: transparent;
-      border-bottom: 1px solid var(--border-color);
-    }
-    @include xs {
-      background-color: transparent;
-      border-bottom: 1px solid var(--border-color);
-    }
-  }
-
-  .arrow-hide-icon {
-    position: absolute;
-    right: 0;
-    top: 2px;
-    opacity: 0;
-    transform: translateX(-5px);
-    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  }
-
-  .arrow-show {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.nav-hamburger {
-  display: none;
-}
-.nav-button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-@include groupXsSmMd {
-  .nav-hamburger {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    gap: 10px;
-    img {
-      overflow: visible;
-    }
-  }
-  .ff-menu,
-  .nav-button {
-    display: none;
-  }
-}
-
-@include lg {
-  .sliding-menu {
-    display: none;
-  }
-}
-@include xl {
-  .sliding-menu {
-    display: none;
-  }
-}
-.full-screen-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--base-bg-color);
-  color: var(--base-bg-color);
-  @include flex-center;
-  flex-direction: column;
-  z-index: 1000; // Ensure it appears above all other elements
-  transform: translateY(-100%); // Initial position is hidden
-  transition: transform 0.3s ease-in-out;
-}
-
-.full-screen-menu.open {
-  transform: translateY(0); // Show the menu when open
-}
-
-.full-screen-menu nav {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  background-color: var(--base-bg-color);
-  z-index: 1010;
-}
-.full-screen-menu section {
-  flex: 1;
-  overflow-y: auto;
-  width: 100%;
-  padding: 20px;
-  @include md {
-    width: 100%;
-    overflow-y: scroll;
-    scrollbar-width: none;
-  }
-}
-.full-screen-menu-mobile {
-  display: none;
-}
-@include sm {
-  .full-screen-menu-mobile {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1000;
-    transform: translateY(-100%);
-    transition: transform 0.3s ease-in-out;
-    background-color: var(--base-bg-color);
-    animation: slideIn 0.8s ease forwards;
-  }
-  .hover-container {
-    border: 1px solid var(--border-color);
-    // border-radius: 8px;
-    row-gap: 12px;
-    @include sm {
-      border: 1px solid transparent;
-      border-bottom: 1px solid var(--border-color);
-    }
-    @include xs {
-      border: 1px solid transparent;
-      border-bottom: 1px solid var(--border-color);
-    }
-  }
-}
-.full-screen-menu-mobile.open {
-  transform: translateY(0);
-}
-
-.full-screen-menu-mobile nav {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  background-color: var(--base-bg-color);
-  z-index: 1010;
-  .res-logo {
-    @include flex-between;
-    width: 95vw;
-    .icon-section-mobile {
-      display: flex;
-      width: 20vw;
-      img {
-        overflow: visible;
-      }
-      justify-content: space-between;
-      @include sm {
-        width: 16vw;
-      }
-      @include xs {
-        width: 16vw;
-      }
-      .close-mobile-icon {
-        background-color: var(--ff-primary-10-color);
-        color: var(--description-text);
-        border-radius: 32px;
-        padding: 5px;
-      }
-    }
-  }
-  .res-button {
-    width: 95vw;
-
-    @include xs {
-      padding-top: 20px;
-    }
-    @include sm {
-      padding-top: 20px;
-    }
-  }
-}
-.full-screen-menu-mobile section {
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: none;
-  width: 95%;
-  height: 74%;
-  padding: 20px;
-  padding-top: 0;
-}
-@keyframes slideIn {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes dropdown-open {
-  0% {
-    max-height: 0;
-  }
-  100% {
-    max-height: 60vh;
-  }
-}
-
-@keyframes dropdown-close {
-  0% {
-    max-height: 60vh;
-  }
-  100% {
-    max-height: 0;
-  }
-}
-.dropdown-menu {
-  position: fixed;
-  z-index: 1100;
-  right: 80px;
-  width: 312px;
-  padding: 16px;
-  border-radius: 20px;
-  background-color: var(--base-bg-color);
-  box-shadow: 0px 0px 24px -8px var(--toggle-strip-shadow);
-  @include xs {
-    right: 5px;
-  }
-  @include sm {
-    right: 5px;
-  }
-  @include md {
-    right: 20px;
-  }
-  .dropdown-menu-data {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    border: 2px solid transparent;
-    border-radius: 8px;
-    display: flex;
-    align-items: flex-start;
-    cursor: pointer;
-    gap: 8px;
-    color: var(--description-text);
-    .dropdown-menu-data-section {
-      .data-item-heading {
-        margin: 0;
-        color: #0a2540;
-      }
-      .data-item-chip {
-        background-color: var(--ff-primary-color);
-        color: var(--base-bg-color);
-        border-radius: 21px;
-        width: 42px;
-        height: 20px;
-        margin-left: 8px;
-        @include flex-center;
-      }
-    }
-
-    .dropdown-menu-data-item {
-      display: flex;
-      align-items: center;
-      .data-item-img {
-        float: left;
-      }
-    }
-    .data-item-description {
-      margin: 0;
-      line-height: 20px;
-      color: #848f9c;
-    }
-    h3 {
-      color: var(--description-text);
-      transition: color 0.3s ease-in-out;
-    }
-    &:hover {
-      background: var(--ff-primary-10-color);
-      border: 2px solid var(--border-color);
-      h3 {
-        color: var(--ff-primary-color);
-        transition: color 0.3s ease-in-out;
-      }
-    }
-  }
-}
-.product-menu-mobile {
-  display: flex;
-  padding: 20px;
-  padding-top: 0;
-  padding-left: 0;
-  width: 85vw;
-  transition: transform 0.4s ease-in-out;
-  .product-menu-mobile-left,
-  .product-menu-mobile-right {
-    width: 100%;
-    flex-shrink: 0;
-    transition: transform 0.4s ease-in-out;
-  }
-  .product-menu-mobile-left {
-    transform: translateX(5px);
-    flex: 1;
-    &__list {
-      list-style: none;
-      padding: 0;
-      .list-section {
-        cursor: pointer;
-        border-bottom: 1px solid var(--border-color);
-        padding: 10px;
-        margin: 10px 0;
-        @include flex-space-between;
-        flex-direction: column;
-        .list-section-mobile {
-          @include flex-between;
-          .list-section-inner {
-            display: flex;
-            align-items: center;
-            .chip-text {
-              background-color: var(--ff-primary-color);
-              color: var(--base-bg-color);
-              border-radius: 21px;
-              width: 42px;
-              height: 20px;
-              margin-left: 20px;
-              @include flex-center;
-            }
-          }
-        }
-      }
-    }
-  }
-  .product-menu-mobile-right {
-    flex: 2;
-    transform: translateX(0);
-    .product-menu-mobile-right-inner {
-      display: flex;
-      align-items: center;
-      &__span {
-        color: var(--ff-primary-color);
-      }
-    }
-    .product-menu-mobile-right-list {
-      list-style: none;
-      padding: 0;
-      max-height: 40vw;
-      overflow-x: clip;
-      width: 88vw;
-      margin-top: 0;
-      &__li {
-        padding: 10px;
-        margin: 10px 0;
-        border-bottom: 1px solid var(--border-color);
-        @include flex-space-between;
-        .product-menu-section {
-          align-items: flex-start;
-          @include flex-space-between;
-          .product-menu-section-img {
-            position: relative;
-            top: -2px;
-          }
-        }
-      }
-    }
-  }
-}
-.product-menu-tab {
-  flex: 1;
-  padding: 0;
-  @include md {
-    margin-top: 0;
-  }
-  .tab-section-container {
-    display: flex;
-
-    .section-img {
-      position: relative;
-      top: 2px;
-    }
-    .tab-chip {
-      background-color: var(--ff-primary-color);
-      color: var(--base-bg-color);
-      border-radius: 21px;
-      width: 42px;
-      height: 20px;
-      @include flex-center;
-    }
-  }
-  .tab-pointer {
-    cursor: pointer;
-  }
-}
-.product-menu-tab-border {
-  border-left: 1px solid var(--border-color);
-}
-.product-menu-tab-right {
-  flex-basis: 42%;
-  position: relative;
-  padding: 10px 7px;
-  &__section {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .tab-section-image {
-      position: relative;
-      top: 2px;
-    }
-  }
-}
-.product-menu-web-left-view {
-  flex: 1;
-  padding: 0;
-  .web-icon-image {
-    position: relative;
-    top: 0;
-  }
-  .web-pointer {
-    cursor: pointer;
-  }
-}
-.product-menu-web-border {
-  border-left: 1px solid var(--border-color);
-}
-.product-menu-web-right {
-  flex-basis: 45%;
-  height: 63px;
-  position: relative;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  .web-logo-image {
-    position: relative;
-    top: 2px;
-  }
-  &:hover {
-    background-color: var(--ff-primary-10-color);
-    border: 2px solid var(--border-color);
-    border-radius: 8px;
-  }
-}
-.product-menu-web-left-section {
-  position: relative;
-  top: 0;
-}
-
-//tab ===========
-.tab-dropdown-menu {
-  display: flex;
-  width: 100%;
-  padding: 15px;
-  .res-logo {
-    flex: 0.6;
-    display: flex;
-    .res-logo-link {
-      padding-left: 16px;
-    }
-  }
-  .res-button {
-    flex: 1;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    gap: 13px;
-    margin-right: 18px;
-    img {
-      overflow: visible;
-    }
-    .custom-one {
-      padding: 8px 0;
-      flex: 1;
-
-      background-color: var(--ff-primary-10-color);
-      border-radius: 8px;
-      border: 1px solid var(--ff-primary-color);
-    }
-    .custom-two {
-      padding: 8px 0;
-      flex: 1;
-      background-color: var(--ff-primary-color);
-      border-radius: 8px;
-      min-width: 131px;
-    }
-  }
-}
-
-//tab ===========
-.mobile-dropdown-menu {
-  width: 100%;
-  padding: 15px;
-  .res-logo {
-    flex: 1;
-    margin-bottom: 20;
-  }
-  .res-button {
-    flex: 1;
-    @include flex-between;
-    gap: 16px;
-    .custom-one {
-      flex: 1;
-      padding: 8px 24px 8px 24px;
-      flex-grow: 1;
-      background-color: var(--ff-primary-10-color);
-      border-radius: 8px;
-      border: 1px solid var(--ff-primary-color);
-    }
-    .custom-two {
-      flex: 1;
-      padding: 8px 24px 8px 24px;
-      flex-grow: 1;
-      background-color: var(--ff-primary-color);
-      border-radius: 8px;
-      min-width: 156px;
-    }
-  }
-}
-.tab-alignments {
-  padding-top: 0;
-  padding-left: 0;
-  margin-left: 0;
-}
-.ff-align-items {
-  display: flex;
-  align-items: center;
-}
-.mobile-category-name {
-  margin-left: 25px;
-}
-.logo-icon-container {
-  position: relative;
-  left: 55px;
-  @include xs {
-    left: 0;
-  }
-  @include sm {
-    left: 0;
-  }
-}
-.hamburger {
-  padding: 0px;
-  border-radius: 50px;
-  border: none;
-  &:hover {
-    background-color: var(--brand-color);
-  }
-  @include flex-center;
-}
-.web-chip-text {
-  background-color: var(--ff-primary-color);
-  color: var(--base-bg-color);
-  border-radius: 21px;
-  width: 42px;
-  height: 20px;
-  float: right;
-  margin-right: 60px;
-  margin-top: 2px;
-  @include flex-center;
-}
-.arrow-right-icon {
-  padding: 0;
-  rotate: 45deg;
-  zoom: 1.5;
-}
-
-.hover-bg {
-  position: absolute;
-  bottom: 15%;
-  height: 45px;
-  background: var(--base-bg-color);
-  border-radius: 32px;
-  transition: all 0.8s ease-in-out;
-  z-index: -1;
-}
-.mobile-small-arrow-icon {
-  zoom: 2;
-  padding: 0;
-  transform: rotate(225deg);
-}
-.dropdown-menu-parent-data {
-  padding: 8px 0;
-  &:first-child {
-    padding-top: 0;
-  }
-  &:last-child {
-    padding-bottom: 0;
-  }
-}
-
-.mobile-small-arrow-icons {
-  @extend .mobile-small-arrow-icon;
-  transform: rotate(45deg);
-}
-.close-tab-icon {
-  background-color: var(--ff-primary-10-color);
-  color: var(--description-text);
-  border-radius: 32px;
-  padding: 5px;
-  svg {
-    padding: 6px;
-  }
-}
-.product-dropdown-align-items {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-.product-menu-div {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding-left: 8px;
-  padding-top: 8px;
-}
-.ff-tabs-container .ff-tab-row--mobileTab {
-  display: flex;
-  justify-content: space-between;
-  @include md {
-    justify-content: flex-start;
-  }
-}