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

package/src/components/radioField/index.scss

@@ -1,70 +1,76 @@
 @use 'exports' as *;
 
 .radioField {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 }
 
 .radioField-input {
-	&:focus-visible {
-		@include focusVisible;
-	}
-
-	&:hover {
-		@include hover;
-	}
-
-	&:active {
-		@include active;
-	}
-
-	&[aria-invalid='true'] {
-		@include invalid;
+	@layer mods {
+		&:focus-visible {
+			@include focusVisible;
+		}
 
 		&:hover {
-			@include invalidHover;
+			@include hover;
 		}
 
 		&:active {
-			@include invalidActive;
-		}
-	}
-
-	&:disabled {
-		&,
-		&:hover {
-			@include disabled;
+			@include active;
 		}
-	}
 
-	&:checked {
-		@include checked;
+		&[aria-invalid='true'] {
+			@include invalid;
 
-		&:hover {
-			@include checkedHover;
-		}
+			&:hover {
+				@include invalidHover;
+			}
 
-		&:active {
-			@include checkedActive;
+			&:active {
+				@include invalidActive;
+			}
 		}
 
 		&:disabled {
-			@include checkedDisabled;
+			&,
+			&:hover {
+				@include disabled;
+			}
 		}
 
-		&[aria-invalid='true'] {
-			@include checkedInvalid;
+		&:checked {
+			@include checked;
 
 			&:hover {
-				@include checkedInvalidHover;
+				@include checkedHover;
 			}
 
 			&:active {
-				@include checkedInvalidActive;
+				@include checkedActive;
+			}
+
+			&:disabled {
+				@include checkedDisabled;
+			}
+
+			&[aria-invalid='true'] {
+				@include checkedInvalid;
+
+				&:hover {
+					@include checkedInvalidHover;
+				}
+
+				&:active {
+					@include checkedInvalidActive;
+				}
 			}
 		}
 	}

package/src/components/readMore/index.scss

@@ -1,28 +1,32 @@
 @use 'exports' as *;
 
 .readMore {
-	@include vars;
-	@include component;
-
-	&:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
-		@include expanded;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.is-disabled {
-		@include disabled;
-	}
+	@layer mods {
+		&:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
+			@include expanded;
+		}
 
-	&.mod-openOnly {
-		&:has(.readMore-link[aria-expanded='true']) {
+		&.is-disabled {
 			@include disabled;
 		}
-	}
 
-	&.mod-default {
-		@include default;
-	}
+		&.mod-openOnly {
+			&:has(.readMore-link[aria-expanded='true']) {
+				@include disabled;
+			}
+		}
+
+		&.mod-default {
+			@include default;
+		}
 
-	&.mod-sunken {
-		@include sunken;
+		&.mod-sunken {
+			@include sunken;
+		}
 	}
 }

package/src/components/richText/index.scss

@@ -1,26 +1,30 @@
 @use 'exports' as *;
 
 .richTextField {
-	@include vars;
-	@include component;
-
-	&:hover {
-		@include hover;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-autoResize {
-		@include autoResize;
-	}
+	@layer mods {
+		&:hover {
+			@include hover;
+		}
 
-	&:has(.richTextField-content[aria-invalid='true']) {
-		@include error;
+		&:has(.richTextField-content[aria-invalid='true']) {
+			@include error;
 
-		&:hover {
-			@include errorHover;
+			&:hover {
+				@include errorHover;
+			}
+		}
+
+		&.is-disabled {
+			@include disabled;
 		}
-	}
 
-	&.is-disabled {
-		@include disabled;
+		&.mod-autoResize {
+			@include autoResize;
+		}
 	}
 }

package/src/components/scrollBox/index.scss

@@ -1,18 +1,22 @@
 @use 'exports' as *;
 
 .scrollBox {
-	@include vars;
-	@include component;
-
-	&.is-firstVisible {
-		@include firstVisible;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.is-lastVisible {
-		@include lastVisible;
-	}
+	@layer mods {
+		&.is-firstVisible {
+			@include firstVisible;
+		}
+
+		&.is-lastVisible {
+			@include lastVisible;
+		}
 
-	&.is-disabled {
-		@include disabled;
+		&.is-disabled {
+			@include disabled;
+		}
 	}
 }

package/src/components/section/index.scss

@@ -2,20 +2,24 @@
 @use 'exports' as *;
 
 .section {
-	@include vars;
-	@include component;
-
-	// .mod-grey is deprecated
-	&.mod-neutral,
-	&.mod-grey {
-		@include neutral;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	@include media.max('S') {
-		@include S;
-	}
+	@layer mods {
+		// .mod-grey is deprecated
+		&.mod-neutral,
+		&.mod-grey {
+			@include neutral;
+		}
+
+		@include media.max('S') {
+			@include S;
+		}
 
-	@include media.max('XS') {
-		@include XS;
+		@include media.max('XS') {
+			@include XS;
+		}
 	}
 }

package/src/components/segmentedControl/index.scss

@@ -4,40 +4,46 @@
 // .viewTabs is deprecated
 .segmentedControl,
 .viewTabs {
-	@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;
+		}
 
-	@include media.max('XXS') {
-		@include vertical;
+		@include media.max('XXS') {
+			@include vertical;
+		}
 	}
 }
 
-// .viewTabs-item-tab is deprecated
-.segmentedControl-item-action,
-.viewTabs-item-tab {
-	.segmentedControl-item-input:checked + &,
-	&[aria-selected='true'] {
-		@include selected;
+@layer mods {
+	// .viewTabs-item-tab is deprecated
+	.segmentedControl-item-action,
+	.viewTabs-item-tab {
+		.segmentedControl-item-input:checked + &,
+		&[aria-selected='true'] {
+			@include selected;
+		}
 	}
-}
 
-.segmentedControl-item-action:disabled,
-.segmentedControl-item-input:disabled ~ .segmentedControl-item-action {
+	.segmentedControl-item-action:disabled,
+	.segmentedControl-item-input:disabled ~ .segmentedControl-item-action {
 		@include disabled;
-}
+	}
 
-// .viewTabs_panel is deprecated
-.segmentedControl_panel,
-.viewTabs_panel {
-	&:not(.is-active, .active) {
-		@include panelInactive;
+	// .viewTabs_panel is deprecated
+	.segmentedControl_panel,
+	.viewTabs_panel {
+		&:not(.is-active, .active) {
+			@include panelInactive;
+		}
 	}
 }

package/src/components/simpleSelect/index.scss

@@ -1,55 +1,59 @@
 @use 'exports' as *;
 
 .simpleSelect {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&:has(.simpleSelect-field-input:focus-visible) {
-		@include focused;
+	@layer mods {
+		&:has(.simpleSelect-field-input:focus-visible) {
+			@include focused;
 
-		&:has(.simpleSelect-field-input[aria-expanded='true']) {
-			@include focusedExpanded;
+			&:has(.simpleSelect-field-input[aria-expanded='true']) {
+				@include focusedExpanded;
+			}
 		}
-	}
 
-	&:not(.mod-noClueIcon) {
-		&:has(.simpleSelect-field-input:focus-visible),
-		&:has(.simpleSelect-field-input[aria-expanded='true']) {
-			&:not(:has(.simpleSelect-field-input:read-only)) {
-				@include searchable;
+		&:not(.mod-noClueIcon) {
+			&:has(.simpleSelect-field-input:focus-visible),
+			&:has(.simpleSelect-field-input[aria-expanded='true']) {
+				&:not(:has(.simpleSelect-field-input:read-only)) {
+					@include searchable;
+				}
 			}
 		}
-	}
 
-	&:has(.simpleSelect-field-input[aria-invalid='true']) {
-		@include invalid;
-	}
+		&:has(.simpleSelect-field-input[aria-invalid='true']) {
+			@include invalid;
+		}
 
-	&:has(.simpleSelect-field-input:disabled) {
-		@include disabled;
-	}
+		&:has(.simpleSelect-field-input:disabled) {
+			@include disabled;
+		}
 
-	&.mod-S {
-		@include S;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-XS {
-		@include XS;
-	}
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.mod-filterPill {
-		@include filterPill;
-	}
+		&.mod-filterPill {
+			@include filterPill;
+		}
 
-	&.is-searchFilled {
-		@include searchFilled;
-	}
+		&.is-searchFilled {
+			@include searchFilled;
+		}
 
-	&.is-selected {
-		@include selected;
+		&.is-selected {
+			@include selected;
 
-		&.is-searchFilled {
-			@include selectedSearchFilled;
+			&.is-searchFilled {
+				@include selectedSearchFilled;
+			}
 		}
 	}
 }

package/src/components/skeleton/index.scss

@@ -1,57 +1,61 @@
 @use 'exports' as *;
 
 .skeleton {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
 	// .mod-dark can be applied to .skeleton or .skeleton-item
-	&.mod-dark {
-		@include dark;
-	}
+	@layer mods {
+		&.mod-dark {
+			@include dark;
+		}
 
-	&.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,6 +1,8 @@
 @use 'exports' as *;
 
 .skipLinks {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }

package/src/components/sortableList/index.scss

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

package/src/components/statusBadge/index.scss

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