platformscode-new-react 0.0.4 → 0.0.5

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

@@ -1,294 +0,0 @@
-.textarea {
-  display: inline-flex;
-  height: 40px;
-  width: 320px;
-  max-width: 332px;
-  min-width: 200px;
-  justify-content: flex-start;
-  border-radius: var(--radius-sm);
-  gap: var(--spacing-xs);
-  border: 1px solid var(--colors-gray-neutral-400);
-  background: var(--colors-base-white);
-  overflow: hidden;
-  position: relative;
-
-  &:hover {
-    border-color: var(--colors-gray-neutral-700);
-  }
-
-  &[data-error="true"] {
-    border-color: red;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0%;
-    height: 2px;
-    transform: translateX(-50%);
-    background-color: var(--colors-gray-neutral-950);
-    transition: width 0.2s ease-in-out;
-  }
-
-  &__field {
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    height: 100%;
-    width: 100%;
-    color: var(--colors-text-primary);
-    padding: var(--spacing-lg) var(--spacing-xl);
-    resize: none;
-    position: relative;
-    @extend .text-md-regular;
-
-    &::placeholder {
-      color: var(--colors-text-placeholder);
-      @extend .text-md-regular;
-    }
-
-    &[disabled] {
-      cursor: not-allowed;
-    }
-  }
-
-  &__field--hidden-scrollbar ::-webkit-scrollbar {
-    display: none;
-  }
-
-  &__field--hidden-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  &__field--resize {
-    resize: vertical;
-  }
-
-  &.focus {
-    @extend .shadow-md;
-
-    &::after {
-      width: 100%;
-    }
-  }
-
-  &.active {
-    &::after {
-      width: 50%;
-    }
-  }
-
-  &--readonly,
-  &--disabled {
-    &,
-    &:hover {
-      border-color: var(--colors-gray-neutral-300);
-      box-shadow: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-
-    & .textarea__field {
-      &,
-      &::placeholder {
-        color: var(--colors-text-primary);
-      }
-    }
-  }
-
-  &--disabled {
-    & .textarea__field {
-      &,
-      &::placeholder {
-        color: var(--colors-gray-neutral-300);
-      }
-    }
-
-    & .textarea__icon span,
-    & .textarea__prefix--subtle-text,
-    & .textarea__prefix--solid-text {
-      color: var(--colors-gray-neutral-300);
-    }
-  }
-
-  &__icon {
-    // margin-right: var(--spacing-xs);
-    // margin-left: var(--spacing-xl);
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-
-    & span {
-      color: var(--colors-gray-neutral-700);
-      font-size: 20px;
-    }
-  }
-
-  &__feedback-icon {
-    height: fit-content;
-    display: inline-flex;
-    align-items: center;
-    // margin-left: var(--spacing-xs);
-    // margin-right: var(--spacing-xl);
-
-    position: absolute;
-    top: 12px;
-    right: 16px;
-
-    span {
-      font-size: 20px;
-      position: relative;
-      z-index: 0;
-    }
-
-    &--success {
-      color: var(--colors-brand-600);
-
-      & span::after {
-        background-color: var(--colors-brand-100);
-      }
-    }
-
-    &--error {
-      color: var(--colors-error-600);
-
-      & span::after {
-        background-color: var(--colors-error-100);
-      }
-    }
-
-    &--warning {
-      color: var(--colors-warning-600);
-
-      & span::after {
-        background-color: var(--colors-warning-100);
-      }
-
-      &-triangle {
-        color: var(--colors-warning-600);
-
-        & span::after {
-          width: 0 !important;
-          height: 0 !important;
-          transform: scale(1) !important;
-          border: 12px solid rgba(0, 0, 0, 0);
-          border-top: 0;
-          border-bottom: 20px solid var(--colors-warning-100);
-          border-radius: 0px !important;
-          left: -2px !important;
-          top: -1px !important;
-        }
-      }
-    }
-
-    &--ring {
-      & span::after {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        transform: scale(1.16);
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: var(--radius-full);
-        z-index: -1;
-      }
-    }
-  }
-
-  [dir="rtl"] &__feedback-icon {
-    right: auto;
-    left: 16px;
-  }
-
-  &__dropdown {
-    &-list {
-      @extend .dropdown__list !optional;
-    }
-
-    &-btn.open + &-list {
-      z-index: 2;
-      opacity: 1;
-      padding-block: var(--spacing-md);
-      max-height: 376px;
-      pointer-events: auto;
-      overflow-y: auto;
-    }
-  }
-
-  &--lighter {
-    border: 0;
-
-    &:hover {
-      border: 1px solid var(--colors-gray-neutral-400);
-    }
-
-    &.focus {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-base-white);
-    }
-
-    &.active {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-gray-neutral-100);
-    }
-  }
-
-  &--darker {
-    border: 0;
-    background-color: var(--colors-gray-neutral-50);
-
-    &:hover {
-      border: 1px solid var(--colors-gray-neutral-400);
-    }
-
-    &.focus {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-base-white);
-    }
-
-    &.active {
-      border: 1px solid var(--colors-gray-neutral-400);
-      background-color: var(--colors-gray-neutral-100);
-    }
-  }
-
-  &--error {
-    &,
-    &:hover {
-      outline-color: var(--colors-error-600);
-    }
-
-    &::after {
-      background-color: var(--colors-error-600);
-    }
-  }
-
-  &--lg {
-    height: auto;
-    min-height: 96px;
-
-    & .textarea__field {
-      &,
-      &::placeholder {
-        @extend .text-sm-regular;
-      }
-    }
-
-    &__feedback-icon {
-      span {
-        font-size: 20px;
-      }
-    }
-  }
-
-  &.disabled {
-    opacity: 0.6;
-  }
-}

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

