platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,340 +0,0 @@
-$scrollbar-width: calc(8px + 2 * var(--spacing-xs));
-// $tab-width: 224px;
-$tab-width: 100%;
-
-.sidepanel {
-  background-color: var(--colors-base-white);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  // width: calc($tab-width + var(--spacing-xl) + var(--spacing-xl) + $scrollbar-width) !important;
-  // width: calc(256px + 8px + 2* var(--spacing-xs) + 4px);
-  min-width: calc(256px + 8px + 2 * var(--spacing-xs) + 4px);
-  width: fit-content;
-  position: sticky;
-  min-height: calc(100vh - 72px);
-  max-height: calc(100vh - 72px);
-  // min-height: 100vh;
-  // max-height: 100vh;
-  overflow-y: auto;
-  position: fixed;
-  top: 72px;
-  z-index: 99;
-  transition: all 0.4s ease-in-out;
-  @extend .shadow-lg;
-
-  &.collapsed {
-    transform: translateX(
-      calc(
-        ($tab-width + var(--spacing-xl) + var(--spacing-xl) + $scrollbar-width) *
-          -2
-      )
-    );
-
-    @media only screen and (min-width: 56.25em) {
-      transform: translate(0);
-    }
-  }
-
-  // &--scrollable {
-  //   padding-right: 0;
-  // }
-
-  &::-webkit-scrollbar {
-    height: 100px;
-    width: $scrollbar-width;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-    padding: var(--spacing-xs);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    height: 100px;
-    border-radius: var(--radius-full);
-    border: var(--spacing-xs) solid transparent;
-    background-color: var(--colors-gray-neutral-300);
-    background-clip: content-box;
-    mix-blend-mode: multiply;
-  }
-
-  &__nav-header {
-    margin-inline: var(--spacing-4xl);
-    margin-block: var(--spacing-lg);
-  }
-
-  & ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  &__menu {
-    &-list {
-      width: 100%;
-      // padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-8xl) var(--spacing-xl) !important;
-      padding: var(--spacing-xl) !important;
-
-      // padding-inline: 3px !important;
-    }
-
-    &-tab {
-      display: flex;
-      width: $tab-width;
-      padding: var(--spacing-md) var(--spacing-xl);
-      justify-content: center;
-      align-items: center;
-      gap: var(--spacing-md);
-      align-self: stretch;
-      color: var(--colors-text-secondary);
-      text-decoration: none;
-      border-radius: var(--radius-sm);
-      mix-blend-mode: multiply;
-      position: relative;
-      border: 2px solid transparent;
-
-      &::after {
-        content: "";
-        width: 6px;
-        height: calc(100% - 2 * var(--spacing-sm));
-        position: absolute;
-        top: 50%;
-        left: 0px;
-        transform: translateY(-50%);
-        border-radius: var(--radius-full);
-        background-color: var(--colors-brand-600);
-        display: none;
-        // transition: all .2s ease-in-out;
-
-        [dir="rtl"] & {
-          right: 0px;
-          left: auto;
-        }
-      }
-
-      &:hover {
-        background-color: var(--colors-gray-neutral-100);
-        color: var(--colors-text-primary);
-        // outline: none;
-        border-color: transparent;
-
-        &::after {
-          display: block;
-          background-color: var(--colors-gray-neutral-400);
-        }
-      }
-
-      &:focus {
-        background-color: var(--colors-base-white);
-        border-color: var(--colors-base-black);
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &.selected,
-      &.active {
-        background-color: var(--colors-gray-neutral-100);
-        color: var(--colors-brand-600);
-
-        &::after {
-          display: block;
-          background-color: var(--colors-brand-600);
-        }
-      }
-
-      &.pressed {
-        background-color: var(--colors-gray-neutral-300);
-        color: var(--colors-text-primary);
-        border-color: transparent;
-
-        &::after {
-          display: block;
-          background-color: var(--colors-gray-neutral-600);
-        }
-      }
-
-      &.disabled {
-        color: var(--colors-gray-neutral-300);
-        background-color: transparent;
-        border-color: transparent;
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &-divider {
-        background: var(--colors-gray-neutral-300);
-        height: 1px;
-        margin: var(--spacing-md) var(--spacing-xl);
-        display: block;
-      }
-
-      &.active + .sidepanel__submenu-list {
-        // max-height: 100%;
-        // display: block;
-        opacity: 1;
-        padding-block: 3px !important;
-        margin-left: 24px;
-
-        [dir="rtl"] & {
-          margin-right: 24px;
-          margin-left: unset;
-        }
-      }
-
-      &.active &-arrow {
-        transform: rotate(180deg);
-      }
-
-      &-icon {
-        font-size: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      &-label {
-        flex: 1;
-        @extend .text-sm-semibold;
-      }
-
-      &-arrow {
-        font-size: 20px;
-        transform: rotate(0deg);
-        transition: all 0.4s ease-in-out;
-      }
-    }
-  }
-
-  &__submenu {
-    // height: 0;
-
-    &-list {
-      padding-block: 0 !important;
-      max-height: 0;
-      overflow-y: hidden;
-      opacity: 0;
-      transition: max-height 0.3s ease;
-    }
-
-    &-tab {
-      justify-content: flex-start;
-      white-space: nowrap;
-      @extend .sidepanel__menu-tab !optional;
-
-      &-label {
-        flex: 1;
-        @extend .text-sm-semibold;
-      }
-
-      &-icon {
-        font-size: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    &--sublevel {
-      padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md)
-        calc(var(--spacing-5xl) + var(--spacing-md) / 2);
-
-      .sidepanel__submenu-tab-label {
-        @extend .text-sm-regular;
-      }
-    }
-  }
-
-  &--bg {
-    &-gray {
-      background-color: var(--colors-gray-neutral-50);
-    }
-
-    &-brand {
-      background-color: var(--colors-brand-800);
-
-      & .sidepanel__menu-tab,
-      & .sidepanel__submenu-tab {
-        mix-blend-mode: normal;
-        color: var(--colors-text-secondary_on-brand) !important;
-
-        &-label {
-          color: var(--colors-text-secondary_on-brand) !important;
-        }
-
-        &:hover {
-          background-color: hsla(var(--colors-alpha-white) / 10%);
-          color: var(--colors-text-primary_on-brand);
-          border-color: transparent;
-
-          &::after {
-            display: block;
-            background-color: hsla(var(--colors-alpha-white) / 40%);
-          }
-        }
-
-        &:focus {
-          background-color: transparent;
-          border-color: var(--colors-base-white);
-
-          &::after {
-            display: none;
-          }
-        }
-
-        &.selected,
-        &.active {
-          background-color: hsla(var(--colors-alpha-white) / 20%);
-          color: var(--colors-text-primary_on-brand);
-
-          &::after {
-            display: block;
-            background-color: var(--colors-base-white);
-          }
-        }
-
-        &.pressed {
-          background-color: hsla(var(--colors-alpha-white) / 30%);
-          color: var(--colors-text-primary_on-brand);
-          border-color: transparent;
-
-          &::after {
-            display: block;
-            background-color: hsla(var(--colors-alpha-white) / 60%);
-          }
-        }
-      }
-    }
-  }
-
-  &--border {
-    border-right: 1px solid var(--colors-border-primary);
-  }
-
-  &--overlay {
-    background: hsla(var(--colors-alpha-white) / 80%);
-    box-shadow: 4px 16px 24px 0px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(12px);
-
-    @media only screen and (min-width: 56.25em) {
-      box-shadow: none;
-    }
-
-    &-gray {
-      background: hsla(var(--colors-alpha-white) / 80%);
-      box-shadow: 4px 16px 24px 0px rgba(0, 0, 0, 0.1);
-      backdrop-filter: blur(12px);
-    }
-
-    &-brand {
-      background: var(--colors-brand-800);
-      /* Shadows/shadow-2xl */
-      box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
-      backdrop-filter: blur(12px);
-    }
-  }
-}

package/src/assets/styles/layout/_table-of-content.scss

@@ -1,179 +0,0 @@
-.table-of-content {
-  display: flex;
-  width: 228px;
-  padding: var(--container-padding-desktop) var(--spacing-none);
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-md);
-
-  &__header {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-md);
-  }
-
-  &__body {
-  }
-
-  &__tab-list {
-    list-style: none;
-    padding: 0;
-  }
-
-  &__tab-sublist {
-    list-style: none;
-    padding: 0;
-
-    & .table-of-content__tab {
-      position: relative;
-      padding-left: calc(var(--spacing-xl) * 2);
-
-      &::before {
-        content: "";
-        width: 2px;
-        height: 100%;
-        background-color: var(--colors-gray-neutral-300);
-        display: block;
-        position: absolute;
-        left: 16px;
-        top: 0;
-      }
-    }
-  }
-
-  &__tab-sub-sublist {
-    list-style: none;
-    padding: 0;
-
-    & .table-of-content__tab {
-      position: relative;
-      padding-left: calc(var(--spacing-xl) * 3);
-
-      &::before {
-        content: "";
-        width: 2px;
-        height: 100%;
-        background-color: var(--colors-gray-neutral-300);
-        display: block;
-        position: absolute;
-        left: 16px;
-        top: 0;
-      }
-
-      &::after {
-        content: "";
-        width: 2px;
-        height: 100%;
-        background-color: var(--colors-gray-neutral-300);
-        // margin-right: -28px;
-        display: block;
-        position: absolute;
-        left: 32px;
-        top: 0;
-      }
-    }
-  }
-
-  &__tab {
-    display: flex;
-    min-width: 140px;
-    padding: 0px var(--spacing-md, 8px) 0px var(--spacing-xl);
-    justify-content: center;
-    align-items: center;
-    border-radius: var(--radius-xs);
-    position: relative;
-
-    &-label {
-      padding-block: var(--spacing-sm);
-      flex: 1;
-      color: var(--colors-text-secondary);
-      @extend .text-sm-regular;
-    }
-
-    &-prefix {
-      display: none;
-      height: 100%;
-      border-radius: var(--radius-full);
-      background-color: var(--colors-brand-600);
-      width: 3px;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-
-    &:hover &-prefix {
-      display: block;
-      background-color: var(--colors-fg-quinary-400);
-    }
-
-    &:hover &-label {
-      color: var(--colors-text-primary);
-    }
-
-    &:hover {
-      background-color: var(--colors-gray-neutral-100);
-
-      &::after,
-      &::before {
-        display: none;
-      }
-    }
-
-    &:focus &-prefix {
-      display: none;
-    }
-
-    &:focus &-label {
-      color: var(--colors-text-primary);
-    }
-
-    &:focus {
-      outline: 2px solid var(--colors-base-black);
-      background-color: transparent;
-
-      &::after,
-      &::before {
-        display: none;
-      }
-    }
-
-    &.selected,
-    &.active {
-      color: var(--colors-text-primary);
-
-      & .table-of-content__tab-label {
-        @extend .text-sm-semibold;
-      }
-
-      & .table-of-content__tab-prefix {
-        display: block;
-        background-color: var(--colors-brand-600);
-      }
-
-      &::after,
-      &::before {
-        display: none;
-      }
-    }
-
-    &.pressed &-prefix {
-      display: block;
-      background-color: var(--colors-fg-tertiary-600);
-    }
-
-    &.pressed &-label {
-      color: var(--colors-text-primary);
-    }
-
-    &.pressed {
-      outline: none;
-      background-color: var(--colors-gray-neutral-300);
-
-      &::after,
-      &::before {
-        display: none;
-      }
-    }
-  }
-}

package/src/assets/styles/main.scss

@@ -1,54 +0,0 @@
-$theme: 'light'; // Change to "dark" for the dark theme
-
-@import 'abstracts/functions';
-@import 'abstracts/mixins';
-@import 'abstracts/variables';
-
-@import 'components/btns';
-@import 'components/tag';
-@import 'components/accordions';
-@import 'components/icons';
-@import 'components/checkbox';
-@import 'components/switch';
-@import 'components/radio';
-@import 'components/featured-icons';
-@import 'components/notification-toast';
-@import 'components/inline-alert';
-@import 'components/input';
-@import 'components/links';
-@import 'components/dropdown';
-@import 'components/modals';
-@import 'components/tabs';
-@import 'components/breadcrumbs';
-@import 'components/notifications';
-@import 'components/file-upload';
-@import 'components/loading';
-@import 'components/date-picker';
-@import 'components/progress-indicator';
-@import 'components/menu';
-@import 'components/data-table';
-@import 'components/textarea';
-@import 'components/tooltip';
-@import 'components/card';
-@import 'components/content-switcher';
-@import 'components/rating';
-@import 'components/structured-list';
-@import 'components/pagination';
-@import 'components/list';
-@import 'components/avatar';
-
-// should be in the utils
-@import 'components/shadows';
-
-@import 'layout/grid';
-// @import "layout/header";
-@import 'layout/nav-header';
-@import 'layout/sidepanel';
-@import 'layout/footer';
-@import 'layout/table-of-content';
-@import 'layout/layouts';
-
-@import 'base/base';
-@import 'base/typography';
-@import 'base/utilities';
-@import 'base/animation';