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

package/src/components/field/index.scss

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

package/src/components/fieldset/index.scss

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

package/src/components/file/index.scss

@@ -1,44 +1,52 @@
 @use 'exports' as *;
 
 .file {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-icon {
-		@include icon;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&:is(.is-droppable, .droppable) {
-		@include legacyDroppable;
+		&.mod-icon {
+			@include icon;
+		}
 	}
 
-	&:is(.is_disabled, .is-disabled, .disabled) {
-		@include legacyDisabled;
+	@layer states {
+		&:is(.is-droppable, .droppable) {
+			@include legacyDroppable;
+		}
+
+		&:is(.is_disabled, .is-disabled, .disabled) {
+			@include legacyDisabled;
+		}
 	}
 }
 
 .file-input {
-	&: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;
+	@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;
+		}
 	}
 }

package/src/components/fileEntry/index.scss

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

package/src/components/fileToolbar/index.scss

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

package/src/components/fileUpload/index.scss

@@ -1,50 +1,56 @@
 @use 'exports' as *;
 
 .fileUpload {
-	@include vars;
-	@include component;
-
-	&:hover {
-		@include hover;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-dropzone {
-		@include dropzone;
-	}
+	@layer mods {
+		&.mod-dropzone {
+			@include dropzone;
+		}
 
-	&.mod-structure {
-		@include structure;
-	}
+		&.mod-structure {
+			@include structure;
+		}
 
-	&.mod-S {
-		@include S;
+		&.mod-S {
+			@include S;
 
-		&.is-loading {
-			@include loadingS;
+			&.is-loading {
+				@include loadingS;
+			}
 		}
 	}
 
-	&.is-loading {
-		@include loading;
-	}
+	@layer states {
+		&:hover {
+			@include hover;
+		}
 
-	&.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;
+
+			&:hover {
+				@include errorHover;
+			}
 		}
-	}
 
-	&.is-droppable {
-		@include droppable;
+		&.is-droppable {
+			@include droppable;
+		}
 	}
 }

package/src/components/filterBar/index.scss

@@ -2,22 +2,26 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .filterBar {
-	@include vars;
-	@include component;
-
-	@include media.max(XXS) {
-		@include compact;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	@include media.min(XXS) {
-		@include notCompact;
-	}
+	@layer mods {
+		@include media.max(XXS) {
+			@include compact;
+		}
 
-	@include media.pointer(coarse) {
-		@include touch;
-	}
+		@include media.min(XXS) {
+			@include notCompact;
+		}
+
+		@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,10 +1,14 @@
 @use 'exports' as *;
 
 .filterBarDeprecated {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-neutral {
-		@include neutral;
+	@layer mods {
+		&.mod-neutral {
+			@include neutral;
+		}
 	}
 }