cats-ui-lib 2.0.1 → 2.0.2

package/src/lib/components/date-time-picker/date-time-picker.component.scss

@@ -1,305 +0,0 @@
-@use "../../styles" as *;
-
-.calendar_wrapper {
-  @include box(100%, 100%);
-  @include flex("", "", "", column);
-  position: relative;
-  .pe-none {
-    pointer-events: none;
-  }
-  .date_box {
-    @include flex();
-    @include border($radius: rem(8px));
-    height: rem(56px);
-    input {
-      @include fontStyle(var(--fs-16), 140%);
-      @include box(100%, 100%);
-      cursor: pointer;
-      @include border($width: 0, $radius: rem(8px));
-      padding: rem(8px) rem(16px);
-      &::placeholder {
-        color: var(--neutral-400);
-      }
-    }
-    img {
-      max-width: rem(20px);
-      margin-right: rem(16px);
-      cursor: pointer;
-    }
-  }
-  .calendar-popup {
-    position: absolute;
-    top: rem(56px);
-    right: 0;
-    z-index: 10;
-    background: var(--white);
-    @include border($radius: rem(8px));
-    padding: rem(8px) rem(8px) rem(0px) rem(8px);
-    box-shadow: 0 rem(4px) rem(8px) 0 var(--box-shadow);
-    width: auto;
-    min-width: rem(400px);
-    min-height: rem(450px);
-    .calendar-header {
-      height: rem(48px);
-      @include flex(space-between, center);
-      margin-bottom: rem(8px);
-
-      .navigation-button {
-        border-radius: rem(8px);
-        cursor: pointer;
-        font-size: var(--fs-20);
-        i-feather {
-          @include box(rem(24px), rem(24px));
-        }
-      }
-
-      .month-year {
-        @include fontStyle(var(--fs-16), rem(28px), 600);
-        color: var(--neutral-600);
-        .year,
-        .month {
-          padding: rem(4px) rem(8px);
-          border-radius: rem(16px);
-          cursor: pointer;
-          &.selected {
-            color: var(--blue-700);
-          }
-        }
-        &:hover {
-          color: var(--blue-700);
-          transition: ease-in-out 0.2s;
-        }
-      }
-    }
-    .year-selector {
-      @include flex(center, center);
-      .year-grid {
-        width: 100%;
-      }
-      img {
-        max-width: rem(20px);
-      }
-    }
-    .year-grid,
-    .month-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: rem(8px);
-      @include fontStyle(var(--fs-16), rem(28px), 500);
-      height: rem(375px);
-      .month,
-      .year {
-        @include flex(center, center);
-        cursor: pointer;
-        border-radius: rem(4px);
-        &:hover,
-        &.selected {
-          color: var(--white);
-          background-color: var(--blue-600);
-          transition: ease-in-out 0.2s;
-        }
-      }
-    }
-    .calendar_body {
-      @include flex(space-between);
-      .calendar-grid {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        text-align: center;
-        min-width: rem(382px);
-        .days_name {
-          height: rem(48px);
-          @include fontStyle(var(--fs-16), rem(28px), 600);
-          color: var(--neutral-600);
-          @include flex(center, center);
-        }
-        %common_td_style {
-          background-color: var(--blue-600);
-          color: var(--white);
-          border-radius: 0;
-        }
-        .calendar-day {
-          border-radius: rem(8px);
-          cursor: pointer;
-          background-color: var(--blue-50);
-          @include box(rem(48px), rem(48px));
-          @include flex(center, center);
-          @include fontStyle(var(--fs-16), rem(32px), 500);
-          color: var(--neutral-500);
-          &.active {
-            background-color: var(--blue-600);
-            color: var(--white);
-          }
-          &:hover {
-            background-color: var(--blue-100);
-            border: rem(1px) solid var(--blue-700);
-            color: var(--blue-700);
-            transition: ease-in-out 0.3s;
-          }
-          &:not(:last-child) {
-            margin-bottom: rem(8px);
-          }
-          &.selected {
-            background-color: var(--orange-600);
-            color: var(--white);
-          }
-          &.disabled {
-            color: var(--neutral-400);
-            pointer-events: none;
-            background: var(--neutral-200);
-          }
-          &.notInCurrentMonth {
-            pointer-events: none;
-            color: var(--neutral-300);
-            background-color: var(--white);
-          }
-          &.active_start {
-            @extend %common_td_style;
-            border-top-left-radius: rem(4px);
-            border-bottom-left-radius: rem(4px);
-          }
-          &.range_between_active {
-            color: var(--blue-600);
-            background-color: var(--blue-100);
-          }
-          &.active_end {
-            @extend %common_td_style;
-            border-top-right-radius: rem(4px);
-            border-bottom-right-radius: rem(4px);
-          }
-        }
-      }
-      .times {
-        min-width: rem(85px);
-        max-height: rem(375px);
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: rem(8px);
-        border-radius: rem(4px);
-        background-color: var(--neutral-50);
-        @include fontStyle(var(--fs-14), rem(24px), 400);
-        @include flex("", "", rem(4px), column);
-
-        .span_time {
-          color: var(--neutral-500);
-          display: inline-block;
-          width: rem(69px);
-          text-align: center;
-          cursor: pointer;
-          padding: 0 rem(4px);
-          border-radius: rem(4px);
-          &:hover,
-          &.active {
-            background-color: var(--blue-600);
-            color: var(--white);
-          }
-        }
-      }
-    }
-  }
-}
-@include width-range($tablet, $mediumDesktop) {
-  .calendar-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-//for later use
-
-// .footer {
-//     padding: rem(16px) 0;
-//     height: rem(32px);
-//     @include flex(center, center, rem(8px));
-
-//     .footer_item {
-//       @include box(calc(100% / 2), rem(32px));
-//       border-radius: rem(8px);
-//       border: rem(1px) solid var(--neutral-300);
-//       display: flex;
-
-//       span {
-//         @include box(rem(51px), rem(30px));
-//         @include flex(center, center);
-//         background-color: var(--neutral-50);
-//         @include fontStyle(var(--fs-14), rem(20px), 500);
-//         color: var(--neutral-600);
-//         border-top-left-radius: rem(8px);
-//         border-bottom-left-radius: rem(8px);
-//       }
-
-//       input {
-//         @include box(calc(100% - rem(51px)), rem(30px));
-//         background-color: transparent;
-//         @include fontStyle(var(--fs-14), rem(20px), 500);
-//         border: none;
-//         padding-left: rem(16px);
-//       }
-//     }
-//   }
-.custom_disabled {
-  color: var(--neutral-400);
-  pointer-events: none;
-}
-
-// .header {
-//   @include flex(space-between, center);
-//   @include box(auto, rem(52px));
-//   padding-bottom: rem(16px);
-//   border-bottom: rem(1px) solid var(--neutral-200);
-
-//   .feather {
-//     @include box(rem(24px), rem(24px));
-//     background-color: var(--feather-bg);
-//     border: rem(1px) solid var(--neutral-200);
-//     border-radius: rem(4px);
-//     @include flex(center, center);
-//     cursor: pointer;
-
-//     i-feather {
-//       @include box(rem(15px), rem(15px));
-//       display: flex;
-//       color: var(--neutral-600);
-//     }
-//   }
-
-//   .month_year {
-//     @include flex("", "", rem(4px));
-
-//     .month {
-//       @include fontStyle(var(--fs-14), rem(20px), 600);
-//       color: var(--neutral-600);
-//     }
-
-//     .year {
-//       @include fontStyle(var(--fs-14), rem(20px), 600);
-//       color: var(--neutral-400);
-//     }
-//   }
-// }
-
-// .calendar-footer {
-//   margin-top: rem(16px);
-//   height: rem(48px);
-//   @include flex(space-between, center, rem(16px));
-
-//   button {
-//     min-width: rem(120px);
-//     width: 100%;
-//     @include fontStyle(var(--fs-14), 140%);
-//     border: 1px solid var(--primaryBlue);
-//   }
-// }
-
-// .main_box {
-//   width: rem(578px);
-//   min-height: rem(379px);
-//   position: relative;
-//   top: rem(3px);
-// }
-
-// .calendar_container {
-//   border: rem(1px) solid var(--neutral-200);
-//   background-color: var(--white);
-//   border-radius: rem(8px);
-// }