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

package/src/components/_input.scss

@@ -1,56 +1,54 @@
 @use '@lucca-front/scss/src/components/field/exports' as field;
 @use '@lucca-front/scss/src/components/form/exports' as form;
 
-@layer mods {
-	.textfield {
-		.textfield-input.ng-invalid.ng-touched {
-			@include field.inputState('error');
-		}
-
-		&.mod-material .textfield-input.ng-invalid.ng-touched {
-			@include form.fieldMaterialError('textfield');
-		}
+.textfield {
+	.textfield-input.ng-invalid.ng-touched {
+		@include field.inputState('error');
+	}
 
-		&.mod-framed {
-			.textfield-input {
-				&.ng-invalid.ng-touched,
-				&.is-invalid,
-				&.is-error {
-					@include field.fieldFramedError('textfield');
-				}
-			}
-		}
+	&.mod-material .textfield-input.ng-invalid.ng-touched {
+		@include form.fieldMaterialError('textfield');
 	}
 
-	.form.mod-framed {
+	&.mod-framed {
 		.textfield-input {
-			&.is-error,
+			&.ng-invalid.ng-touched,
 			&.is-invalid,
-			&.ng-invalid.ng-touched {
+			&.is-error {
 				@include field.fieldFramedError('textfield');
 			}
 		}
+	}
+}
 
-		.checkbox,
-		.radio {
-			&.is-error,
-			&.is-invalid,
-			&.ng-invalid.ng-touched {
-				@include field.fieldFramedError('radiosfield');
-			}
+.form.mod-framed {
+	.textfield-input {
+		&.is-error,
+		&.is-invalid,
+		&.ng-invalid.ng-touched {
+			@include field.fieldFramedError('textfield');
+		}
+	}
+
+	.checkbox,
+	.radio {
+		&.is-error,
+		&.is-invalid,
+		&.ng-invalid.ng-touched {
+			@include field.fieldFramedError('radiosfield');
 		}
 	}
+}
 
-	.radiosfield,
-	.checkboxesfield {
-		&.mod-framed {
-			.checkbox-input,
-			.radio-input {
-				&.ng-invalid.ng-touched,
-				&.is-invalid,
-				&.is-error {
-					@include field.fieldFramedError('radiosfield');
-				}
+.radiosfield,
+.checkboxesfield {
+	&.mod-framed {
+		.checkbox-input,
+		.radio-input {
+			&.ng-invalid.ng-touched,
+			&.is-invalid,
+			&.is-error {
+				@include field.fieldFramedError('radiosfield');
 			}
 		}
 	}

package/src/components/_picker.scss

@@ -1,137 +1,135 @@
 @use 'popover';
 
-@layer components {
-	.lu-picker-panel {
-		@extend %popover-panel;
-	}
+.lu-picker-panel {
+	@extend %popover-panel;
+}
 
-	.lu-picker-content {
-		@extend %popover-content;
-
-		max-block-size: 20rem;
-		padding: var(--pr-t-spacings-50);
-		overflow-y: auto;
-		display: block;
-		animation: scaleIn 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
-		margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
-		margin-inline-end: calc(var(--pr-t-spacings-50) * -1);
-
-		&.is-loading {
-			// block-size: 17.5rem;
-		}
-	}
+.lu-picker-content {
+	@extend %popover-content;
 
-	.lu-picker-content-option {
-		display: flex;
-		flex-direction: column;
-		gap: var(--pr-t-spacings-50);
-	}
+	max-block-size: 20rem;
+	padding: var(--pr-t-spacings-50);
+	overflow-y: auto;
+	display: block;
+	animation: scaleIn 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
+	margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
+	margin-inline-end: calc(var(--pr-t-spacings-50) * -1);
 
-	.lu-picker-content-option-emptyState {
-		color: var(--palettes-neutral-600);
-		padding-inline: var(--pr-t-spacings-100);
-		text-align: center;
+	&.is-loading {
+		// block-size: 17.5rem;
 	}
+}
 
-	.lu-picker-content-option-group {
-		margin-block-end: var(--pr-t-spacings-50);
-	}
+.lu-picker-content-option {
+	display: flex;
+	flex-direction: column;
+	gap: var(--pr-t-spacings-50);
+}
 
-	.lu-picker-content-option-group-title {
-		font: var(--pr-t-font-body-S);
-		font-weight: 600;
-		padding-block: var(--components-options-item-padding-vertical);
-		padding-inline: var(--components-options-item-padding-horizontal);
-		color: var(--palettes-neutral-600);
-		position: sticky;
-		inset-block-start: 0;
-		background-color: var(--pr-t-elevation-surface-raised);
-		z-index: 1;
-		display: flex;
-		gap: var(--pr-t-spacings-100);
-		justify-content: space-between;
-		box-shadow: calc(var(--pr-t-spacings-50) * -0.5) calc(var(--pr-t-spacings-50) * -0.5) 0 2px var(--pr-t-elevation-surface-raised); // Mask background options scrolling behind
-
-		&.is-highlighted {
-			background-color: var(--palettes-neutral-50);
-			border-radius: var(--pr-t-border-radius-default);
-			outline: 4px solid var(--palettes-neutral-0);
-		}
-	}
+.lu-picker-content-option-emptyState {
+	color: var(--palettes-neutral-600);
+	padding-inline: var(--pr-t-spacings-100);
+	text-align: center;
+}
 
-	.lu-picker-content-add {
-		position: sticky;
-		display: block;
-		inset-block-end: 0;
-		background-color: var(--palettes-neutral-0);
-		box-shadow: var(--pr-t-elevation-shadow-overflow);
-		padding: var(--pr-t-spacings-50);
-		margin-block: 0;
-		margin-inline: calc(var(--pr-t-spacings-50) * -1);
-		transform: translateY(var(--pr-t-spacings-50));
-	}
+.lu-picker-content-option-group {
+	margin-block-end: var(--pr-t-spacings-50);
+}
 
-	.lu-picker-content-loading {
-		padding: var(--pr-t-spacings-50);
-		display: flex;
-		color: var(--palettes-neutral-600);
+.lu-picker-content-option-group-title {
+	font: var(--pr-t-font-body-S);
+	font-weight: 600;
+	padding-block: var(--components-options-item-padding-vertical);
+	padding-inline: var(--components-options-item-padding-horizontal);
+	color: var(--palettes-neutral-600);
+	position: sticky;
+	inset-block-start: 0;
+	background-color: var(--pr-t-elevation-surface-raised);
+	z-index: 1;
+	display: flex;
+	gap: var(--pr-t-spacings-100);
+	justify-content: space-between;
+	box-shadow: calc(var(--pr-t-spacings-50) * -0.5) calc(var(--pr-t-spacings-50) * -0.5) 0 2px var(--pr-t-elevation-surface-raised); // Mask background options scrolling behind
+
+	&.is-highlighted {
+		background-color: var(--palettes-neutral-50);
+		border-radius: var(--pr-t-border-radius-default);
+		outline: 4px solid var(--palettes-neutral-0);
 	}
+}
 
-	.lu-picker-loading {
-		// deprecated
-		position: absolute;
-		inset-inline-start: 50%;
-		inset-block-start: 50%;
-		transform: translateX(-50%) translateY(-50%);
-	}
+.lu-picker-content-add {
+	position: sticky;
+	display: block;
+	inset-block-end: 0;
+	background-color: var(--palettes-neutral-0);
+	box-shadow: var(--pr-t-elevation-shadow-overflow);
+	padding: var(--pr-t-spacings-50);
+	margin-block: 0;
+	margin-inline: calc(var(--pr-t-spacings-50) * -1);
+	transform: translateY(var(--pr-t-spacings-50));
+}
 
-	.lu-picker-header {
-		background-color: var(--pr-t-elevation-surface-raised);
-		position: sticky;
-		inset-block-start: 0;
-		inset-inline: 0;
-		display: block;
-		z-index: 1;
-		margin-block-end: var(--pr-t-spacings-50);
-		box-shadow: 0 -4px 0 var(--pr-t-spacings-100) var(--pr-t-elevation-surface-raised); // Avoid showing options list while scrolling due to header sticky potisionning
-	}
+.lu-picker-content-loading {
+	padding: var(--pr-t-spacings-50);
+	display: flex;
+	color: var(--palettes-neutral-600);
+}
 
-	.lu-picker-textfield {
-		inline-size: 100%;
-		padding-block-end: var(--pr-t-spacings-100);
+.lu-picker-loading {
+	// deprecated
+	position: absolute;
+	inset-inline-start: 50%;
+	inset-block-start: 50%;
+	transform: translateX(-50%) translateY(-50%);
+}
 
-		.textfield-input {
-			background-color: var(--palettes-neutral-0);
-			outline: none;
-		}
-	}
+.lu-picker-header {
+	background-color: var(--pr-t-elevation-surface-raised);
+	position: sticky;
+	inset-block-start: 0;
+	inset-inline: 0;
+	display: block;
+	z-index: 1;
+	margin-block-end: var(--pr-t-spacings-50);
+	box-shadow: 0 -4px 0 var(--pr-t-spacings-100) var(--pr-t-elevation-surface-raised); // Avoid showing options list while scrolling due to header sticky potisionning
+}
 
-	.lu-picker-footer {
-		background-color: var(--pr-t-elevation-surface-raised);
-		position: sticky;
-		inset-block-end: 0;
-		inset-inline: 0;
-		display: block;
-		z-index: 1;
+.lu-picker-textfield {
+	inline-size: 100%;
+	padding-block-end: var(--pr-t-spacings-100);
+
+	.textfield-input {
+		background-color: var(--palettes-neutral-0);
+		outline: none;
 	}
+}
+
+.lu-picker-footer {
+	background-color: var(--pr-t-elevation-surface-raised);
+	position: sticky;
+	inset-block-end: 0;
+	inset-inline: 0;
+	display: block;
+	z-index: 1;
+}
 
-	.lu-date-picker-panel {
-		inline-size: var(--components-calendar-width);
+.lu-date-picker-panel {
+	inline-size: var(--components-calendar-width);
 
-		.lu-picker-content {
-			max-block-size: none;
-		}
+	.lu-picker-content {
+		max-block-size: none;
 	}
+}
 
-	.lu-picker-content-group {
-		display: flex;
-		flex-direction: column;
-		gap: var(--pr-t-spacings-50);
+.lu-picker-content-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--pr-t-spacings-50);
 
-		&:not(:hover, :has(.is-highlighted)) {
-			.link {
-				opacity: 0.0001;
-			}
+	&:not(:hover, :has(.is-highlighted)) {
+		.link {
+			opacity: 0.0001;
 		}
 	}
 }

package/src/components/_popover.scss

@@ -1,57 +1,49 @@
 %popover-panel {
-	@layer components {
-		display: flex;
-		flex-direction: column;
-		max-block-size: calc(100vh + 48px);
-		position: relative;
+	display: flex;
+	flex-direction: column;
+	max-block-size: calc(100vh + 48px);
+	position: relative;
+
+	&.is-above {
+		transform-origin: bottom center;
+	}
+
+	&.is-below {
+		transform-origin: top center;
 	}
 
-	@layer mods {
+	&.is-before {
+		transform-origin: center right;
+
 		&.is-above {
-			transform-origin: bottom center;
+			transform-origin: bottom right;
 		}
 
 		&.is-below {
-			transform-origin: top center;
+			transform-origin: top right;
 		}
+	}
 
-		&.is-before {
-			transform-origin: center right;
-
-			&.is-above {
-				transform-origin: bottom right;
-			}
+	&.is-after {
+		transform-origin: center left;
 
-			&.is-below {
-				transform-origin: top right;
-			}
+		&.is-above {
+			transform-origin: bottom left;
 		}
 
-		&.is-after {
-			transform-origin: center left;
-
-			&.is-above {
-				transform-origin: bottom left;
-			}
-
-			&.is-below {
-				transform-origin: top left;
-			}
+		&.is-below {
+			transform-origin: top left;
 		}
 	}
 }
 
 %popover-content {
-	@layer components {
-		background-color: var(--pr-t-elevation-surface-raised);
-		box-shadow: var(--pr-t-elevation-shadow-overlay);
-		border-radius: var(--pr-t-border-radius-structure);
-	}
+	background-color: var(--pr-t-elevation-surface-raised);
+	box-shadow: var(--pr-t-elevation-shadow-overlay);
+	border-radius: var(--pr-t-border-radius-structure);
 
-	@layer mods {
-		&:focus-within {
-			outline: none;
-		}
+	&:focus-within {
+		outline: none;
 	}
 }
 
@@ -62,8 +54,6 @@
 .lu-popover-content {
 	@extend %popover-content;
 
-	@layer components {
-		padding-block: var(--pr-t-spacings-100);
-		padding-inline: var(--pr-t-spacings-150);
-	}
+	padding-block: var(--pr-t-spacings-100);
+	padding-inline: var(--pr-t-spacings-150);
 }