platformscode-new-react 0.0.3 → 0.0.4

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

@@ -0,0 +1,340 @@
+$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

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

@@ -0,0 +1,54 @@
+$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';