@@ -1,257 +0,0 @@
-.tooltip {
-  width: fit-content;
-  position: relative;
-  z-index: 2;
-  &-main {
-    position: absolute;
-    width: 240px;
-    min-width: 160px;
-
-    @extend .shadow-lg;
-
-    border-radius: var(--radius-sm);
-    background: var(--tooltip-background-light);
-
-    &__wrapper {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--tooltip-gap);
-      position: relative;
-      padding: var(--tooltip-padding);
-    }
-
-    &__icon {
-      font-size: 18px;
-      color: var(--icon-neutral);
-      display: flex;
-      align-items: center;
-    }
-
-    .flex-column {
-      gap: 4px;
-    }
-
-    &__content {
-      &__title {
-        color: var(--tooltip-text-heading-light);
-        @extend .text-xs-semibold;
-      }
-
-      &__helper-text {
-        color: var(--tooltip-text-paragraph-light);
-
-        @extend .text-xs-regular;
-      }
-    }
-
-    &__beak {
-      position: absolute;
-      left: 50%;
-      border-style: solid;
-
-      &[data-beak-direction='top-start'] {
-        left: 14px;
-        top: 0;
-        transform: translateY(-100%);
-        border-width: 0 6px 6px 6px;
-        border-color: transparent transparent var(--tooltip-background-light) transparent;
-      }
-
-      &[data-beak-direction='top-center'] {
-        left: 50%;
-        top: 0;
-        transform: translate(-50%, -100%);
-        border-width: 0 6px 6px 6px;
-        border-color: transparent transparent var(--tooltip-background-light) transparent;
-      }
-
-      &[data-beak-direction='top-end'] {
-        left: calc(100% - 14px);
-        top: 0;
-        transform: translateY(-100%);
-        border-width: 0 6px 6px 6px;
-        border-color: transparent transparent var(--tooltip-background-light) transparent;
-      }
-
-      &[data-beak-direction='right-start'] {
-        top: 8px;
-        left: 100%;
-        border-width: 6px 0 6px 6px;
-        border-color: transparent transparent transparent var(--tooltip-background-light);
-      }
-
-      &[data-beak-direction='right-center'] {
-        top: 50%;
-        left: 100%;
-        transform: translateY(-50%);
-        border-width: 6px 0 6px 6px;
-        border-color: transparent transparent transparent var(--tooltip-background-light);
-      }
-
-      &[data-beak-direction='right-end'] {
-        bottom: 0;
-        left: 100%;
-        transform: translateY(-8px);
-        border-width: 6px 0 6px 6px;
-        border-color: transparent transparent transparent var(--tooltip-background-light);
-      }
-
-      &[data-beak-direction='bottom-start'] {
-        left: 14px;
-        top: 100%;
-        border-width: 6px 6px 0px 6px;
-        border-color: var(--tooltip-background-light) transparent transparent transparent;
-      }
-
-      &[data-beak-direction='bottom-center'] {
-        left: 50%;
-        top: 100%;
-        transform: translateX(-50%);
-        border-width: 6px 6px 0px 6px;
-        border-color: var(--tooltip-background-light) transparent transparent transparent;
-      }
-
-      &[data-beak-direction='bottom-end'] {
-        left: calc(100% - 14px);
-        top: 100%;
-        border-width: 6px 6px 0px 6px;
-        border-color: var(--tooltip-background-light) transparent transparent transparent;
-      }
-
-      &[data-beak-direction='left-start'] {
-        top: 8px;
-        left: -5px;
-        border-width: 6px 6px 6px 0px;
-        border-color: transparent var(--tooltip-background-light) transparent transparent;
-      }
-
-      &[data-beak-direction='left-center'] {
-        top: 50%;
-        left: -5px;
-        transform: translateY(-50%);
-        border-width: 6px 6px 6px 0px;
-        border-color: transparent var(--tooltip-background-light) transparent transparent;
-      }
-
-      &[data-beak-direction='left-end'] {
-        top: calc(100% - 14px);
-        left: -5px;
-        transform: translateY(-50%);
-        border-width: 6px 6px 6px 0px;
-        border-color: transparent var(--tooltip-background-light) transparent transparent;
-      }
-    }
-
-    &[data-direction='top'] {
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-bottom: 14px;
-    }
-
-    &[data-direction='left'] {
-      top: 50%;
-      right: 100%;
-      transform: translateY(-50%);
-      margin-right: 14px;
-    }
-
-    &[data-direction='bottom'] {
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-top: 14px;
-    }
-
-    &[data-direction='right'] {
-      top: 50%;
-      left: 100%;
-      transform: translateY(-50%);
-
-      margin-left: 14px;
-    }
-  }
-  &-item {
-    width: fit-content;
-    cursor: pointer;
-
-    @extend .text-md-regular;
-  }
-}
-
-.tooltip--light {
-  .tooltip-main {
-    background: var(--tooltip-background-light);
-  }
-}
-
-.tooltip[data-theme='dark'] .tooltip {
-  &-main {
-    background: var(--tooltip-background-dark);
-
-    &__icon {
-      color: var(--icon-oncolor);
-      fill: var(--icon-neutral);
-    }
-
-    &__content {
-      &__title {
-        color: var(--tooltip-text-heading-dark);
-      }
-
-      &__helper-text {
-        color: var(--tooltip-text-paragraph-dark);
-      }
-    }
-
-    &__beak {
-      &[data-beak-direction='top-start'] {
-        border-color: transparent transparent var(--tooltip-background-dark) transparent;
-      }
-
-      &[data-beak-direction='top-center'] {
-        border-color: transparent transparent var(--tooltip-background-dark) transparent;
-      }
-
-      &[data-beak-direction='top-end'] {
-        border-color: transparent transparent var(--tooltip-background-dark) transparent;
-      }
-
-      &[data-beak-direction='bottom-start'] {
-        border-color: var(--tooltip-background-dark) transparent transparent transparent;
-      }
-
-      &[data-beak-direction='bottom-center'] {
-        border-color: var(--tooltip-background-dark) transparent transparent transparent;
-      }
-
-      &[data-beak-direction='bottom-end'] {
-        border-color: var(--tooltip-background-dark) transparent transparent transparent;
-      }
-
-      &[data-beak-direction='left-start'] {
-        border-color: transparent var(--tooltip-background-dark) transparent transparent;
-      }
-
-      &[data-beak-direction='left-center'] {
-        border-color: transparent var(--tooltip-background-dark) transparent transparent;
-      }
-
-      &[data-beak-direction='left-end'] {
-        border-color: transparent var(--tooltip-background-dark) transparent transparent;
-      }
-
-      &[data-beak-direction='right-start'] {
-        border-color: transparent transparent transparent var(--tooltip-background-dark);
-      }
-
-      &[data-beak-direction='right-center'] {
-        border-color: transparent transparent transparent var(--tooltip-background-dark);
-      }
-
-      &[data-beak-direction='right-end'] {
-        border-color: transparent transparent transparent var(--tooltip-background-dark);
-      }
-    }
-  }
-}

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

