platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,91 +0,0 @@
-.card {
-  max-width: 350px;
-  padding: var(--spacing-xl, 16px);
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-3xl, 24px);
-  border-radius: var(--radius-lg, 16px);
-  background: var(--Colors-Base-white, #fff);
-  border: 2px solid var(--Colors-Base-black, #fff);
-  cursor: pointer;
-  position: relative;
-
-  &__image-container {
-    width: 100%;
-    height: 200px;
-    overflow: hidden;
-    border-radius: var(--radius-lg, 16px);
-
-    img {
-      width: auto;
-      height: 100%;
-      border-radius: inherit;
-    }
-  }
-
-  &__checkbox-container {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    & > .checkbox {
-      .checkbox-main {
-        min-width: fit-content;
-      }
-    }
-  }
-
-  & > .badge--icon.badge--lg {
-    width: 48px;
-    height: 48px;
-  }
-
-  @extend .shadow-md;
-  &__content-text {
-    gap: 8px;
-  }
-
-  &__action {
-    width: 100%;
-    display: flex;
-
-    &--default {
-      gap: 12px;
-    }
-    &--expanded {
-      // position: relative;
-      justify-content: flex-end;
-
-      .btn {
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    color: var(--colors-gray-neutral-300);
-    background-color: transparent;
-    border-color: transparent;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      background-color: var(--colors-gray-neutral-100);
-      opacity: 0.3;
-    }
-  }
-
-  &.focused {
-    border-radius: var(--radius-lg, 16px);
-    border: 2px solid var(--Colors-Base-black, #000);
-    @extend .shadow-md;
-  }
-}

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

@@ -1,241 +0,0 @@
-.checkbox {
-  margin: var(--spacing-md);
-  display: flex;
-  gap: var(--spacing-xl);
-  padding: var(--spacing-none);
-  cursor: pointer;
-
-  user-select: none;
-
-  &-icon {
-    display: none !important;
-    color: var(--colors-base-white);
-
-    width: 16px;
-    height: 16px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.focus {
-    border-radius: var(--radius-sm);
-    outline: 2px solid var(--colors-base-black);
-  }
-
-  &-main {
-    &,
-    &__content {
-      display: flex;
-      column-gap: var(--spacing-xl);
-    }
-
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    max-width: 382px;
-    // min-width: 160px;
-  }
-
-  & input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-
-    &:checked {
-      & ~ .checkbox-container {
-        background-color: var(--colors-gray-neutral-950);
-
-        & .checkbox__checked-icon {
-          display: inline-flex !important;
-        }
-      }
-    }
-
-    &:hover {
-      & ~ .checkbox-container {
-        &::after {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-    }
-  }
-
-  &.active input:not(:checked) ~ .checkbox-container {
-    background-color: var(--colors-gray-neutral-300);
-  }
-
-  &-container {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    border-radius: var(--radius-xs);
-    border: 1px solid var(--colors-gray-neutral-500);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-    margin: var(--spacing-xs);
-    -webkit-user-select: none;
-    /* Safari */
-    -ms-user-select: none;
-    /* IE 10 and IE 11 */
-    user-select: none;
-    /* Standard syntax */
-
-    &::after {
-      content: "";
-      border-radius: var(--radius-full);
-      background: var(--colors-gray-neutral-100);
-      width: 48px;
-      height: 48px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0);
-      z-index: -1;
-      transition: all 0.3s ease-in-out;
-    }
-  }
-
-  &--indeterminate {
-    & .checkbox-container {
-      background-color: var(--colors-gray-neutral-950);
-
-      .checkbox-icon {
-        display: none;
-      }
-
-      .checkbox__indeterminate-icon {
-        display: inline-block !important;
-      }
-    }
-
-    & input:checked {
-      & ~ .checkbox-container {
-        .checkbox__indeterminate-icon {
-          display: none !important;
-        }
-
-        .checkbox__checked-icon {
-          display: inline-block !important;
-        }
-      }
-    }
-  }
-
-  & input:disabled {
-    & ~ .checkbox-container {
-      border-color: var(--colors-border-disabled);
-      background-color: var(--colors-border-disabled);
-    }
-
-    &:checked ~ .checkbox-container .checkbox__checked-icon {
-      // display: inline-block !important;
-      // color: var(--colors-gray-neutral-300);
-    }
-
-    & ~ .checkbox__label,
-    & ~ div > .checkbox__label,
-    & ~ div > .checkbox__helper-text {
-      color: var(--colors-border-disabled);
-    }
-  }
-
-  &__label {
-    @extend .text-md-medium;
-    margin-top: var(--spacing-xs);
-  }
-
-  &__helper-text {
-    color: var(--colors-text-tertiary);
-    @extend .text-sm-regular;
-    margin-block: var(--spacing-xs);
-  }
-
-  &__warning {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xl);
-
-    color: var(--colors-text-error-primary);
-    @extend .text-sm-medium;
-
-    &-icon {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: var(--spacing-xs);
-    }
-
-    &-text {
-    }
-  }
-
-  &--brand {
-    & input:checked {
-      & ~ .checkbox-container {
-        border-color: var(--colors-brand-600);
-        background-color: var(--colors-brand-600);
-      }
-
-      & ~ .checkbox__label,
-      & ~ div > .checkbox__label {
-        color: var(--colors-text-brand-secondary);
-      }
-
-      &:disabled {
-        & ~ .checkbox-container {
-          background-color: var(--colors-border-disabled);
-
-          .checkbox__checked-icon {
-            display: inline-block !important;
-            // color: var(--colors-gray-neutral-300);
-          }
-        }
-      }
-    }
-
-    & input:disabled {
-      & ~ .checkbox-container {
-        border-color: var(--colors-border-disabled);
-        background-color: transparent;
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &:checked {
-      }
-
-      & ~ .checkbox__label,
-      & ~ div > .checkbox__label,
-      & ~ div > .checkbox__helper-text {
-        color: var(--colors-border-disabled);
-      }
-    }
-
-    &.active input:checked ~ .checkbox-container {
-      background-color: var(--colors-brand-700);
-    }
-  }
-
-  &--readonly {
-    & .checkbox-container {
-      background-color: transparent !important;
-
-      .checkbox-icon {
-        color: var(--colors-gray-neutral-600);
-      }
-    }
-  }
-
-  &--indeterminate {
-  }
-}

package/src/assets/styles/components/_content-switcher.scss

@@ -1,108 +0,0 @@
-.content-switcher {
-  display: flex;
-  flex-direction: column;
-  margin: 10px;
-
-  &__items {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  &__item {
-    display: inline-flex;
-    min-width: 76px;
-    padding: var(--spacing-xs) 10px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-    // border: 3px solid transparent !important;
-    border: 0;
-
-    background: var(--colors-gray-neutral-100);
-    color: var(--colors-2-text-primary, #161616);
-    @extend .text-md-regular;
-    // box-shadow: 0 0 0 2px transparent;
-
-    &:hover {
-      background: var(--colors-gray-neutral-200, #e5e7eb);
-    }
-
-    &:focus {
-      outline: none;
-      border: 1px solid white !important;
-      box-shadow: 0 0 0 2px black;
-      z-index: 9;
-    }
-
-    &--selected {
-      &,
-      &:hover {
-        background-color: var(--colors-gray-neutral-950, #0d121c);
-        color: var(--colors-2-text-primary_on-color, #fff);
-      }
-    }
-
-    &--first {
-      border-radius: var(--radius-md) 0px 0px var(--radius-md);
-      border-right: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
-    }
-
-    :is(html[lang="ar"], html[dir="rtl"]) &--first {
-      border-radius: 0px var(--radius-md) var(--radius-md) 0px;
-    }
-
-    &--mid {
-      border-radius: var(--radius-none);
-      border-right: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
-      border-left: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
-    }
-
-    &--last {
-      border-radius: 0px var(--radius-md) var(--radius-md) 0px;
-      border-left: 0.5px solid var(--colors-2-border-secondary, #e5e7eb);
-    }
-
-    :is(html[lang="ar"], html[dir="rtl"]) &--last {
-      border-radius: var(--radius-md) 0px 0px var(--radius-md);
-    }
-
-    &--on-color {
-      color: var(--colors-2-text-primary_on-color, #fff);
-      background-color: alpha("white", 10%);
-      border-color: alpha("white", 10%);
-
-      &:hover {
-        background: alpha("white", 30%);
-      }
-
-      &.content-switcher__item--selected {
-        &,
-        &:hover {
-          background-color: var(--colors-brand-600);
-          // color: var(--colors-2-text-primary_on-color, #FFF);
-        }
-      }
-    }
-
-    &--sm {
-      height: auto;
-    }
-
-    &--md {
-      height: 40px;
-    }
-
-    &--lg {
-      height: 48px;
-    }
-  }
-
-  &__content {
-    color: #000;
-
-    &--on-color {
-      color: #fff;
-    }
-  }
-}

package/src/assets/styles/components/_data-table.scss

@@ -1,155 +0,0 @@
-div.table-wrapper {
-  .azm-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 0px;
-    padding: 0px;
-    tr.row-divider:not(:last-child) {
-      border-bottom: 1px solid var(--colors-gray-neutral-300);
-    }
-    thead {
-      border-bottom: 1px solid var(--colors-gray-neutral-300);
-      border-top: 1px solid var(--colors-gray-neutral-300);
-      background: var(--Colors-Gray-neutral-100, #f3f4f6);
-      // th:first-child {
-      //   width: 20px;
-      // }
-      th {
-        height: 48px;
-        border-right: 1px solid var(--colors-gray-neutral-300);
-        &:last-child {
-          border-right: none;
-        }
-        //   border: 1px solid var(--colors-gray-neutral-300);
-        padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
-        span {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          span.text {
-            color: var(--colors-gray-neutral-600);
-            @extend .text-xs-medium;
-          }
-          span.icon-wrapper {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 2px;
-            // @media (prefers-color-scheme: light) {
-            //   button {
-            //     cursor: pointer;
-            //     margin-inline: 3px;
-            //     background-color: white;
-            //     border-radius: 4px;
-            //     color: black;
-            //     &:hover {
-            //       transition: all 0.2s ease-in-out;
-            //       background-color: white;
-            //     }
-            //     &:active {
-            //       transition: all 0.2s ease-in-out;
-            //       background-color: var(--colors-gray-neutral-600);
-            //       // background-color: var(--colors-gray-neutral-500);
-            //     }
-            //     &:visited,
-            //     &:focus {
-            //       transition: all 0.2s ease-in-out;
-            //       background-color: white;
-            //       color: black;
-            //       border: 2px solid white;
-            //       outline: 3px solid #0e0e0e;
-            //     }
-            //   }
-            // }
-            // @media (prefers-color-scheme: dark) {
-            //   button {
-            //     cursor: pointer;
-            //     margin-inline: 3px;
-            //     background-color: var(--colors-gray-modern-950);
-            //     border-radius: 4px;
-            //     color: white;
-            //     &:hover {
-            //       transition: all 0.2s ease-in-out;
-            //       background-color: var(--colors-gray-modern-950);
-            //     }
-            //     &:active {
-            //       transition: all 0.2s ease-in-out;
-            //       background-color: var(--colors-gray-neutral-600);
-            //       // background-color: var(--colors-gray-neutral-500);
-            //     }
-            //     &:visited,
-            //     &:focus {
-            //       transition: all 0.2s ease-in-out;
-            //       border-radius: var(--radius-4, 4px);
-            //       border: 2px solid var(--colors-base-black);
-            //       background-color: var(--colors-gray-neutral-600);
-            //     }
-            //   }
-            // }
-            // button {
-            //   cursor: pointer;
-            //   margin-inline: 3px;
-            //   background-color: var(--colors-gray-modern-950);
-            //   border-radius: 4px;
-            //   color: white;
-            //   &:hover {
-            //     transition: all 0.2s ease-in-out;
-            //     background-color: var(--colors-gray-modern-950);
-            //   }
-            //   &:active {
-            //     transition: all 0.2s ease-in-out;
-            //     background-color: var(--colors-gray-neutral-600);
-            //     // background-color: var(--colors-gray-neutral-500);
-            //   }
-            //   &:visited,
-            //   &:focus {
-            //     transition: all 0.2s ease-in-out;
-            //     border-radius: var(--radius-4, 4px);
-            //     border: 2px solid var(--colors-base-black);
-            //     background-color: var(--colors-gray-neutral-600);
-            //   }
-            // }
-          }
-        }
-      }
-    }
-    tbody {
-      tr {
-        &.alternate:nth-child(even):not(&:hover, &.row-selected) {
-          transition: all 0.2s ease-in-out;
-          background-color: var(--colors-gray-50);
-        }
-        &:hover {
-          background-color: var(--colors-gray-neutral-100);
-        }
-      }
-      tr.row-selected {
-        background-color: var(--colors-brand-200);
-      }
-      // td:first-child {
-      //   width: 20px;
-      // }
-      td {
-        height: 64px;
-        color: var(--text-text-primary);
-        padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
-        @extend .text-md-regular;
-      }
-    }
-  }
-}
-.table-contained {
-  overflow: hidden; /* Optional */
-  border-radius: var(--radius-md, 8px);
-  border: 1px solid var(--colors-gray-neutral-300);
-  padding: 0px;
-}
-
-.selected-cell {
-  border: 3px solid var(--colors-brand-200);
-  background: var(--Colors-Gray-neutral-950, #0d121c);
-}
-
-:is(html[lang="ar"], html[dir="rtl"]) .azm-table {
-  direction: ltr;
-}