@lucca-front/scss 20.3.0 → 20.3.1-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.0",
+  "version": "20.3.1-rc.1",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "20.3.0"
+    "@lucca-front/icons": "20.3.1-rc.1"
   }
 }

package/src/commons/utils/index.scss

@@ -8,7 +8,8 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/text';
 @use '@lucca-front/scss/src/commons/utils/a11y';
-
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
 @layer utils {
@@ -25,108 +26,6 @@
 		}
 	}
 
-	%animated {
-		&FadeIn,
-		&FadeOut {
-			animation-name: fadeIn;
-
-			@include keyframe.fadeIn;
-		}
-
-		&ScaleIn,
-		&ScaleOut {
-			animation-name: scaleIn;
-
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInTop,
-		&ScaleOutTop {
-			animation-name: scaleInTop;
-
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInRight,
-		&ScaleOutRight {
-			animation-name: scaleInRight;
-
-			@include keyframe.scaleInRight;
-		}
-
-		&ScaleInBottom,
-		&ScaleOutBottom {
-			animation-name: scaleInBottom;
-
-			@include keyframe.scaleInBottom;
-		}
-
-		&ScaleInLeft,
-		&ScaleOutLeft {
-			animation-name: scaleInLeft;
-
-			@include keyframe.scaleInLeft;
-		}
-
-		&SlideIn,
-		&SlideInTop,
-		&SlideOut,
-		&SlideOutTop {
-			animation-name: slideIn;
-
-			@include keyframe.slideIn;
-		}
-
-		&SlideInRight,
-		&SlideOutRight {
-			animation-name: slideInRight;
-
-			@include keyframe.slideInRight;
-		}
-
-		&SlideInBottom,
-		&SlideOutBottom {
-			animation-name: slideInBottom;
-
-			@include keyframe.slideInBottom;
-		}
-
-		&SlideInLeft,
-		&SlideOutLeft {
-			animation-name: slideInLeft;
-
-			@include keyframe.slideInLeft;
-		}
-
-		&Shake {
-			animation-name: shake;
-
-			@include keyframe.shake;
-		}
-
-		&Pulse {
-			animation-name: pulse;
-			animation-direction: alternate;
-			animation-iteration-count: var(--commons-animations-iteration-count);
-
-			@include keyframe.pulse;
-		}
-
-		&FadeOut,
-		&SlideOut,
-		&SlideOutTop,
-		&SlideOutRight,
-		&SlideOutBottom,
-		&SlideOutLeft,
-		&ScaleOut,
-		&ScaleOutTop,
-		&ScaleOutRight,
-		&ScaleOutBottom,
-		&ScaleOutLeft {
-			animation-direction: reverse;
-		}
-	}
-
 	%mask {
 		@include a11y.mask('!important');
 	}
@@ -292,7 +191,105 @@
 	}
 
 	.pr-u-animated {
-		@extend %animated;
+		&FadeIn,
+		&FadeOut {
+			animation-name: fadeIn;
+
+			@include keyframe.fadeIn;
+		}
+
+		&ScaleIn,
+		&ScaleOut {
+			animation-name: scaleIn;
+
+			@include keyframe.scaleIn;
+		}
+
+		&ScaleInTop,
+		&ScaleOutTop {
+			animation-name: scaleInTop;
+
+			@include keyframe.scaleIn;
+		}
+
+		&ScaleInRight,
+		&ScaleOutRight {
+			animation-name: scaleInRight;
+
+			@include keyframe.scaleInRight;
+		}
+
+		&ScaleInBottom,
+		&ScaleOutBottom {
+			animation-name: scaleInBottom;
+
+			@include keyframe.scaleInBottom;
+		}
+
+		&ScaleInLeft,
+		&ScaleOutLeft {
+			animation-name: scaleInLeft;
+
+			@include keyframe.scaleInLeft;
+		}
+
+		&SlideIn,
+		&SlideInTop,
+		&SlideOut,
+		&SlideOutTop {
+			animation-name: slideIn;
+
+			@include keyframe.slideIn;
+		}
+
+		&SlideInRight,
+		&SlideOutRight {
+			animation-name: slideInRight;
+
+			@include keyframe.slideInRight;
+		}
+
+		&SlideInBottom,
+		&SlideOutBottom {
+			animation-name: slideInBottom;
+
+			@include keyframe.slideInBottom;
+		}
+
+		&SlideInLeft,
+		&SlideOutLeft {
+			animation-name: slideInLeft;
+
+			@include keyframe.slideInLeft;
+		}
+
+		&Shake {
+			animation-name: shake;
+
+			@include keyframe.shake;
+		}
+
+		&Pulse {
+			animation-name: pulse;
+			animation-direction: alternate;
+			animation-iteration-count: var(--commons-animations-iteration-count);
+
+			@include keyframe.pulse;
+		}
+
+		&FadeOut,
+		&SlideOut,
+		&SlideOutTop,
+		&SlideOutRight,
+		&SlideOutBottom,
+		&SlideOutLeft,
+		&ScaleOut,
+		&ScaleOutTop,
+		&ScaleOutRight,
+		&ScaleOutBottom,
+		&ScaleOutLeft {
+			animation-direction: reverse;
+		}
 	}
 
 	.pr-u-mask {
@@ -489,6 +486,32 @@
 		}
 	}
 
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			.pr-u-displayNoneAtMediaMin#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include media.max($breakpoint) {
+			.pr-u-displayNoneAtMediaMax#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include container.min($breakpoint) {
+			.pr-u-displayNoneAtContainerMin#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include container.max($breakpoint) {
+			.pr-u-displayNoneAtContainerMax#{$breakpoint} {
+				display: none !important;
+			}
+		}
+	}
+
 	%inset0 {
 		inset: 0 !important;
 	}
