platformscode-new-react 0.0.3 → 0.0.4

package/src/assets/styles/layout/_grid.scss

@@ -0,0 +1,73 @@
+// desktop 1280px
+// tablet 768px
+// iphone 375px
+
+
+// $container-width:1216px;
+// $columns-number:12;
+// $column-width:72px;
+// $gutter-width: 32px;
+
+// @include responsive(tab-port) {
+//   $container-width: 704px;
+//   $columns-number: 6;
+//   $column-width: 90.66px;
+//   $gutter-width: 32px;
+// }
+
+// @include responsive(phone) {
+//   $container-width: 343px;
+//   $columns-number: 4;
+//   $column-width: 73.75px;
+//   $gutter-width: 16px;
+// }
+
+
+
+// .grid {
+//   display: grid;
+//   grid-template-columns: repeat($columns-number, minmax($column-width, 1fr));
+//   column-gap: $gutter-width;
+
+//   @include responsive(tab-port) {
+//     grid-template-columns: repeat(6, minmax(90.66px, 1fr));
+//   }
+
+//   @include responsive(phone) {
+//     // margin: 16px;
+//     grid-template-columns: repeat(4, minmax(73.75px, 1fr));
+//     column-gap: 16px;
+//   }
+// }
+
+// .grid-1x2 {
+//   grid-template-columns: repeat(2, minmax($column-width, 1fr));
+//   // column-gap: $gutter-width;
+//   gap: $gutter-width;
+
+//   @include responsive(tab-port) {
+//     grid-template-columns: repeat(1, minmax(90.66px, 1fr));
+//   }
+
+//   @include responsive(phone) {
+//     // margin: 16px;
+//     grid-template-columns: repeat(1, minmax(73.75px, 1fr));
+//     column-gap: 16px;
+//   }
+// }
+
+// .grid-1x4 {
+//   grid-template-columns: repeat(4, minmax($column-width, 1fr));
+//   // column-gap: $gutter-width;
+//   gap: $gutter-width;
+
+//   @include responsive(tab-port) {
+//     grid-template-columns: repeat(2, minmax(90.66px, 1fr));
+//   }
+
+//   @include responsive(phone) {
+//     margin: 16px;
+//     grid-template-columns: repeat(1, minmax(73.75px, 1fr));
+//     column-gap: 16px;
+//   }
+// }

package/src/assets/styles/layout/_layouts.scss

@@ -0,0 +1,33 @@
+// .container {
+//   // margin: $gutter-width;
+//   width: 95%;
+//   // max-width: var(--container-max-width-desktop);
+//   min-width: 375px;
+//   padding: var(--container-padding-desktop);
+//   margin: auto;
+
+//   @include responsive(tab-port) {
+//     width: 95%;
+//     padding: var(--container-padding-mobile);
+//   }
+
+//   @include responsive(tab-port) {
+//     width: 98%;
+//     padding: var(--container-padding-mobile);
+//   }
+// }
+
+// main {
+//   flex: 1;
+//   min-height: 100vh;
+
+//   &>div {
+
+//     padding: 2rem;
+//     padding-top: 72px;
+//   }
+
+//   @media only screen and (min-width: 56.25em) {
+//     padding-left: calc($tab-width + var(--spacing-xl) + var(--spacing-xl) + $scrollbar-width);
+//   }
+// }

package/src/assets/styles/layout/_nav-header.scss

