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

package/src/components/form/index.scss

@@ -6,108 +6,94 @@
 @use 'exports' as *;
 
 .form {
-	@layer components {
-		@include component;
-	}
+	@include component;
 
-	@layer mods {
-		&.mod-maxWidth {
-			@include maxWidth;
-		}
+	&.mod-maxWidth {
+		@include maxWidth;
 	}
 }
 
 .form-fieldset {
-	@layer mods {
-		&.mod-inline {
-			@include inline;
-		}
+	&.mod-inline {
+		@include inline;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&:has(~ .box) {
-			.form-field {
-				&.mod-withArrow {
-					@include withArrow;
+	&:has(~ .box) {
+		.form-field {
+			&.mod-withArrow {
+				@include withArrow;
 
-					&.mod-S {
-						@include withArrowS;
-					}
+				&.mod-S {
+					@include withArrowS;
 				}
 			}
 		}
 	}
 
-	@layer states {
-		&:has(.radioField-input[aria-invalid='true']),
-		&:has(.checkboxField-input[aria-invalid='true']) {
-			@include legendInvalid;
-		}
+	&:has(.radioField-input[aria-invalid='true']),
+	&:has(.checkboxField-input[aria-invalid='true']) {
+		@include legendInvalid;
 	}
 }
 
 .form-field {
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		@each $value in config.$fieldsWidth {
-			&.mod-width#{$value} {
-				@include width($value);
-			}
+	@each $value in config.$fieldsWidth {
+		&.mod-width#{$value} {
+			@include width($value);
 		}
+	}
 
-		&.mod-checkable,
-		&:has(.radioField),
-		&:has(.checkboxField),
-		&:has(.switchField) {
-			@include checkable;
-		}
+	&.mod-checkable,
+	&:has(.radioField),
+	&:has(.checkboxField),
+	&:has(.switchField) {
+		@include checkable;
 	}
 
-	@layer states {
-		&:not(lu-form-field) {
-			&:has(
-					.textField-input-value[aria-invalid='true'],
-					.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
-					.simpleSelect-field-input[aria-invalid='true'],
-					.multipleSelect-displayer-search[aria-invalid='true']
-				) {
-				@include invalid;
-			}
+	&:not(lu-form-field) {
+		&:has(
+				.textField-input-value[aria-invalid='true'],
+				.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
+				.simpleSelect-field-input[aria-invalid='true'],
+				.multipleSelect-displayer-search[aria-invalid='true']
+			) {
+			@include invalid;
 		}
+	}
 
-		&:has(.radioField-input:disabled),
-		&:has(.checkboxField-input:disabled),
-		&:has(.switchField-input:disabled) {
-			.formLabel {
-				@include formLabel.disabled;
-			}
+	&:has(.radioField-input:disabled),
+	&:has(.checkboxField-input:disabled),
+	&:has(.switchField-input:disabled) {
+		.formLabel {
+			@include formLabel.disabled;
+		}
 
-			.inlineMessage {
-				@include inlineMessage.disabled;
-			}
+		.formLabel-tag {
+			@include tag.disabled;
+		}
 
-			.formLabel-tag {
-				@include tag.disabled;
-			}
+		.inlineMessage {
+			@include inlineMessage.disabled;
 		}
 	}
 
-	@layer mods {
-		&.mod-withArrow {
-			@include withArrow;
+	&.mod-withArrow {
+		@include withArrow;
 
-			&.mod-S {
-				@include withArrowS;
-			}
+		&.mod-S {
+			@include withArrowS;
 		}
 	}
 }
@@ -116,33 +102,27 @@
 
 // stylelint-disable no-duplicate-selectors -- deprecated
 .form {
-	@layer components {
-		@include vars;
-	}
+	@include vars;
 }
 
 .form-group {
-	@layer components {
-		@include vars;
-		@include componentDeprecated;
-	}
+	@include vars;
+	@include componentDeprecated;
 }
 
 .form-group-line-col {
-	@layer mods {
-		&[class*='mod-overlay'] {
-			@include overlay;
-		}
+	&[class*='mod-overlay'] {
+		@include overlay;
+	}
 
-		&.mod-overlay-top {
-			@include overlayTop;
-		}
+	&.mod-overlay-top {
+		@include overlayTop;
+	}
 
-		@each $breakpoint, $value in config.$breakpoints {
-			@for $i from 1 through 12 {
-				&.mod-#{$i}\@mediaMin#{$breakpoint} {
-					@include breakpoint($breakpoint, $i);
-				}
+	@each $breakpoint, $value in config.$breakpoints {
+		@for $i from 1 through 12 {
+			&.mod-#{$i}\@mediaMin#{$breakpoint} {
+				@include breakpoint($breakpoint, $i);
 			}
 		}
 	}
@@ -152,37 +132,29 @@
 .radiosfield-label,
 .checkboxesfield-label,
 .textfield-label {
-	@layer states {
-		&:is(.is-required, .required) {
-			@include required;
-		}
+	&:is(.is-required, .required) {
+		@include required;
 	}
 }
 
 .checkboxesfield.mod-framed,
 .radiosfield.mod-framed,
 .form.mod-framed .fieldsetWrapper {
-	@layer mods {
-		@include framed;
-	}
+	@include framed;
 }
 
 .checkboxesfield.mod-framed,
 .radiosfield.mod-framed {
-	@layer mods {
-		margin-block-start: 0;
-		padding-block: var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
-		padding-inline: var(--components-field-framed-side-padding);
-	}
+	margin-block-start: 0;
+	padding-block: var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
+	padding-inline: var(--components-field-framed-side-padding);
 }
 
 .form-group-label {
-	@layer states {
-		&.is-required {
-			&:not(:empty) {
-				&::after {
-					@extend %isRequired;
-				}
+	&.is-required {
+		&:not(:empty) {
+			&::after {
+				@extend %isRequired;
 			}
 		}
 	}
@@ -191,12 +163,10 @@
 .radiosfield-label,
 .checkboxesfield-label,
 .textfield-label {
-	@layer states {
-		&.is-required {
-			&:not(:empty) {
-				&::after {
-					@extend %isRequired;
-				}
+	&.is-required {
+		&:not(:empty) {
+			&::after {
+				@extend %isRequired;
 			}
 		}
 	}

package/src/components/form/mods.scss

@@ -281,7 +281,7 @@
 
 	&::before,
 	&::after {
-		// stylelint-disable-next-line no-irregular-whitespace
+		/* stylelint-disable-next-line no-irregular-whitespace */
 		content: ' ' / '';
 		display: table;
 	}
@@ -362,10 +362,8 @@
 }
 
 %isRequired {
-	@layer states {
-		color: var(--palettes-error-700);
-		display: inline-block;
-		margin-inline-start: 0.2em;
-		content: '*' / '';
-	}
+	color: var(--palettes-error-700);
+	display: inline-block;
+	margin-inline-start: 0.2em;
+	content: '*' / '';
 }

package/src/components/formLabel/index.scss

@@ -1,29 +1,23 @@
 @use 'exports' as *;
 
 .formLabel {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		&.mod-counter {
-			@include counter;
-		}
+	&.mod-counter {
+		@include counter;
 	}
 
-	@layer states {
-		&.is-error {
-			// To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
-			@include error;
-		}
+	&.is-error {
+		// To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
+		@include error;
 	}
 }

package/src/components/gauge/index.scss

@@ -1,39 +1,33 @@
 @use 'exports' as *;
 
 .gauge {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-thin {
-			@include thin;
-		}
+	&.mod-thin {
+		@include thin;
+	}
 
-		&:has(.gauge-circleBackground) {
-			@include circular;
-		}
+	&:has(.gauge-circleBackground) {
+		@include circular;
+	}
 
-		// .mod-vertical is deprecated
-		&.mod-vertical {
-			@include vertical;
+	// .mod-vertical is deprecated
+	&.mod-vertical {
+		@include vertical;
 
-			&.mod-thin {
-				@include verticalThin;
-			}
+		&.mod-thin {
+			@include verticalThin;
 		}
 	}
 
-	@layer states {
-		&.is-zero,
-		&:not([style]),
-		&[style*='--components-gauge-value: 0%'] {
-			@include zero;
-		}
+	&.is-zero,
+	&:not([style]),
+	&[style*='--components-gauge-value: 0%'] {
+		@include zero;
+	}
 
-		&.is-animated {
-			@include animated;
-		}
+	&.is-animated {
+		@include animated;
 	}
 }

package/src/components/grid/index.scss

@@ -4,40 +4,36 @@
 @use 'exports' as *;
 
 .grid {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-auto {
-			@include auto;
-		}
+	&.mod-auto {
+		@include auto;
+	}
 
-		@each $breakpoint, $value in config.$breakpoints {
-			&.mod-autoAtMediaMin#{$breakpoint} {
-				@include autoAt;
+	@each $breakpoint, $value in config.$breakpoints {
+		&.mod-autoAtMediaMin#{$breakpoint} {
+			@include autoAt;
 
-				@include media.min($breakpoint) {
-					@include auto;
-				}
+			@include media.min($breakpoint) {
+				@include auto;
 			}
+		}
 
-			&.mod-autoAtContainerMin#{$breakpoint} {
-				@include autoAt;
+		&.mod-autoAtContainerMin#{$breakpoint} {
+			@include autoAt;
 
-				@include container.min($breakpoint, $name: grid) {
-					@include auto;
-				}
+			@include container.min($breakpoint, $name: grid) {
+				@include auto;
 			}
 		}
+	}
 
-		&.mod-form {
-			@include form;
-		}
+	&.mod-form {
+		@include form;
+	}
 
-		&.mod-dense {
-			@include dense;
-		}
+	&.mod-dense {
+		@include dense;
 	}
 }

package/src/components/header/index.scss

@@ -1,29 +1,23 @@
 @use 'exports' as *;
 
 .header {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-sticky {
-			@include sticky;
+	&.mod-sticky {
+		@include sticky;
 
-			.navSide ~ .main-content &,
-			.mod-withMenu .main-content & {
-				@include left;
-			}
+		.navSide ~ .main-content &,
+		.mod-withMenu .main-content & {
+			@include left;
 		}
+	}
 
-		&.mod-nav {
-			@include nav;
-		}
+	&.mod-nav {
+		@include nav;
 	}
 
-	@layer states {
-		&:is(.is-loading, .loading) {
-			@include loading;
-		}
+	&:is(.is-loading, .loading) {
+		@include loading;
 	}
 }

package/src/components/highlightData/index.scss

@@ -1,42 +1,38 @@
 @use 'exports' as *;
 
 .highlightData {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-light {
-			@include light;
-		}
+	&.mod-light {
+		@include light;
+	}
 
-		&.mod-dark {
-			@include dark;
-		}
+	&.mod-dark {
+		@include dark;
+	}
 
-		&.mod-valueFirst {
-			@include valueFirst;
-		}
+	&.mod-valueFirst {
+		@include valueFirst;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		&.mod-nested {
-			@include nested;
-		}
+	&.mod-nested {
+		@include nested;
+	}
 
-		&:has(.highlightData-illustrations) {
-			@include illustrations;
+	&:has(.highlightData-illustrations) {
+		@include illustrations;
 
-			&.mod-valueFirst {
-				@include valueFirstIllustrations;
-			}
+		&.mod-valueFirst {
+			@include valueFirstIllustrations;
 		}
 	}
 }

package/src/components/horizontalNavigation/index.scss

@@ -3,39 +3,35 @@
 // .menu is deprecated
 .horizontalNavigation,
 .menu {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-header {
-			@include header;
-		}
+	&.mod-header {
+		@include header;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-noBorder {
-			@include noBorder;
-		}
+	&.mod-noBorder {
+		@include noBorder;
+	}
 
-		&.mod-vertical {
-			@include vertical;
+	&.mod-vertical {
+		@include vertical;
 
-			// .menu-list-item-action is deprecated
-			.horizontalNavigation-list-item-action,
-			.menu-list-item-action {
-				&[aria-current='page'],
-				&.is-active {
-					@include activeVertical;
-				}
+		// .menu-list-item-action is deprecated
+		.horizontalNavigation-list-item-action,
+		.menu-list-item-action {
+			&[aria-current='page'],
+			&.is-active {
+				@include activeVertical;
 			}
+		}
 
-			&.mod-S {
-				@include verticalS;
-			}
+		&.mod-S {
+			@include verticalS;
 		}
 	}
 }
@@ -43,22 +39,20 @@
 // .menu-link is deprecated
 // .menu-list-item-action is deprecated
 .horizontalNavigation-list-item-action,
-.menu-link,
-.menu-list-item-action {
-	@layer states {
-		// .active is deprecated
-		&[aria-current='page'],
-		&.is-active,
-		&.active {
-			@include active;
-		}
+.menu-list-item-action,
+.menu-link {
+	// .active is deprecated
+	&[aria-current='page'],
+	&.is-active,
+	&.active {
+		@include active;
+	}
 
-		// .disabled is deprecated
-		// [disabled] is deprecated
-		&.is-disabled,
-		&.disabled,
-		&[disabled] {
-			@include disabled;
-		}
+	// .disabled is deprecated
+	// [disabled] is deprecated
+	&.is-disabled,
+	&.disabled,
+	&[disabled] {
+		@include disabled;
 	}
 }