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

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;
 	}
 }

package/src/components/filterPill/index.scss

@@ -1,39 +1,55 @@
 @use 'exports' as *;
 
 .filterPill {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&:not(.is-filled) {
+		@include notFilled;
 	}
 
-	@layer states {
-		&:not(.is-filled) {
-			@include notFilled;
-		}
+	&:hover {
+		@include hover;
+	}
+
+	&:active,
+	&:has(:active) {
+		@include active;
+	}
+
+	&.is-comboboxHidden {
+		@include comboboxHidden;
+	}
+
+	&:has(.filterPill-combobox:focus-visible) {
+		@include focusVisible;
+	}
+
+	&:has(.filterPill-combobox[aria-expanded='true']) {
+		@include opened;
+	}
+
+	&.is-filled {
+		@include filled;
 
 		&:hover {
-			@include hover;
+			@include filledHover;
 		}
 
-		&:active,
-		&:has(:active) {
-			@include active;
+		&:has(.filterPill-combobox:active) {
+			@include filledActive;
 		}
+	}
 
-		&.is-comboboxHidden {
-			@include comboboxHidden;
-		}
+	&.mod-checkbox {
+		@include checkbox;
 
-		&:has(.filterPill-combobox:focus-visible) {
+		&:has(.filterPill-checkbox-input:focus-visible) {
 			@include focusVisible;
 		}
 
-		&:has(.filterPill-combobox[aria-expanded='true']) {
-			@include opened;
-		}
-
-		&.is-filled {
-			@include filled;
+		&:has(.filterPill-checkbox-input:checked) {
+			@include checkboxChecked;
 
 			&:hover {
 				@include filledHover;
@@ -43,49 +59,25 @@
 				@include filledActive;
 			}
 		}
-	}
 
-	@layer mods {
-		&.mod-checkbox {
-			@include checkbox;
-
-			&:has(.filterPill-checkbox-input:focus-visible) {
-				@include focusVisible;
-			}
+		&:has(.filterPill-checkbox-input:disabled) {
+			@include checkboxDisabled;
 
 			&:has(.filterPill-checkbox-input:checked) {
-				@include checkboxChecked;
-
-				&:hover {
-					@include filledHover;
-				}
-
-				&:has(.filterPill-combobox:active) {
-					@include filledActive;
-				}
-			}
-
-			&:has(.filterPill-checkbox-input:disabled) {
-				@include checkboxDisabled;
-
-				&:has(.filterPill-checkbox-input:checked) {
-					@include checkboxCheckedDisabled;
-				}
+				@include checkboxCheckedDisabled;
 			}
 		}
+	}
 
-		&.mod-button {
-			@include button;
-		}
+	&.mod-button {
+		@include button;
 	}
 
-	@layer states {
-		&:has(.filterPill-combobox:disabled) {
-			@include disabled;
-		}
+	&:has(.filterPill-combobox:disabled) {
+		@include disabled;
+	}
 
-		&.is-hidden {
-			@include hidden;
-		}
+	&.is-hidden {
+		@include hidden;
 	}
 }

package/src/components/filters/index.scss

@@ -1,23 +1,17 @@
 @use 'exports' as *;
 
 .filters {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-sticky {
-			@include sticky;
-		}
+	&.mod-sticky {
+		@include sticky;
 	}
 }
 
-@layer mods {
-	.navSide ~ .main-content,
-	.mod-withMenu .main-content {
-		.filters.mod-sticky {
-			@include stickyNavSide;
-		}
+.navSide ~ .main-content,
+.mod-withMenu .main-content {
+	.filters.mod-sticky {
+		@include stickyNavSide;
 	}
 }

package/src/components/footer/index.scss

@@ -2,57 +2,53 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .footer {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-sticky {
+		@include sticky;
 	}
 
-	@layer mods {
-		&.mod-sticky {
-			@include sticky;
-		}
+	&.mod-narrow {
+		@include narrow;
+	}
 
-		&.mod-narrow {
+	// default mod
+	&:not([class*='mod-narrow']),
+	&.mod-narrowAtMediaMaxXXS {
+		@include media.max('XXS') {
 			@include narrow;
 		}
+	}
 
-		// default mod
-		&:not([class*='mod-narrow']),
-		&.mod-narrowAtMediaMaxXXS {
-			@include media.max('XXS') {
-				@include narrow;
-			}
-		}
-
-		&.mod-narrowAtMediaMaxXS {
-			@include media.max('XS') {
-				@include narrow;
-			}
+	&.mod-narrowAtMediaMaxXS {
+		@include media.max('XS') {
+			@include narrow;
 		}
+	}
 
-		&.mod-narrowAtMediaMaxS {
-			@include media.max('S') {
-				@include narrow;
-			}
+	&.mod-narrowAtMediaMaxS {
+		@include media.max('S') {
+			@include narrow;
 		}
+	}
 
-		&.mod-narrowAtMediaMaxM {
-			@include media.max('M') {
-				@include narrow;
-			}
+	&.mod-narrowAtMediaMaxM {
+		@include media.max('M') {
+			@include narrow;
 		}
+	}
 
-		@include media.min('S') {
-			@include wide;
-		}
+	@include media.min('S') {
+		@include wide;
+	}
 
-		.dialog &,
-		.lu-modal-panel & {
-			@include insideDialog;
-		}
+	.dialog &,
+	.lu-modal-panel & {
+		@include insideDialog;
+	}
 
-		&:has(.footer-containerOptional) {
-			@include withContainer;
-		}
+	&:has(.footer-containerOptional) {
+		@include withContainer;
 	}
 }