npm - carriera-intern - Versions diffs - 1.1.77 → 1.1.78 - Mend

carriera-intern 1.1.77 → 1.1.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/src/styles/custompickers.scss CHANGED Viewed

@@ -1,827 +1,827 @@
-@use "variables" as *;
-.datetime-dropdown-holder {
-  position: relative;
-  top: 0px;
-  &.datetime-has-stroke {
-    .pickers_holder {
-      border: 1px solid $color-black-200;
-    }
-  }
-}
-.datetimepopovermain {
-  z-index: 1200 !important;
-  border: none !important;
-  .popover-body {
-    margin-top: -4px;
-    padding: 0 !important;
-  }
-  .popover-arrow {
-    display: none !important;
-  }
-}
-.pickers_holder {
-  position: relative;
-  top: 0px !important;
-  width: auto !important;
-  padding: 0;
-  background-color: $color-text-base-inverse;
-  //   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
-  z-index: 999;
-  border-radius: 3px;
-  overflow: hidden;
-  .time_picker {
-    width: 167px;
-  }
-  .date_picker {
-    display: flex;
-    .month-years-size {
-      position: relative;
-      width: 48px;
-      background-color: $color-light-gray;
-      .calendar_border {
-        position: absolute;
-        top: 50%;
-        width: 100%;
-        height: 24px;
-        transform: translateY(-50%);
-        background-color: $color-text-base-inverse;
-      }
-      .month-year-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 24px;
-        font-size: 14px;
-        color: $color-text-base-content;
-        font-weight: $font-regular;
-        text-align: center;
-        text-transform: uppercase;
-        .left-year-show {
-          color: $color-text-base-content;
-          font-size: 14px;
-          font-weight: $font-bold;
-        }
-        &:hover {
-          color: $color-text-base-heading;
-          cursor: pointer;
-          background-color: $color-text-base-content;
-          border-radius: 2px;
-        }
-      }
-      cdk-virtual-scroll-viewport {
-        ::-webkit-scrollbar {
-          display: none;
-        }
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-      .cdk-virtual-scroll-content-wrapper {
-        padding: 133px 2px 0 2px;
-      }
-    }
-    .full-calendars-list {
-      flex: 1;
-      max-height: 290px;
-      min-width: 264px;
-      overflow: hidden;
-      .full_list {
-        height: 100%;
-        .selfScroll {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-  .time_picker {
-    //width: 150px;
-    .time_picker_head {
-      height: 36px;
-      display: flex;
-      padding: 0 12px;
-      align-items: center;
-      justify-content: space-between;
-      .selected_time {
-        font-size: 14px;
-        font-weight: $font-extrabold;
-        color: $color-text-base-heading;
-      }
-      .sel_now {
-        color: $color-icon-base-positive;
-        font-size: 14px;
-        font-weight: $font-bold;
-        &:hover {
-          cursor: pointer;
-          color: $color-surface-input-positive-hover;
-        }
-      }
-    }
-    .time_picker_body {
-      .picker_body_head {
-        display: flex;
-        height: 22px;
-        display: flex;
-        align-items: center;
-        background-color: $color-surface-input-neutral;
-        margin: 0 4px 2px 4px;
-        border-radius: 2px;
-        div {
-          flex: 0 0 33%;
-          text-align: center;
-          font-size: 10px;
-          font-weight: $font-bold;
-          color: $color-text-base-content;
-          &.active {
-            color: $color-text-base-content;
-          }
-        }
-      }
-      .picker_body {
-        position: relative;
-        height: 155px;
-        display: flex;
-        justify-content: center;
-        &::after {
-          content: "";
-          position: absolute;
-          width: 100%;
-          height: 31px;
-          top: -1px;
-          left: 0;
-          pointer-events: none;
-          background: linear-gradient(
-            to bottom,
-            rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 0) 100%
-          );
-          z-index: 11;
-        }
-        &::before {
-          content: "";
-          position: absolute;
-          pointer-events: none;
-          width: 100%;
-          height: 31px;
-          bottom: -1px;
-          left: 0;
-          background: linear-gradient(
-            to top,
-            rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 0) 100%
-          );
-          z-index: 11;
-        }
-        .picker_line {
-          position: absolute;
-          width: calc(100% - 8px);
-          height: 22px;
-          top: 50%;
-          left: 4px;
-          border-radius: 2px;
-          transform: translateY(-50%);
-          background-color: $color-surface-input-neutral;
-          span {
-            position: absolute;
-            left: 30%;
-            font-size: 14px;
-            font-weight: $font-regular;
-            color: $color-text-base-content;
-          }
-        }
-        .scroll_pickers {
-          position: relative;
-          height: 22px;
-          flex: 0 0 33.3%;
-          height: 100%;
-          padding: 67px 0;
-          margin: 0 7px;
-          overflow: auto;
-          text-align: center;
-          -ms-overflow-style: none;
-          /* Internet Explorer 10+ */
-          scrollbar-width: none;
-          /* Firefox */
-          z-index: 10;
-          &:first-child {
-            flex: 0 0 28px;
-          }
-          &:nth-child(2) {
-            flex: 0 0 36px;
-          }
-          &:nth-child(3) {
-            flex: 0 0 38px;
-          }
-          &::-webkit-scrollbar {
-            display: none;
-            /* Safari and Chrome */
-          }
-          .scroll_item {
-            height: 22px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            color: $color-text-base-content;
-            font-weight: $font-regular;
-            user-select: none;
-            &:hover {
-              color: $color-icon-base-positive;
-              cursor: pointer;
-            }
-          }
-          &:hover {
-            // background-color: #f3f3f366;
-            // box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
-          }
-        }
-      }
-    }
-    .picker_buttons {
-      display: flex;
-      padding: 6px;
-      justify-content: space-between;
-      .pick_button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 32px;
-        padding: 0 12px;
-        text-align: center;
-        border-radius: 2px;
-        font-size: 12px;
-        font-weight: $font-bold;
-        color: $color-text-base-content-subtle;
-        &:hover {
-          background-color: $color-surface-input-neutral-hover;
-          color: $color-text-base-content;
-          cursor: pointer;
-        }
-        &.set_button {
-          width: 57px;
-          text-align: center;
-          background-color: $color-icon-base-positive;
-          color: $color-text-base-inverse;
-          &:hover {
-            background-color: $color-surface-input-positive-focus;
-          }
-        }
-      }
-    }
-  }
-  &.dark_picker {
-    background-color: $color-text-base-content;
-    .month-years-size {
-      width: 40px;
-      background-color: $color-text-base-heading;
-      .calendar_border {
-        position: absolute;
-        top: 50%;
-        width: 100%;
-        height: 26px;
-        transform: translateY(-50%);
-        background-color: $color-text-base-content;
-      }
-      .month-year-item {
-        height: 22px;
-        color: $color-icon-base-disable;
-        font-size: 11px;
-        .left-year-show {
-          color: $color-inverse-icon-base-neutral;
-          font-size: 11px;
-        }
-        &.current_month_year {
-          color: $color-text-base-inverse;
-          .left-year-show {
-            color: $color-text-base-inverse;
-            font-weight: $font-bold;
-          }
-        }
-        &:hover {
-          color: $color-text-base-inverse;
-          background-color: $color-text-base-content;
-        }
-      }
-      .cdk-virtual-scroll-content-wrapper {
-        padding: 133px 4px 0 4px;
-      }
-    }
-    .date_picker {
-      margin: 4px;
-      .full-calendars-list {
-        min-width: 184px;
-        .calendar_view {
-          width: 182px;
-          padding-top: 6px;
-          background-color: $color-text-base-content;
-          .calendar_view_head {
-            padding: 0 6px;
-            .month_name {
-              padding: 0 4px;
-              color: $color-text-base-inverse;
-              font-size: 11px;
-              .year_hold {
-                margin-right: 0;
-                color: $color-text-base-inverse;
-              }
-            }
-            .today {
-              padding: 0 4px;
-              color: $color-icon-base-positive;
-              font-size: 11px;
-              text-transform: uppercase;
-              &:hover {
-                color: $color-text-base-inverse;
-              }
-            }
-          }
-          .calendars_list_view {
-            .calendar_indicator {
-              margin: 12px 10px;
-              color: $color-text-base-content-subtle;
-              font-size: 11px;
-              text-transform: uppercase;
-              &.current_year {
-                color: $color-text-base-inverse;
-              }
-              &.full_calendar {
-                margin-bottom: 4px;
-              }
-            }
-            .calendar_month_days {
-              display: grid;
-              grid-template-columns: repeat(7, 1fr);
-              gap: 4px;
-              margin: 0 6px 4px 6px;
-              padding: 0;
-              .cal_day {
-                width: 22px;
-                height: 22px;
-                margin: 0;
-                font-size: 9px;
-                color: $color-inverse-icon-base-neutral;
-                text-align: center;
-              }
-            }
-            .month_list {
-              display: grid;
-              grid-template-columns: repeat(3, 1fr);
-              column-gap: 4px;
-              row-gap: 12px;
-              justify-content: unset;
-              margin: 0 6px;
-              .month_list_item {
-                margin: 0;
-                height: 22px;
-                color: $color-text-base-content-subtle;
-                font-size: 11px;
-                &:hover:not(.current_month) {
-                  background-color: $color-text-base-heading;
-                  color: $color-text-base-inverse;
-                  border-radius: 2px;
-                  cursor: pointer;
-                }
-                &.current_month {
-                  color: $color-text-base-inverse;
-                  background-color: $color-inverse-surface-input-positive;
-                  border-radius: 2px;
-                  cursor: pointer;
-                }
-              }
-              &.current_year {
-                .month_list_item {
-                  color: $color-text-base-inverse;
-                }
-              }
-            }
-            .calendar_days {
-              display: grid;
-              grid-template-columns: repeat(7, 1fr);
-              gap: 4px;
-              margin: 0 6px;
-              padding: 0;
-              height: auto;
-              .calendar_day {
-                width: 22px;
-                height: 22px;
-                margin: 0;
-                color: $color-icon-base-neutral;
-                font-size: 11px;
-                &.current_day {
-                  color: $color-text-base-inverse;
-                  background-color: $color-inverse-surface-input-positive;
-                  border-radius: 2px;
-                }
-                &.selected_day {
-                  background-color: $color-inverse-surface-input-positive;
-                  color: $color-text-base-inverse;
-                  border-radius: 2px;
-                }
-                &.day_in_current_month {
-                  color: $color-text-base-inverse;
-                }
-                &.weekend_day_in_current_month {
-                  color: $color-inverse-icon-base-neutral;
-                }
-                &:not(.empty_day):not(.selected_day):hover {
-                  background-color: $color-text-base-heading;
-                  border-radius: 2px;
-                  cursor: pointer;
-                  color: $color-text-base-inverse;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    .time_picker {
-      width: 156px;
-      margin: 4px;
-      .time_picker_head {
-        height: 18px;
-        padding: 0 4px;
-        margin-bottom: 4px;
-        .selected_time {
-          color: $color-text-base-inverse;
-          font-size: 11px;
-        }
-        .sel_now {
-          color: $color-icon-base-positive;
-          font-size: 11px;
-          text-transform: uppercase;
-        }
-      }
-      .time_picker_body {
-        .picker_body_head {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          column-gap: 4px;
-          margin: 0 0 4px 0;
-          padding: 2px;
-          background: none;
-          div {
-            color: $color-inverse-icon-base-neutral;
-            font-size: 9px;
-            text-align: center;
-            text-transform: uppercase;
-          }
-        }
-        .picker_body {
-          height: 176px;
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          column-gap: 4px;
-          padding: 0 2px;
-          &::before {
-            display: none;
-          }
-          &::after {
-            display: none;
-          }
-          .picker_line {
-            left: 0;
-            width: 100%;
-            background-color: $color-inverse-surface-input-positive;
-            .border_line {
-              left: 33.3%;
-              width: 1px;
-              height: 12px;
-              margin-top: 5px;
-              background-color: $color-icon-base-positive;
-              opacity: 0.4;
-              border-radius: 2px;
-              &.line_2 {
-                left: 66.6%;
-              }
-            }
-          }
-          .scroll_pickers {
-            margin: 0;
-            padding: 77px 0;
-            .scroll_item {
-              color: $color-inverse-icon-base-neutral;
-              font-size: 11px;
-              &.active_item {
-                color: $color-text-base-inverse;
-              }
-            }
-          }
-        }
-        .picker_buttons {
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-          column-gap: 4px;
-          margin-top: 6px;
-          padding: 4px 0 0 0;
-          border-top: 1px solid $color-inverse-surface-input-neutral-focus;
-          .pick_button {
-            height: 18px;
-            background-color: $color-text-base-heading;
-            color: $color-text-base-inverse;
-            font-size: 11px;
-            text-transform: uppercase;
-            border-radius: 1px;
-            &.set_button {
-              width: auto;
-              background-color: $color-inverse-surface-input-positive-no-percent;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.calendar_view {
-  width: 260px;
-  padding-top: 12px;
-  background-color: $color-text-base-inverse;
-  .calendar_view_head {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 12px;
-    padding: 0 12px;
-    .month_name {
-      font-size: 12px;
-      font-weight: $font-bold;
-      color: $color-text-base-heading;
-      .year_hold {
-        margin-right: 5px;
-        text-transform: uppercase;
-        color: $color-text-base-heading;
-        &:hover {
-          color: $color-text-base-content;
-        }
-        cursor: pointer;
-      }
-    }
-    .today {
-      font-size: 12px;
-      font-weight: $font-bold;
-      color: $color-icon-base-positive;
-      cursor: pointer;
-      &:hover {
-        color: $color-surface-input-positive-hover;
-      }
-    }
-  }
-  .calendars_list_view {
-    cdk-virtual-scroll-viewport {
-      height: 230px;
-      min-height: 230px;
-      ::-webkit-scrollbar {
-        display: none;
-      }
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      .cdk-virtual-scroll-content-wrapper {
-      }
-    }
-    .calendar_indicator {
-      margin: 12px;
-      height: 18px;
-      font-size: 12px;
-      color: $color-text-base-content-subtle;
-      font-weight: $font-bold;
-    }
-    .calendar_month_days {
-      padding: 0 3px;
-      &.hideVisibility {
-        visibility: hidden;
-      }
-      .cal_day {
-        width: 24px;
-        margin: 0 6px;
-        font-size: 12px;
-        font-weight: $font-bold;
-        color: $color-text-base-content-subtle;
-      }
-    }
-    .calendar_days {
-      height: 140px;
-      display: flex;
-      flex-wrap: wrap;
-      padding: 0 3px;
-      .calendar_day {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 24px;
-        width: 24px;
-        height: 24px;
-        margin: 0 6px;
-        font-size: 14px;
-        font-weight: $font-regular;
-        color: $color-text-base-content-subtle;
-        &.current_day {
-          color: $color-text-base-inverse;
-          background-color: $color-text-base-content;
-          border-radius: 2px;
-        }
-        &.selected_day {
-          background-color: $color-text-base-content;
-          color: $color-text-base-inverse;
-          border-radius: 2px;
-        }
-        &:not(.empty_day):not(.selected_day):hover {
-          background-color: $color-text-base-heading;
-          border-radius: 2px;
-          cursor: pointer;
-          color: $color-text-base-content;
-        }
-      }
-    }
-  }
-  .month_list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    height: 140px;
-    .month_list_item {
-      flex: 0 0 50px;
-      height: 24px;
-      margin: 0px 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 3px;
-      font-size: 12px;
-      color: $color-text-base-content-subtle;
-      font-weight: $font-regular;
-      &:hover:not(.current_month) {
-        background-color: $color-surface-input-disable;
-        color: $color-text-base-content;
-        border-radius: 2px;
-        cursor: pointer;
-      }
-      &.current_month {
-        color: $color-text-base-content;
-        background-color: $color-surface-input-neutral;
-        border-radius: 2px;
-        cursor: pointer;
-      }
-    }
-  }
-}
-.dropdown {
-  z-index: 999 !important;
-}
-input[type="date"]::-webkit-inner-spin-button,
-input[type="date"]::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
+@use "variables" as *;
+.datetime-dropdown-holder {
+  position: relative;
+  top: 0px;
+  &.datetime-has-stroke {
+    .pickers_holder {
+      border: 1px solid $color-black-200;
+    }
+  }
+}
+.datetimepopovermain {
+  z-index: 1200 !important;
+  border: none !important;
+  .popover-body {
+    margin-top: -4px;
+    padding: 0 !important;
+  }
+  .popover-arrow {
+    display: none !important;
+  }
+}
+.pickers_holder {
+  position: relative;
+  top: 0px !important;
+  width: auto !important;
+  padding: 0;
+  background-color: $color-text-base-inverse;
+  //   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
+  z-index: 999;
+  border-radius: 3px;
+  overflow: hidden;
+  .time_picker {
+    width: 167px;
+  }
+  .date_picker {
+    display: flex;
+    .month-years-size {
+      position: relative;
+      width: 48px;
+      background-color: $color-light-gray;
+      .calendar_border {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        height: 24px;
+        transform: translateY(-50%);
+        background-color: $color-text-base-inverse;
+      }
+      .month-year-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 24px;
+        font-size: 14px;
+        color: $color-text-base-content;
+        font-weight: $font-regular;
+        text-align: center;
+        text-transform: uppercase;
+        .left-year-show {
+          color: $color-text-base-content;
+          font-size: 14px;
+          font-weight: $font-bold;
+        }
+        &:hover {
+          color: $color-text-base-heading;
+          cursor: pointer;
+          background-color: $color-text-base-content;
+          border-radius: 2px;
+        }
+      }
+      cdk-virtual-scroll-viewport {
+        ::-webkit-scrollbar {
+          display: none;
+        }
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .cdk-virtual-scroll-content-wrapper {
+        padding: 133px 2px 0 2px;
+      }
+    }
+    .full-calendars-list {
+      flex: 1;
+      max-height: 290px;
+      min-width: 264px;
+      overflow: hidden;
+      .full_list {
+        height: 100%;
+        .selfScroll {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  .time_picker {
+    //width: 150px;
+    .time_picker_head {
+      height: 36px;
+      display: flex;
+      padding: 0 12px;
+      align-items: center;
+      justify-content: space-between;
+      .selected_time {
+        font-size: 14px;
+        font-weight: $font-extrabold;
+        color: $color-text-base-heading;
+      }
+      .sel_now {
+        color: $color-icon-base-positive;
+        font-size: 14px;
+        font-weight: $font-bold;
+        &:hover {
+          cursor: pointer;
+          color: $color-surface-input-positive-hover;
+        }
+      }
+    }
+    .time_picker_body {
+      .picker_body_head {
+        display: flex;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        background-color: $color-surface-input-neutral;
+        margin: 0 4px 2px 4px;
+        border-radius: 2px;
+        div {
+          flex: 0 0 33%;
+          text-align: center;
+          font-size: 10px;
+          font-weight: $font-bold;
+          color: $color-text-base-content;
+          &.active {
+            color: $color-text-base-content;
+          }
+        }
+      }
+      .picker_body {
+        position: relative;
+        height: 155px;
+        display: flex;
+        justify-content: center;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 31px;
+          top: -1px;
+          left: 0;
+          pointer-events: none;
+          background: linear-gradient(
+            to bottom,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          z-index: 11;
+        }
+        &::before {
+          content: "";
+          position: absolute;
+          pointer-events: none;
+          width: 100%;
+          height: 31px;
+          bottom: -1px;
+          left: 0;
+          background: linear-gradient(
+            to top,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          z-index: 11;
+        }
+        .picker_line {
+          position: absolute;
+          width: calc(100% - 8px);
+          height: 22px;
+          top: 50%;
+          left: 4px;
+          border-radius: 2px;
+          transform: translateY(-50%);
+          background-color: $color-surface-input-neutral;
+          span {
+            position: absolute;
+            left: 30%;
+            font-size: 14px;
+            font-weight: $font-regular;
+            color: $color-text-base-content;
+          }
+        }
+        .scroll_pickers {
+          position: relative;
+          height: 22px;
+          flex: 0 0 33.3%;
+          height: 100%;
+          padding: 67px 0;
+          margin: 0 7px;
+          overflow: auto;
+          text-align: center;
+          -ms-overflow-style: none;
+          /* Internet Explorer 10+ */
+          scrollbar-width: none;
+          /* Firefox */
+          z-index: 10;
+          &:first-child {
+            flex: 0 0 28px;
+          }
+          &:nth-child(2) {
+            flex: 0 0 36px;
+          }
+          &:nth-child(3) {
+            flex: 0 0 38px;
+          }
+          &::-webkit-scrollbar {
+            display: none;
+            /* Safari and Chrome */
+          }
+          .scroll_item {
+            height: 22px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            color: $color-text-base-content;
+            font-weight: $font-regular;
+            user-select: none;
+            &:hover {
+              color: $color-icon-base-positive;
+              cursor: pointer;
+            }
+          }
+          &:hover {
+            // background-color: #f3f3f366;
+            // box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
+          }
+        }
+      }
+    }
+    .picker_buttons {
+      display: flex;
+      padding: 6px;
+      justify-content: space-between;
+      .pick_button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        padding: 0 12px;
+        text-align: center;
+        border-radius: 2px;
+        font-size: 12px;
+        font-weight: $font-bold;
+        color: $color-text-base-content-subtle;
+        &:hover {
+          background-color: $color-surface-input-neutral-hover;
+          color: $color-text-base-content;
+          cursor: pointer;
+        }
+        &.set_button {
+          width: 57px;
+          text-align: center;
+          background-color: $color-icon-base-positive;
+          color: $color-text-base-inverse;
+          &:hover {
+            background-color: $color-surface-input-positive-focus;
+          }
+        }
+      }
+    }
+  }
+  &.dark_picker {
+    background-color: $color-text-base-content;
+    .month-years-size {
+      width: 40px;
+      background-color: $color-text-base-heading;
+      .calendar_border {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        height: 26px;
+        transform: translateY(-50%);
+        background-color: $color-text-base-content;
+      }
+      .month-year-item {
+        height: 22px;
+        color: $color-icon-base-disable;
+        font-size: 11px;
+        .left-year-show {
+          color: $color-inverse-icon-base-neutral;
+          font-size: 11px;
+        }
+        &.current_month_year {
+          color: $color-text-base-inverse;
+          .left-year-show {
+            color: $color-text-base-inverse;
+            font-weight: $font-bold;
+          }
+        }
+        &:hover {
+          color: $color-text-base-inverse;
+          background-color: $color-text-base-content;
+        }
+      }
+      .cdk-virtual-scroll-content-wrapper {
+        padding: 133px 4px 0 4px;
+      }
+    }
+    .date_picker {
+      margin: 4px;
+      .full-calendars-list {
+        min-width: 184px;
+        .calendar_view {
+          width: 182px;
+          padding-top: 6px;
+          background-color: $color-text-base-content;
+          .calendar_view_head {
+            padding: 0 6px;
+            .month_name {
+              padding: 0 4px;
+              color: $color-text-base-inverse;
+              font-size: 11px;
+              .year_hold {
+                margin-right: 0;
+                color: $color-text-base-inverse;
+              }
+            }
+            .today {
+              padding: 0 4px;
+              color: $color-icon-base-positive;
+              font-size: 11px;
+              text-transform: uppercase;
+              &:hover {
+                color: $color-text-base-inverse;
+              }
+            }
+          }
+          .calendars_list_view {
+            .calendar_indicator {
+              margin: 12px 10px;
+              color: $color-text-base-content-subtle;
+              font-size: 11px;
+              text-transform: uppercase;
+              &.current_year {
+                color: $color-text-base-inverse;
+              }
+              &.full_calendar {
+                margin-bottom: 4px;
+              }
+            }
+            .calendar_month_days {
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              gap: 4px;
+              margin: 0 6px 4px 6px;
+              padding: 0;
+              .cal_day {
+                width: 22px;
+                height: 22px;
+                margin: 0;
+                font-size: 9px;
+                color: $color-inverse-icon-base-neutral;
+                text-align: center;
+              }
+            }
+            .month_list {
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              column-gap: 4px;
+              row-gap: 12px;
+              justify-content: unset;
+              margin: 0 6px;
+              .month_list_item {
+                margin: 0;
+                height: 22px;
+                color: $color-text-base-content-subtle;
+                font-size: 11px;
+                &:hover:not(.current_month) {
+                  background-color: $color-text-base-heading;
+                  color: $color-text-base-inverse;
+                  border-radius: 2px;
+                  cursor: pointer;
+                }
+                &.current_month {
+                  color: $color-text-base-inverse;
+                  background-color: $color-inverse-surface-input-positive;
+                  border-radius: 2px;
+                  cursor: pointer;
+                }
+              }
+              &.current_year {
+                .month_list_item {
+                  color: $color-text-base-inverse;
+                }
+              }
+            }
+            .calendar_days {
+              display: grid;
+              grid-template-columns: repeat(7, 1fr);
+              gap: 4px;
+              margin: 0 6px;
+              padding: 0;
+              height: auto;
+              .calendar_day {
+                width: 22px;
+                height: 22px;
+                margin: 0;
+                color: $color-icon-base-neutral;
+                font-size: 11px;
+                &.current_day {
+                  color: $color-text-base-inverse;
+                  background-color: $color-inverse-surface-input-positive;
+                  border-radius: 2px;
+                }
+                &.selected_day {
+                  background-color: $color-inverse-surface-input-positive;
+                  color: $color-text-base-inverse;
+                  border-radius: 2px;
+                }
+                &.day_in_current_month {
+                  color: $color-text-base-inverse;
+                }
+                &.weekend_day_in_current_month {
+                  color: $color-inverse-icon-base-neutral;
+                }
+                &:not(.empty_day):not(.selected_day):hover {
+                  background-color: $color-text-base-heading;
+                  border-radius: 2px;
+                  cursor: pointer;
+                  color: $color-text-base-inverse;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .time_picker {
+      width: 156px;
+      margin: 4px;
+      .time_picker_head {
+        height: 18px;
+        padding: 0 4px;
+        margin-bottom: 4px;
+        .selected_time {
+          color: $color-text-base-inverse;
+          font-size: 11px;
+        }
+        .sel_now {
+          color: $color-icon-base-positive;
+          font-size: 11px;
+          text-transform: uppercase;
+        }
+      }
+      .time_picker_body {
+        .picker_body_head {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          column-gap: 4px;
+          margin: 0 0 4px 0;
+          padding: 2px;
+          background: none;
+          div {
+            color: $color-inverse-icon-base-neutral;
+            font-size: 9px;
+            text-align: center;
+            text-transform: uppercase;
+          }
+        }
+        .picker_body {
+          height: 176px;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          column-gap: 4px;
+          padding: 0 2px;
+          &::before {
+            display: none;
+          }
+          &::after {
+            display: none;
+          }
+          .picker_line {
+            left: 0;
+            width: 100%;
+            background-color: $color-inverse-surface-input-positive;
+            .border_line {
+              left: 33.3%;
+              width: 1px;
+              height: 12px;
+              margin-top: 5px;
+              background-color: $color-icon-base-positive;
+              opacity: 0.4;
+              border-radius: 2px;
+              &.line_2 {
+                left: 66.6%;
+              }
+            }
+          }
+          .scroll_pickers {
+            margin: 0;
+            padding: 77px 0;
+            .scroll_item {
+              color: $color-inverse-icon-base-neutral;
+              font-size: 11px;
+              &.active_item {
+                color: $color-text-base-inverse;
+              }
+            }
+          }
+        }
+        .picker_buttons {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          column-gap: 4px;
+          margin-top: 6px;
+          padding: 4px 0 0 0;
+          border-top: 1px solid $color-inverse-surface-input-neutral-focus;
+          .pick_button {
+            height: 18px;
+            background-color: $color-text-base-heading;
+            color: $color-text-base-inverse;
+            font-size: 11px;
+            text-transform: uppercase;
+            border-radius: 1px;
+            &.set_button {
+              width: auto;
+              background-color: $color-inverse-surface-input-positive-no-percent;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.calendar_view {
+  width: 260px;
+  padding-top: 12px;
+  background-color: $color-text-base-inverse;
+  .calendar_view_head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding: 0 12px;
+    .month_name {
+      font-size: 12px;
+      font-weight: $font-bold;
+      color: $color-text-base-heading;
+      .year_hold {
+        margin-right: 5px;
+        text-transform: uppercase;
+        color: $color-text-base-heading;
+        &:hover {
+          color: $color-text-base-content;
+        }
+        cursor: pointer;
+      }
+    }
+    .today {
+      font-size: 12px;
+      font-weight: $font-bold;
+      color: $color-icon-base-positive;
+      cursor: pointer;
+      &:hover {
+        color: $color-surface-input-positive-hover;
+      }
+    }
+  }
+  .calendars_list_view {
+    cdk-virtual-scroll-viewport {
+      height: 230px;
+      min-height: 230px;
+      ::-webkit-scrollbar {
+        display: none;
+      }
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .cdk-virtual-scroll-content-wrapper {
+      }
+    }
+    .calendar_indicator {
+      margin: 12px;
+      height: 18px;
+      font-size: 12px;
+      color: $color-text-base-content-subtle;
+      font-weight: $font-bold;
+    }
+    .calendar_month_days {
+      padding: 0 3px;
+      &.hideVisibility {
+        visibility: hidden;
+      }
+      .cal_day {
+        width: 24px;
+        margin: 0 6px;
+        font-size: 12px;
+        font-weight: $font-bold;
+        color: $color-text-base-content-subtle;
+      }
+    }
+    .calendar_days {
+      height: 140px;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 3px;
+      .calendar_day {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 24px;
+        width: 24px;
+        height: 24px;
+        margin: 0 6px;
+        font-size: 14px;
+        font-weight: $font-regular;
+        color: $color-text-base-content-subtle;
+        &.current_day {
+          color: $color-text-base-inverse;
+          background-color: $color-text-base-content;
+          border-radius: 2px;
+        }
+        &.selected_day {
+          background-color: $color-text-base-content;
+          color: $color-text-base-inverse;
+          border-radius: 2px;
+        }
+        &:not(.empty_day):not(.selected_day):hover {
+          background-color: $color-text-base-heading;
+          border-radius: 2px;
+          cursor: pointer;
+          color: $color-text-base-content;
+        }
+      }
+    }
+  }
+  .month_list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    height: 140px;
+    .month_list_item {
+      flex: 0 0 50px;
+      height: 24px;
+      margin: 0px 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 3px;
+      font-size: 12px;
+      color: $color-text-base-content-subtle;
+      font-weight: $font-regular;
+      &:hover:not(.current_month) {
+        background-color: $color-surface-input-disable;
+        color: $color-text-base-content;
+        border-radius: 2px;
+        cursor: pointer;
+      }
+      &.current_month {
+        color: $color-text-base-content;
+        background-color: $color-surface-input-neutral;
+        border-radius: 2px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.dropdown {
+  z-index: 999 !important;
+}
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}