platformscode-new-react 0.0.4 → 0.0.5

package/src/assets/styles/components/_progress-indicator.scss

@@ -1,230 +0,0 @@
-.progress-indicator {
-  &__step {
-    position: relative;
-    flex: 1;
-    max-width: 200px;
-    max-height: 200px;
-    // justify-content: center;
-    &-content {
-      gap: 8px;
-      & > .step-icon {
-        display: grid;
-        place-items: center;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        border: 2px solid var(--colors-gray-neutral-300, #d2d6db);
-
-        color: var(--colors-gray-neutral-300, #d2d6db);
-        @extend .text-md-medium;
-      }
-
-      & > .step-icon--brand-border {
-        border: 2px solid var(--colors-brand-600);
-        color: var(--colors-brand-600);
-      }
-
-      & > .step-icon--brand-bg {
-        border: 2px solid var(--colors-brand-600);
-        background-color: var(--colors-brand-600);
-        color: #ffffff;
-      }
-
-
-      & > .step-label {
-        display: grid;
-        place-items: center;
-        height: 32px;
-        width: 32px;
-
-        .step-label--circle {
-          height: 100%;
-          width: 100%;
-          border-radius: 50%;
-          border: 2px solid var(--colors-gray-neutral-300);
-          color: var(--colors-gray-neutral-300);
-          @extend .text-md-medium;
-        }
-
-        .step-label--dot {
-          display: block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background-color: var(--colors-gray-neutral-300);
-        }
-
-        
-        &[data-state = "current"] {
-          .step-label--circle {
-            border: 2px solid var(--colors-brand-600);
-            color: var(--colors-brand-600);
-          }
-
-          .step-label--dot {
-            border: 2px solid var(--colors-brand-600);
-          }
-        }
-
-        &[data-state = "completed"] {
-          .step-label--circle {
-            border: 2px solid var(--colors-brand-600);
-            background-color: var(--colors-brand-600);
-            color: #ffffff;
-          }
-
-          .step-label--dot {
-            background-color: var(--colors-brand-600);
-          }
-        }
-
-        &[data-state = "upcomming"] {
-          .step-label--circle {
-            border: 2px solid var(--colors-gray-neutral-300);
-            color: var(--colors-gray-neutral-300);
-          }
-
-          .step-label--dot {
-            background-color: var(--colors-gray-neutral-300);
-          }
-        }
-
-      }
-
-      & > .step-label--brand-border {
-        color: var(--colors-brand-600);
-        border-color: var(--colors-brand-600);
-      }
-
-      & > .step-text {
-        gap: 4px;
-        height: fit-content;
-        padding-right: 16px;
-
-      }
-
-      &.focus {
-        & > .step-icon {
-          outline: 2px solid var(--colors-base-black);
-        }
-        & > .step-text {
-          border-radius: var(--radius-sm);
-          outline: 2px solid var(--colors-base-black);
-        }
-      }
-    }
-
-    &-connector {
-      display: block;
-      // width: 196px;
-      width: calc(100% - 32px);
-      height: 2px;
-      background: var(--colors-gray-neutral-300);
-      position: absolute;
-      top: 16px;
-      // left: calc(-100% + 32px);
-      // right: calc(100% + 32px);
-      left: 32px;
-
-    }
-
-    [dir="rtl"] &-connector {
-      // left: calc(-100% + 32px);
-      // right: calc(-100% + 32px);
-      left: unset;
-      right: 32px;
-    }
-
-    &-connector--active {
-      background: var(--colors-brand-600);
-    }
-  }
-
-  [data-alignment="vertical"] &__step {
-    &-content {
-      flex-direction: row !important;
-      min-height: 128px;
-    }
-
-    &-connector {
-      height: calc(100% - 32px);
-      width: 2px;
-      left: 16px;
-      // top: calc(-100% + 32px);
-      top: 32px;
-
-      [dir="rtl"] & {
-        right: 16px;
-      }
-    }
-  }
-}
-
-[data-alignment="vertical"].progress-indicator {
-  flex-direction: column;
-}
-
-
-
-
-.step-label {
-  display: grid;
-  place-items: center;
-  height: 32px;
-  width: 32px;
-
-  .step-label--circle {
-    display: grid;
-    place-items: center;
-    height: 100%;
-    width: 100%;
-    border-radius: 50%;
-    border: 2px solid var(--colors-gray-neutral-300);
-    color: var(--colors-gray-neutral-300);
-    @extend .text-md-medium;
-  }
-
-  .step-label--dot {
-    display: block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: var(--colors-gray-neutral-300);
-  }
-
-  
-  &[data-state = "current"] {
-    .step-label--circle {
-      border: 2px solid var(--colors-brand-600);
-      color: var(--colors-brand-600);
-    }
-
-    .step-label--dot {
-      border: 2px solid var(--colors-brand-600);
-    }
-  }
-
-  &[data-state = "completed"] {
-    .step-label--circle {
-      border: 2px solid var(--colors-brand-600);
-      background-color: var(--colors-brand-600);
-      color: #ffffff;
-    }
-
-    .step-label--dot {
-      background-color: var(--colors-brand-600);
-    }
-  }
-
-  &[data-state = "upcomming"] {
-    .step-label--circle {
-      border: 2px solid var(--colors-gray-neutral-300);
-      color: var(--colors-gray-neutral-300);
-    }
-
-    .step-label--dot {
-      background-color: var(--colors-gray-neutral-300);
-    }
-  }
-
-}

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

@@ -1,183 +0,0 @@
-.radio {
-  margin: var(--spacing-md);
-
-  display: inline-flex;
-  gap: var(--spacing-xl);
-  padding: var(--spacing-md);
-  // border: 1px solid #000;
-  cursor: pointer;
-
-  user-select: none;
-
-  &.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 {
-      & ~ .radio-container {
-        &::before {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-    }
-
-    &:hover {
-      & ~ .radio-container {
-        &::after {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-    }
-  }
-
-  &.active input:not(:checked) ~ .radio-container {
-    background-color: var(--colors-gray-neutral-300);
-  }
-
-  &-container {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    border-radius: var(--radius-full);
-    border: 1px solid var(--colors-gray-neutral-500);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-
-    &::after,
-    &::before {
-      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;
-    }
-
-    &::before {
-      background-color: var(--colors-gray-neutral-950);
-      width: 15px;
-      height: 15px;
-      z-index: 0;
-      transition: all 0.1s ease-in-out;
-    }
-  }
-
-  & input:read-only {
-    & ~ .radio-container {
-      &::after,
-      &::before {
-        // background-color: #fff;
-      }
-    }
-  }
-
-  & input:disabled {
-    & ~ .radio-container {
-      border-color: var(--colors-border-disabled);
-
-      &::before {
-        background-color: var(--colors-border-disabled);
-        transform: translate(-50%, -50%) scale(1);
-      }
-    }
-
-    & ~ .radio__label,
-    & ~ div > .radio__label,
-    & ~ div > .radio__helper-text {
-      color: var(--colors-border-disabled);
-    }
-  }
-
-  &__label {
-    @extend .text-md-medium;
-  }
-
-  &__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;
-    }
-
-    &-text {
-    }
-  }
-
-  &--brand {
-    & input:checked {
-      & ~ .radio-container {
-        border-color: var(--colors-brand-600);
-
-        &::before {
-          background-color: var(--colors-brand-600);
-        }
-      }
-
-      & ~ .radio__label,
-      & ~ div > .radio__label {
-        color: var(--colors-text-brand-secondary);
-      }
-    }
-
-    &.active input:checked ~ .radio-container::before {
-      background-color: var(--colors-brand-700);
-    }
-
-    & input:disabled {
-      & ~ .radio-container {
-        border-color: var(--colors-border-disabled);
-
-        &::before {
-          background-color: var(--colors-border-disabled);
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-
-      & ~ .radio__label,
-      & ~ div > .radio__label,
-      & ~ div > .radio__helper-text {
-        color: var(--colors-border-disabled);
-      }
-    }
-  }
-}

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

@@ -1,77 +0,0 @@
-.rating {
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    position: relative;
-    font-size: 1.5rem;
-    color: #faaf00;
-    cursor: pointer;
-    text-align: left;
-    width: -webkit-min-content;
-    width: -moz-min-content;
-    width: min-content;
-    -webkit-tap-highlight-color: transparent;
-
-
-    &--small {
-     font-size: 24px;
-    }
-
-    &--medium {
-      font-size: 32px;
-    }
-
-    &--large {
-        font-size: 48px; 
-    }
-
-
-    &__star {
-        position: relative;
-
-        &__label {
-            cursor: inherit;
-
-            &-icon {
-                display: -webkit-box;
-                display: -webkit-flex;
-                display: -ms-flexbox;
-                display: flex;
-                -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                pointer-events: none;
-
-                & > svg {
-                    -webkit-user-select: none;
-                    -moz-user-select: none;
-                    -ms-user-select: none;
-                    user-select: none;
-                    width: 1em;
-                    height: 1em;
-                    display: inline-block;
-                    fill: currentColor;
-                    -webkit-flex-shrink: 0;
-                    -ms-flex-negative: 0;
-                    flex-shrink: 0;
-                    -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                    font-size: inherit;
-                }
-            }
-
-            &-text , &-input {
-                border: 0;
-                clip: rect(0 0 0 0);
-                height: 1px;
-                margin: -1px;
-                overflow: hidden;
-                padding: 0;
-                position: absolute;
-                white-space: nowrap;
-                width: 1px;
-            }
-        }
-
-    }
-}

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

@@ -1,23 +0,0 @@
-.shadows {
-  &-container {
-    display: flex;
-    width: 2240px;
-    padding: var(--spacing-none);
-
-    align-items: flex-start;
-    gap: var(--spacing-7xl);
-  }
-
-  &-box {
-    display: flex;
-    height: 240px;
-    max-width: 256px;
-    padding: var(--spacing-3xl);
-    align-items: flex-start;
-    gap: var(--spacing-none);
-    flex: 1 0 0;
-    border-radius: var(--radius-xl);
-    border: 1px solid var(--colors-border-primary);
-    background: var(--colors-bg-primary);
-  }
-}

package/src/assets/styles/components/_structured-list.scss

@@ -1,95 +0,0 @@
-div.table-wrapper {
-  .azm-structured-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);
-        text-align: left;
-        &:last-child {
-          border-right: none;
-        }
-        //   border: 1px solid var(--colors-gray-neutral-300);
-        padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
-        // display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: var(--colors-gray-neutral-600);
-        @extend .text-xs-medium;
-      }
-    }
-    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);
-        }
-        td {
-          div {
-            display: flex;
-            align-items: center;
-            justify-content: start;
-            .checkbox {
-              margin-left: 0px;
-              .checkbox-main {
-                min-width: 5px !important;
-              }
-            }
-          }
-        }
-      }
-      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);
-}
-
-[dir="rtl"] .azm-structured-table {
-  direction: rtl;
-  thead {
-    tr {
-      td {
-        text-align: right;
-      }
-    }
-  }
-}
-[dir="ltr"] .azm-structured-table {
-  direction: ltr;
-}