platformscode-new-react 0.0.4 → 0.0.5

package/src/assets/styles/components/_date-picker.scss

@@ -1,257 +0,0 @@
-.date-picker-root {
-  @extend .shadow-2xl;
-  border-radius: var(--radius-8, 8px);
-  background: var(--colors-base-white);
-  width: fit-content;
-
-  display: flex;
-  gap: 15px;
-
-  padding: 16px;
-
-  &__quick-options {
-    .options-list {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      margin-top: 20px;
-      list-style: none;
-      min-width: 120px;
-
-      & button {
-        background: none;
-        outline: none;
-        border: 0;
-        cursor: pointer;
-      }
-    }
-  }
-
-  &__main {
-    &__inputs {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      gap: 32px;
-      & .input {
-        width: 50px;
-        max-width: unset;
-        min-width: unset;
-        flex: 1;
-        [data-dual-view="true"] & {
-          width: 200px;
-        }
-      }
-    }
-
-    &__buttons {
-      margin-top: 16px;
-      border-top: 1px solid gray;
-      padding-top: 16px;
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    &__content-wrapper {
-      display: flex;
-      gap: 32px;
-    }
-  }
-}
-
-.date-picker {
-  display: inline-flex;
-  // padding: var(--size-16, 16px);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 392px;
-
-  /* Shadows/shadow-2xl */
-  // @extend .shadow-2xl;
-
-  &__date-grid,
-  &__weekdays {
-    display: flex;
-    flex-wrap: wrap;
-    width: 392px;
-  }
-
-  &__navigator {
-    width: 100%;
-    display: flex;
-    align-items: center;
-
-    &-label {
-      padding-left: 20px;
-      flex: 1;
-      color: var(--colors-text-primary);
-      @extend .text-md-medium;
-    }
-  }
-
-  &__weekday {
-    display: flex;
-    width: 56px;
-    height: 56px;
-    justify-content: center;
-    align-items: center;
-    border: 0;
-    background-color: transparent;
-  }
-}
-
-.date-cell {
-  display: flex;
-  width: 56px;
-  height: 56px;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  border: 0;
-  background-color: transparent;
-
-  &__label {
-    display: flex;
-    // width: 48px;
-    width: 100%;
-    height: 48px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-none);
-    background-color: transparent;
-    mix-blend-mode: multiply;
-    color: var(--colors-text-primary);
-    @extend .text-md-regular;
-    span {
-      display: grid;
-      place-items: center;
-      width: 48px;
-      height: 100%;
-      border-radius: var(--radius-full);
-    }
-  }
-
-  &:hover {
-    .date-cell__label {
-      span {
-        background: var(--colors-gray-neutral-200);
-      }
-    }
-  }
-
-  &:visited {
-  }
-
-  &:focus {
-  }
-
-  &:active,
-  &.pressed {
-    .date-cell__label {
-      span {
-        background: var(--colors-gray-neutral-300);
-      }
-    }
-  }
-
-  // default cell styles
-  &--selected {
-    // styles for selected state
-    .date-cell__label {
-      span {
-        color: var(--colors-base-white) !important;
-        border-radius: var(--radius-full);
-        background-color: var(--colors-brand-600);
-      }
-    }
-  }
-
-  &--today {
-    .date-cell__label {
-      span {
-        border: 2px solid var(--colors-brand-600);
-        color: var(--colors-brand-600);
-        @extend .text-md-bold;
-      }
-    }
-
-    &:hover {
-      .date-cell__label {
-        span {
-          background: var(--colors-brand-100);
-        }
-      }
-    }
-
-    &:visited {
-    }
-
-    &:focus {
-    }
-
-    &:active,
-    &.pressed {
-      .date-cell__label {
-        span {
-          background: var(--colors-brand-200);
-          // color: var(--colors-base-white)
-        }
-      }
-    }
-  }
-
-  &--disabled {
-    // styles for disabled state
-    opacity: 0.5;
-  }
-
-  &[disabled] {
-    opacity: 0.3;
-  }
-
-  .date-cell__label {
-    position: relative;
-  }
-
-  &--mid-range {
-    .date-cell__label {
-      background-color: var(--colors-brand-100);
-      span {
-      }
-    }
-  }
-}
-
-.date-cell--mid-range--first-child {
-  .date-cell__label::before {
-    content: "";
-    width: 52px;
-    height: 48px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    border-radius: 50% 0 0 50%;
-    background-color: var(--colors-brand-100);
-    z-index: -1;
-  }
-}
-
-.date-cell--mid-range--last-child {
-  .date-cell__label::before {
-    content: "";
-    width: 52px;
-    height: 48px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 0 50% 50% 0;
-    background-color: var(--colors-brand-100);
-    z-index: -1;
-  }
-}
-
-[dir="rtl"] .date-picker__navigator button {
-  transform: rotate(180deg);
-}

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

