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

package/src/components/switch/index.scss

@@ -1,48 +1,54 @@
 @use 'exports' as *;
 
 .switch {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-inline {
+			@include inline;
+		}
+
+		&.mod-S {
+			@include S;
+		}
 	}
 }
 
-.switch-input {
-	&:is(:checked) {
-		@include checked;
+@layer mods {
+	.switch-input {
+		&:is(:checked) {
+			@include checked;
 
-		&:hover {
-			@include checkedHover;
-		}
+			&:hover {
+				@include checkedHover;
+			}
 
-		&:active {
-			@include checkedActive;
+			&:active {
+				@include checkedActive;
+			}
 		}
-	}
 
-	&:is(:hover) {
-		@include hover;
-	}
+		&:is(:hover) {
+			@include hover;
+		}
 
-	&:is(:focus-visible) {
-		@include focus;
-	}
+		&:is(:focus-visible) {
+			@include focus;
+		}
 
-	&:is(:active) {
-		@include active;
-	}
+		&:is(:active) {
+			@include active;
+		}
 
-	&:is([disabled], [readonly]) {
-		@include disabled;
+		&:is([disabled], [readonly]) {
+			@include disabled;
 
-		&:is(:checked) {
-			@include disabledChecked;
+			&:is(:checked) {
+				@include disabledChecked;
+			}
 		}
 	}
 }

package/src/components/switchField/index.scss

@@ -1,32 +1,38 @@
 @use 'exports' as *;
 
 .switchField {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 }
 
 .switchField-input {
-	&:checked {
-		@include checked;
-	}
+	@layer mods {
+		&:checked {
+			@include checked;
+		}
 
-	&:disabled {
-		@include disabled;
+		&:disabled {
+			@include disabled;
 
-		&:checked {
-			@include checkedDisabled;
+			&:checked {
+				@include checkedDisabled;
+			}
 		}
-	}
 
-	&[aria-invalid='true'] {
-		@include invalid;
+		&[aria-invalid='true'] {
+			@include invalid;
 
-		&:checked {
-			@include checkedInvalid;
+			&:checked {
+				@include checkedInvalid;
+			}
 		}
 	}
 }

package/src/components/table/index.scss

@@ -1,114 +1,120 @@
 @use 'exports' as *;
 
 .table {
-	@include vars;
-	@include component;
-
-	&.mod-zebra {
-		@include zebra;
+	@layer components {
+		@include vars;
+		@include component;
+
+		button.tableSortable {
+			--components-sortable-fontWeight: 600;
+			--components-sortable-fontSize: var(--pr-t-font-body-S-fontSize);
+			--components-sortable-lineHeight: var(--pr-t-font-body-S-lineHeight);
+			--components-sortable-arrowsOffset: var(--pr-t-spacings-25);
+		}
 	}
 
-	&.mod-alignTop {
-		@include alignTop;
-	}
+	@layer mods {
+		&.mod-zebra {
+			@include zebra;
+		}
 
-	&.mod-clickable {
-		@include clickable;
+		&.mod-alignTop {
+			@include alignTop;
+		}
 
-		.table-head-row,
-		.table-body-row,
-		.table-foot-row {
-			&.mod-selectable {
-				@include clickableSelectable;
+		&.mod-clickable {
+			@include clickable;
+
+			.table-head-row,
+			.table-body-row,
+			.table-foot-row {
+				&.mod-selectable {
+					@include clickableSelectable;
+				}
 			}
 		}
-	}
-
-	&.mod-card {
-		@include card;
-	}
 
-	&.mod-S {
-		@include S;
-	}
+		&.mod-card {
+			@include card;
+		}
 
-	&.mod-noOffset {
-		@include noOffset;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-borderless {
-		@include borderless;
-	}
+		&.mod-noOffset {
+			@include noOffset;
+		}
 
-	button.tableSortable {
-		--components-sortable-fontWeight: 600;
-		--components-sortable-fontSize: var(--pr-t-font-body-S-fontSize);
-		--components-sortable-lineHeight: var(--pr-t-font-body-S-lineHeight);
-		--components-sortable-arrowsOffset: var(--pr-t-spacings-25);
+		&.mod-borderless {
+			@include borderless;
+		}
 	}
 }
 
-.table-body-row,
-.table-foot-row {
-	&.mod-header {
-		@include header;
-	}
+@layer mods {
+	.table-body-row,
+	.table-foot-row {
+		&.mod-header {
+			@include header;
+		}
 
-	&.mod-child {
-		@include child;
-	}
+		&.mod-child {
+			@include child;
+		}
 
-	&.mod-parent {
-		@include parent;
+		&.mod-parent {
+			@include parent;
 
-		&.mod-collapsable {
-			@include collapsable;
+			&.mod-collapsable {
+				@include collapsable;
+			}
 		}
 	}
-}
 
-.table-head-row,
-.table-body-row,
-.table-foot-row {
-	&.mod-selectable {
-		@include selectable;
-	}
+	.table-head-row,
+	.table-body-row,
+	.table-foot-row {
+		&.mod-selectable {
+			@include selectable;
+		}
 
-	&.mod-draggable {
-		@include draggable;
+		&.mod-draggable {
+			@include draggable;
+		}
 	}
-}
 
-.table-head-row {
-	&.mod-twoLines {
-		@include twoLines;
+	.table-head-row {
+		&.mod-twoLines {
+			@include twoLines;
+		}
 	}
-}
 
-.table-body-row-cell,
-.table-foot-row-cell {
-	&.mod-avatar {
-		@include avatar;
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&.mod-avatar {
+			@include avatar;
+		}
 	}
-}
 
-.table-head-row-cell,
-.table-body-row-cell,
-.table-foot-row-cell {
-	&.mod-actions {
-		@include actions;
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&.mod-actions {
+			@include actions;
 
-		// .mod-actionsHidden is deprecated
-		&.mod-actionsHidden {
-			@include actionsHidden;
+			// .mod-actionsHidden is deprecated
+			&.mod-actionsHidden {
+				@include actionsHidden;
+			}
 		}
-	}
 
-	&.mod-alignCenter {
-		@include alignCenter;
-	}
+		&.mod-alignCenter {
+			@include alignCenter;
+		}
 
-	&.mod-alignRight {
-		@include alignRight;
+		&.mod-alignRight {
+			@include alignRight;
+		}
 	}
 }

package/src/components/tableFixed/index.scss

@@ -1,18 +1,20 @@
 @use 'exports' as *;
 
 .table {
-	// 1 - Layout fixed
-	&.mod-layoutFixed {
-		@include layoutFixed;
-	}
+	@layer mods {
+		// 1 - Layout fixed
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
 
-	// 2 - Layout fixed starting at breakpoint
-	&[class*='mod-layoutFixedAtMediaMin'] {
-		@include layoutFixedWithBreakpoint;
-	}
+		// 2 - Layout fixed starting at breakpoint
+		&[class*='mod-layoutFixedAtMediaMin'] {
+			@include layoutFixedWithBreakpoint;
+		}
 
-	// Cells management for 1 & 2
-	&[class*='mod-layoutFixed'] {
-		@include layoutFixedCells;
+		// Cells management for 1 & 2
+		&[class*='mod-layoutFixed'] {
+			@include layoutFixedCells;
+		}
 	}
 }

package/src/components/tableFixedDeprecated/index.scss

@@ -3,23 +3,27 @@
 @use 'exports' as *;
 
 .table {
-	&.mod-layoutFixed {
-		@include layoutFixed;
+	@layer mods {
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
 	}
 }
 
 .table-head-row-cell,
 .table-body-row-cell,
 .table-foot-row-cell {
-	@for $i from 2 through 20 {
-		&.mod-layoutFixed-#{$i} {
-			@include layoutFixedCell($i);
-		}
+	@layer mods {
+		@for $i from 2 through 20 {
+			&.mod-layoutFixed-#{$i} {
+				@include layoutFixedCell($i);
+			}
 
-		@each $breakpoint, $value in config.$breakpoints {
-			@include media.min($breakpoint) {
-				&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
-					@include layoutFixedCell($i);
+			@each $breakpoint, $value in config.$breakpoints {
+				@include media.min($breakpoint) {
+					&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
+						@include layoutFixedCell($i);
+					}
 				}
 			}
 		}

package/src/components/tableOfContent/index.scss

@@ -1,42 +1,46 @@
 @use 'exports' as *;
 
 .tableOfContent {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 .tableOfContent-list-item-action {
-	&:not(.disabled, .is-disabled, [disabled]) {
-		&:is(:hover) {
-			@include hover;
-		}
-
-		&:is(:focus) {
-			@include focus;
-		}
-
-		&:is(:active) {
-			@include active;
-		}
-
-		&.is-active {
-			@include isActive;
-
+	@layer mods {
+		&:not(.disabled, .is-disabled, [disabled]) {
 			&:is(:hover) {
-				@include isActiveHover;
+				@include hover;
 			}
 
 			&:is(:focus) {
-				@include isActiveFocus;
+				@include focus;
 			}
 
 			&:is(:active) {
-				@include isActiveActive;
+				@include active;
+			}
+
+			&.is-active {
+				@include isActive;
+
+				&:is(:hover) {
+					@include isActiveHover;
+				}
+
+				&:is(:focus) {
+					@include isActiveFocus;
+				}
+
+				&:is(:active) {
+					@include isActiveActive;
+				}
 			}
 		}
-	}
 
-	&:is(.disabled, .is-disabled, [disabled]) {
-		@include disabled;
+		&:is(.disabled, .is-disabled, [disabled]) {
+			@include disabled;
+		}
 	}
 }

package/src/components/tableSortable/index.scss

@@ -1,34 +1,46 @@
 @use 'exports' as *;
 
 .tableSortable.button {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 .table-head-row-cell,
 .dataTable-head-row-cell,
 .indexTable-head-row-cell {
-	&.mod-alignRight {
-		.tableSortable {
-			@include sortAlignRight;
+	@layer mods {
+		&.mod-alignStart,
+		&.mod-alignLeft {
+			.tableSortable {
+				@include sortAlignStart;
+			}
 		}
-	}
 
-	&.mod-alignCenter {
-		.tableSortable {
-			@include sortAlignCenter;
+		&.mod-alignEnd,
+		&.mod-alignRight {
+			.tableSortable {
+				@include sortAlignEnd;
+			}
 		}
-	}
 
-	&[aria-sort='ascending'] {
-		.tableSortable{
-			@include sortAscending;
+		&.mod-alignCenter {
+			.tableSortable {
+				@include sortAlignCenter;
+			}
+		}
+
+		&[aria-sort='ascending'] {
+			.tableSortable{
+				@include sortAscending;
+			}
 		}
-	}
 
-	&[aria-sort='descending'] {
-		.tableSortable {
-			@include sortDescending;
+		&[aria-sort='descending'] {
+			.tableSortable {
+				@include sortDescending;
+			}
 		}
 	}
 }

package/src/components/tableSortable/mods.scss

@@ -1,8 +1,13 @@
-@mixin sortAlignRight {
+@mixin sortAlignEnd {
 	--components-sortable-direction: row-reverse;
 	--components-sortable-offset: var(--pr-t-spacings-50);
 }
 
+@mixin sortAlignStart {
+	--components-sortable-direction: row;
+	--components-sortable-offset: calc(var(--pr-t-spacings-50) * -1);
+}
+
 @mixin sortAlignCenter {
-	--components-sortable-offset: 0;
+	--components-sortable-offset: var(--pr-t-spacings-100);
 }

package/src/components/tableSticked/index.scss

@@ -3,39 +3,43 @@
 @use 'exports' as *;
 
 .table {
-	@include vars;
-
-	// For both mod-stickyColumn + responsive variant
-	&[class*='mod-stickyColumn'] {
-		@include stickyColumn;
+	@layer components {
+		@include vars;
 	}
 
-	&.mod-stickyColumn {
-		@include stickyColumnOffset;
-	}
+	@layer mods {
+		// For both mod-stickyColumn + responsive variant
+		&[class*='mod-stickyColumn'] {
+			@include stickyColumn;
+		}
 
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			&.mod-stickyColumnAtMediaMin#{$breakpoint} {
-				@include stickyColumnOffset;
+		&.mod-stickyColumn {
+			@include stickyColumnOffset;
+		}
+
+		@each $breakpoint, $value in config.$breakpoints {
+			@include media.min($breakpoint) {
+				&.mod-stickyColumnAtMediaMin#{$breakpoint} {
+					@include stickyColumnOffset;
+				}
 			}
 		}
-	}
 
-	// For both stickyHeader + -withBanner variant
-	&[class*='mod-stickyHeader'] {
-		@include stickyHeaderCommon;
+		// For both stickyHeader + -withBanner variant
+		&[class*='mod-stickyHeader'] {
+			@include stickyHeaderCommon;
 
-		.mod-stickyHeader-shadow {
-			@include stickyHeaderShadow;
+			.mod-stickyHeader-shadow {
+				@include stickyHeaderShadow;
+			}
 		}
-	}
 
-	&.mod-stickyHeader {
-		@include stickyHeader;
-	}
+		&.mod-stickyHeader {
+			@include stickyHeader;
+		}
 
-	&.mod-stickyHeader-withBanner {
-		@include stickyHeaderBanner;
+		&.mod-stickyHeader-withBanner {
+			@include stickyHeaderBanner;
+		}
 	}
 }

package/src/components/tableSticked/mods.scss

@@ -104,9 +104,9 @@
 	}
 }
 
-/*****
- Sticky header
-****/
+// *****
+// Sticky header
+// ****
 
 @mixin stickyHeader {
 	.table-head-row-cell {
@@ -144,9 +144,9 @@
 	}
 }
 
-/*****
- Sticky header drop shadow
-****/
+// *****
+// Sticky header drop shadow
+// ****
 
 @mixin stickyHeaderShadow {
 	.indexTable-head-row-cell,