@@ -1,186 +0,0 @@
-.footer {
-  // display: flex;
-  // max-width: 1327px;
-  padding: var(--spacing-none) var(--spacing-4xl);
-  // justify-content: center;
-  // align-items: flex-start;
-  background-color: var(--colors-gray-neutral-100);
-
-  &--bg-default {
-    background-color: var(--colors-gray-neutral-100);
-  }
-
-  &--bg-brand {
-    background-color: var(--colors-brand-900);
-  }
-
-  &-icon-section {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    a {
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 30px;
-    }
-  }
-  &-title-description {
-    max-width: var(--width-2xl);
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    justify-content: space-between;
-    margin-block: var(--spacing-7xl);
-    h3 {
-      font-size: 72px;
-      font-weight: 700;
-      line-height: 90px;
-      letter-spacing: -1.44px;
-    }
-    p {
-      font-size: 24px;
-      font-weight: 400;
-      line-height: 32px; /* 133.333% */
-    }
-  }
-  &-content {
-    display: flex;
-    // max-width: 1280px;
-    padding: var(--spacing-3xl, 24px) var(--spacing-none, 0px);
-
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  &__nav-links {
-    display: flex;
-    padding: var(--spacing-xl) var(--spacing-none);
-    align-items: flex-start;
-    align-content: flex-start;
-    gap: var(--spacing-3xl);
-    align-self: stretch;
-    flex-wrap: wrap;
-    // border-bottom: 1px solid var(--colors-border-primary);
-    justify-content: space-around;
-    margin-bottom: var(--spacing-6xl);
-    & ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-
-    &-column {
-      min-width: 180px;
-
-      &,
-      &-body {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--spacing-md);
-      }
-
-      &-title {
-        color: var(--colors-text-primary);
-        @extend .text-lg-semibold;
-        display: flex;
-        padding-bottom: var(--spacing-md, 8px);
-        flex-direction: column;
-        align-items: flex-start;
-        border-bottom: 1px solid var(--colors-border-primary);
-      }
-
-      &-divider {
-      }
-
-      &-body {
-      }
-    }
-  }
-
-  &__nav-Link {
-  }
-
-  &__basic {
-    display: flex;
-    padding: var(--spacing-xl) var(--spacing-none);
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    // gap: var(--spacing-3xl);
-    width: 100%;
-    min-height: 106px;
-  }
-
-  &__actions-copyright {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-xl);
-    flex: 1;
-
-    @include responsive(tab-port) {
-      flex: auto;
-    }
-  }
-
-  &__actions {
-    display: flex;
-    align-items: flex-start;
-    align-content: flex-start;
-    gap: var(--spacing-xl);
-    align-self: stretch;
-    flex-wrap: wrap;
-    list-style: none;
-  }
-  &__extra-actions {
-    display: flex;
-    align-items: flex-start;
-    align-content: flex-start;
-    gap: var(--spacing-xl);
-    align-self: stretch;
-    flex-wrap: wrap;
-    list-style: none;
-    li {
-      a {
-        span {
-          text-decoration: none;
-          //styleName: Text xs/Regular;
-          font-size: 12px;
-          font-weight: 400;
-          line-height: 18px;
-        }
-      }
-    }
-  }
-
-  &__copyright {
-    color: var(--colors-text-primary);
-    margin-top: 40px;
-  }
-
-  &__logos {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-xl);
-  }
-
-  &--bg-default {
-    background-color: var(--colors-gray-neutral-100);
-  }
-
-  &--bg-brand {
-    background-color: var(--colors-brand-900);
-
-    & .footer__nav-links-column-title {
-      color: var(--colors-text-primary_on-brand);
-      border-color: hsla(var(--colors-alpha-white) / 30%);
-    }
-
-    & .footer__copyright {
-      color: var(--colors-text-primary_on-brand);
-    }
-  }
-}