Skip to content

Commit

Permalink
Dialog: Fix 100vh issue
Browse files Browse the repository at this point in the history
Signed-off-by: praveenjuge <praveen@skcript.com>
  • Loading branch information
praveenjuge committed Aug 23, 2021
1 parent e475b27 commit 64f168a
Showing 1 changed file with 23 additions and 2 deletions.
25 changes: 23 additions & 2 deletions src/dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ module.exports = Dialog = () => ({
left: "0px",
width: "100%",
zIndex: 40,
transitionProperty: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
transitionProperty:
"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
transitionDuration: "150ms",
},
Expand Down Expand Up @@ -113,7 +114,8 @@ module.exports = Dialog = () => ({
"--tw-scale-y": "1",
transform:
"translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
transitionProperty: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
transitionProperty:
"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
transitionDuration: "150ms",
},
Expand Down Expand Up @@ -146,4 +148,23 @@ module.exports = Dialog = () => ({
".dialog.dialog-sm .drawer-content": { width: "16.666667%" },
".dialog.dialog-lg .drawer-content": { width: "66.666667%" },
},
// iOS 100vh Fix
"@supports (-webkit-touch-callout:none)": {
".drawer-content": {
height: "-webkit-fill-available",
maxHeight: "-webkit-fill-available",
minHeight: "-webkit-fill-available",
},
".dialog-content": {
height: "-webkit-fill-available",
},
".dialog.dialog-full .dialog-content": {
height: "-webkit-fill-available",
maxHeight: "-webkit-fill-available",
},
".dialog.dialog-full .drawer-content": {
height: "-webkit-fill-available",
maxHeight: "-webkit-fill-available",
},
},
});

0 comments on commit 64f168a

Please sign in to comment.