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

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 states {
-		.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 states {
-		&: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 states {
-		&.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 states {
-			&: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 states {
-		&: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 states {
-		&: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 states {
-		&: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 states {
-		&: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 states {
-		&.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;
 		}
 	}
 }

package/src/components/fileUpload/index.scss

@@ -1,56 +1,50 @@
 @use 'exports' as *;
 
 .fileUpload {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-dropzone {
-			@include dropzone;
-		}
+	@include vars;
+	@include component;
 
-		&.mod-structure {
-			@include structure;
-		}
+	&:hover {
+		@include hover;
+	}
 
-		&.mod-S {
-			@include S;
+	&.mod-dropzone {
+		@include dropzone;
+	}
 
-			&.is-loading {
-				@include loadingS;
-			}
-		}
+	&.mod-structure {
+		@include structure;
 	}
 
-	@layer states {
-		&:hover {
-			@include hover;
-		}
+	&.mod-S {
+		@include S;
 
 		&.is-loading {
-			@include loading;
+			@include loadingS;
 		}
+	}
 
-		&.is-hidden {
-			@include hidden;
-		}
+	&.is-loading {
+		@include loading;
+	}
 
-		&.is-success {
-			@include success;
-		}
+	&.is-hidden {
+		@include hidden;
+	}
 
-		&.is-error {
-			@include error;
+	&.is-success {
+		@include success;
+	}
 
-			&:hover {
-				@include errorHover;
-			}
-		}
+	&.is-error {
+		@include error;
 
-		&.is-droppable {
-			@include droppable;
+		&:hover {
+			@include errorHover;
 		}
 	}
+
+	&.is-droppable {
+		@include droppable;
+	}
 }

package/src/components/filterBar/index.scss

@@ -2,26 +2,22 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .filterBar {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		@include media.max(XXS) {
-			@include compact;
-		}
+	@include media.max(XXS) {
+		@include compact;
+	}
 
-		@include media.min(XXS) {
-			@include notCompact;
-		}
+	@include media.min(XXS) {
+		@include notCompact;
+	}
 
-		@include media.pointer(coarse) {
-			@include touch;
-		}
+	@include media.pointer(coarse) {
+		@include touch;
+	}
 
-		@include media.pointer(coarse, $reversed: true) {
-			@include notTouch;
-		}
+	@include media.pointer(coarse, $reversed: true) {
+		@include notTouch;
 	}
 }

package/src/components/filterBarDeprecated/index.scss

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