From c7978db662efe559f1932d4e468fc51d1fe6ae68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Wed, 9 Aug 2023 15:24:16 -0400
Subject: [PATCH] maj

---
 .../base-calendar/base-calendar.html          | 10 +-
 .../base-calendar/base-calendar.scss          | 38 +++++---
 .../src/components/datepicker/datepicker.html |  1 +
 .../components/input-style/input-style.scss   |  4 +
 .../src/components/timepicker/timepicker.html | 94 ++++++++++---------
 .../src/components/timepicker/timepicker.scss | 33 +++----
 6 files changed, 99 insertions(+), 81 deletions(-)

diff --git a/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.html b/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.html
index 268d62a6f..536e1e14e 100644
--- a/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.html
+++ b/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.html
@@ -18,16 +18,14 @@
                                @click.stop="onMonthPrevious()"
                                :disabled="isMinMonth"
                                icon-name="m-svg__chevron--left"
-                               icon-size="16px"
-                               ref="previousMonth"
-                               skin="link">{{ previousMonthLabel }}</m-icon-button>
+                               icon-size="18px"
+                               ref="previousMonth">{{ previousMonthLabel }}</m-icon-button>
                 <m-icon-button class="m-base-calendar__next"
                                @click.stop="onMonthNext()"
                                :disabled="isMaxMonth"
                                icon-name="m-svg__chevron--right"
-                               icon-size="16px"
-                               ref="nextMonth"
-                               skin="link">{{ nextMonthLabel }}</m-icon-button>
+                               icon-size="18px"
+                               ref="nextMonth">{{ nextMonthLabel }}</m-icon-button>
             </div>
         </transition>
     </nav>
diff --git a/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.scss b/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.scss
index ebe22bf88..1aec30d0a 100644
--- a/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.scss
+++ b/packages/modul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.scss
@@ -2,10 +2,10 @@
 
 $m-base-calendar--week-length: 7 !default;
 $m-base-calendar--dimension: $m-touch-size !default;