@@ -0,0 +1,449 @@
+.header {
+  position: fixed;
+  width: 100%;
+  min-height: 72px;
+  display: flex;
+  height: 72px;
+  z-index: 99;
+  background-color: var(--colors-base-white);
+
+  &--divider {
+    // position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 1px;
+      width: 100%;
+      display: block;
+      background-color: var(--colors-gray-neutral-300);
+    }
+  }
+
+  &-nav {
+    display: flex;
+    // padding: var(--spacing-none);
+    justify-content: space-between;
+    align-items: center;
+    min-height: 72px;
+    height: 72px;
+    box-sizing: border-box;
+
+    &--full {
+      width: 100%;
+      max-width: 100vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-inline: var(--spacing-4xl);
+    }
+
+    &--fixed {
+      margin-inline: auto;
+      max-width: 1280px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      @include responsive(tab-land) {
+        width: 100%;
+        max-width: 100vw;
+        padding-inline: var(--spacing-8xl);
+      }
+    }
+
+    &__main {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xl);
+    }
+
+    &__branding {
+      display: flex;
+      align-items: center;
+      // gap: var(--spacing-xl);
+    }
+
+    &__menu,
+    &__actions {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+
+      @include responsive(tab-port) {
+        display: none;
+      }
+    }
+
+    &__menu {
+      @include responsive(tab-port) {
+        display: none;
+      }
+    }
+  }
+
+  &-menu {
+    &__item {
+      display: inline-flex;
+      height: 72px;
+      padding: var(--spacing-md) var(--spacing-3xl);
+      justify-content: center;
+      align-items: center;
+      gap: var(--spacing-xs);
+      background-color: transparent;
+      border-radius: var(--radius-xs);
+
+      &:hover,
+      &:active {
+        position: relative;
+
+        &::after {
+          content: "";
+          display: block;
+          width: calc(100% - var(--spacing-md) * 2);
+          height: 8px;
+          border-radius: var(--radius-full);
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: var(--colors-fg-quinary-400);
+        }
+
+        & .header-menu__item-label,
+        & .header-menu__item-icon,
+        & .header-menu__item-arrow {
+          color: var(--colors-text-primary);
+        }
+      }
+
+      &:hover {
+        background: var(--colors-gray-neutral-100);
+      }
+
+      &:focus {
+        background-color: transparent;
+        outline: 2px solid var(--colors-base-black);
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:active {
+        background-color: var(--colors-gray-neutral-300);
+        outline: none;
+
+        &::after {
+          display: block;
+          background-color: var(--colors-fg-tertiary-600);
+        }
+      }
+
+      &-label,
+      &-icon,
+      &-arrow {
+        color: var(--colors-text-secondary);
+        @extend .text-md-medium;
+      }
+
+      &-icon {
+        color: var(--colors-text-secondary);
+        // to be edited later
+        display: flex;
+        align-items: center;
+      }
+
+      &-arrow {
+        color: var(--colors-text-secondary);
+        // to be edited later
+        display: flex;
+        align-items: center;
+      }
+
+      &--active {
+        & + .header__sub-menu {
+          // padding: var(--spacing-none) var(--spacing-4xl);
+        }
+
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          position: relative;
+          background: var(--colors-brand-800);
+          outline: none;
+
+          .header-menu__item-label,
+          .header-menu__item-icon,
+          .header-menu__item-arrow {
+            color: var(--colors-text-primary_on-brand);
+            @extend .text-md-semibold;
+          }
+
+          &::after {
+            content: "";
+            display: block;
+            width: calc(100% - var(--spacing-md) * 2);
+            height: 8px;
+            border-radius: var(--radius-full);
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--colors-brand-400);
+          }
+
+          &::before {
+            border: 0;
+          }
+        }
+
+        &:focus {
+          outline: 2px solid var(--colors-base-black);
+
+          &::before {
+            content: "";
+            display: block;
+            background-color: transparent;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            z-index: 2;
+            border: 1px solid #fff;
+            border-radius: var(--radius-xs);
+          }
+        }
+
+        &:active {
+          outline: none;
+
+          &::before {
+            border: 0;
+          }
+        }
+
+        &.header-menu__item--disabled {
+          &::after {
+            content: "";
+            display: block !important;
+            width: calc(100% - var(--spacing-md) * 2);
+            height: 8px;
+            border-radius: var(--radius-full);
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--colors-gray-neutral-300);
+          }
+
+          &::before {
+            border: 0 !important;
+          }
+        }
+      }
+
+      &--disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          position: relative;
+          background-color: transparent;
+          outline: none;
+
+          .header-menu__item-label,
+          .header-menu__item-icon,
+          .header-menu__item-arrow {
+            color: var(--colors-gray-neutral-300);
+            @extend .text-md-semibold;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &__btn {
+      display: none;
+      // height: 72px;
+      // min-width: 72px;
+      // padding: var(--spacing-md) var(--spacing-xl);
+      // flex-direction: column;
+      // justify-content: center;
+      // align-items: center;
+      // gap: var(--spacing-xs);
+      // background-color: transparent;
+      // border-radius: var(--radius-xs);
+
+      &:hover {
+        // background-color: var(--colors-gray-neutral-100);
+      }
+
+      &:focus {
+        // background-color: transparent;
+        // outline: 2px solid var(--colors-base-black);
+      }
+
+      &:active {
+        // background-color: var(--colors-gray-neutral-300);
+        // outline: none;
+      }
+
+      &-icon {
+      }
+
+      @include responsive(tab-port) {
+        display: inline-flex;
+      }
+    }
+  }
+
+  &__sub-menu {
+    position: absolute;
+    display: flex;
+    max-height: 0;
+    overflow: hidden;
+    padding: 0;
+    // max-width: 1440px;
+    padding: var(--spacing-none) var(--spacing-4xl);
+    flex-direction: column;
+    align-items: center;
+    @extend .shadow-lg;
+    transition: all 0.3s ease-in-out;
+
+    &--bg-brand {
+      background-color: var(--colors-brand-900);
+    }
+
+    &--full {
+      width: 100%;
+      left: 0;
+    }
+  }
+}
+
+.sub-menu {
+  &__container {
+    display: flex;
+    // max-width: var(--container-max-width-desktop, 1280px);
+    padding: var(--spacing-4xl) var(--spacing-none);
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: var(--spacing-3xl);
+    align-self: stretch;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  &__column {
+  }
+
+  &__column-title {
+    color: var(--colors-text-brand-secondary);
+    @extend .text-lg-bold;
+  }
+
+  &__link {
+    padding: var(--spacing-lg);
+    border-radius: var(--radius-md);
+    display: flex;
+    gap: var(--spacing-xl);
+    align-items: center;
+    background-color: transparent;
+    min-width: 320px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--colors-gray-neutral-50);
+
+      .sub-menu__link-label {
+        text-decoration: underline;
+      }
+    }
+
+    &:focus {
+      background-color: transparent;
+      outline: 2px solid var(--colors-base-black);
+    }
+
+    &:active {
+      background-color: var(--colors-gray-neutral-200);
+      outline: none;
+    }
+
+    &-icon {
+      color: var(--colors-brand-600);
+
+      &--bg {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--colors-brand-100);
+        border-radius: var(--radius-md);
+        padding: var(--spacing-lg);
+      }
+    }
+
+    &-label {
+      color: var(--colors-text-primary);
+      @extend .text-md-semibold;
+    }
+
+    &-helper {
+      color: var(--colors-text-tertiary);
+      @extend .text-sm-regular;
+    }
+
+    // on color styles
+    &--on-color {
+      &.sub-menu__link {
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: hsla(var(--colors-alpha-white) / 10%);
+        }
+
+        &:focus {
+          background-color: transparent;
+          outline: 2px solid var(--colors-base-white);
+        }
+
+        &:active {
+          background-color: hsla(var(--colors-alpha-white) / 40%);
+          outline: none;
+        }
+      }
+
+      .sub-menu__link {
+        &-icon {
+          color: var(--colors-brand-400);
+
+          &--bg {
+            background-color: var(--colors-brand-800);
+          }
+        }
+
+        &-label {
+          color: var(--colors-text-primary_on-brand);
+        }
+
+        &-helper {
+          color: hsla(var(--colors-alpha-white) / 70%);
+        }
+      }
+    }
+  }
+}
+
+@include responsive(tab-port) {
+}