search

brandocms / europacss

A design system for responsive websites
MIT License
0 stars 0 forks source link

Mobile vh helpers? #69

Open tmjoen opened 3 years ago

tmjoen commented 3 years ago

Replace like in postcss-functions

Variable Viewport height for iOS

(updates on resize to account for bottom bar)

/* calc(var(--vp-1vh, 1vh) * 100); */
@space height 100vhvar;

Minimal Viewport height

Since sometimes we don't want to recalculate all on a long page. If we have several 100vh elements, it might push others up or down as they change, so set all to the min vh and live with a little extra space at the bottom :/. Calculate --vp-1vhmin from --vp-initial-inner-height / 100

/* calc(var(--vp-1vhmin, 1vh) * 100); */
@space height 100vhmin;

Maximum Viewport height

(the height of the viewport when bottom bar is hidden (getIOSInnerHeightMax)

/* calc(var(--vp-1vhmax, 1vh) * 100); */
@space height 100vhmax;