platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,192 +0,0 @@
-.switch {
-  // margin: var(--spacing-md);
-  display: flex;
-  gap: var(--spacing-xl);
-  padding: var(--spacing-none);
-  width: fit-content;
-  padding: 3px;
-  cursor: pointer;
-
-  &-main {
-    &__content {
-      &.disabled {
-        & > .switch__label,
-        & > div > .switch__label,
-        & > div > .switch__helper-text {
-          color: var(--colors-border-disabled);
-        }
-      }
-    }
-  }
-
-  .switch-wrapper {
-    position: relative;
-    display: inline-block;
-    min-width: 48px;
-    height: 24px;
-
-    input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #ccc;
-      -webkit-transition: 0.4s;
-      transition: 0.4s;
-      border-radius: 34px;
-
-      &:before {
-        position: absolute;
-        content: "";
-        height: 16px;
-        width: 16px;
-        left: 4px;
-        bottom: 4px;
-        background-color: white;
-        -webkit-transition: 0.4s;
-        transition: 0.4s;
-        border-radius: 50%;
-      }
-    }
-
-    input:checked + .slider {
-      background-color: var(--colors-brand-600);
-    }
-
-    input:focus + .slider {
-      box-shadow: 0 0 1px var(--colors-brand-600);
-    }
-
-    input:checked + .slider:before {
-      -webkit-transform: translateX(16px);
-      -ms-transform: translateX(16px);
-      transform: translateX(24px);
-    }
-
-    .slider.round {
-      border-radius: 34px;
-    }
-
-    .slider.round:before {
-      border-radius: 50%;
-    }
-  }
-
-  &-icon {
-    display: none !important;
-    color: var(--colors-base-white);
-    font-size: 18px !important;
-    font-weight: bolder !important;
-  }
-
-  &.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;
-  }
-
-  &__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);
-    margin-left: var(--spacing-3xl);
-
-    color: var(--colors-text-error-primary);
-    @extend .text-sm-medium;
-
-    &-icon {
-      width: 24px;
-    }
-  }
-
-  &--brand {
-    & input:checked {
-      & ~ .switch__label,
-      & ~ div > .switch__label {
-        color: var(--colors-text-brand-secondary);
-      }
-    }
-
-    .switch-main {
-      &__content {
-        &.disabled {
-          & .switch-wrapper > .slider--active {
-            background-color: var(--colors-brand-200);
-          }
-
-          & > .switch__label,
-          & > div > .switch__label,
-          & > div > .switch__helper-text {
-            color: var(--colors-border-disabled);
-          }
-        }
-      }
-    }
-  }
-
-  &--readonly {
-    & .switch-slider {
-      background-color: transparent !important;
-
-      .switch-icon {
-        color: var(--colors-gray-neutral-600);
-      }
-    }
-  }
-}
-
-[dir="rtl"] .switch .switch-wrapper {
-  .slider {
-    &:before {
-      left: auto;
-      right: 4px;
-    }
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(-24px); // Adjust the translation value for RTL
-  }
-}
-
-[dir="rtl"] .switch .switch__warning {
-  margin-left: 0;
-  margin-right: var(--spacing-3xl);
-}

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

