ca-components 1.0.28 → 1.0.30

package/assets/scss/custompickers.scss

@@ -0,0 +1,918 @@
+@import 'theme/variables.scss';
+@import './details_page_ske.scss';
+
+.datetime-dropdown-holder {
+    position: relative;
+    top: 16px;
+}
+
+.picker_input_holder {
+    display: flex;
+    min-width: 146px;
+    max-width: 260px;
+    border-radius: 3px;
+    background-color: $bw1;
+
+    input {
+        width: 100%;
+        padding-left: 6px;
+
+        border: none;
+        outline: none;
+        background-color: transparent;
+
+        caret-color: transparent;
+        -webkit-appearance: none;
+
+        &:focus {
+            outline: none;
+            border: none;
+        }
+
+        &::-webkit-input-placeholder {
+            /* Edge */
+            color: $bw5 !important;
+        }
+
+        &:-ms-input-placeholder {
+            /* Internet Explorer 10-11 */
+            color: $bw5 !important;
+        }
+
+        &::placeholder {
+            color: $bw5 !important;
+        }
+    }
+
+    .toggle_picker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 26px;
+        height: 26px;
+        min-width: 26px;
+        background-color: $bw2;
+
+        border-radius: 3px;
+        cursor: pointer;
+
+        &::after {
+            display: none;
+        }
+
+        svg-icon {
+            display: flex;
+
+            svg {
+                width: 12px;
+                height: 10px;
+
+                path {
+                    fill: $bw5;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+
+    &.active {
+        background-color: $bw6-2;
+
+        border-left: 3px solid $bw6-2;
+
+        .toggle_picker {
+            background-color: $bw5;
+
+            svg-icon {
+                display: flex;
+
+                svg {
+                    transform: rotate(180deg);
+
+                    path {
+                        fill: $white-2;
+                    }
+                }
+            }
+        }
+
+        input {
+            &::-webkit-input-placeholder {
+                /* Edge */
+                color: $white-2 !important;
+            }
+
+            &:-ms-input-placeholder {
+                /* Internet Explorer 10-11 */
+                color: $white-2 !important;
+            }
+
+            &::placeholder {
+                color: $white-2 !important;
+            }
+        }
+    }
+}
+
+.pickers_holder {
+    position: absolute;
+    top: 3px !important;
+    width: auto !important;
+    padding: 0;
+
+    background-color: $white-2;
+    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: $bw1;
+
+            .calendar_border {
+                position: absolute;
+                top: 50%;
+                width: 100%;
+                height: 24px;
+                transform: translateY(-50%);
+
+                background-color: $white-2;
+            }
+
+            .month-year-item {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 24px;
+
+                font-size: 14px;
+                color: $bw5;
+                font-weight: $font-regular;
+                text-align: center;
+                text-transform: uppercase;
+
+                .left-year-show {
+                    color: $bw5;
+                    font-size: 14px;
+                    font-weight: $font-bold;
+                }
+
+                &:hover {
+                    color: $bw6-2;
+                    cursor: pointer;
+
+                    background-color: $white-8;
+                    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: $bw6-2;
+            }
+
+            .sel_now {
+                color: $primary;
+                font-size: 14px;
+                font-weight: $font-bold;
+
+                &:hover {
+                    cursor: pointer;
+                    color: $light-blue;
+                }
+            }
+        }
+
+        .time_picker_body {
+            .picker_body_head {
+                display: flex;
+                height: 22px;
+                display: flex;
+                align-items: center;
+                background-color: $ta-light-grey-5;
+                margin: 0 4px 2px 4px;
+                border-radius: 2px;
+
+                div {
+                    flex: 0 0 33%;
+                    text-align: center;
+
+                    font-size: 10px;
+                    font-weight: $font-bold;
+                    color: $bw5;
+
+                    &.active {
+                        color: $bw5;
+                    }
+                }
+            }
+
+            .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: $grey-18;
+
+                    span {
+                        position: absolute;
+                        left: 30%;
+
+                        font-size: 14px;
+                        font-weight: $font-regular;
+                        color: $bw5;
+                    }
+                }
+
+                .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: $bw5;
+                        font-weight: $font-regular;
+                        user-select: none;
+
+                        &:hover {
+                            color: $light-blue;
+                            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: $grey-16;
+
+                &:hover {
+                    background-color: $ta-light-grey-4;
+                    color: $bw5;
+                    cursor: pointer;
+                }
+
+                &.set_button {
+                    width: 57px;
+                    text-align: center;
+                    background-color: $bc1;
+                    color: $white-2;
+
+                    &:hover {
+                        background-color: $primary;
+                    }
+                }
+            }
+        }
+    }
+
+    &.dark_picker {
+        background-color: $ta-black-2;
+
+        .month-years-size {
+            width: 40px;
+            background-color: $ta-black;
+
+            .calendar_border {
+                position: absolute;
+                top: 50%;
+                width: 100%;
+                height: 26px;
+                transform: translateY(-50%);
+
+                background-color: $ta-black-2;
+            }
+
+            .month-year-item {
+                height: 22px;
+                color: $ta-light-grey-6;
+                font-size: 11px;
+                
+                .left-year-show {
+                    color: $ta-light-grey-6;
+                    font-size: 11px;
+                }
+
+                &.current_month_year {
+                    color: $white-2;
+
+                    .left-year-show {
+                        color: $white-2;
+                        font-weight: $font-bold;
+                    }
+                }
+
+                &:hover {
+                    color: $white-2;
+
+                    background-color: $ta-black-2;
+                }
+            }
+
+            .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: $ta-black-2;
+
+                    .calendar_view_head {
+                        padding: 0 6px;
+
+                        .month_name {
+                            padding: 0 4px;
+
+                            color: $white-2;
+                            font-size: 11px;
+
+                            .year_hold {
+                                margin-right: 0;
+
+                                color: $white-2;
+                            }
+                        }
+
+                        .today {
+                            padding: 0 4px;
+
+                            color: $ta-blue-19;
+                            font-size: 11px;
+                            text-transform: uppercase;
+
+                            &:hover {
+                                color: $white-2;
+                            }
+                        }
+                    }
+
+                    .calendars_list_view {
+                        .calendar_indicator {
+                            margin: 12px 10px;
+
+                            color: $bw5;
+                            font-size: 11px;
+                            text-transform: uppercase;
+
+                            &.current_year {
+                                color: $white-2;
+                            }
+
+                            &.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: $ta-light-grey-2;
+                                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: $bw5;
+                                font-size: 11px;
+
+                                &:hover:not(.current_month) {
+                                    background-color: $ta-black;
+                                    color: $white-2;
+                                    border-radius: 2px;
+                                    cursor: pointer;
+                                }
+                    
+                                &.current_month {
+                                    color: $white-2;
+                                    background-color: $ta-blue-21;
+                                    border-radius: 2px;
+                                    cursor: pointer;
+                                }
+                            }
+
+                            &.current_year {
+                                .month_list_item {
+                                    color: $white-2;
+                                }
+                            }
+                        }
+
+                        .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: $bw5;
+                                font-size: 11px;
+                
+                                &.current_day {
+                                    color: $white-2;
+                                    background-color: $ta-blue-21;
+                                    border-radius: 2px;
+                                }
+                
+                                &.selected_day {
+                                    background-color: $ta-blue-21;
+                                    color: $white-2;
+                                    border-radius: 2px;
+                                }
+
+                                &.day_in_current_month {
+                                    color: $white-2;
+                                }
+
+                                &.weekend_day_in_current_month {
+                                    color: $ta-light-grey-6;
+                                }
+                
+                                &:not(.empty_day):not(.selected_day):hover {
+                                    background-color: $ta-black;
+                                    border-radius: 2px;
+                
+                                    cursor: pointer;
+                                    color: $white-2;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .time_picker {
+            width: 156px;
+            margin: 4px;
+    
+            .time_picker_head {
+                height: 18px;
+                padding: 0 4px;
+                margin-bottom: 4px;
+
+                .selected_time {
+                    color: $white-2;
+                    font-size: 11px;
+                }
+
+                .sel_now {
+                    color: $ta-blue-19;
+                    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: $ta-light-grey-2;
+                        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: $ta-blue-20;
+
+                        .border_line {
+                            left: 33.3%;
+                            width: 1px;
+                            height: 12px;
+                            margin-top: 5px;
+                            background-color: $ta-blue-19;
+                            opacity: 0.4;
+                            border-radius: 2px;
+
+                            &.line_2 {
+                                left: 66.6%;
+                            }
+                        }
+                    }
+
+                    .scroll_pickers {
+                        margin: 0;
+                        padding: 77px 0;
+
+                        .scroll_item {
+                            color: $ta-light-grey-2;
+                            font-size: 11px;
+
+                            &.active_item {
+                                color: $white-2;
+                            }
+                        }
+                    }
+                }
+
+                .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 $ta-black;
+
+                    .pick_button {
+                        height: 18px;
+                        background-color: $ta-black;
+
+                        color: $white-2;
+                        font-size: 11px;
+                        text-transform: uppercase;
+
+                        border-radius: 1px;
+
+                        &.set_button {
+                            width: auto;
+                            background-color: $ta-blue-14;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.calendar_view {
+    width: 260px;
+    padding-top: 12px;
+    background-color: $white-2;
+
+    .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: $bw6-2;
+
+            .year_hold {
+                margin-right: 5px;
+                text-transform: uppercase;
+                color: $bw6-2;
+
+                &:hover {
+                    color: $bw5;
+                }
+
+                cursor: pointer;
+            }
+        }
+
+        .today {
+            font-size: 12px;
+            font-weight: $font-bold;
+            color: $blue-19;
+            cursor: pointer;
+
+            &:hover {
+                color: $ta-blue-2;
+            }
+        }
+    }
+
+    .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: $grey-17;
+            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: $bw4;
+            }
+        }
+
+        .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: $bw6-2;
+
+                &.current_day {
+                    color: $white-2;
+                    background-color: $bw5;
+                    border-radius: 2px;
+                }
+
+                &.selected_day {
+                    background-color: $bw5;
+                    color: $white-2;
+                    border-radius: 2px;
+                }
+
+                &:not(.empty_day):not(.selected_day):hover {
+                    background-color: $ta-light-grey-5;
+                    border-radius: 2px;
+
+                    cursor: pointer;
+                    color: $ta-light-grey-3;
+                }
+            }
+        }
+    }
+
+    .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: $bw6-2;
+            font-weight: $font-regular;
+
+            &:hover:not(.current_month) {
+                background-color: $ta-light-grey-5;
+                color: $ta-light-grey-3;
+                border-radius: 2px;
+                cursor: pointer;
+            }
+
+            &.current_month {
+                color: $ta-light-grey-3;
+                background-color: $ta-light-grey-5;
+                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;
+}