-$m-base-calendar--weekday-height: 41px !default; // magic number
+$m-base-calendar--weekday-height: 44px !default; // magic number
 $m-base-calendar--width: calc(#{$m-base-calendar--dimension * $m-base-calendar--week-length} + #{$m-space-md} * 2) !default;
-$m-base-calendar--min-height: calc(#{($m-base-calendar--dimension * 5) + $m-base-calendar--weekday-height} + #{$m-space});
-$m-base-calendar--max-height: calc(#{($m-base-calendar--dimension * 6) + $m-base-calendar--weekday-height} + #{$m-space});
+$m-base-calendar--min-height: calc(#{($m-base-calendar--dimension * 5) + $m-base-calendar--weekday-height} + #{$m-space-md});
+$m-base-calendar--max-height: calc(#{($m-base-calendar--dimension * 6) + $m-base-calendar--weekday-height} + #{$m-space-md});
 $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
 
 @mixin m-base-calendar__show-indicator() {
@@ -54,8 +54,10 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
     overflow: hidden;
 
     @media (min-width: $m-mq-min-sm) {
-        border: $m-border-width-sm solid $m-color-border;
         width: $m-base-calendar--width;
+        border: $m-border-width-sm solid $m-color-border;
+        border-radius: $m-border-radius;
+        box-shadow: $m-box-shadow;
     }
 
     &.m--is-years-months-view {
@@ -67,14 +69,15 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
         }
     }
 
-    &__next,
-    &__previous {
-        color: $m-color-interactive;
+    &__previous,
+    &__next {
+        position: relative;
+        z-index: 0;
+    }
 
-        &:hover,
-        &:focus {
-            color: $m-color-interactive-darker;
-        }
+
+    &__next {
+        margin-left: #{- $m-space-xs};
     }
 
     &__header,
@@ -138,6 +141,10 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
     &__body {
         position: relative;
         overflow: hidden;
+
+        @media (max-width: $m-mq-max-sm) {
+            padding-bottom: $m-space-md;
+        }
     }
 
     &.m--is-max-row {
@@ -154,18 +161,23 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
     &__years-months-view {
         padding-right: $m-space;
         padding-left: $m-space;
-        padding-bottom: $m-space;
+        padding-bottom: $m-space-md;
         width: 100%;
         height: $m-base-calendar--min-height;
 
         @include m-scrollbar();
 
+        @media (max-width: $m-mq-max-sm) {
+            height: $m-base-calendar--max-height;
+        }
+
         @media (min-width: $m-mq-min-sm) {
             // for animation purpose
             transition: height $m-transition-duration ease;
             padding-right: $m-space-md;
             padding-left: $m-space-md;
         }
+
     }
 
     &__days-view {
@@ -219,7 +231,7 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
 
         align-items: center;
         border-bottom: $m-border-width-sm solid $m-color-border;
-        padding: 0 0 $m-space-2xs 0;
+        padding: 0 0 $m-space-sm 0;
         margin: 0;
     }
 
diff --git a/packages/modul-components/src/components/datepicker/datepicker.html b/packages/modul-components/src/components/datepicker/datepicker.html
index ea467604c..d708fdf7f 100644
--- a/packages/modul-components/src/components/datepicker/datepicker.html
+++ b/packages/modul-components/src/components/datepicker/datepicker.html
@@ -57,6 +57,7 @@
                  open-trigger="manual"
                  :padding="false"
                  placement="bottom"
+                 :shadow="false"
                  @open="onOpen"
                  @close="onClose">
             <h2 v-if="label && isMqMaxS"
diff --git a/packages/modul-components/src/components/input-style/input-style.scss b/packages/modul-components/src/components/input-style/input-style.scss
index 70d836461..5db57db18 100644
--- a/packages/modul-components/src/components/input-style/input-style.scss
+++ b/packages/modul-components/src/components/input-style/input-style.scss
@@ -156,6 +156,10 @@
             background: rgba(255, 255, 255, 0);
             -webkit-box-shadow: 0 0 0 1000px $m-color-white inset !important;
         }
+
+        &:disabled {
+            color: $m-color-disabled;
+        }
     }
 
     textarea {
diff --git a/packages/modul-components/src/components/timepicker/timepicker.html b/packages/modul-components/src/components/timepicker/timepicker.html
index 508b701eb..631c5d863 100644
--- a/packages/modul-components/src/components/timepicker/timepicker.html
+++ b/packages/modul-components/src/components/timepicker/timepicker.html
@@ -57,54 +57,56 @@
                  :focus-management="false"
                  open-trigger="manual"
                  placement="bottom-end"
+                 :shadow="false"
                  @open="onOpen"
                  @close="onClose">
-            <div slot="header"
-                 class="m-timepicker__header">
-                <span class="m-timepicker__header__hours">{{ $i18n.translate('m-timepicker:hours') }}</span>:
-                <span class="m-timepicker__header__minutes">{{ $i18n.translate('m-timepicker:minutes') }}</span>
-            </div>
-            <div class="m-timepicker__body">
-                <ul class="m-timepicker__hours"
-                    ref="hours"
-                    role="listbox"
-                    @mousedown="onMousedown"
-                    @mouseup="onMouseup"
-                    @scroll="onScroll">
-                    <li v-for="(h, hoursIndex) in currentfilteredHours"
-                        :key="hoursIndex"
-                        :id="h"
-                        class="m-timepicker__hours-item">
-                        <m-calendar-button :selected="h == currentHour"
-                                           role="option"
-                                           @click="onSelectHour(h)"
-                                           @keyup="onSelectHourKeyup($event, h)">
-                            {{formatNumber(h)}}
-                        </m-calendar-button>
-                    </li>
-                </ul>
-                <ul class="m-timepicker__minutes"
-                    ref="minutes"
-                    @mousedown="onMousedown"
-                    @mouseup="onMouseup"
-                    @scroll="onScroll">
-                    <li v-for="(m, minutesIndex) in currentFilteredMinutes"
-                        :key="minutesIndex"
-                        :id="minutesIndex"
-                        class="m-timepicker__minutes-item">
-                        <m-calendar-button :selected="m == currentMinute"
-                                           @click="onSelectMinute(m)"
-                                           @keyup="onSelectMinuteKeyup($event, m)"
-                                           role="option">
-                            {{formatNumber(m)}}
-                        </m-calendar-button>
-                    </li>
-                </ul>
-            </div>
-            <div slot="footer"
-                 class="m-timepicker__footer">
-                <m-link mode="button"
-                        @click="onOk">{{i18nButton}}</m-link>
+            <div class="m-timepicker__box">
+                <header class="m-timepicker__header">
+                    <span class="m-timepicker__header__hours">{{ $i18n.translate('m-timepicker:hours') }}</span>:
+                    <span class="m-timepicker__header__minutes">{{ $i18n.translate('m-timepicker:minutes') }}</span>
+                </header>
+                <div class="m-timepicker__body">
+                    <ul class="m-timepicker__hours"
+                        ref="hours"
+                        role="listbox"
+                        @mousedown="onMousedown"
+                        @mouseup="onMouseup"
+                        @scroll="onScroll">
+                        <li v-for="(h, hoursIndex) in currentfilteredHours"
+                            :key="hoursIndex"
+                            :id="h"
+                            class="m-timepicker__hours-item">
+                            <m-calendar-button :selected="h == currentHour"
+                                               role="option"
+                                               @click="onSelectHour(h)"
+                                               @keyup="onSelectHourKeyup($event, h)">
+                                {{formatNumber(h)}}
+                            </m-calendar-button>
+                        </li>
+                    </ul>
+                    <ul class="m-timepicker__minutes"
+                        ref="minutes"
+                        @mousedown="onMousedown"
+                        @mouseup="onMouseup"
+                        @scroll="onScroll">
+                        <li v-for="(m, minutesIndex) in currentFilteredMinutes"
+                            :key="minutesIndex"
+                            :id="minutesIndex"
+                            class="m-timepicker__minutes-item">
+                            <m-calendar-button :selected="m == currentMinute"
+                                               @click="onSelectMinute(m)"
+                                               @keyup="onSelectMinuteKeyup($event, m)"
+                                               role="option">
+                                {{formatNumber(m)}}
+                            </m-calendar-button>
+                        </li>
+                    </ul>
+                </div>
+                <footer class="m-timepicker__footer">
+                    <m-link class="m-timepicker__footer-link"
+                            mode="button"
+                            @click="onOk">{{i18nButton}}</m-link>
+                </footer>
             </div>
         </m-popup>
     </m-input-style>
diff --git a/packages/modul-components/src/components/timepicker/timepicker.scss b/packages/modul-components/src/components/timepicker/timepicker.scss
index 6f364d068..658f53293 100644
--- a/packages/modul-components/src/components/timepicker/timepicker.scss
+++ b/packages/modul-components/src/components/timepicker/timepicker.scss
@@ -14,21 +14,20 @@ $m-timepicker--height-multiplier: 5;
         }
     }
 
-    &__validation-message {
-        transition: margin-top $m-transition-duration ease;
-    }
-
-    &__header,
-    &__body,
-    &__footer {
-        background: $m-color-white;
+    &__box {
+        background-color: $m-color-white;
 
         @media (min-width: #{$m-mq-min-sm}) {
-            border-right: $m-border-width-sm solid $m-color-border;
-            border-left: $m-border-width-sm solid $m-color-border;
+            border-radius: $m-border-radius;
+            border: 1px solid $m-color-border;
+            box-shadow: $m-box-shadow;
         }
     }
 
+    &__validation-message {
+        transition: margin-top $m-transition-duration ease;
+    }
+
     &__header {
         display: flex;
         align-items: center;
@@ -38,10 +37,6 @@ $m-timepicker--height-multiplier: 5;
         border-bottom: $m-border-width-sm solid $m-color-border;
         font-weight: $m-font-weight-semi-bold;
 
-        @media (min-width: #{$m-mq-min-sm}) {
-            border-top: $m-border-width-sm solid $m-color-border;
-        }
-
         &__hours,
         &__minutes {
             flex: 1 1 auto;
@@ -88,14 +83,20 @@ $m-timepicker--height-multiplier: 5;
 
     &__footer {
         border-top: $m-border-width-sm solid $m-color-border;
-        padding: 6px $m-space;
+        padding: $m-space-sm $m-space $m-space-2xl $m-space;
         min-height: $m-touch-size;
         display: flex;
         align-items: center;
         justify-content: center;
 
         @media (min-width: #{$m-mq-min-sm}) {
-            border-bottom: $m-border-width-sm solid $m-color-border;
+            padding-bottom: $m-space-sm;
         }
     }
+
+    &__footer-link {
+        width: 100%;
+        text-align: center;
+        justify-content: center;
+    }
 }