@lucca-front/scss 20.2.0-rc.1 → 20.2.0-rc.3

package/src/components/segmentedControl/index.scss

@@ -4,34 +4,28 @@
 // .viewTabs is deprecated
 .segmentedControl,
 .viewTabs {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-vertical {
-			@include vertical;
-		}
+	&.mod-vertical {
+		@include vertical;
+	}
 
-		@include media.max('XXS') {
-			@include vertical;
-		}
+	@include media.max('XXS') {
+		@include vertical;
 	}
 }
 
 // .viewTabs-item-tab is deprecated
 .segmentedControl-item-action,
 .viewTabs-item-tab {
-	@layer states {
-		.segmentedControl-item-input:checked + &,
-		&[aria-selected='true'] {
-			@include selected;
-		}
+	.segmentedControl-item-input:checked + &,
+	&[aria-selected='true'] {
+		@include selected;
 	}
 }
 
@@ -43,9 +37,7 @@
 // .viewTabs_panel is deprecated
 .segmentedControl_panel,
 .viewTabs_panel {
-	@layer states {
-		&:not(.is-active, .active) {
-			@include panelInactive;
-		}
+	&:not(.is-active, .active) {
+		@include panelInactive;
 	}
 }

package/src/components/skeleton/index.scss

@@ -1,63 +1,57 @@
 @use 'exports' as *;
 
 .skeleton {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
 	// .mod-dark can be applied to .skeleton or .skeleton-item
-	@layer mods {
-		&.mod-dark {
-			@include dark;
-		}
+	&.mod-dark {
+		@include dark;
 	}
 
-	@layer states {
-		&.is-loading {
-			@include loading;
+	&.is-loading {
+		@include loading;
 
-			.skeleton-item {
-				// .mod-dark can be applied to .skeleton or .skeleton-item
-				&.mod-dark {
-					@include dark;
-				}
+		.skeleton-item {
+			// .mod-dark can be applied to .skeleton or .skeleton-item
+			&.mod-dark {
+				@include dark;
+			}
 
-				&.mod-square {
-					@include square;
-				}
+			&.mod-square {
+				@include square;
+			}
 
-				&.mod-circle {
-					@include circle;
-				}
+			&.mod-circle {
+				@include circle;
+			}
 
-				&.mod-XS {
-					@include XS;
-				}
+			&.mod-XS {
+				@include XS;
+			}
 
-				&.mod-S {
-					@include S;
-				}
+			&.mod-S {
+				@include S;
+			}
 
-				&.mod-L {
-					@include L;
-				}
+			&.mod-L {
+				@include L;
+			}
 
-				&.mod-XL {
-					@include XL;
-				}
+			&.mod-XL {
+				@include XL;
+			}
 
-				&.mod-XXL {
-					@include XXL;
-				}
+			&.mod-XXL {
+				@include XXL;
+			}
 
-				&.mod-alignRight {
-					@include alignRight;
-				}
+			&.mod-alignRight {
+				@include alignRight;
+			}
 
-				&.mod-alignCenter {
-					@include alignCenter;
-				}
+			&.mod-alignCenter {
+				@include alignCenter;
 			}
 		}
 	}

package/src/components/skipLinks/index.scss

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

package/src/components/sortableList/index.scss

@@ -1,22 +1,16 @@
 @use 'exports' as *;
 
 .sortableList {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 }
 
 .sortableList-item {
-	@layer mods {
-		&.mod-clickable {
-			@include clickable;
-		}
+	&.mod-clickable {
+		@include clickable;
 	}
 }

package/src/components/statusBadge/index.scss

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

package/src/components/switch/index.scss

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

package/src/components/switchField/index.scss

@@ -1,38 +1,32 @@
 @use 'exports' as *;
 
 .switchField {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 }
 
 .switchField-input {
-	@layer states {
-		&:checked {
-			@include checked;
-		}
+	&: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,74 +1,68 @@
 @use 'exports' as *;
 
 .table {
-	@layer components {
-		@include vars;
-		@include component;
-
-		.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);
-		}
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-zebra {
-			@include zebra;
-		}
+	&.mod-zebra {
+		@include zebra;
+	}
 
-		&.mod-alignTop {
-			@include alignTop;
-		}
+	&.mod-alignTop {
+		@include alignTop;
+	}
 
-		&.mod-clickable {
-			@include clickable;
+	&.mod-clickable {
+		@include clickable;
 
-			.table-head-row,
-			.table-body-row,
-			.table-foot-row {
-				&.mod-selectable {
-					@include clickableSelectable;
-				}
+		.table-head-row,
+		.table-body-row,
+		.table-foot-row {
+			&.mod-selectable {
+				@include clickableSelectable;
 			}
 		}
+	}
 
-		&.mod-card {
-			@include card;
-		}
+	&.mod-card {
+		@include card;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-noOffset {
-			@include noOffset;
-		}
+	&.mod-noOffset {
+		@include noOffset;
+	}
 
-		&.mod-borderless {
-			@include borderless;
-		}
+	&.mod-borderless {
+		@include borderless;
+	}
+
+	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);
 	}
 }
 
 .table-body-row,
 .table-foot-row {
-	@layer mods {
-		&.mod-header {
-			@include header;
-		}
+	&.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;
 		}
 	}
 }
@@ -76,53 +70,45 @@
 .table-head-row,
 .table-body-row,
 .table-foot-row {
-	@layer mods {
-		&.mod-selectable {
-			@include selectable;
-		}
+	&.mod-selectable {
+		@include selectable;
+	}
 
-		&.mod-draggable {
-			@include draggable;
-		}
+	&.mod-draggable {
+		@include draggable;
 	}
 }
 
 .table-head-row {
-	@layer mods {
-		&.mod-twoLines {
-			@include twoLines;
-		}
+	&.mod-twoLines {
+		@include twoLines;
 	}
 }
 
 .table-body-row-cell,
 .table-foot-row-cell {
-	@layer mods {
-		&.mod-avatar {
-			@include avatar;
-		}
+	&.mod-avatar {
+		@include avatar;
 	}
 }
 
 .table-head-row-cell,
 .table-body-row-cell,
 .table-foot-row-cell {
-	@layer mods {
-		&.mod-actions {
-			@include actions;
+	&.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,20 +1,18 @@
 @use 'exports' as *;
 
 .table {
-	@layer mods {
-		// 1 - Layout fixed
-		&.mod-layoutFixed {
-			@include layoutFixed;
-		}
+	// 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,27 +3,23 @@
 @use 'exports' as *;
 
 .table {
-	@layer mods {
-		&.mod-layoutFixed {
-			@include layoutFixed;
-		}
+	&.mod-layoutFixed {
+		@include layoutFixed;
 	}
 }
 
 .table-head-row-cell,
 .table-body-row-cell,
 .table-foot-row-cell {
-	@layer mods {
-		@for $i from 2 through 20 {
-			&.mod-layoutFixed-#{$i} {
-				@include layoutFixedCell($i);
-			}
+	@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,46 +1,42 @@
 @use 'exports' as *;
 
 .tableOfContent {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
 .tableOfContent-list-item-action {
-	@layer states {
-		&:not(.disabled, .is-disabled, [disabled]) {
+	&:not(.disabled, .is-disabled, [disabled]) {
+		&:is(:hover) {
+			@include hover;
+		}
+
+		&:is(:focus) {
+			@include focus;
+		}
+
+		&:is(:active) {
+			@include active;
+		}
+
+		&.is-active {
+			@include isActive;
+
 			&:is(:hover) {
-				@include hover;
+				@include isActiveHover;
 			}
 
 			&:is(:focus) {
-				@include focus;
+				@include isActiveFocus;
 			}
 
 			&:is(:active) {
-				@include active;
-			}
-
-			&.is-active {
-				@include isActive;
-
-				&:is(:hover) {
-					@include isActiveHover;
-				}
-
-				&:is(:focus) {
-					@include isActiveFocus;
-				}
-
-				&:is(:active) {
-					@include isActiveActive;
-				}
+				@include isActiveActive;
 			}
 		}
+	}
 
-		&:is(.disabled, .is-disabled, [disabled]) {
-			@include disabled;
-		}
+	&:is(.disabled, .is-disabled, [disabled]) {
+		@include disabled;
 	}
 }