feat: prefer dinamyc viewport units

Author: vis97c

packages/styles/src/base/_animations.scss

@@ -107,6 +107,7 @@
 		&-topFade {
 			opacity: 0;
 			transform: translateY(-5vh);
+			transform: translateY(-5dvh);
 			&.#{utils.$status-is-animated} {
 				animation-name: topFade;
 				animation-duration: 0.6s;
@@ -121,6 +122,7 @@
 		&-bottomFade {
 			opacity: 0;
 			transform: translateY(5vh);
+			transform: translateY(5dvh);
 			&.#{utils.$status-is-animated} {
 				animation-name: bottomFade;
 				animation-duration: 0.6s;
@@ -135,6 +137,7 @@
 		&-leftFade {
 			opacity: 0;
 			transform: translateX(-5vh);
+			transform: translateX(-5dvh);
 			&.#{utils.$status-is-animated} {
 				animation-name: leftFade;
 				animation-duration: 0.6s;
@@ -149,6 +152,7 @@
 		&-rightFade {
 			opacity: 0;
 			transform: translateX(5vh);
+			transform: translateX(5dvh);
 			&.#{utils.$status-is-animated} {
 				animation-name: rightFade;
 				animation-duration: 0.6s;

packages/styles/src/base/_initialize.scss

@@ -27,7 +27,9 @@
 
 			> .#{utils.$layout-modal} {
 				max-width: calc(100vw - 2.4rem);
+				max-width: calc(100dvw - 2.4rem);
 				max-height: calc(100vh - 2.4rem);
+				max-height: calc(100dvh - 2.4rem);
 			}
 
 			&::backdrop {

packages/styles/src/layouts/_view.scss

@@ -14,11 +14,13 @@
 	.#{utils.$layout-view}-item {
 		&.#{utils.$prefix-default}--minHeight-100 {
 			min-height: calc(100vh - utils.$size-view-top-buffer);
+			min-height: calc(100dvh - utils.$size-view-top-buffer);
 
 			@if utils.$allow-responsive {
 				@media (max-device-width: utils.$querie-tablet) {
 					// mobile only, 56px: navigation bar
 					min-height: calc((100vh - utils.$size-view-top-buffer) - 56px);
+					min-height: calc((100dvh - utils.$size-view-top-buffer) - 56px);
 				}
 			}
 		}
@@ -48,6 +50,7 @@
 				& {
 					// @defaults minHeight
 					min-height: 60vh;
+					min-height: 60dvh;
 				}
 			}
 

packages/styles/src/modifiers/size/_module.scss

@@ -58,26 +58,30 @@
 
 // Dimensions
 @mixin extend-dimension($property) {
-	&-quarter {
+	&-quarter,
+	&-25 {
 		@include module.extend-viewports-classes {
 			#{$property}: 25%;
 		}
 	}
 
-	&-third {
+	&-third,
+	&-33 {
 		@include module.extend-viewports-classes {
 			#{$property}: 33%;
 		}
 	}
 
-	&-half {
+	&-half,
+	&-50 {
 		@include module.extend-viewports-classes {
 			#{$property}: 50%;
 		}
 	}
 
 	&-none {
 		@include module.extend-viewports-classes {
+			#{$property}: unset;
 			#{$property}: none;
 		}
 	}
@@ -104,17 +108,20 @@
 @mixin extend-dimension-viewport($property, $model) {
 	// vh or vw
 	$vm: "v" + string.slice($model, 1, 1);
-	$unit: if($vm == "vh", 1vh, 1vw);
+	$unit-old: if($vm == "vh", 1vh, 1vw);
+	$unit: if($vm == "vh", 1dvh, 1dvw);
 
 	// default viewport based constrains
 	&#{module.capitalize($vm)} {
 		@include module.extend-viewports-classes {
+			#{$property}: 25 * $unit-old;
 			#{$property}: 25 * $unit;
 		}
 
 		@for $i from 3 through 10 {
 			&-#{$i * 10} {
 				@include module.extend-viewports-classes {
+					#{$property}: ($i * 10) * $unit-old;
 					#{$property}: ($i * 10) * $unit;
 				}
 			}