carriera-intern 0.0.0

package/projects/carriera-intern-components/src/styles/custompickers.scss

@@ -0,0 +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;
+}