@lucca-front/scss 20.2.2 → 20.3.0-rc.2

package/src/components/dataTable/index.scss

@@ -1,90 +1,126 @@
 @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;
+		}
+
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
 
-	&[class*='mod-layoutFixedAtMediaMin'] {
-		@include layoutFixedWithBreakpoint;
+		&[class*='mod-layoutFixedAtMediaMin'] {
+			@include layoutFixedWithBreakpoint;
+		}
+
+		// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
+		&[class*='mod-layoutFixed'] {
+			@include layoutFixedCells;
+		}
 	}
 
-	// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
-	&[class*='mod-layoutFixed'] {
-		@include layoutFixedCells;
+	&.mod-hover {
+		:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
+			&:hover {
+				@include hover;
+			}
+
+			&.mod-selectable {
+				&:has(input:checked) {
+					&:hover {
+						@include selectedHover;
+					}
+				}
+			}
+		}
 	}
 }
 
 :is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
-	&.mod-group {
-		@include group;
-	}
+	@layer mods {
+		&.mod-group {
+			@include group;
+		}
 
-	&.mod-selectable {
-		@include selectable;
-	}
+		&.mod-selectable {
+			@include selectable;
 
-	&.mod-draggable {
-		@include draggable;
+			&:has(input:checked) {
+				@include selected;
+			}
+		}
+
+		&.mod-draggable {
+			@include draggable;
+		}
 	}
 }
 
 :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
-	&.mod-actions {
-		@include actions;
-	}
+	@layer mods {
+		&.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;
-	}
+	@layer states {
+		&.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;
+	@layer states {
+		&[aria-expanded='true'] {
+			@include expanded;
+		}
 	}
 }

package/src/components/dataTable/mods.scss

@@ -40,15 +40,14 @@
 
 	font: var(--pr-t-font-heading-4);
 
-	--components-dataTable-cell-background: var(--palettes-neutral-50);
+	&,
+	&:hover {
+		--components-dataTable-cell-background: var(--palettes-neutral-50);
+	}
 }
 
 @mixin selectable {
 	--components-dataTable-cellFirst-width: 2.5rem;
-
-	&:has(input:checked) {
-		--components-dataTable-cell-background: var(--palettes-product-50);
-	}
 }
 
 @mixin draggable {

package/src/components/dataTable/states.scss

@@ -5,3 +5,15 @@
 @mixin expanded {
 	--components-dataTable-expand-rotation: 0deg;
 }
+
+@mixin hover {
+	--components-dataTable-cell-background: var(--palettes-neutral-25);
+}
+
+@mixin selected {
+	--components-dataTable-cell-background: var(--palettes-product-50);
+}
+
+@mixin selectedHover {
+	--components-dataTable-cell-background: var(--palettes-product-100);
+}

package/src/components/dataTableSticked/index.scss

@@ -3,41 +3,49 @@
 @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;
-	}
+	@layer states {
+		&: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;
+	@layer mods {
+		&: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/index.scss

@@ -3,50 +3,58 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 .dialog {
-	@include vars;
-	@include component;
-
-	&.mod-XS {
-		@include XS;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.mod-fitContent {
-		@include fitContent;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-maxContent {
-		@include maxContent;
-	}
+		&.mod-fitContent {
+			@include fitContent;
+		}
 
-	&.mod-L {
-		@include L;
-	}
+		&.mod-maxContent {
+			@include maxContent;
+		}
 
-	&.mod-XL {
-		@include XL;
-	}
+		&.mod-L {
+			@include L;
+		}
 
-	&.mod-neutralBackground {
-		@include neutralBackground;
-	}
+		&.mod-XL {
+			@include XL;
+		}
 
-	&:where(.mod-drawer) {
-		@include drawer;
+		&.mod-XXL {
+			@include XXL;
+		}
 
-		&:where(.mod-fromBottom) {
-			@include fromBottom;
+		&.mod-neutralBackground {
+			@include neutralBackground;
 		}
 
-		@include media.max('XXS') {
-			@include fromBottom;
+		&:where(.mod-drawer) {
+			@include drawer;
+
+			&:where(.mod-fromBottom) {
+				@include fromBottom;
+			}
+
+			@include media.max('XXS') {
+				@include fromBottom;
+			}
 		}
-	}
 
-	&.mod-fullScreen {
-		@include fullScreen;
+		&.mod-fullScreen {
+			@include fullScreen;
+		}
 	}
 }

package/src/components/dialog/mods.scss

@@ -22,6 +22,10 @@
 	--components-dialog-size: 60rem;
 }
 
+@mixin XXL {
+	--components-dialog-size: 100rem;
+}
+
 @mixin drawer {
 	--components-dialog-animationOpening: slideFromRight;
 	--components-dialog-maxHeight: none;

package/src/components/divider/index.scss

@@ -1,14 +1,18 @@
 @use 'exports' as *;
 
 .divider {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-vertical {
-		@include vertical;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-vertical {
+			@include vertical;
+		}
 	}
 }

package/src/components/dropdown/index.scss

@@ -3,17 +3,23 @@
 // .lu-dropdown-content is deprecated
 .dropdown,
 .lu-dropdown-content.lu-popover-content {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
-	&.is-disabled {
-		@include disabled;
+	@layer states {
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 
-	&.mod-critical, &.mod-delete {
-		@include critical;
+	@layer mods {
+		&.mod-critical, &.mod-delete {
+			@include critical;
+		}
 	}
 }

package/src/components/emptyState/index.scss

@@ -1,14 +1,18 @@
 @use 'exports' as *;
 
 .emptyState {
-	@include vars;
-	@include component;
-
-	&.mod-page {
-		@include page;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-center {
-		@include center;
+	@layer mods {
+		&.mod-page {
+			@include page;
+		}
+
+		&.mod-center {
+			@include center;
+		}
 	}
 }

package/src/components/errorPage/index.scss

@@ -2,10 +2,14 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .errorPage {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	@include media.max('S') {
-		@include compact;
+	@layer mods {
+		@include media.max('S') {
+			@include compact;
+		}
 	}
 }

package/src/components/fancyBox/index.scss

@@ -2,10 +2,14 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .fancyBox {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	@include media.max('XS') {
-		@include narrow;
+	@layer mods {
+		@include media.max('XS') {
+			@include narrow;
+		}
 	}
 }