@lucca-front/scss 20.3.0-rc.10 → 20.3.0-rc.11

package/src/components/clear/index.scss

@@ -1,30 +1,34 @@
 @use 'exports' as *;
 
 .clear {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	// .palette-primary is deprecated
-	&.palette-product:not([disabled]),
-	&.palette-primary:not([disabled]) {
-		@include product;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-inverted:not([disabled]) {
-		@include inverted;
+		// .palette-primary is deprecated
+		&.palette-product:not([disabled]),
+		&.palette-primary:not([disabled]) {
+			@include product;
+		}
 
-		&.palette-product:not([disabled]) {
-			@include invertedProduct;
+		&.mod-inverted:not([disabled]) {
+			@include inverted;
+
+			&.palette-product:not([disabled]) {
+				@include invertedProduct;
+			}
 		}
-	}
 
-	&[disabled] {
-		@include disabled;
+		&[disabled] {
+			@include disabled;
 
-		cursor: default;
+			cursor: default;
+		}
 	}
 }

package/src/components/code/index.scss

@@ -1,10 +1,14 @@
 @use 'exports' as *;
 
 .code {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-block {
-		@include block;
+	@layer mods {
+		&.mod-block {
+			@include block;
+		}
 	}
 }

package/src/components/collapse/index.scss

@@ -1,14 +1,18 @@
 @use 'exports' as *;
 
 .collapse {
-	@include vars;
-	@include component;
-
-	&:not(.is-open, .open, [open]) {
-		@include close;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:is(.is-open, .open, [open]) {
-		@include open;
+	@layer mods {
+		&:not(.is-open, .open, [open]) {
+			@include close;
+		}
+
+		&:is(.is-open, .open, [open]) {
+			@include open;
+		}
 	}
 }

package/src/components/comment/index.scss

@@ -3,38 +3,48 @@
 @use 'exports' as *;
 
 .comment {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-noAvatar {
-		@include noAvatar;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	@include container.max(25rem, $name: 'comment') {
-		@include narrow;
+		&.mod-noAvatar {
+			@include noAvatar;
+		}
+
+		@include container.max(25rem, $name: 'comment') {
+			@include narrow;
+		}
 	}
 }
 
 .commentWrapper {
-	@include vars;
-
-	&.mod-S {
-		@include wrapperS;
+	@layer components {
+		@include vars;
 	}
 
-	&.mod-compact {
-		@include wrapperCompact;
-	}
+	@layer mods {
+		&.mod-S {
+			@include wrapperS;
+		}
+
+		&.mod-compact {
+			@include wrapperCompact;
+		}
 
-	&.mod-chatAnswer {
-		@include chatAnswer;
+		&.mod-chatAnswer {
+			@include chatAnswer;
+		}
 	}
 }
 
 .commentWrapperChat {
-	@include chat;
+	@layer components {
+		@include chat;
+	}
 }

package/src/components/container/index.scss

@@ -2,38 +2,42 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .container {
-	@include vars;
-	@include component;
-
-	&.mod-center {
-		@include center;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-center {
+			@include center;
+		}
 
-	&.mod-maxM {
-		@include maxM;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-maxL {
-		@include maxL;
-	}
+		&.mod-maxM {
+			@include maxM;
+		}
 
-	&.mod-maxXL {
-		@include maxXL;
-	}
+		&.mod-maxL {
+			@include maxL;
+		}
 
-	&.mod-maxXXL {
-		@include maxXXL;
-	}
+		&.mod-maxXL {
+			@include maxXL;
+		}
 
-	&.mod-maxXXXL {
-		@include maxXXXL;
-	}
+		&.mod-maxXXL {
+			@include maxXXL;
+		}
+
+		&.mod-maxXXXL {
+			@include maxXXXL;
+		}
 
-	&.mod-overflow {
-		@include overflow;
+		&.mod-overflow {
+			@include overflow;
+		}
 	}
 }

package/src/components/contentSection/index.scss

@@ -1,6 +1,8 @@
 @use 'exports' as *;
 
 .contentSection {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }

package/src/components/dataTable/index.scss

@@ -1,47 +1,55 @@
 @use 'exports' as *;
 
 .dataTableWrapper {
-	@include vars;
+	@layer components {
+		@include vars;
+	}
 
-	&.mod-nested {
-		@include nested;
+	@layer mods {
+		&.mod-nested {
+			@include nested;
+		}
 	}
 }
 
 .dataTable {
-	@include component;
-
-	&.mod-cellBorder {
-		@include cellBorder;
+	@layer components {
+		@include component;
 	}
 
-	&.mod-alignTop {
-		@include alignTop;
-	}
+	@layer mods {
+		&.mod-cellBorder {
+			@include cellBorder;
+		}
 
-	&.mod-layoutFixed {
-		@include layoutFixed;
-	}
+		&.mod-alignTop {
+			@include alignTop;
+		}
 
-	&[class*='mod-layoutFixedAtMediaMin'] {
-		@include layoutFixedWithBreakpoint;
-	}
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
 
-	// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
-	&[class*='mod-layoutFixed'] {
-		@include layoutFixedCells;
-	}
+		&[class*='mod-layoutFixedAtMediaMin'] {
+			@include layoutFixedWithBreakpoint;
+		}
 
-	&.mod-hover {
-		:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
-			&:hover {
-				@include hover;
-			}
+		// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
+		&[class*='mod-layoutFixed'] {
+			@include layoutFixedCells;
+		}
 
-			&.mod-selectable {
-				&:has(input:checked) {
-					&:hover {
-						@include selectedHover;
+		&.mod-hover {
+			:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
+				&:hover {
+					@include hover;
+				}
+
+				&.mod-selectable {
+					&:has(input:checked) {
+						&:hover {
+							@include selectedHover;
+						}
 					}
 				}
 			}
@@ -49,62 +57,64 @@
 	}
 }
 
-:is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
-	&.mod-group {
-		@include group;
-	}
+@layer mods {
+	:is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
+		&.mod-group {
+			@include group;
+		}
 
-	&.mod-selectable {
-		@include selectable;
+		&.mod-selectable {
+			@include selectable;
 
-		&:has(input:checked) {
-			@include selected;
+			&:has(input:checked) {
+				@include selected;
+			}
 		}
-	}
 
-	&.mod-draggable {
-		@include draggable;
+		&.mod-draggable {
+			@include draggable;
+		}
 	}
-}
 
-:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
-	&.mod-actions {
-		@include actions;
-	}
+	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
+		&.mod-actions {
+			@include actions;
+		}
 
-	&.mod-alignCenter {
-		@include alignCenter;
-	}
+		&.mod-alignCenter {
+			@include alignCenter;
+		}
 
-	&.mod-alignRight {
-		@include alignRight;
-	}
+		&.mod-alignRight {
+			@include alignRight;
+		}
 
-	&.mod-editable {
-		@include editable;
-	}
+		&.mod-editable {
+			@include editable;
+		}
 
-	&.mod-tree {
-		@include tree;
+		&.mod-tree {
+			@include tree;
+		}
 	}
-}
 
-.dataTable-body-row {
-	&.is-collapsed {
-		@include collapsed;
-	}
+	.dataTable-body-row {
+		&.is-collapsed {
+			@include collapsed;
+		}
 
-	&:first-child {
-		&:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
-			~ .dataTable-body-row {
-				@include collapsed;
+		&:first-child {
+			&:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
+				~ .dataTable-body-row {
+					@include collapsed;
+				}
 			}
 		}
 	}
-}
 
-.dataTable-body-row-cell-expand-button {
-	&[aria-expanded='true'] {
-		@include expanded;
+	.dataTable-body-row-cell-expand-button {
+		&[aria-expanded='true'] {
+			@include expanded;
+		}
 	}
 }

package/src/components/dataTableSticked/index.scss

@@ -3,41 +3,45 @@
 @use 'exports' as *;
 
 .dataTableWrapper {
-	@include vars;
-
-	&:has(.dataTable.mod-stickyHeader) {
-		@include stickyHeader;
+	@layer components {
+		@include vars;
 	}
 
-	&:has(.dataTable.mod-columnsOverflow) {
-		@include columnsOverflow;
-	}
+	@layer mods {
+		&:has(.dataTable.mod-stickyHeader) {
+			@include stickyHeader;
+		}
 
-	&:has(.dataTable.is-firstColumnVisible) {
-		@include firstColumnVisible;
-	}
+		&:has(.dataTable.mod-columnsOverflow) {
+			@include columnsOverflow;
+		}
 
-	&:has(.dataTable.is-lastColumnVisible) {
-		@include lastColumnVisible;
-	}
+		&:has(.dataTable.mod-rowsOverflow) {
+			@include rowsOverflow;
+		}
 
-	&:has(.dataTable.mod-rowsOverflow) {
-		@include rowsOverflow;
-	}
+		&:has(.dataTable.is-firstColumnVisible) {
+			@include firstColumnVisible;
+		}
 
-	&:has(.dataTable.is-firstRowVisible) {
-		@include firstRowVisible;
-	}
+		&:has(.dataTable.is-lastColumnVisible) {
+			@include lastColumnVisible;
+		}
 
-	&:has(.dataTable.is-lastRowVisible) {
-		@include lastRowVisible;
-	}
+		&:has(.dataTable.is-firstRowVisible) {
+			@include firstRowVisible;
+		}
+
+		&:has(.dataTable.is-lastRowVisible) {
+			@include lastRowVisible;
+		}
 
-	&:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
-		@include stickyColumn;
+		&:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
+			@include stickyColumn;
 
-		&:has(.dataTable.mod-cellBorder) {
-			@include stickyColumnBorder;
+			&:has(.dataTable.mod-cellBorder) {
+				@include stickyColumnBorder;
+			}
 		}
 	}
 }

package/src/components/dateField/index.scss

@@ -1,35 +1,39 @@
 @use 'exports' as *;
 
 .dateField {
-	@include vars;
-	@include component;
-
-	&.mod-filterPill {
-		@include filterPill;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:not(.mod-auto, .mod-filterPill) {
-		&.mod-day {
-			@include day;
+	@layer mods {
+		&.mod-filterPill {
+			@include filterPill;
+		}
+
+		&:not(.mod-auto, .mod-filterPill) {
+			&.mod-day {
+				@include day;
 
-			.form-field.mod-S & {
-				@include dayS;
+				.form-field.mod-S & {
+					@include dayS;
+				}
 			}
-		}
 
-		&.mod-month {
-			@include month;
+			&.mod-month {
+				@include month;
 
-			.form-field.mod-S & {
-				@include monthS;
+				.form-field.mod-S & {
+					@include monthS;
+				}
 			}
-		}
 
-		&.mod-year {
-			@include year;
+			&.mod-year {
+				@include year;
 
-			.form-field.mod-S & {
-				@include yearS;
+				.form-field.mod-S & {
+					@include yearS;
+				}
 			}
 		}
 	}

package/src/components/dateRangeField/index.scss

@@ -2,43 +2,47 @@
 @use 'exports' as *;
 
 .dateRangeField {
-	@include vars;
-	@include component;
-
-	.form-field.mod-S & {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-filterPill {
-		@include filterPill;
-
-		@include media.max('XS') {
-			@include filterPillCompact;
+	@layer mods {
+		.form-field.mod-S & {
+			@include S;
 		}
-	}
 
-	&:not(.mod-auto, .mod-filterPill) {
-		&.mod-day {
-			@include day;
+		&.mod-filterPill {
+			@include filterPill;
 
-			.form-field.mod-S & {
-				@include dayS;
+			@include media.max('XS') {
+				@include filterPillCompact;
 			}
 		}
 
-		&.mod-month {
-			@include month;
+		&:not(.mod-auto, .mod-filterPill) {
+			&.mod-day {
+				@include day;
 
-			.form-field.mod-S & {
-				@include monthS;
+				.form-field.mod-S & {
+					@include dayS;
+				}
+			}
+
+			&.mod-month {
+				@include month;
+
+				.form-field.mod-S & {
+					@include monthS;
+				}
 			}
-		}
 
-		&.mod-year {
-			@include year;
+			&.mod-year {
+				@include year;
 
-			.form-field.mod-S & {
-				@include yearS;
+				.form-field.mod-S & {
+					@include yearS;
+				}
 			}
 		}
 	}

package/src/components/dialog/component.scss

@@ -10,15 +10,15 @@
 	inset: var(--components-dialog-inset);
 	inline-size: var(--components-dialog-width);
 	block-size: var(--components-dialog-height);
-	max-inline-size: var(--components-dialog-maxWidth);
-	max-block-size: var(--components-dialog-maxHeight);
 	background-color: var(--palettes-neutral-0);
 	border-radius: var(--components-dialog-borderRadius);
 	box-shadow: var(--pr-t-elevation-shadow-overlay);
-	position: fixed !important;
 	margin: auto;
-	display: flex;
 	flex-direction: column;
+	display: flex !important;
+	position: fixed !important;
+	max-inline-size: var(--components-dialog-maxWidth) !important;
+	max-block-size: var(--components-dialog-maxHeight) !important;
 
 	@supports not (height: 1dvh) {
 		--components-dialog-maxHeight: var(--components-dialog-maxHeightFallback);