@@ -531,7 +554,106 @@
 		}
 
 		.u-animated {
-			@extend %animated;
+			&FadeIn,
+			&FadeOut {
+				animation-name: fadeIn;
+
+
+				@include keyframe.fadeIn;
+			}
+
+			&ScaleIn,
+			&ScaleOut {
+				animation-name: scaleIn;
+
+				@include keyframe.scaleIn;
+			}
+
+			&ScaleInTop,
+			&ScaleOutTop {
+				animation-name: scaleInTop;
+
+				@include keyframe.scaleIn;
+			}
+
+			&ScaleInRight,
+			&ScaleOutRight {
+				animation-name: scaleInRight;
+
+				@include keyframe.scaleInRight;
+			}
+
+			&ScaleInBottom,
+			&ScaleOutBottom {
+				animation-name: scaleInBottom;
+
+				@include keyframe.scaleInBottom;
+			}
+
+			&ScaleInLeft,
+			&ScaleOutLeft {
+				animation-name: scaleInLeft;
+
+				@include keyframe.scaleInLeft;
+			}
+
+			&SlideIn,
+			&SlideInTop,
+			&SlideOut,
+			&SlideOutTop {
+				animation-name: slideIn;
+
+				@include keyframe.slideIn;
+			}
+
+			&SlideInRight,
+			&SlideOutRight {
+				animation-name: slideInRight;
+
+				@include keyframe.slideInRight;
+			}
+
+			&SlideInBottom,
+			&SlideOutBottom {
+				animation-name: slideInBottom;
+
+				@include keyframe.slideInBottom;
+			}
+
+			&SlideInLeft,
+			&SlideOutLeft {
+				animation-name: slideInLeft;
+
+				@include keyframe.slideInLeft;
+			}
+
+			&Shake {
+				animation-name: shake;
+
+				@include keyframe.shake;
+			}
+
+			&Pulse {
+				animation-name: pulse;
+				animation-direction: alternate;
+				animation-iteration-count: var(--commons-animations-iteration-count);
+
+				@include keyframe.pulse;
+			}
+
+			&FadeOut,
+			&SlideOut,
+			&SlideOutTop,
+			&SlideOutRight,
+			&SlideOutBottom,
+			&SlideOutLeft,
+			&ScaleOut,
+			&ScaleOutTop,
+			&ScaleOutRight,
+			&ScaleOutBottom,
+			&ScaleOutLeft {
+				animation-direction: reverse;
+			}
 		}
 
 		.u-mask {