feat(datetimepicker): add datetimepicker styling (#123)

oruga-ui · Sep 9, 2024 · 0c1d071 · 0c1d071
1 parent 17188c3
commit 0c1d071
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
@@ -299,4 +299,19 @@ $datepicker-event-background-color: css.getVar("grey-light") !default;
             margin-right: 0.125rem;
         }
     }
+
+    // datetimepicker overrides
+    .timepicker {
+        display: flex;
+        justify-content: center;
+
+        .dropdown {
+            @include css.register-vars(
+                (
+                    "dropdown-content-shadow": "transparent",
+                )
+            );
+            width: inherit;
+        }
+    }
 }
diff --git a/src/plugins/bulma.ts b/src/plugins/bulma.ts
@@ -353,6 +353,22 @@ export const bulmaConfig: OrugaOptions = {
         monthClass: "datepicker-table",
         monthTableClass: "datepicker-months",
     },
+    timepicker: {
+        override: true,
+        rootClass: "timepicker",
+        boxClass: "dropdown-item",
+        separatorClass: "is-colon control",
+        footerClass: "timepicker-footer",
+        sizeClass: "is-",
+        selectClasses: {
+            rootClass: "select control",
+        },
+    },
+    datetimepicker: {
+        override: true,
+        datepickerWrapperClass: "datepicker-wrapper",
+        timepickerWrapperClass: "timepicker-wrapper",
+    },
     modal: {
         override: true,
         rootClass: "modal",
@@ -384,17 +400,6 @@ export const bulmaConfig: OrugaOptions = {
         iconClass: "icon",
         rootClass: "loading",
     },
-    timepicker: {
-        override: true,
-        rootClass: "timepicker",
-        boxClass: "dropdown-item",
-        separatorClass: "is-colon control",
-        footerClass: "timepicker-footer",
-        sizeClass: "is-",
-        selectClasses: {
-            rootClass: "select control",
-        },
-    },
     carousel: {
         override: true,
         rootClass: "carousel",