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

package/src/components/dialog/index.scss

@@ -3,58 +3,54 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 .dialog {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-XS {
-			@include XS;
-		}
+	@include vars;
+	@include component;
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		&.mod-fitContent {
-			@include fitContent;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-maxContent {
-			@include maxContent;
-		}
+	&.mod-fitContent {
+		@include fitContent;
+	}
 
-		&.mod-L {
-			@include L;
-		}
+	&.mod-maxContent {
+		@include maxContent;
+	}
 
-		&.mod-XL {
-			@include XL;
-		}
+	&.mod-L {
+		@include L;
+	}
 
-		&.mod-XXL {
-			@include XXL;
-		}
+	&.mod-XL {
+		@include XL;
+	}
 
-		&.mod-neutralBackground {
-			@include neutralBackground;
-		}
+	&.mod-XXL {
+		@include XXL;
+	}
 
-		&:where(.mod-drawer) {
-			@include drawer;
+	&.mod-neutralBackground {
+		@include neutralBackground;
+	}
 
-			&:where(.mod-fromBottom) {
-				@include fromBottom;
-			}
+	&:where(.mod-drawer) {
+		@include drawer;
 
-			@include media.max('XXS') {
-				@include fromBottom;
-			}
+		&:where(.mod-fromBottom) {
+			@include fromBottom;
 		}
 
-		&.mod-fullScreen {
-			@include fullScreen;
+		@include media.max('XXS') {
+			@include fromBottom;
 		}
 	}
+
+	&.mod-fullScreen {
+		@include fullScreen;
+	}
 }

package/src/components/divider/index.scss

@@ -1,18 +1,14 @@
 @use 'exports' as *;
 
 .divider {
-	@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;
 	}
 }

package/src/components/dropdown/index.scss

@@ -3,24 +3,20 @@
 // .lu-dropdown-content is deprecated
 .dropdown,
 .lu-dropdown-content.lu-popover-content {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
 // .lu-dropdown-options-item-action is deprecated
 .dropdown-list-option-action,
 .lu-dropdown-options-item-action {
-	@layer mods {
-		&[disabled],
-		&.is-disabled {
-			@include disabled;
-		}
+	&[disabled],
+	&.is-disabled {
+		@include disabled;
+	}
 
-		&.mod-critical,
-		&.mod-delete {
-			@include critical;
-		}
+	&.mod-critical,
+	&.mod-delete {
+		@include critical;
 	}
 }

package/src/components/emptyState/index.scss

@@ -1,18 +1,14 @@
 @use 'exports' as *;
 
 .emptyState {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-page {
-			@include page;
-		}
+	&.mod-page {
+		@include page;
+	}
 
-		&.mod-center {
-			@include center;
-		}
+	&.mod-center {
+		@include center;
 	}
 }

package/src/components/errorPage/index.scss

@@ -2,14 +2,10 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .errorPage {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		@include media.max('S') {
-			@include compact;
-		}
+	@include media.max('S') {
+		@include compact;
 	}
 }

package/src/components/fancyBox/index.scss

@@ -2,14 +2,10 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .fancyBox {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		@include media.max('XS') {
-			@include narrow;
-		}
+	@include media.max('XS') {
+		@include narrow;
 	}
 }

package/src/components/field/index.scss

@@ -2,105 +2,91 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 .form.mod-framed {
-	@layer mods {
-		.textfield,
-		.radiosfield,
-		.checkboxesfield {
-			@include framed;
-		}
-	}
-
-	@layer mods {
-		.is-error {
-			@include fieldFramedState('error');
-			@include fieldFramedError('textfield');
-			@include fieldFramedError('radiosfield');
-			@include fieldFramedError('checkboxesfield');
-		}
-
-		.is-warning {
-			@include fieldFramedState('warning');
-		}
-
-		.is-valid,
-		.is-success {
-			@include fieldFramedState('success');
-		}
+	.textfield,
+	.radiosfield,
+	.checkboxesfield {
+		@include framed;
 	}
 }
 
 .textfield,
 .radiosfield,
 .checkboxesfield {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
 	}
 
-	@layer mods {
-		&.mod-inline {
-			@include inline;
-		}
+	&.mod-block {
+		@include block;
+	}
 
-		&.mod-block {
-			@include block;
-		}
+	&:is(.is-required, .required) {
+		@include required;
 	}
 
-	@layer mods {
-		&:is(.is-required, .required) {
-			@include required;
-		}
+	&:is(.is-loading, .loading) {
+		@include loading;
+	}
 
-		&:is(.is-loading, .loading) {
-			@include loading;
-		}
+	&:is(.is-success, .success, .is-valid, .valid) {
+		@include success;
+	}
 
-		&:is(.is-success, .success, .is-valid, .valid) {
-			@include success;
-		}
+	&:is(.is-error, .error, .is-invalid, .invalid) {
+		@include error;
+	}
+
+	&.mod-compact {
+		@include compact;
 
-		&:is(.is-error, .error, .is-invalid, .invalid) {
-			@include error;
+		&.mod-block {
+			@include compactBlock;
 		}
 	}
 
-	@layer mods {
-		&.mod-compact {
-			@include compact;
+	&.mod-framed {
+		@include framed;
 
-			&.mod-block {
-				@include compactBlock;
-			}
+		&.mod-search {
+			@include framedSearch;
 		}
-	}
 
-	@layer mods {
-		&.mod-framed {
-			@include framed;
+		&.is-error {
+			@include fieldFramedState('error');
+			@include fieldFramedError('textfield');
+			@include fieldFramedError('radiosfield');
+			@include fieldFramedError('checkboxesfield');
+		}
 
-			&.mod-search {
-				@include framedSearch;
-			}
+		&.is-warning {
+			@include fieldFramedState('warning');
 		}
-	}
 
-	@layer mods {
-		&.mod-framed {
-			&.is-error {
-				@include fieldFramedState('error');
-				@include fieldFramedError('textfield');
-				@include fieldFramedError('radiosfield');
-				@include fieldFramedError('checkboxesfield');
-			}
+		&.is-valid,
+		&.is-success {
+			@include fieldFramedState('success');
+		}
 
-			&.is-warning {
-				@include fieldFramedState('warning');
-			}
+		@at-root (namespace.$defaultAtRoot) {
+			.form.mod-framed {
+				.is-error {
+					@include fieldFramedState('error');
+					@include fieldFramedError('textfield');
+					@include fieldFramedError('radiosfield');
+					@include fieldFramedError('checkboxesfield');
+				}
+
+				.is-warning {
+					@include fieldFramedState('warning');
+				}
 
-			&.is-valid,
-			&.is-success {
-				@include fieldFramedState('success');
+				.is-valid,
+				.is-success {
+					@include fieldFramedState('success');
+				}
 			}
 		}
 	}
@@ -108,28 +94,24 @@
 	.textfield-input,
 	.radiosfield-input,
 	.checkboxesfield-input {
-		@layer mods {
-			&:is([disabled], [readonly]) {
-				@include inputDisabled;
-			}
+		&:is([disabled], [readonly]) {
+			@include inputDisabled;
+		}
 
-			&:is(.is-valid, .valid, .is-success, .success) {
-				@include inputState('success');
-			}
+		&:is(.is-valid, .valid, .is-success, .success) {
+			@include inputState('success');
+		}
 
-			&:is(.is-warning, .warning) {
-				@include inputState('warning');
-			}
+		&:is(.is-warning, .warning) {
+			@include inputState('warning');
+		}
 
-			&:is(.is-invalid, .invalid, .is-error, .error) {
-				@include inputState('error');
-			}
+		&:is(.is-invalid, .invalid, .is-error, .error) {
+			@include inputState('error');
 		}
 
-		@layer mods {
-			&.mod-row {
-				@include inputRow;
-			}
+		&.mod-row {
+			@include inputRow;
 		}
 	}
 }
@@ -137,10 +119,8 @@
 .textfield-input,
 .radiosfield-input,
 .checkboxesfield-input {
-	@layer mods {
-		&:is([required]),
-		&:is([aria-required='true']) {
-			@include required;
-		}
+	&:is([required]),
+	&:is([aria-required='true']) {
+		@include required;
 	}
 }

package/src/components/fieldset/index.scss

@@ -1,28 +1,22 @@
 @use 'exports' as *;
 
 .fieldset {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-horizontal {
-			@include horizontal;
-		}
+	&.mod-horizontal {
+		@include horizontal;
+	}
 
-		&.mod-expandable {
-			@include expandable;
-		}
+	&.mod-expandable {
+		@include expandable;
 	}
 
-	@layer mods {
-		&:has(.fieldset-title-content[aria-expanded='true']) {
-			@include expanded;
-		}
+	&:has(.fieldset-title-content[aria-expanded='true']) {
+		@include expanded;
 	}
 }

package/src/components/file/index.scss

@@ -1,52 +1,44 @@
 @use 'exports' as *;
 
 .file {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-icon {
-			@include icon;
-		}
+	&.mod-icon {
+		@include icon;
 	}
 
-	@layer mods {
-		&:is(.is-droppable, .droppable) {
-			@include legacyDroppable;
-		}
+	&:is(.is-droppable, .droppable) {
+		@include legacyDroppable;
+	}
 
-		&:is(.is_disabled, .is-disabled, .disabled) {
-			@include legacyDisabled;
-		}
+	&:is(.is_disabled, .is-disabled, .disabled) {
+		@include legacyDisabled;
 	}
 }
 
 .file-input {
-	@layer mods {
-		&:is(:disabled) {
-			@include disabled;
-		}
-
-		&:is(.is-droppable, .droppable) {
-			@include droppable;
-		}
-
-		&:is(.is-uploading, .uploading) {
-			@include uploading;
-		}
-
-		&:is(.is-uploaded, .uploaded) {
-			@include uploaded;
-		}
-
-		&:is([aria-invalid='true']) {
-			@include invalid;
-		}
+	&:is(:disabled) {
+		@include disabled;
+	}
+
+	&:is(.is-droppable, .droppable) {
+		@include droppable;
+	}
+
+	&:is(.is-uploading, .uploading) {
+		@include uploading;
+	}
+
+	&:is(.is-uploaded, .uploaded) {
+		@include uploaded;
+	}
+
+	&:is([aria-invalid='true']) {
+		@include invalid;
 	}
 }

package/src/components/fileEntry/index.scss

@@ -1,40 +1,34 @@
 @use 'exports' as *;
 
 .fileEntry {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-media {
-			@include media;
+	&.mod-media {
+		@include media;
 
-			&.mod-S {
-				@include mediaS;
-			}
+		&.mod-S {
+			@include mediaS;
 		}
 	}
 
-	@layer mods {
-		&.is-error {
-			@include error;
+	&.is-error {
+		@include error;
 
-			&.mod-S {
-				@include errorS;
-			}
+		&.mod-S {
+			@include errorS;
 		}
+	}
 
-		&.is-loading {
-			@include loading;
+	&.is-loading {
+		@include loading;
 
-			&.mod-S {
-				@include loadingS;
-			}
+		&.mod-S {
+			@include loadingS;
 		}
 	}
 }

package/src/components/fileToolbar/index.scss

@@ -1,18 +1,14 @@
 @use 'exports' as *;
 
 .fileToolbar {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-disablePositioning {
-			@include disablePositioning;
+	&.mod-disablePositioning {
+		@include disablePositioning;
 
-			&.mod-S {
-				@include disablePositioningS;
-			}
+		&.mod-S {
+			@include disablePositioningS;
 		}
 	}
 }