platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,73 +0,0 @@
-// 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

@@ -1,33 +0,0 @@
-// .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

@@ -1,449 +0,0 @@
-.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) {
-}