fix(datepicker): safari styles

ovh · Feb 22, 2024 · bc4f243 · bc4f243
1 parent 807c4f7
commit bc4f243
Showing 1 changed file with 98 additions and 60 deletions.
diff --git a/...omponents/src/datepicker/src/components/osds-datepicker/styles/osds-datepicker.color.scss b/...omponents/src/datepicker/src/components/osds-datepicker/styles/osds-datepicker.color.scss
@@ -1,83 +1,116 @@
 @import '~@ovhcloud/ods-common-theming/color/ods-component-color';
 @import './osds-datepicker.mixins';
 
+@mixin osds-datepicker-theme-color-variant-default() {
+  @include ods-and-all-hue-foreach-theme-color((
+    selected: '800',
+    color: '500',
+    border-color: '200',
+    background-color: '100'
+  )) using($colors) {
+    @include osds-datepicker-on-selected-host {
+      .datepicker {
+        * {
+          color: map_get($colors, color);
+        }
+
+        .datepicker-picker {
+          border-color: map_get($colors, border-color);
+
+          .datepicker-header,
+          .datepicker-controls {
+            .prev-btn:hover,
+            .next-btn:hover {
+              background: map_get($colors, background-color);
+            }
+
+            .view-switch:hover {
+              background: map_get($colors, background-color);
+            }
+          }
+
+          .datepicker-main {
+            .datepicker-grid {
+              .datepicker-cell:hover {
+                background: map_get($colors, background-color);
+              }
+
+              .selected,
+              .selected:hover {
+                background: map_get($colors, selected);
+              }
+            }
+
+            .datepicker-view {
+              .days {
+                .datepicker-grid {
+                  .datepicker-cell:hover,
+                  .selected {
+                    background: map_get($colors, background-color);
+                  }
+
+                  .selected,
+                  .selected:hover {
+                    background: map_get($colors, selected);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 // Main CSS color theme mixin
 @mixin osds-datepicker-theme-color() {
   /** base colors */
   :host {
-    @include ods-and-all-hue-foreach-theme-color((
-      selected: '800',
-      color: '500',
-      border-color: '200',
-      background-color: '100'
-    )) using($colors) {
-      @include osds-datepicker-on-selected-host {
-        .datepicker {
-          * {
-            color: map_get($colors, color);
-          }
+    .datepicker {
+      .datepicker-picker {
+        background-color: var(--ods-color-gray-000);
 
-          .datepicker-picker {
-            border-color: map_get($colors, border-color);
-            background-color: var(--ods-color-gray-000);
+        .datepicker-header,
+        .datepicker-controls {
+          .prev-btn,
+          .next-btn {
+            background: none;
+          }
 
-            .datepicker-header,
-            .datepicker-controls {
-              .prev-btn,
-              .next-btn {
-                background: none;
-              }
+          .view-switch {
+            background: none;
+          }
+        }
 
-              .prev-btn:hover,
-              .next-btn:hover {
-                background: map_get($colors, background-color);
-              }
+        .datepicker-main {
+          .datepicker-grid {
+            .datepicker-cell {
+              background: none;
+            }
 
-              .view-switch {
-                background: none;
+            .selected,
+            .selected:hover {
+              color: var(--ods-color-gray-000);
+            }
+          }
 
-                &:hover {
-                  background: map_get($colors, background-color);
+          .datepicker-view {
+            .days {
+              .days-of-week {
+                .dow {
+                  color: var(--ods-color-text-500);
                 }
               }
-            }
 
-            .datepicker-main {
               .datepicker-grid {
-                .datepicker-cell:hover {
-                  background: map_get($colors, background-color);
+                .datepicker-cell {
+                  background: none;
                 }
 
                 .selected,
                 .selected:hover {
-                  background: map_get($colors, selected);
-                }
-              }
-
-              .datepicker-view {
-                .days {
-                  .days-of-week {
-                    .dow {
-                      color: var(--ods-color-text-500);
-                    }
-                  }
-
-                  .datepicker-grid {
-                    .datepicker-cell {
-                      background: none;
-                    }
-
-                    .datepicker-cell:hover,
-                    .selected {
-                      background: map_get($colors, background-color);
-                    }
-
-                    .selected,
-                    .selected:hover {
-                      background: map_get($colors, selected);
-                      color: var(--ods-color-gray-000);
-                    }
-                  }
+                  color: var(--ods-color-gray-000);
                 }
               }
             }
@@ -87,6 +120,11 @@
     }
   }
 
+  /** no variant specified: default variant colors */
+  :not([variant]) {
+    @include osds-datepicker-theme-color-variant-default;
+  }
+
   :host([error][color]) {
     .datepicker {
       .datepicker-picker {