feat: adds mobile styles for datepicker

formkit · Oct 26, 2023 · a3b581e · a3b581e
1 parent e0e104d
commit a3b581e
Showing 1 changed file with 28 additions and 5 deletions.
diff --git a/src/theme.ts b/src/theme.ts
@@ -610,10 +610,33 @@ export default createTheme({
     },
     datepicker: {
       inner: "relative pl-0",
-      panelWrapper:
-        "absolute min-w-[22em] top-[calc(100%_+_0.5em)] shadow-[0_0_1.25em_rgba(0,0,0,.25)] $radius(0,rounded-none,rounded-2xl) p-$spacing(4,*) bg-white z-10 dark:bg-$colorTemperature-800",
-      panelHeader:
-        "grid grid-cols-[2.5em_1fr_2.5em] justify-center items-center border-b-2 border-$colorTemperature-$borderShadeLightMode(-1,200,600) mb-$spacing pb-$spacing(1,*) dark:border-$colorTemperature-$borderShadeDarkMode(1,400,700)",
+      panelWrapper: `
+        group/panel absolute min-w-[20em] top-[calc(100%_+_0.5em)] shadow-[0_0_1.25em_rgba(0,0,0,.25)] $radius(0,rounded-none,rounded-2xl) p-$spacing(4,*) bg-white z-10 dark:bg-$colorTemperature-800
+
+        ${"" /* mobile touch styles */}
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:!fixed
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:top-auto
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:max-w-none
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:bottom-0
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:left-0
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:rounded-none
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:w-full
+      `,
+      panelHeader: `
+        grid grid-cols-[2.5em_1fr_2.5em] justify-center items-center border-b-2 border-$colorTemperature-$borderShadeLightMode(-1,200,600) mb-$spacing pb-$spacing(1,*) dark:border-$colorTemperature-$borderShadeDarkMode(1,400,700)
+
+        ${"" /* mobile touch styles */}
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:grid-cols-[2.5em_1fr_2.5em_2.5em]
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:group-data-[panel=time]/panel:grid-cols-[2.5em_1fr_2.5em]
+        [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:group-data-[panel=month]/panel:grid-cols-[2.5em_1fr_2.5em]
+      `,
+      panelClose: `
+        aspect-square border border-$colorTemperature-$borderShadeLightMode(-1) $radius flex items-center justify-center text-$colorTemperature-700 [&_svg]:w-[1.25em] dark:text-$colorTemperature-300 dark:border-$colorTemperature-$borderShadeDarkMode(1)
+
+        ${"" /* mobile touch styles */}
+        [@media(max-width:431px)_and_(hover:none)]:group-data-[panel=time]/panel:col-start-3
+        [@media(max-width:431px)_and_(hover:none)]:group-data-[panel=month]/panel:col-start-3
+      `,
       panel: "flex justify-center",
       input: "pl-$spacing(2,2,4) placeholder:text-$colorTemperature-400",
       monthsHeader: "flex items-center justify-center col-start-2 col-end-2",
@@ -627,7 +650,7 @@ export default createTheme({
       year: "text-$scale text-center text-$colorTemperature-700 items-center m-$spacing(-1) p-$spacing(-2) $radius bg-$colorTemperature-200 aria-selected:!bg-$accentColor-$baseColorShade aria-selected:!text-white focus:outline focus:outline-2 focus:outline-$accentColor-$baseColorShade focus:outline-offset-2 focus:bg-white data-[is-extra=true]:opacity-25 group-data-[disabled]:opacity-50 group-data-[disabled]:cursor-default group-data-[disabled]:pointer-events-none dark:bg-$colorTemperature-700 dark:text-$colorTemperature-300",
       weekDays: "grid grid-cols-7",
       weekDay:
-        "w-[2.25em] text-$colorTemperature-700 m-$spacing(-1) $radius font-medium lowercase",
+        "w-[2.25em] text-$colorTemperature-700 m-$spacing(-1) $radius font-medium lowercase dark:text-$colorTemperature-500",
       calendarWeeks: "",
       week: "grid grid-cols-7 group-data-[disabled]:opacity-50 group-data-[disabled]:cursor-default group-data-[disabled]:pointer-events-none",
       dayCell: `