@lucca-front/ng 20.3.0-rc.3 → 20.3.0-rc.4

package/src/components/_popup.scss

@@ -2,174 +2,166 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 @include namespace.appendRootVars {
-	@layer components {
-		--components-popup-XS: 25rem;
-		--components-popup-S: 30rem;
-		--components-popup-M: 40rem;
-		--components-popup-L: 50rem;
-		--components-popup-XL: 60rem;
-		--components-popup-padding-horizontal: var(--pr-t-spacings-300);
-		--components-popup-padding-vertical: var(--pr-t-spacings-200);
-	}
+	--components-popup-XS: 25rem;
+	--components-popup-S: 30rem;
+	--components-popup-M: 40rem;
+	--components-popup-L: 50rem;
+	--components-popup-XL: 60rem;
+	--components-popup-padding-horizontal: var(--pr-t-spacings-300);
+	--components-popup-padding-vertical: var(--pr-t-spacings-200);
 }
 
 .lu-popup-panel {
-	@layer components {
-		position: relative;
-		box-shadow: var(--pr-t-elevation-shadow-overlay);
-		background-color: var(--pr-t-elevation-surface-raised);
-		border-radius: var(--pr-t-border-radius-structure);
-		inline-size: var(--components-popup-M);
-		max-inline-size: 95%;
-		max-block-size: 90vh;
-		overflow: auto;
-		animation: popup var(--commons-animations-durations-standard) cubic-bezier(0.25, 0.8, 0.25, 1);
+	position: relative;
+	box-shadow: var(--pr-t-elevation-shadow-overlay);
+	background-color: var(--pr-t-elevation-surface-raised);
+	border-radius: var(--pr-t-border-radius-structure);
+	inline-size: var(--components-popup-M);
+	max-inline-size: 95%;
+	max-block-size: 90vh;
+	overflow: auto;
+	animation: popup var(--commons-animations-durations-standard) cubic-bezier(0.25, 0.8, 0.25, 1);
+
+	&.mod-XS {
+		inline-size: var(--components-popup-XS);
 	}
 
-	@layer mods {
-		&.mod-XS {
-			inline-size: var(--components-popup-XS);
-		}
-
-		&.mod-S {
-			inline-size: var(--components-popup-S);
-		}
+	&.mod-S {
+		inline-size: var(--components-popup-S);
+	}
 
-		&.mod-L {
-			inline-size: var(--components-popup-L);
-		}
+	&.mod-L {
+		inline-size: var(--components-popup-L);
+	}
 
-		&.mod-XL {
-			inline-size: var(--components-popup-XL);
-		}
+	&.mod-XL {
+		inline-size: var(--components-popup-XL);
+	}
 
-		&.mod-commInApp {
-			inline-size: 30rem;
+	&.mod-commInApp {
+		inline-size: 30rem;
 
-			.lu-modal-content {
-				text-align: center;
+		.lu-modal-content {
+			text-align: center;
 
-				&::after {
-					content: none;
-				}
+			&::after {
+				content: none;
 			}
+		}
 
-			.lu-modal-content-title {
-				color: var(--pr-t-color-text-heading);
-				font-size: var(--pr-t-font-heading-2-fontSize);
-				margin-block-start: 2.5rem;
-			}
+		.lu-modal-content-title {
+			color: var(--pr-t-color-text-heading);
+			font-size: var(--pr-t-font-heading-2-fontSize);
+			margin-block-start: 2.5rem;
+		}
 
-			.button {
-				margin-block-end: 2.5rem;
-			}
+		.button {
+			margin-block-end: 2.5rem;
+		}
 
-			.modal-visual {
-				margin-block: 4.5rem 0;
-				margin-inline: calc(var(--pr-t-spacings-400) * -1);
-			}
+		.modal-visual {
+			margin-block: 4.5rem 0;
+			margin-inline: calc(var(--pr-t-spacings-400) * -1);
+		}
 
-			.modal-visual-illustration {
-				vertical-align: bottom;
-			}
+		.modal-visual-illustration {
+			vertical-align: bottom;
+		}
 
-			.lu-modal-footer {
-				display: none;
-			}
+		.lu-modal-footer {
+			display: none;
 		}
 	}
 }
 
-@layer components {
-	.lu-modal-panel-inner {
-		display: flex;
-		flex-flow: column;
-		max-block-size: 90vh;
-	}
+.lu-modal-panel-inner {
+	display: flex;
+	flex-flow: column;
+	max-block-size: 90vh;
+}
 
-	.lu-modal-container {
-		display: flex;
-		flex-flow: column;
-		flex-grow: 1;
-	}
+.lu-modal-container {
+	display: flex;
+	flex-flow: column;
+	flex-grow: 1;
+}
 
-	.lu-modal-header {
-		position: sticky;
-		inset-block-start: 0;
-		z-index: 5;
-		background-color: var(--pr-t-elevation-surface-raised);
-		padding-block: var(--components-popup-padding-vertical);
-		padding-inline: var(--components-popup-padding-horizontal) var(--pr-t-spacings-800);
-		border-block-end: 1px solid var(--commons-border-100);
-	}
+.lu-modal-header {
+	position: sticky;
+	inset-block-start: 0;
+	z-index: 5;
+	background-color: var(--pr-t-elevation-surface-raised);
+	padding-block: var(--components-popup-padding-vertical);
+	padding-inline: var(--components-popup-padding-horizontal) var(--pr-t-spacings-800);
+	border-block-end: 1px solid var(--commons-border-100);
+}
 
-	.lu-modal-header-title {
-		font: var(--pr-t-font-heading-2);
-		margin: 0;
-		padding: 0;
-	}
+.lu-modal-header-title {
+	font: var(--pr-t-font-heading-2);
+	margin: 0;
+	padding: 0;
+}
 
-	.button.lu-modal-header-close {
-		position: absolute;
-		inset-inline-end: 1.25rem;
-		inset-block-start: var(--pr-t-spacings-150);
-	}
+.button.lu-modal-header-close {
+	position: absolute;
+	inset-inline-end: 1.25rem;
+	inset-block-start: var(--pr-t-spacings-150);
+}
 
-	.lu-modal-content {
-		padding-block: var(--components-popup-padding-vertical);
-		padding-inline: var(--components-popup-padding-horizontal);
-		overflow: auto;
-		block-size: auto;
+.lu-modal-content {
+	padding-block: var(--components-popup-padding-vertical);
+	padding-inline: var(--components-popup-padding-horizontal);
+	overflow: auto;
+	block-size: auto;
 
-		&.mod-noPadding {
-			padding: 0;
+	&.mod-noPadding {
+		padding: 0;
 
-			&::after {
-				padding-block-end: 0;
-			}
+		&::after {
+			padding-block-end: 0;
 		}
 	}
+}
 
-	.lu-modal-footer {
-		position: sticky;
-		inset-block-end: 0;
-		z-index: 5;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		background-color: var(--pr-t-elevation-surface-raised);
-		box-shadow: var(--pr-t-elevation-shadow-overflow);
-		margin-block-start: auto;
-		padding-block: var(--components-popup-padding-vertical);
-		padding-inline: var(--components-popup-padding-horizontal);
-	}
+.lu-modal-footer {
+	position: sticky;
+	inset-block-end: 0;
+	z-index: 5;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	background-color: var(--pr-t-elevation-surface-raised);
+	box-shadow: var(--pr-t-elevation-shadow-overflow);
+	margin-block-start: auto;
+	padding-block: var(--components-popup-padding-vertical);
+	padding-inline: var(--components-popup-padding-horizontal);
+}
 
-	@include media.max('XXS') {
-		.lu-popup-panel {
-			border-radius: 0;
-			max-inline-size: none;
-			max-block-size: 100vh;
-			inline-size: 100%;
-			inline-size: stretch;
-			block-size: 100vh;
-			block-size: stretch;
-		}
+@include media.max('XXS') {
+	.lu-popup-panel {
+		border-radius: 0;
+		max-inline-size: none;
+		max-block-size: 100vh;
+		inline-size: 100%;
+		inline-size: stretch;
+		block-size: 100vh;
+		block-size: stretch;
+	}
 
-		.lu-modal-panel-inner {
-			max-block-size: 100vh;
-			max-block-size: stretch;
-			block-size: 100vh;
-			block-size: stretch;
-		}
+	.lu-modal-panel-inner {
+		max-block-size: 100vh;
+		max-block-size: stretch;
+		block-size: 100vh;
+		block-size: stretch;
 	}
+}
 
-	@keyframes popup {
-		0% {
-			transform: scale(0.7);
-		}
+@keyframes popup {
+	0% {
+		transform: scale(0.7);
+	}
 
-		100% {
-			transform: none;
-		}
+	100% {
+		transform: none;
 	}
 }

package/src/components/_sidepanel.scss

@@ -1,75 +1,65 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @include namespace.appendRootVars {
-	@layer components {
-		--components-sidepanel-XS: 25rem;
-		--components-sidepanel-S: 30rem;
-		--components-sidepanel-M: 40rem;
-		--components-sidepanel-L: 50rem;
-		--components-sidepanel-XL: 60rem;
-	}
+	--components-sidepanel-XS: 25rem;
+	--components-sidepanel-S: 30rem;
+	--components-sidepanel-M: 40rem;
+	--components-sidepanel-L: 50rem;
+	--components-sidepanel-XL: 60rem;
 }
 
-@layer mods {
-	.lu-popup-panel {
-		&.mod-sidepanel {
-			position: fixed !important;
-			inset-block: 0;
-			inset-inline-end: 0;
-			inline-size: var(--components-sidepanel-M);
-			max-inline-size: 100%;
-			max-block-size: 100vh;
-			border-radius: 0;
-			animation-name: sidepanel;
-			transform-origin: center center;
+.lu-popup-panel {
+	&.mod-sidepanel {
+		position: fixed !important;
+		inset-block: 0;
+		inset-inline-end: 0;
+		inline-size: var(--components-sidepanel-M);
+		max-inline-size: 100%;
+		max-block-size: 100vh;
+		border-radius: 0;
+		animation-name: sidepanel;
+		transform-origin: center center;
 
-			&.mod-XS {
-				inline-size: var(--components-sidepanel-XS);
-			}
+		&.mod-XS {
+			inline-size: var(--components-sidepanel-XS);
+		}
 
-			&.mod-S {
-				inline-size: var(--components-sidepanel-S);
-			}
+		&.mod-S {
+			inline-size: var(--components-sidepanel-S);
+		}
 
-			&.mod-L {
-				inline-size: var(--components-sidepanel-L);
-			}
+		&.mod-L {
+			inline-size: var(--components-sidepanel-L);
+		}
 
-			&.mod-XL {
-				inline-size: var(--components-sidepanel-XL);
-			}
+		&.mod-XL {
+			inline-size: var(--components-sidepanel-XL);
 		}
 	}
 }
 
 .lu-sidepanel-panel-inner,
 .lu-sidepanel-container {
-	@layer components {
-		display: flex;
-		flex-flow: column;
-		flex-grow: 1;
-		block-size: 100%;
+	display: flex;
+	flex-flow: column;
+	flex-grow: 1;
+	block-size: 100%;
 
-		.lu-modal-content {
-			block-size: 100%;
-		}
+	.lu-modal-content {
+		block-size: 100%;
 	}
 }
 
 .lu-sidepanel-container {
-	@layer components {
-		overflow: auto;
-	}
+	overflow: auto;
 }
 
-@layer components {
-	@keyframes sidepanel {
-		0% {
-			transform: translate(100%, 0);
-		}
+@keyframes sidepanel {
+	0% {
+		transform: translate(100%, 0);
+	}
 
-		100% {
-			transform: translate(0, 0);
-		}
+	100% {
+		transform: translate(0, 0);
 	}
 }

package/src/components/cdk/_dragDrop.scss

@@ -64,4 +64,3 @@
 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 	}
 }
-

package/src/components/cdk/_global.scss

@@ -17,4 +17,3 @@
 
 	@include overflow.scrollblock('!important');
 }
-

package/src/components/cdk/_misc.scss

@@ -10,4 +10,3 @@
 	white-space: nowrap !important;
 	contain: paint !important;
 }
-

package/src/components/cdk/_textarea.scss

@@ -24,4 +24,3 @@
 	padding-inline: 0 !important;
 	box-sizing: content-box !important;
 }
-