@@ -1,479 +0,0 @@
-.dropdown {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 200px;
-  position: relative;
-  border-radius: var(--radius-sm);
-
-  &__label {
-    color: var(--colors-text-placeholder);
-    display: none;
-    @extend .text-md-regular;
-
-    &--selection {
-      color: var(--colors-text-primary);
-      display: inline-block;
-
-      & ~ .dropdown__label-placeholder {
-        display: none;
-      }
-    }
-  }
-
-  /* Styling the select arrow */
-  &__chevron {
-    position: absolute;
-    top: 50%;
-    right: var(--spacing-xl);
-    transform: translateY(-50%);
-    color: var(--colors-gray-neutral-700);
-    transition: all 0.4s ease-in-out;
-    display: flex;
-  }
-
-  /* Style the select itself */
-  &__btn {
-    cursor: pointer;
-    height: auto;
-    min-height: 40px;
-    width: 100%;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--colors-gray-neutral-400);
-    background-color: var(--colors-base-white);
-    padding: var(--spacing-none) var(--spacing-xl);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-
-    color: var(--colors-text-placeholder);
-    @extend .text-md-regular;
-
-    &:focus {
-      outline: 0;
-    }
-
-    &:hover {
-      border-color: var(--colors-gray-neutral-700);
-    }
-
-    &::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;
-      // display: none;
-    }
-
-    &.open {
-      @extend .shadow-md;
-
-      & .dropdown__chevron {
-        transform: rotate(180deg) translateY(50%);
-      }
-
-      &::after {
-        width: 100%;
-      }
-    }
-
-    &.active {
-      background-color: var(--Colors-Gray-neutral-50);
-
-      &::after {
-        width: 50%;
-      }
-    }
-  }
-
-  &--readonly,
-  &--disabled {
-    & .dropdown {
-      &__btn {
-        border-color: var(--colors-gray-neutral-300);
-
-        &:hover {
-          border-color: var(--colors-gray-neutral-300);
-          box-shadow: none !important;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &__btn,
-      &__label,
-      &__label-placeholder {
-        color: var(--colors-text-primary);
-      }
-
-      &__chevron {
-        color: var(--colors-gray-neutral-300);
-      }
-    }
-  }
-
-  &--disabled {
-    & .dropdown {
-      &__btn,
-      &__label,
-      &__label-placeholder {
-        color: var(--colors-gray-neutral-300);
-      }
-    }
-  }
-
-  &__list {
-    display: flex;
-    padding: var(--spacing-md);
-    flex-direction: column;
-    align-items: flex-start;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--colors-border-primary);
-    background: var(--colors-base-white);
-    @extend .shadow-xl;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 40px;
-    overflow-y: auto;
-    list-style: none;
-    height: auto;
-    max-height: 0;
-    padding-block: 0;
-    z-index: -2;
-    opacity: 0;
-    overflow: hidden;
-    transition: z-index 0.1s ease-in-out, padding-block 0.1s ease-in-out,
-      max-height 0.2s 0.01s ease-in-out;
-    pointer-events: none;
-    // z-index: 2;
-
-    // scrollbar-width: ;
-
-    &::-webkit-scrollbar {
-      height: 100px;
-      width: calc(8px + 2 * var(--spacing-xs));
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-      padding: var(--spacing-xs);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      height: 100px;
-      border-radius: var(--radius-full);
-      border: var(--spacing-xs) solid transparent;
-      background-color: var(--colors-gray-neutral-300);
-      background-clip: content-box;
-      mix-blend-mode: multiply;
-    }
-
-    li {
-      width: 100%;
-      padding: 0;
-      margin: 0;
-    }
-
-    &-group {
-      list-style: none;
-
-      &-label {
-        padding: var(--spacing-md, 8px) var(--spacing-md, 8px)
-          var(--spacing-none, 0px) var(--spacing-md, 8px) !important;
-        color: var(--colors-text-quarterary);
-        @extend .text-sm-semibold;
-      }
-    }
-  }
-
-  &__btn.open + &__list {
-    z-index: 2;
-    opacity: 1;
-    // transform: translate(0);
-    // height: 100%;
-    padding-block: var(--spacing-md);
-    max-height: 376px;
-    // height: auto;
-    pointer-events: auto;
-    overflow-y: auto;
-  }
-
-  &__option {
-    cursor: pointer;
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    display: flex;
-    padding: var(--spacing-md);
-    gap: var(--spacing-md);
-    border-radius: var(--radius-sm);
-    background-color: transparent;
-    border: 0;
-    margin: 0;
-
-    &-label {
-      @extend .text-sm-regular;
-      color: var(--colors-text-primary);
-    }
-
-    &-icon {
-      opacity: 0;
-    }
-
-    &:hover {
-      background-color: var(--colors-gray-neutral-100);
-    }
-
-    &:focus {
-      outline: 2px solid var(--colors-base-black);
-    }
-
-    &.active {
-      outline: none;
-      background-color: var(--colors-gray-neutral-200);
-    }
-
-    &.selected > &-icon {
-      opacity: 1;
-    }
-
-    &--checkbox {
-      & .dropdown__option-icon {
-        display: none !important;
-        color: var(--colors-base-white);
-        font-size: 18px !important;
-        font-weight: bolder !important;
-      }
-
-      &.selected {
-        & > .dropdown__option-icon-container {
-          background-color: var(--colors-gray-neutral-950);
-
-          & > .dropdown__option-icon {
-            opacity: 1;
-            display: inline-block !important;
-            color: var(--colors-base-white) !important;
-          }
-        }
-      }
-
-      .dropdown__option-icon-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;
-        -ms-user-select: none;
-        user-select: none;
-      }
-    }
-  }
-
-  &--multi-select {
-    min-height: 40px;
-    height: auto;
-
-    & .dropdown__option {
-      justify-content: flex-start;
-    }
-  }
-
-  &--error {
-    .dropdown__btn {
-      border-color: var(--colors-error-600);
-
-      &::after {
-        background-color: var(--colors-error-600);
-      }
-    }
-  }
-
-  &__feedback-icon {
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    // margin-left: var(--spacing-xs);
-    margin-right: calc(var(--spacing-xl) + 10px);
-    // color: var(--colors-error-600);
-
-    & span {
-      font-size: 20px;
-      position: relative;
-      z-index: 0;
-
-      &::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;
-        // background-color: var(--colors-error-100);
-      }
-    }
-
-    &--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);
-      }
-    }
-  }
-
-  &--lighter {
-    & .dropdown__btn {
-      border: 0;
-
-      &:hover {
-        border: 1px solid var(--colors-gray-neutral-400);
-      }
-
-      &.open {
-        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 {
-    & .dropdown__btn {
-      border: 0;
-      background-color: var(--colors-gray-neutral-50);
-
-      &:hover {
-        border: 1px solid var(--colors-gray-neutral-400);
-      }
-
-      &.open {
-        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);
-      }
-    }
-  }
-
-  &--lg {
-    & .dropdown {
-      &__btn {
-        height: auto;
-        min-height: 40px;
-      }
-
-      &__label {
-        &,
-        &-placeholder {
-          @extend .text-md-regular;
-        }
-      }
-
-      &__feedback-icon {
-        span {
-          font-size: 20px;
-        }
-      }
-
-      &__list {
-        top: 40px;
-      }
-
-      &__option {
-        &-icon {
-          font-size: 24px;
-        }
-
-        &-label {
-          @extend .text-md-regular;
-        }
-      }
-    }
-  }
-
-  &--md {
-    & .dropdown {
-      &__btn {
-        height: auto;
-        min-height: 32px;
-      }
-
-      &__label {
-        &,
-        &-placeholder {
-          @extend .text-sm-regular;
-        }
-      }
-
-      &__feedback-icon {
-        span {
-          font-size: 16px;
-        }
-      }
-
-      &__list {
-        top: 32px;
-      }
-
-      &__option {
-        &-icon {
-          font-size: 20px;
-        }
-
-        &-label {
-          @extend .text-sm-regular;
-        }
-      }
-    }
-  }
-}
-
-[dir="rtl"] .dropdown__chevron {
-  right: auto;
-  left: var(--spacing-xl);
-}