@citizenplane/pimp 8.9.4 → 8.10.0

package/src/libs/CoreDatepicker.vue

@@ -986,63 +986,68 @@ export default {
 }
 </script>
 <style lang="scss">
-@include popover-desktop('asd__fade');
-</style>
+$tablet: 768px;
 
-<style lang="stylus">
-$tablet = 768px
+$background-grey-color: #f7f7f7;
 
-$background-grey-color = #f7f7f7
+$transition-time: 0.3s;
 
-$transition-time = 0.3s
+@include mx.popover-desktop('asd__fade');
 
-degrade()
-  content ''
-  width 65px
-  height 35px
-  background linear-gradient(90deg, #f7f7f7 50%, rgba(241, 241, 241, 0) 95%)
-  position absolute
-  z-index -1
+@mixin degrade {
+  content: '';
+  width: 65px;
+  height: 35px;
+  background: linear-gradient(90deg, #f7f7f7 50%, rgba(241, 241, 241, 0) 95%);
+  position: absolute;
+  z-index: -1;
+}
 
 // datepicker
 .asd__list-complete-enter-from,
-.asd__list-complete-leave-to
-  opacity 0
-  transform translateY(30px)
-
-.asd__list-complete-leave-active
-  position absolute
-  visibility hidden
-
-.asd
-  &__wrapper
-    border-radius 10px
-    white-space nowrap
-    text-align center
-    background-color $neutral-light
-    overflow hidden
+.asd__list-complete-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.asd__list-complete-leave-active {
+  position: absolute;
+  visibility: hidden;
+}
+
+.asd {
+  &__wrapper {
+    border-radius: 10px;
+    white-space: nowrap;
+    text-align: center;
+    background-color: colors.$neutral-light;
+    overflow: hidden;
 
     &:not(&--isInline) {
-      box-shadow 0 9px 24px rgba(62, 62, 91, 20%), 0 4px 4px rgba(62, 62, 91, 10%);
+      box-shadow:
+        0 9px 24px rgba(62, 62, 91, 20%),
+        0 4px 4px rgba(62, 62, 91, 10%);
     }
 
     &--isInline {
-      position relative !important
+      position: relative !important;
     }
 
-    &:before
+    &:before {
       // Line between the two months
-      @media (min-width: $tablet)
-        position absolute
-        content ''
-        left 0
-        right 0
-        top 20px
-        bottom 0
-        margin auto
-        width 1px
-        background $neutral-dark-4
-        z-index -1
+      @media (min-width: $tablet) {
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        top: 20px;
+        bottom: 0;
+        margin: auto;
+        width: 1px;
+        background: colors.$neutral-dark-4;
+        z-index: -1;
+      }
+    }
 
     &--showOneMonth {
       &:before {
@@ -1050,90 +1055,98 @@ degrade()
       }
     }
 
-    &--full-screen
-      position fixed
-      top 0
-      right 0
-      bottom 0
-      left 0
-      border none
-      z-index 100
-
-  &__inner-wrapper
-    transition all $transition-time ease
-    position relative
-
-  &__datepicker-header
-    position relative
-
-  &__change-month-button
-    position absolute
-    z-index 10
-    top 16px
+    &--full-screen {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: none;
+      z-index: 100;
+    }
+  }
+
+  &__inner-wrapper {
+    transition: all $transition-time ease;
+    position: relative;
+  }
+
+  &__datepicker-header {
+    position: relative;
+  }
+
+  &__change-month-button {
+    position: absolute;
+    z-index: 10;
+    top: 16px;
     border-radius: 100%;
 
     &:focus-visible {
-      outline: 2px solid $secondary-color;
+      outline: 2px solid colors.$secondary-color;
       outline-offset: 2px;
     }
 
-    i
-      color $neutral-dark
+    i {
+      color: colors.$neutral-dark;
+    }
 
-    svg
-      cursor pointer
-      stroke-width 1.2px
+    svg {
+      cursor: pointer;
+      stroke-width: 1.2px;
+    }
 
-    @media (min-width: $tablet)
-      top 22px
+    @media (min-width: $tablet) {
+      top: 22px;
+    }
 
     &--previous {
-      left 16px
+      left: 16px;
 
       @media (min-width: $tablet) {
-        left 24px
+        left: 24px;
       }
     }
 
     &--next {
-      right 16px
+      right: 16px;
 
       @media (min-width: $tablet) {
-        right 24px
+        right: 24px;
       }
     }
+  }
 
   &__days-legend {
-    position absolute
-    font-size 12px
-    line-height 15px
-    user-select none
+    position: absolute;
+    font-size: 12px;
+    line-height: 15px;
+    user-select: none;
 
     @media (min-width: $tablet) {
-      padding 0 24px
-      top 60px
+      padding: 0 24px;
+      top: 60px;
     }
 
-    @media (max-width: $tablet - 1px) {
-      top 56px
+    @media (max-width: ($tablet - 1px)) {
+      top: 56px;
       padding: 0 16px;
     }
   }
 
   &__day-title {
-    display inline-block
-    width percentage(1 / 7)
-    text-align center
-    color $neutral-dark-1
-    font-size 14px
-    line-height 18px
-    margin-left -1px
+    display: inline-block;
+    width: math.div(1, 7) * 100%;
+    text-align: center;
+    color: colors.$neutral-dark-1;
+    font-size: 14px;
+    line-height: 18px;
+    margin-left: -1px;
   }
 
   &__month-table {
-    border-spacing 0 6px
-    width 100%
-    max-width 100%
+    border-spacing: 0 6px;
+    width: 100%;
+    max-width: 100%;
   }
 
   &__wrapper:not(&__wrapper--isInline) &__month {
@@ -1147,230 +1160,292 @@ degrade()
   }
 
   &__month {
-    transition all $transition-time ease
-    display inline-block
-    padding 16px 16px 8px
+    transition: all $transition-time ease;
+    display: inline-block;
+    padding: 16px 16px 8px;
 
     @media (min-width: $tablet) {
-      padding 24px 24px 12px;
+      padding: 24px 24px 12px;
     }
 
     &--hidden {
-      height 275px
-      visibility hidden
+      height: 275px;
+      visibility: hidden;
+    }
+  }
+
+  &__month-name {
+    font-size: 16px;
+    text-align: center;
+    margin: 0 0 36px;
+    line-height: 20px;
+    color: colors.$neutral-dark;
+
+    @media (max-width: $tablet) {
+      margin-top: 2px;
+    }
+
+    > span {
+      padding-right: 3px;
+    }
+  }
+
+  &__selected {
+    &-date-one {
+      background: $background-grey-color;
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    }
+
+    &-date-one.asd__day--end-month {
+      &:before {
+        @include degrade;
+        border-top-left-radius: 50%;
+        border-bottom-left-radius: 50%;
+      }
+    }
+
+    &-date-one.asd__day--end-week:not(.asd__day--selected) {
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    &-date-two {
+      background: $background-grey-color;
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+    }
+
+    &-date-two.asd__day--start-month {
+      &:before {
+        @include degrade;
+        transform: rotate(180deg);
+        right: 20px;
+        width: 20px;
+      }
+    }
+
+    &-date-two.asd__day--start-week {
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
     }
   }
 
-  &__month-name
-    font-size 16px
-    text-align center
-    margin 0 0 36px
-    line-height 20px
-    color $neutral-dark
-
-    @media (max-width: $tablet)
-      margin-top 2px
-
-    > span
-      padding-right 3px
-
-  &__selected
-    &-date-one
-      background $background-grey-color
-      border-top-left-radius 50%
-      border-bottom-left-radius 50%
-
-    &-date-one.asd__day--end-month
-      &:before
-        degrade()
-        border-top-left-radius 50%
-        border-bottom-left-radius 50%
-
-    &-date-one.asd__day--end-week&:not(.asd__day--selected)
-      border-top-right-radius 10px
-      border-bottom-right-radius 10px
-
-    &-date-two
-      background $background-grey-color
-      border-top-right-radius 50%
-      border-bottom-right-radius 50%
-
-    &-date-two.asd__day--start-month
-      &:before
-        degrade()
-        transform rotate(180deg)
-        right 20px
-        width 20px
-
-    &-date-two.asd__day--start-week
-      border-top-left-radius 5px
-      border-bottom-left-radius 5px
-
-  &__day
-    outline none
-    padding 0
-    position relative
-
-    &--in-range, &--hovered
-      background $background-grey-color
-
-    &--hovered
-      .asd__day--end-week
-        border-top-right-radius 5px
-        border-bottom-right-radius 5px
-
-      .asd__day--start-week
-        border-top-left-radius 5px
-        border-bottom-left-radius 5px
-
-    &--in-range&--end-week
-      border-top-right-radius 5px
-      border-bottom-right-radius 5px
-
-    &--in-range&--start-week
-      border-top-left-radius 5px
-      border-bottom-left-radius 5px
-
-    &--hovered&--start-month,
-    &--in-range&--start-month:not(.asd__selected-date-one):not(.asd__selected-date-two)
-      &:before
-        degrade()
-        width 30px
-        transform rotate(180deg)
-        right 20px
-
-    &--hovered&--end-month,&--in-range&--end-month:not(.asd__selected-date-one):not(.asd__selected-date-two)
-      &:before
-        degrade()
-
-    &--enabled
-      &:not(.asd__day--disabled):not(.asd__day--selected):not(.asd__selected-date-one):not(.asd__selected-date-two):not(.asd__day--in-range):hover
-        button
-          z-index 2
-          background $neutral-light
-          border 2px solid #f7f7f7
-          border-radius 50%
-
-      &.asd__day--date-two-not-selected:hover
-        background $background-grey-color
-        border-top-right-radius 50%
-        border-bottom-right-radius 50%
-
-        &.asd__day--start-month
-          &:before
-            degrade()
-            width 30px
-            transform rotate(180deg)
-            right 20px
-
-    &--enabled.asd__day--in-range:hover
-      background #f1f1f3
-
-    &--selected
-      button
-        border-radius 50%
-        background $primary-color
-
-      &.asd__selected-date-one
-        &:before
-          degrade()
-          border-top-left-radius 50%
-          border-bottom-left-radius 50%
-
-      &.asd__selected-date-two
-        &:before
-          degrade()
-          border-top-right-radius 50%
-          border-bottom-right-radius 50%
-          width 30px
-          transform rotate(180deg)
-          right 20px
-
-      button
-        span
-          color $neutral-light !important
+  &__day {
+    outline: none;
+    padding: 0;
+    position: relative;
+
+    &--in-range,
+    &--hovered {
+      background: $background-grey-color;
+    }
+
+    &--hovered {
+      .asd__day--end-week {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      .asd__day--start-week {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+    }
+
+    &--in-range.asd__day--end-week {
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+
+    &--in-range.asd__day--start-week {
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+
+    &--hovered.asd__day--start-month,
+    &--in-range.asd__day--start-month:not(.asd__selected-date-one):not(.asd__selected-date-two) {
+      &:before {
+        @include degrade;
+        width: 30px;
+        transform: rotate(180deg);
+        right: 20px;
+      }
+    }
+
+    &--hovered.asd__day--end-month,
+    &--in-range.asd__day--end-month:not(.asd__selected-date-one):not(.asd__selected-date-two) {
+      &:before {
+        @include degrade;
+      }
+    }
+
+    &--enabled {
+      &:not(.asd__day--disabled):not(.asd__day--selected):not(.asd__selected-date-one):not(.asd__selected-date-two):not(
+          .asd__day--in-range
+        ):hover {
+        button {
+          z-index: 2;
+          background: colors.$neutral-light;
+          border: 2px solid #f7f7f7;
+          border-radius: 50%;
+        }
+      }
+
+      &.asd__day--date-two-not-selected:hover {
+        background: $background-grey-color;
+        border-top-right-radius: 50%;
+        border-bottom-right-radius: 50%;
+
+        &.asd__day--start-month {
+          &:before {
+            @include degrade;
+            width: 30px;
+            transform: rotate(180deg);
+            right: 20px;
+          }
+        }
+      }
+    }
+
+    &--enabled.asd__day--in-range:hover {
+      background: #f1f1f3;
+    }
+
+    &--selected {
+      button {
+        border-radius: 50%;
+        background: colors.$primary-color;
+      }
+
+      &.asd__selected-date-one {
+        &:before {
+          @include degrade;
+          border-top-left-radius: 50%;
+          border-bottom-left-radius: 50%;
+        }
+      }
+
+      &.asd__selected-date-two {
+        &:before {
+          @include degrade;
+          border-top-right-radius: 50%;
+          border-bottom-right-radius: 50%;
+          width: 30px;
+          transform: rotate(180deg);
+          right: 20px;
+        }
+      }
+
+      button {
+        span {
+          color: colors.$neutral-light !important;
+        }
+      }
+    }
 
     &--disabled .asd__day-number,
-    &--empty .asd__day-number
-      color $neutral-dark-3 !important
-
-    &--disabled *
-      cursor not-allowed !important
-
-    &--today .asd__day-button .asd__day-number
-      color $primary-color
-      font-weight 600
-
-    &--recurency
-      &:not(.asd__selected-date-one):not(.asd__selected-date-two)
-        background $background-grey-color
-
-      button
-        background $accent-color-1 !important
-        border-radius 50%
-        border 2px solid $background-grey-color
-
-        .asd__day-number
-          color $neutral-light
-
-    &--selected-recurrent
-      button
-        z-index 2
-        background $neutral-light
-        border 2px solid $background-grey-color
-        border-radius 50%
-
-        &:before
-          top 7px
-          left 5px
-
-      span
-        color $neutral-dark
-
-  &__day-button
-    outline none
-    position relative
-    background transparent
-    width 35px
-    height 35px
-    border none
-    user-select none
-    font-size 14px
-
-    .asd__day-number
-      z-index 3
-      position relative
-      color $neutral-dark
-
-  &__mobile-header
-    border-bottom $border-normal
-    position relative
-    padding 15px 15px 15px 15px !important
-    text-align center
-    height 50px
-
-    h3
-      font-size 20px
-      margin 0
-
-  &__mobile-only
-    display none
-
-    @media (max-width: $tablet)
-      display block
-
-  &__mobile-close
-    border none
-    position absolute
-    top 7px
-    right 5px
-    padding 5px
-    z-index 100
-    cursor pointer
-
-    &__icon
-      position relative
-      font-size 1.6em
-      font-weight bold
-      padding 0
+    &--empty .asd__day-number {
+      color: colors.$neutral-dark-3 !important;
+    }
+
+    &--disabled * {
+      cursor: not-allowed !important;
+    }
+
+    &--today .asd__day-button .asd__day-number {
+      color: colors.$primary-color;
+      font-weight: 600;
+    }
+
+    &--recurency {
+      &:not(.asd__selected-date-one):not(.asd__selected-date-two) {
+        background: $background-grey-color;
+      }
+
+      button {
+        background: colors.$accent-color-1 !important;
+        border-radius: 50%;
+        border: 2px solid $background-grey-color;
+
+        .asd__day-number {
+          color: colors.$neutral-light;
+        }
+      }
+    }
+
+    &--selected-recurrent {
+      button {
+        z-index: 2;
+        background: colors.$neutral-light;
+        border: 2px solid $background-grey-color;
+        border-radius: 50%;
+
+        &:before {
+          top: 7px;
+          left: 5px;
+        }
+      }
+
+      span {
+        color: colors.$neutral-dark;
+      }
+    }
+  }
+
+  &__day-button {
+    outline: none;
+    position: relative;
+    background: transparent;
+    width: 35px;
+    height: 35px;
+    border: none;
+    user-select: none;
+    font-size: 14px;
+
+    .asd__day-number {
+      z-index: 3;
+      position: relative;
+      color: colors.$neutral-dark;
+    }
+  }
+
+  &__mobile-header {
+    border-bottom: colors.$border-color;
+    position: relative;
+    padding: 15px 15px 15px 15px !important;
+    text-align: center;
+    height: 50px;
+
+    h3 {
+      font-size: 20px;
+      margin: 0;
+    }
+  }
+
+  &__mobile-only {
+    display: none;
+
+    @media (max-width: $tablet) {
+      display: block;
+    }
+  }
+
+  &__mobile-close {
+    border: none;
+    position: absolute;
+    top: 7px;
+    right: 5px;
+    padding: 5px;
+    z-index: 100;
+    cursor: pointer;
+
+    &__icon {
+      position: relative;
+      font-size: 1.6em;
+      font-weight: bold;
+      padding: 0;
+    }
+  }
+}
 </style>