@lucca-front/scss 20.3.0-rc.5 → 20.3.0

package/src/components/dataTable/index.scss

@@ -1,47 +1,64 @@
 @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,
+		&.mod-verticalAlignTop {
+			@include verticalAlignTop;
+		}
 
-	&[class*='mod-layoutFixedAtMediaMin'] {
-		@include layoutFixedWithBreakpoint;
-	}
+		&.mod-verticalAlignBottom {
+			@include verticalAlignBottom;
+		}
 
-	// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
-	&[class*='mod-layoutFixed'] {
-		@include layoutFixedCells;
-	}
+		&.mod-verticalAlignMiddle {
+			@includeverticalAlignMiddle;
+		}
 
-	&.mod-hover {
-		:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
-			&:hover {
-				@include hover;
-			}
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
+
+		&[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;
+		}
+
+		&.mod-hover {
+			:is(.mod-selectable, .dataTable-body-row:not(.mod-group)) {
+				&:hover {
+					@include hover;
+				}
 
-			&.mod-selectable {
-				&:has(input:checked) {
-					&:hover {
-						@include selectedHover;
+				&.mod-selectable {
+					&:has(input:checked) {
+						&:hover {
+							@include selectedHover;
+						}
 					}
 				}
 			}
@@ -49,62 +66,70 @@
 	}
 }
 
-: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;
+		&:has([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,
+		&.mod-alignEnd {
+			@include alignEnd;
+		}
 
-	&.mod-editable {
-		@include editable;
-	}
+		&.mod-alignStart {
+			@include alignStart;
+		}
 
-	&.mod-tree {
-		@include tree;
-	}
-}
+		&.mod-editable {
+			@include editable;
+		}
 
-.dataTable-body-row {
-	&.is-collapsed {
-		@include collapsed;
+		&.mod-tree {
+			@include tree;
+		}
 	}
 
-	&:first-child {
-		&:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
-			~ .dataTable-body-row {
-				@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;
+				}
 			}
 		}
 	}
-}
 
-.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/dataTable/mods.scss

@@ -14,10 +14,18 @@
 	}
 }
 
-@mixin alignTop {
+@mixin verticalAlignTop {
 	--components-dataTable-cell-verticalAlign: top;
 }
 
+@mixin verticalAlignBottom {
+	--components-dataTable-cell-verticalAlign: bottom;
+}
+
+@mixin verticalAlignMiddle {
+	--components-dataTable-cell-verticalAlign: middle;
+}
+
 @mixin buttonExpand {
 	--components-dataTable-tree-extraPadding: calc(1.5rem + var(--pr-t-spacings-100));
 
@@ -47,7 +55,16 @@
 }
 
 @mixin selectable {
-	--components-dataTable-cellFirst-width: 2.5rem;
+	--components-dataTable-cellFirst-width: 2.625rem;
+
+	.dataTable-head-row-cell,
+	.dataTable-body-row-cell,
+	.dataTable-foot-row-cell {
+		&:first-child {
+			inline-size: var(--components-dataTable-cellFirst-width);
+			max-inline-size: var(--components-dataTable-cellFirst-width);
+		}
+	}
 }
 
 @mixin draggable {
@@ -73,7 +90,7 @@
 
 @mixin editable {
 	--components-dataTable-cell-padding: var(--pr-t-spacings-100);
-	--components-dataTable-cell-paddingInlineStart: var(--components-dataTable-cell-padding);
+	--components-dataTable-cell-paddingInlineStart: var(--pr-t-spacings-50);
 }
 
 @mixin actions {
@@ -87,6 +104,8 @@
 		@include button.onlyIcon;
 		@include button.onlyIconS;
 		@include button.ghost;
+
+		transition-property: box-shadow, color;
 	}
 
 	&:is(.dataTable-head-row-cell) {
@@ -101,8 +120,12 @@
 	--components-dataTable-cell-textAlign: center;
 }
 
-@mixin alignRight {
-	--components-dataTable-cell-textAlign: right;
+@mixin alignEnd {
+	--components-dataTable-cell-textAlign: end;
+}
+
+@mixin alignStart {
+	--components-dataTable-cell-textAlign: start;
 }
 
 @mixin layoutFixed {

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, .dataTable-head.mod-sticky) {
+			@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(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
-		@include stickyColumn;
+		&: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(.dataTable.mod-cellBorder) {
-			@include stickyColumnBorder;
+			&:has(.dataTable.mod-cellBorder) {
+				@include stickyColumnBorder;
+			}
 		}
 	}
+
+	&:has(.dataTable-head.is-firstBodyRowVisible) {
+		@include firstBodyRowVisible;
+	}
 }

package/src/components/dataTableSticked/mods.scss

@@ -6,7 +6,7 @@
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
-		z-index: 1;
+		z-index: 2;
 
 		&::after {
 			content: '';
@@ -16,6 +16,7 @@
 			background-image: linear-gradient(#{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
 			pointer-events: none;
 			box-shadow: 0 1px var(--commons-border-200) inset;
+			opacity: var(--components-dataTable-header-shadow-opacity);
 		}
 	}
 }
@@ -103,7 +104,7 @@
 	.dataTable-head-row-cell {
 		&.mod-stickyColumn {
 			&:first-child {
-				z-index: 1;
+				z-index: 2;
 			}
 		}
 	}
@@ -124,6 +125,7 @@
 
 			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
 				transform: translateX(-1px);
+				z-index: 1;
 
 				&:not(:has(+ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
 					&::after {

package/src/components/dataTableSticked/states.scss

@@ -13,3 +13,8 @@
 @mixin lastRowVisible {
 	--components-dataTable-shadow-lastRowOpacity: 0;
 }
+
+@mixin firstBodyRowVisible {
+	--components-dataTable-header-shadow-opacity: 0;
+}
+

package/src/components/dataTableSticked/vars.scss

@@ -3,4 +3,5 @@
 	--components-dataTable-shadow-lastColumnOpacity: 1;
 	--components-dataTable-shadow-firstRowOpacity: 1;
 	--components-dataTable-shadow-lastRowOpacity: 1;
+	--components-dataTable-header-shadow-opacity: 1;
 }

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);
@@ -143,7 +143,7 @@
 		.dialog_backdrop {
 			background-color: var(--palettes-neutral-900);
 			position: fixed;
-			opacity: 0.4;
+			opacity: 0.4 !important; // weird bug with Chrome and its inspector open
 			inset: 0;
 		}
 	}

package/src/components/dialog/index.scss

@@ -3,54 +3,58 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 .dialog {
-	@include vars;
-	@include component;
-
-	&.mod-XS {
-		@include XS;
-	}
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-fitContent {
-		@include fitContent;
-	}
+	@layer mods {
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.mod-maxContent {
-		@include maxContent;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-L {
-		@include L;
-	}
+		&.mod-fitContent {
+			@include fitContent;
+		}
 
-	&.mod-XL {
-		@include XL;
-	}
+		&.mod-maxContent {
+			@include maxContent;
+		}
 
-	&.mod-XXL {
-		@include XXL;
-	}
+		&.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/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;
+		}
 	}
 }