@@ -1,231 +0,0 @@
-.tabs {
-  &-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    &--horizontal {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 3px;
-      position: relative;
-      width: 100%;
-
-      &::-webkit-scrollbar {
-        height: 5px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-        padding: 1px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        height: 5px;
-        border-radius: 10px;
-        border: 1px solid transparent;
-        background-color: #ccc;
-        background-clip: content-box;
-        mix-blend-mode: multiply;
-      }
-
-      &.tabs-list--divider {
-        &::after {
-          content: "";
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          z-index: 0;
-          height: 3px;
-          width: 100%;
-          border-radius: var(--radius-full);
-          background-color: var(--colors-gray-neutral-300);
-        }
-      }
-
-      &.flush {
-        // & .tabs-list__item:first-child {}
-      }
-    }
-
-    &--vertical {
-      display: inline-flex;
-      align-items: start;
-      flex-direction: column;
-      gap: 3px;
-
-      & li {
-        width: 100%;
-      }
-
-      & .tabs-list__item {
-        justify-content: start !important;
-      }
-    }
-
-    &__item {
-      display: flex;
-      padding: var(--spacing-lg) var(--spacing-xl);
-      justify-content: center;
-      align-items: center;
-      gap: var(--spacing-xs);
-      border-radius: var(--radius-xs);
-      color: var(--colors-text-secondary);
-      position: relative;
-      white-space: nowrap;
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--colors-gray-neutral-100);
-
-        & .tabs-list__label {
-          color: var(--colors-text-primary);
-        }
-      }
-
-      &:hover::after,
-      &:active::after,
-      &--active::after {
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: 1px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: calc(100% - var(--spacing-xl) * 2);
-        height: 3px;
-        border-radius: var(--radius-full);
-        background-color: var(--colors-fg-quinary-400);
-        z-index: 1;
-      }
-
-      &:focus {
-        outline: 2px solid var(--colors-base-black);
-        position: relative;
-        color: var(--colors-text-secondary);
-
-        &::before {
-          content: "";
-          display: block;
-          background-color: transparent;
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 1;
-          border: 1px solid var(--colors-base-white);
-          border-radius: var(--radius-md);
-        }
-      }
-
-      &:active {
-        background: var(--colors-gray-neutral-300);
-        outline: none;
-
-        & .tabs-list__icon {
-          color: var(--colors-text-primary);
-        }
-
-        & .tabs-list__label {
-          color: var(--colors-text-primary);
-        }
-
-        &::after {
-          background-color: var(--colors-text-primary);
-        }
-
-        &::before {
-          display: none;
-        }
-      }
-
-      &--active {
-        & .tabs-list__label {
-          @extend .text-sm-medium;
-        }
-
-        & .tabs-list__icon {
-          color: var(--colors-brand-600);
-        }
-
-        &::after {
-          background-color: var(--colors-brand-600);
-        }
-
-        &:active {
-          background-color: transparent;
-          outline: none;
-
-          & .tabs-list__icon {
-            color: var(--colors-brand-600);
-          }
-        }
-
-        &:hover {
-          background-color: transparent;
-          color: var(--colors-brand-600);
-
-          &::after {
-            background-color: var(--colors-brand-600);
-          }
-        }
-      }
-
-      &--md {
-        padding: var(--spacing-lg) var(--spacing-xl);
-      }
-
-      &--sm {
-        padding: var(--spacing-md) var(--spacing-lg);
-
-        &::after {
-          width: calc(100% - var(--spacing-lg) * 2);
-        }
-      }
-    }
-
-    &__icon {
-      display: flex;
-      align-items: center;
-      color: var(--colors-text-secondary);
-      width: 16px;
-      height: 16px;
-    }
-
-    &__label {
-      @extend .text-sm-regular;
-    }
-
-    &--vertical &__item {
-      &:hover::after,
-      &:active::after,
-      &--active::after {
-        left: 1px;
-        top: 50%;
-        right: auto;
-        bottom: auto;
-        transform: translateY(-50%);
-        height: calc(100% - var(--spacing-md) * 2);
-        min-height: 16px;
-        width: 3px;
-      }
-
-      &--md {
-        padding: var(--spacing-sm) var(--spacing-lg);
-      }
-
-      &--sm {
-        padding: var(--spacing-xxs) var(--spacing-sm);
-      }
-    }
-  }
-}
-
-[dir="rtl"] .tabs-list--vertical .tabs-list__item:hover::after,
-[dir="rtl"] .tabs-list--vertical .tabs-list__item:active::after,
-[dir="rtl"] .tabs-list--vertical .tabs-list__item--active::after {
-  right: 1px;
-  left: auto;
-}

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

