@vgip/meta-ui 2.0.0 → 2.1.1

package/vendor/volta3/scss/flatpickr/_flatpickr-volta.scss

@@ -0,0 +1,407 @@
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+@import 'flatpickr';
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+    box-shadow: none;
+}
+
+.Vlt-datepicker {
+    @extend .Vlt-elevation--3;
+    border: 1px solid $grey-light;
+    border-radius: 6px;
+    width: 329px;
+
+    &.Vlt-datepicker--month-view {
+        .flatpickr-weekdays,
+        .flatpickr-days {
+            display: none;
+        }
+
+        .Vlt-datepicker__months {
+            display: block;
+        }
+
+        .Vlt-datepicker__footer {
+            display: none;
+        }
+    }
+
+    &.rangeMode {
+        .Vlt-datepicker__range {
+            display: block;
+        }
+
+        .flatpickr-day {
+            &.selected {
+                &:before {
+                    animation-name: none;
+                    background-color: $black;
+                }
+            }
+        }
+
+        .Vlt-datepicker__months {
+            .Vlt-datepicker__month {
+                &.selected {
+                    color: $black;
+
+                    &:after {
+                        background-color: $grey-lighter;
+                    }
+                }
+            }
+        }
+    }
+
+    .flatpickr {
+        &-rContainer,
+        &-weekdays,
+        &-days,
+        &-days .dayContainer,
+        &-dayContainer {
+            min-width: 279px;
+            width: 279px;
+        }
+
+        &-weekdays {
+            border-bottom: 1px solid $grey-light;
+            height: 30px;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+        }
+
+        &-weekday {
+            color: $black;
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        &-day {
+            border: 0;
+            color: $black;
+            height: 30px;
+            line-height: 30px;
+            margin-top: 4px;
+            transition: color 0.2s;
+
+            &:before {
+                background-color: transparent;
+                border-radius: 50%;
+                content: '';
+                height: 30px;
+                left: 50%;
+                margin-left: -15px;
+                position: absolute;
+                transition: background-color 0.2s;
+                width: 30px;
+                z-index: -1;
+            }
+
+            &:nth-child(7n) {
+                &.flatpickr-day.inRange {
+                    border-bottom-right-radius: 15px;
+                    border-top-right-radius: 15px;
+                    box-shadow: -5px 0 0 $grey-lighter;
+                }
+            }
+
+            &:nth-child(7n +1) {
+                &.flatpickr-day.inRange {
+                    border-bottom-left-radius: 15px;
+                    border-top-left-radius: 15px;
+                    box-shadow: 5px 0 0 $grey-lighter;
+                }
+
+                &.flatpickr-day.endRange {
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+
+            &.today {
+                border: 0;
+            }
+
+            &.prevMonthDay,
+            &.flatpickr-disabled {
+                color: $grey;
+                cursor: default;
+                pointer-events: none;
+            }
+
+            &.nextMonthDay {
+                height: 0;
+                visibility: hidden;
+            }
+
+            &:hover,
+            &.startRange,
+            &.endRange,
+            &.selected {
+                background: none;
+                border: 0;
+                color: $white;
+                font-weight: 600;
+                position: relative;
+
+                &:before {
+                    background-color: $black;
+                }
+            }
+
+            &.selected {
+                &:before {
+                    animation-duration: 0.1s;
+                    animation-name: selected;
+                    background-color: $indigo;
+                }
+            }
+
+            @keyframes selected {
+                0%   {background-color: $black;}
+                100% {background-color: $indigo;}
+            }
+
+            &.startRange + .inRange,
+            &.endRange {
+                &:after {
+                    background-color: $grey-lighter;
+                    content: '';
+                    height: 30px;
+                    position: absolute;
+                    right: 50%;
+                    width: 100%;
+                    z-index: -2;
+                }
+            }
+
+            &.startRange  {
+                &.endRange {
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+
+            &.inRange,
+            &.inRange.today {
+                background-color: $grey-lighter;
+                border-color: $grey-lighter;
+                box-shadow: -5px 0 0 $grey-lighter, 5px 0 0 $grey-lighter;
+                font-weight: 600;
+
+                &:hover {
+                    color: $grey-darker;
+                }
+            }
+        }
+
+        &-innerContainer {
+            padding: 17px 25px 0px;
+        }
+    }
+
+    .Vlt-datepicker {
+        &__header {
+            padding: 25px 30px 16px;
+            position: relative;
+            text-align: left;
+        }
+
+        &__header-month,
+        &__header-year {
+            color: $black;
+            font-size: 2.2rem;
+            font-weight: 800;
+            line-height: 3rem;
+            transition: color 0.2s;
+        }
+
+        &__header-month {
+            cursor: pointer;
+
+            &:hover {
+                color: $grey-darker;
+            }
+        }
+
+        &__nav {
+            position: absolute;
+            right: 25px;
+                top: 25px;
+
+            &-next,
+            &-prev {
+                $fill-color: encode-hex-code($black);
+                background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M3.38326%207.96544C3.58628%207.68629%203.97717%207.62457%204.25632%207.82759L9.99983%2012.0047L15.7433%207.82759C16.0225%207.62457%2016.4134%207.68629%2016.6164%207.96544C16.8194%208.2446%2016.7577%208.63549%2016.4785%208.83851L10.3674%2013.283C10.1483%2013.4423%209.85138%2013.4423%209.63222%2013.283L3.52111%208.83851C3.24195%208.63549%203.18023%208.2446%203.38326%207.96544Z%22%2F%3E%0A%3C%2Fsvg%3E');
+                background-position: center center;
+                background-repeat: no-repeat;
+                background-size: 20px;
+                border: 1px solid $grey;
+                border-radius: 50%;
+                cursor: pointer;
+                display: inline-block;
+                height: 30px;
+                transform: rotate(270deg);
+                transition: background-color 0.2s;
+                width: 30px;
+
+                &:hover {
+                    background-color: rgba($black, 0.1);
+                }
+
+                &:active {
+                    background-color: rgba($black, 0.2);
+                }
+            }
+
+            &-prev {
+                margin-right: 10px;
+                transform: rotate(90deg);
+            }
+        }
+
+        &__range {
+            background: linear-gradient(to right, $gradient-pink, $gradient-peach);
+            color: $white;
+            display: none;
+            font-size: 1.6rem;
+            font-weight: 600;
+            line-height: 2.4rem;
+            padding: 22px 30px 8px;
+            position: relative;
+            text-align: left;
+
+            &:after {
+                background-color: rgba($white, 0.5);
+                content: '';
+                height: 40px;
+                left: 50%;
+                margin-left: -1px;
+                position: absolute;
+                top: 9px;
+                transform: rotate(35deg);
+                width: 1px;
+            }
+
+            &-start,
+            &-end {
+                display: inline-block;
+
+                &:before {
+                    font-size: 1.6rem;
+                    font-weight: 400;
+                    line-height: 1.6rem;
+                    position: absolute;
+                    top: 19px;
+                    transition: font-size 0.2s, top 0.2s;
+                }
+
+                &.selected {
+                    &:before {
+                        font-size: 1.2rem;
+                        top: 10px;
+                    }
+                }
+            }
+
+            &-start {
+                width: 165px;
+
+                &:before {
+                    content: 'Start';
+                }
+            }
+
+            &-end {
+                white-space: nowrap;
+                width: 102px;
+
+                &:before {
+                    content: 'End';
+                }
+            }
+        }
+
+        &__months {
+            display: none;
+            margin: 15px 0;
+            max-width: 279px;
+            width: 279px;
+
+            .Vlt-datepicker__month {
+                color: $black;
+                display: inline-block;
+                font-size: 1.5rem;
+                line-height: 2.1rem;
+                margin-bottom: 24px;
+                padding: 12px 0;
+                position: relative;
+                text-transform: uppercase;
+                transition: color 0.2s;
+                width: 25%;
+
+                &:after {
+                    background-color: transparent;
+                    border-radius: 50%;
+                    bottom: 0;
+                    content: '';
+                    height: 50px;
+                    left: 50%;
+                    position: absolute;
+                    top: -3px;
+                    transform: translateX(-50%);
+                    transition: background-color 0.2s;
+                    width: 50px;
+                    z-index: -1;
+                }
+
+                &:hover,
+                &.selected {
+                    color: $white;
+                    cursor: pointer;
+                    font-weight: 600;
+
+                    &:after {
+                        background-color: $black;
+                    }
+                }
+
+                &.selected {
+                    &:after {
+                        background-color: $indigo;
+                    }
+                }
+
+                &.Vlt-datepicker__month-disabled {
+                    color: $grey;
+                    cursor: default;
+                    pointer-events: none;
+                }
+            }
+        }
+
+        &__footer {
+            padding: 0px 25px 20px;
+            text-align: right;
+        }
+
+        &__clear {
+            @extend %Vlt-text-link;
+            @extend .reset-button;
+            color: $black;
+            font-size: 1.2rem;
+            line-height: 2.1rem;
+
+            &:hover {
+                color: $black;
+            }
+        }
+    }
+}