platformscode-new-react 0.0.3 → 0.0.4

package/src/assets/styles/components/_loading.scss

@@ -0,0 +1,135 @@
+$bar-width: 2px;
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__circle {
+    position: relative;
+    border: $bar-width solid var(--background-neutral-100);
+    border-top-color: var(--background-black);
+    mix-blend-mode: multiply;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    animation: spin 0.5s linear infinite;
+    animation-delay: 1ms;
+
+    // &::before,
+    // &::after {
+    //   content: '';
+    //   position: absolute;
+    //   top: 0;
+    //   right: 1px;
+    //   width: $bar-width;
+    //   height: $bar-width;
+    //   background-color: var(--colors-gray-neutral-800);
+    //   border-radius: 100%;
+    //   transform: translateY(0.7px) translateX(.4px) rotate(0deg);
+    //   animation: spin-bar 30.5s linear 1ms infinite;
+    // }
+
+    // &::after {
+    //   right: auto;
+    //   left: 1px;
+    //   transform: translateY(0.7px) translateX(.4px) rotate(0deg);
+    // }
+  }
+
+  // sizes
+  &--tiny {
+    width: 20px;
+    height: 20px;
+
+    // & .loading__circle {
+
+    //   &::after,
+    //   &::before {
+    //     transform: translateY(0.7px) translateX(.4px) rotate(0deg);
+    //   }
+
+    //   &::after {
+    //     transform: translateY(0.7px) translateX(-.4px) rotate(0deg);
+    //   }
+    // }
+  }
+
+  &--xs {
+    width: 24px;
+    height: 24px;
+  }
+
+  &--sm {
+    width: 28px;
+    height: 28px;
+  }
+
+  &--md {
+    width: 32px;
+    height: 32px;
+  }
+
+  &--lg {
+    width: 36px;
+    height: 36px;
+  }
+
+  &--xl {
+    width: 40px;
+    height: 40px;
+  }
+
+  &--huge {
+    width: 44px;
+    height: 44px;
+  }
+
+  // Styles
+  &--neutral {
+    & .loading__circle {
+      border-color: var(--background-neutral-100);
+      border-top-color: var(--background-black);
+
+      &::after,
+      &::before {
+        background-color: var(--background-black);
+      }
+    }
+  }
+
+  &--brand {
+    & .loading__circle {
+      border-color: var(--background-neutral-100);
+      border-top-color: var(--background-primary);
+
+      &::after,
+      &::before {
+        background-color: var(--background-primary);
+      }
+    }
+  }
+
+  &--on-color {
+    & .loading__circle {
+      border-color: var(--alpha-white-30);
+      border-top-color: var(--background-surface-oncolor);
+      mix-blend-mode: normal;
+
+      &::after,
+      &::before {
+        background-color: var(--background-surface-oncolor);
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/assets/styles/components/_menu.scss

@@ -0,0 +1,85 @@
+.menu {
+  width: 240px;
+
+  display: flex;
+  width: 241px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-border-default, #cbd5e1);
+  background: var(--colors-base-white);
+
+  @extend .shadow-2xl;
+
+  &-group {
+    padding: var(--spacing-md);
+    width: 100%;
+
+    &__label {
+      padding: var(--spacing-md);
+      color: var(--colors-gray-neutral-500);
+      @extend .text-xs-bold;
+    }
+  }
+}
+
+.menu-item {
+  display: flex;
+  padding: var(--spacing-md);
+  align-items: flex-start;
+  gap: var(--spacing-md);
+  align-self: stretch;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &__label {
+    min-width: 100px;
+    color: var(--Text-text-primary);
+    flex: 1;
+
+    @extend .text-md-regular;
+  }
+
+  &__trail-element {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @extend .text-md-regular;
+  }
+
+  &:hover {
+    border-radius: var(--radius-xs);
+    background: var(--colors-gray-neutral-100);
+    mix-blend-mode: multiply;
+  }
+
+  &:focus {
+    border-radius: var(--radius-xs);
+    border: 2px solid var(--colors-base-black);
+    mix-blend-mode: multiply;
+  }
+
+  &:active {
+    border-radius: var(--radius-xs);
+    border: 2px solid var(--colors-base-black);
+    mix-blend-mode: multiply;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.divider {
+  display: block;
+  height: 1px;
+  width: 100%;
+  background-color: var(--border-border-default, #cbd5e1);
+}

package/src/assets/styles/components/_modals.scss

@@ -0,0 +1,108 @@
+body.modal-open {
+  overflow: hidden;
+}
+dialog {
+  justify-content: center;
+  position: fixed; /* Ensures dialog stays centered on scroll */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0);
+  border: none;
+  &::backdrop {
+    background: rgb(0 0 0 / 47%);
+    backdrop-filter: blur(3.1px);
+  }
+  .modal {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    width: 600px;
+    padding: var(--spacing-3xl);
+    background-color: var(--colors-base-white);
+    border-radius: var(--radius-md);
+    @extend .shadow-3xl;
+
+    @include responsive(tab-port) {
+      width: 100%;
+    }
+
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    &__icon {
+    }
+
+    &__close {
+    }
+
+    &__body {
+      width: 100%;
+    }
+
+    &__heading {
+      color: var(--colors-text-primary);
+      @extend .text-lg-semibold;
+    }
+
+    &__content {
+      color: var(--colors-text-tertiary);
+      padding-bottom: var(--spacing-xl);
+      @extend .text-sm-regular;
+    }
+
+    &__actions {
+      width: 100%;
+
+      .btn {
+        margin: 0;
+      }
+
+      &,
+      &-btn-group {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+
+        @include responsive(tab-port) {
+          flex-direction: column-reverse;
+          width: 100%;
+
+          .btn {
+            width: 100%;
+          }
+        }
+      }
+
+      &-btn {
+        @include responsive(tab-port) {
+          width: 100%;
+        }
+      }
+
+      & > &-btn:first-child {
+        display: flex;
+
+        @include responsive(tab-port) {
+          display: none;
+        }
+      }
+
+      & > &-btn:nth-child(2) {
+        display: none;
+
+        @include responsive(tab-port) {
+          display: flex;
+        }
+      }
+    }
+  }
+}

package/src/assets/styles/components/_notification-toast.scss

@@ -0,0 +1,177 @@
+.notification-toast {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  width: 484px;
+  padding: var(--spacing-xl) var(--spacing-3xl);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xl);
+
+  border-radius: var(--radius-md, 8px);
+  background: var(--colors-base-white);
+
+  @extend .shadow-3xl;
+  // position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 8px;
+    left: 0;
+    top: 0;
+    background-color: var(--colors-error-400);
+    position: absolute;
+  }
+
+  &__close-btn {
+    position: absolute;
+    top: calc(var(--spacing-xl));
+    right: calc(var(--spacing-3xl));
+
+    @include responsive(phone) {
+      position: absolute;
+      right: var(--spacing-xl);
+    }
+  }
+
+  &__header {
+    display: flex;
+    padding: var(--spacing-none);
+    align-items: flex-start;
+    gap: var(--spacing-lg);
+  }
+
+  &__body {
+    // min-width: 100%;
+  }
+
+  &__title {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  &__action {
+    padding: var(--spacing-none, 0px) var(--spacing-5xl, 40px);
+    gap: var(--spacing-md);
+
+    &-mobile {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    @include responsive(phone) {
+      display: none;
+
+      &-mobile {
+        display: flex;
+        gap: var(--spacing-md);
+      }
+    }
+  }
+
+  @include responsive(phone) {
+    width: 100%;
+    padding: var(--spacing-xl);
+
+    &::after {
+      width: 100%;
+      height: 8px;
+    }
+
+    &__header {
+      flex-direction: column;
+      gap: var(--spacing-xl);
+    }
+  }
+
+  &--neutral {
+    &::after {
+      background-color: var(--background-neutral-200);
+    }
+    & .notification-toast {
+      &__icon {
+        color: var(--icon-default) !important;
+        background-color: var(--background-neutral-50);
+      }
+    }
+  }
+
+  &--info {
+    &::after {
+      background-color: var(--background-info);
+    }
+    & .notification-toast {
+      &__icon {
+        color: var(--background-info) !important;
+        background-color: var(--background-info-50);
+      }
+    }
+  }
+
+  &--error {
+    &::after {
+      background-color: var(--background-error);
+    }
+    & .notification-toast {
+      &__icon {
+        color: var(--background-error) !important;
+        background-color: var(--background-error-50);
+      }
+    }
+  }
+
+  &--warning {
+    &::after {
+      background-color: var(--background-warning);
+    }
+    & .notification-toast {
+      &__icon {
+        color: var(--background-warning) !important;
+        background-color: var(--background-warning-50);
+      }
+    }
+  }
+
+  &--success {
+    &::after {
+      background-color: var(--background-success);
+    }
+    & .notification-toast {
+      &__icon {
+        color: var(--background-success) !important;
+        background-color: var(--background-success-50);
+      }
+    }
+  }
+}
+
+html[dir="rtl"] .notification-toast__close-btn,
+html[lang="ar"] .notification-toast__close-btn {
+  right: auto;
+  left: calc(var(--spacing-3xl));
+
+  @include responsive(phone) {
+    right: auto;
+    left: var(--spacing-xl);
+  }
+}
+
+.vpostion-top {
+  top: 16px;
+}
+
+.vpostion-bottom {
+  bottom: 16px;
+}
+
+.hpostion-left {
+  left: 16px;
+}
+
+.hpostion-right {
+  right: 16px;
+}

package/src/assets/styles/components/_notifications.scss

@@ -0,0 +1,139 @@
+.notification {
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-3xl);
+  border-bottom: 2px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex: 1;
+    gap: var(--spacing-md);
+    padding: 0px var(--spacing-3xl);
+
+    p {
+      @extend .text-md-regular;
+    }
+  }
+
+  &__icon {
+    color: var(--controls-control-neutral-pressed);
+  }
+
+  &__lead-text {
+    color: var(--colors-text-secondary);
+    @extend .text-md-bold;
+  }
+
+  &__dismiss {
+    position: absolute;
+    right: var(--spacing-3xl);
+    transform: translateX(50%);
+  }
+
+  &--critical {
+    border-color: var(--background-error);
+    background-color: var(--notification-background-error-light);
+
+    & .notification {
+      &__content {
+        color: var(--text-error);
+      }
+
+      &__icon {
+        color: var(--text-error);
+      }
+
+      &__lead-text {
+        color: var(--text-error);
+      }
+    }
+  }
+
+  &--warning {
+    border-color: var(--background-warning);
+    background-color: var(--notification-background-warning-light);
+
+    & .notification {
+      &__content {
+        color: var(--text-warning);
+      }
+
+      &__icon {
+        color: var(--text-warning);
+      }
+
+      &__lead-text {
+        color: var(--text-warning);
+      }
+    }
+  }
+
+  &--success {
+    border-color: var(--background-success);
+    background-color: var(--notification-background-success-light);
+
+    & .notification {
+      &__content {
+        color: var(--text-success);
+      }
+
+      &__icon {
+        color: var(--text-success);
+      }
+
+      &__lead-text {
+        color: var(--text-success);
+      }
+    }
+  }
+
+  &--info {
+    border-color: var(--background-info);
+    background-color: var(--notification-background-info-light);
+
+    & .notification {
+      &__content {
+        color: var(--text-info);
+      }
+
+      &__icon {
+        color: var(--text-info);
+      }
+
+      &__lead-text {
+        color: var(--text-info);
+      }
+    }
+  }
+
+  &--neutral {
+    border-color: var(--background-black);
+    background-color: var(--colors-gray-neutral-50);
+
+    & .notification {
+      &__content {
+        color: var(--text-primary-paragraph);
+      }
+
+      &__icon {
+        color: var(--text-primary-paragraph);
+      }
+
+      &__lead-text {
+        color: var(--text-primary-paragraph);
+      }
+    }
+  }
+}
+
+html[dir="rtl"] .notification__dismiss,
+html[lang="ar"] .notification__dismiss {
+  right: auto;
+  left: var(--spacing-3xl);
+  transform: translateX(-50%);
+}

package/src/assets/styles/components/_pagination.scss

@@ -0,0 +1,79 @@
+.pagination {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  list-style: none;
+
+  &__item {
+    position: relative;
+    button {
+      width: 24px;
+      height: 24px;
+      // padding: 4px;
+      background-color: transparent;
+      cursor: pointer;
+      border: none;
+
+      display: grid;
+      place-items: center;
+      &:hover {
+        background: var(--colors-gray-neutral-100);
+        color: #161616;
+        border-radius: 4px;
+      }
+      &:active {
+        background-color: transparent;
+        border: 2px solid #161616;
+        border-radius: 4px;
+      }
+    }
+
+    &--active {
+      &::after {
+        content: "";
+        // width: 16px;
+        width: calc(100% - 8px);
+        height: 3px;
+        position: absolute;
+        // left: 4px;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -1px;
+        border-radius: var(--radius-full, 9999px);
+        background: var(--Colors-SA-Flag-600, #1b8354);
+      }
+    }
+  }
+
+  &--small {
+    .pagination__item {
+      button {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &--meduim {
+    .pagination__item {
+      button {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+
+  &--large {
+    .pagination__item {
+      button {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
+
+
+[dir="rtl"] .pagination__arrow button {
+  transform: rotate(180deg);
+}