@@ -1,191 +0,0 @@
-.tags {
-  .flex-column {
-    align-items: flex-start;
-  }
-
-  .flex {
-    gap: 1rem;
-  }
-}
-
-.tag {
-  display: inline-flex;
-  height: 32px;
-  padding: var(--spacing-none) var(--spacing-lg);
-  // margin-block: 1rem; // to be enhanced
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-xs);
-  border-radius: var(--radius-xs);
-  @extend .text-md-medium;
-
-  &-icon {
-    display: flex;
-    padding: 1.875px 1.5px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  // sizes
-  &--lg {
-    height: 32px;
-    @extend .text-md-medium;
-
-    span.tag-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &--md {
-    height: 24px;
-    @extend .text-xs-medium;
-
-    span.tag-icon {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  &--sm {
-    height: 20px;
-    @extend .text-2xs-semibold;
-
-    span.tag-icon {
-      width: 10px;
-      height: 10px;
-    }
-  }
-
-  // types
-  &--rounded {
-    border-radius: var(--radius-full);
-  }
-
-  &--icon {
-    padding: 0;
-
-    &.tag--lg {
-      width: 32px;
-      height: 32px;
-    }
-
-    &.tag--md {
-      width: 24px;
-      height: 24px;
-    }
-
-    &.tag--sm {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  // variants
-  &--neutral {
-    color: var(--tag-text-neutral);
-    background: var(--tag-background-neutral-light);
-    border: 1px solid var(--border-neutral-secondary);
-
-    &-outlined {
-      border: 1px solid var(--tag-border-neutral);
-      background-color: transparent;
-      color: var(--tag-text-neutral);
-    }
-  }
-
-  &--success {
-    color: var(--tag-text-success);
-    background-color: var(--tag-background-success-light);
-    border: 1px solid var(--tag-border-success-light);
-
-    &-outlined {
-      border: 1px solid var(--tag-border-success);
-      background-color: transparent;
-      color: var(--tag-text-success);
-    }
-  }
-
-  &--error {
-    color: var(--tag-text-error);
-    background-color: var(--tag-background-error-light);
-    border: 1px solid var(--tag-border-error-light);
-
-    &-outlined {
-      border: 1px solid var(--tag-border-error);
-      background-color: transparent;
-      color: var(--tag-text-error);
-    }
-  }
-
-  &--warning {
-    color: var(--tag-text-warning);
-    background-color: var(--tag-background-warning-light);
-    border: 1px solid var(--tag-border-warning-light);
-
-    &-outlined {
-      border: 1px solid var(--tag-border-error);
-      background-color: transparent;
-      color: var(--tag-text-warning);
-    }
-  }
-
-  &--info {
-    color: var(--tag-text-info);
-    background-color: var(--tag-background-info-light);
-    border: 1px solid var(--tag-border-info-light);
-
-    &-outlined {
-      border: 1px solid var(--tag-border-info);
-      background-color: transparent;
-      color: var(--tag-text-info);
-    }
-  }
-
-  &--purple {
-    color: var(--colors-purple-700);
-    background-color: var(--colors-purple-50);
-    border: 1px solid var(--colors-purple-200);
-
-    &-outlined {
-      border: 1px solid var(--colors-purple-500);
-      background-color: transparent;
-      color: var(--colors-purple-700);
-    }
-  }
-
-  &--pink {
-    color: var(--colors-pink-700);
-    background-color: var(--colors-pink-50);
-    border: 1px solid var(--colors-pink-200);
-
-    &-outlined {
-      border: 1px solid var(--colors-pink-500);
-      background-color: transparent;
-      color: var(--colors-pink-700);
-    }
-  }
-
-  &--orange {
-    color: var(--colors-orange-700);
-    background-color: var(--colors-orange-50);
-    border: 1px solid var(--colors-orange-200);
-
-    &-outlined {
-      border: 1px solid var(--colors-orange-500);
-      background-color: transparent;
-      color: var(--colors-orange-700);
-    }
-  }
-
-  &--on-color {
-    color: var(--colors-base-white);
-    background-color: hsl(var(--colors-alpha-white) / 30%);
-
-    &-outlined {
-      border: 1px solid hsl(var(--colors-alpha-white) / 90%);
-      background-color: transparent;
-      color: hsl(var(--colors-alpha-white) / 90%);
-    }
-  }
-}