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

package/src/components/textfields/index.scss

@@ -1,402 +1,423 @@
 @use 'exports' as *;
 
 .textfield {
-	@include vars;
-	@include component;
-
-	.textfield-input {
-		&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
-			@include inputDisabled;
-		}
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:is(.is-open, .open) {
-		@include open;
-	}
-
-	&.mod-password {
-		@include password;
-
-		.textfield-suffix-action {
-			&:is([aria-pressed='true']) {
-				@include passwordActionPressed;
+	@layer states {
+		.textfield-input {
+			&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
+				@include inputDisabled;
 			}
+		}
 
-			&:is([aria-pressed='false']) {
-				@include passwordActionNotPressed;
-			}
+
+		&:is(.is-open, .open) {
+			@include open;
 		}
 	}
 
-	&.mod-search,
-	&.mod-autocomplete {
-		@include search;
+	@layer mods {
+		&.mod-password {
+			@include password;
 
-		&.mod-clearable {
-			@include searchClearable;
+			.textfield-suffix-action {
+				&:is([aria-pressed='true']) {
+					@include passwordActionPressed;
+				}
+
+				&:is([aria-pressed='false']) {
+					@include passwordActionNotPressed;
+				}
+			}
 		}
 
-		&.mod-S {
-			@include searchS;
+		&.mod-search,
+		&.mod-autocomplete {
+			@include search;
 
 			&.mod-clearable {
-				@include searchClearableS;
+				@include searchClearable;
 			}
-		}
 
-		&.mod-XS {
-			@include searchXS;
+			&.mod-S {
+				@include searchS;
 
-			&.mod-clearable {
-				@include searchClearableXS;
+				&.mod-clearable {
+					@include searchClearableS;
+				}
 			}
-		}
-	}
 
-	&.mod-clearable {
-		@include clearable;
+			&.mod-XS {
+				@include searchXS;
 
-		&.mod-S {
-			@include clearableS;
+				&.mod-clearable {
+					@include searchClearableXS;
+				}
+			}
 		}
 
-		&.mod-XS {
-			@include clearableXS;
-		}
-	}
+		&.mod-clearable {
+			@include clearable;
 
-	&.mod-withSuffix {
-		@include suffix;
-	}
+			&.mod-S {
+				@include clearableS;
+			}
 
-	&.mod-noLabel {
-		@include noLabel;
+			&.mod-XS {
+				@include clearableXS;
+			}
+		}
 
-		&.mod-XS {
-			@include noLabelXS;
+		&.mod-withSuffix {
+			@include suffix;
 		}
-	}
 
-	&.mod-multiline {
-		@include multiline;
+		&.mod-noLabel {
+			@include noLabel;
 
-		&.mod-S {
-			@include multilineS;
+			&.mod-XS {
+				@include noLabelXS;
+			}
 		}
-	}
 
-	&.mod-invert {
-		@include invert;
-	}
+		&.mod-multiline {
+			@include multiline;
 
-	&.mod-radio {
-		@include radio;
-	}
+			&.mod-S {
+				@include multilineS;
+			}
+		}
 
-	&.mod-filter {
-		@include filter;
+		&.mod-invert {
+			@include invert;
+		}
 
-		&:is(:hover) {
-			@include filterHover;
+		&.mod-radio {
+			@include radio;
 		}
-	}
 
-	&.mod-S {
-		@include S;
+		&.mod-filter {
+			@include filter;
 
-		&.textfield-input {
-			&.mod-icon {
-				@include inputIconS;
+			&:is(:hover) {
+				@include filterHover;
 			}
 		}
-	}
 
-	&.mod-XS {
-		@include XS;
+		&.mod-S {
+			@include S;
 
-		&.textfield-input {
-			&.mod-icon {
-				@include inputIconXS;
+			&.textfield-input {
+				&.mod-icon {
+					@include inputIconS;
+				}
 			}
 		}
-	}
-
-	&.mod-shortest {
-		@include size('shortest');
-	}
-
-	&.mod-shorter {
-		@include size('shorter');
-	}
-
-	&.mod-short {
-		@include size('short');
-	}
-
-	&.mod-default {
-		@include size('default');
-	}
-
-	&.mod-long {
-		@include size('long');
-	}
-
-	&.mod-longer {
-		@include size('longer');
-	}
 
-	&.mod-longest {
-		@include size('longest');
-	}
-
-	&.mod-compact {
-		@include compact;
+		&.mod-XS {
+			@include XS;
 
-		&.mod-multiline {
-			@include compactMultiline;
+			&.textfield-input {
+				&.mod-icon {
+					@include inputIconXS;
+				}
+			}
 		}
 
 		&.mod-shortest {
-			@include compactSize('shortest');
+			@include size('shortest');
 		}
 
 		&.mod-shorter {
-			@include compactSize('shorter');
+			@include size('shorter');
 		}
 
 		&.mod-short {
-			@include compactSize('short');
+			@include size('short');
 		}
 
 		&.mod-default {
-			@include compactSize('default');
+			@include size('default');
 		}
 
 		&.mod-long {
-			@include compactSize('long');
+			@include size('long');
 		}
 
 		&.mod-longer {
-			@include compactSize('longer');
+			@include size('longer');
 		}
 
 		&.mod-longest {
-			@include compactSize('longest');
+			@include size('longest');
 		}
-	}
 
-	&.mod-material {
-		@include material;
+		&.mod-compact {
+			@include compact;
 
-		&.mod-search {
-			&.mod-block {
-				&.mod-clearable {
-					@include materialSearchBlockClearableInput;
-				}
+			&.mod-multiline {
+				@include compactMultiline;
 			}
-		}
 
-		.textfield-input {
-			&:is(:focus, .is-focused, .focused) {
-				@include materialInputFocus;
+			&.mod-shortest {
+				@include compactSize('shortest');
 			}
 
-			&:is(.is-filled, .filled) {
-				@include materialInputFilled;
+			&.mod-shorter {
+				@include compactSize('shorter');
 			}
 
-			&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
-				@include materialInputDisabled;
+			&.mod-short {
+				@include compactSize('short');
 			}
 
-			&:is(.is-invalid, .invalid, .is-error, .error) {
-				@include materialInputState('error');
+			&.mod-default {
+				@include compactSize('default');
 			}
 
-			&:is(.is-warning, .warning) {
-				@include materialInputState('warning');
+			&.mod-long {
+				@include compactSize('long');
 			}
 
-			&:is(.is-success, .success) {
-				@include materialInputState('success');
+			&.mod-longer {
+				@include compactSize('longer');
 			}
-		}
 
-		&.mod-S {
-			@include materialS;
+			&.mod-longest {
+				@include compactSize('longest');
+			}
 		}
+	}
 
-		&.mod-withSuffix {
-			@include materialSuffix;
-		}
+	@layer mods {
+		&.mod-material {
+			@include material;
 
-		&.mod-noLabel {
-			@include materialNoLabel;
-		}
+			&.mod-search {
+				&.mod-block {
+					&.mod-clearable {
+						@include materialSearchBlockClearableInput;
+					}
+				}
+			}
 
-		&.mod-search,
-		&.mod-autocomplete {
-			@include materialSearch;
-		}
+			&.mod-S {
+				@include materialS;
+			}
 
-		&.mod-radio {
-			@include materialRadio;
-		}
+			&.mod-withSuffix {
+				@include materialSuffix;
+			}
 
-		&:is(.is-loading, .loading) {
-			@include materialLoading;
-		}
+			&.mod-noLabel {
+				@include materialNoLabel;
+			}
+
+			&.mod-search,
+			&.mod-autocomplete {
+				@include materialSearch;
+			}
 
-		&:is(.is-valid, .valid) {
-			@include materialValid;
+			&.mod-radio {
+				@include materialRadio;
+			}
 		}
 	}
-}
 
-.textfield-input {
-	&:is(:hover) {
-		@include inputHover;
-	}
+	@layer states {
+		&.mod-material {
+			.textfield-input {
+				&:is(:focus, .is-focused, .focused) {
+					@include materialInputFocus;
+				}
 
-	&:is(:focus-visible, .is-focused, .focused) {
-		@include inputFocus;
-	}
-}
+				&:is(.is-filled, .filled) {
+					@include materialInputFilled;
+				}
 
-.textfield-suffix {
-	&.mod-icon {
-		@include suffixIcon;
-	}
-}
+				&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
+					@include materialInputDisabled;
+				}
+
+				&:is(.is-invalid, .invalid, .is-error, .error) {
+					@include materialInputState('error');
+				}
 
-.textfield-options-entry {
-	&:is(:hover, .is-focus, .focus) {
-		@include entryHover;
+				&:is(.is-warning, .warning) {
+					@include materialInputState('warning');
+				}
+
+				&:is(.is-success, .success) {
+					@include materialInputState('success');
+				}
+			}
+
+			&:is(.is-loading, .loading) {
+				@include materialLoading;
+			}
+
+			&:is(.is-valid, .valid) {
+				@include materialValid;
+			}
+		}
 	}
 }
 
-.textfield.mod-framed,
-.form.mod-framed .textfield {
-	@include framed;
+@layer states {
+	.textfield-input {
+		&:is(:hover) {
+			@include inputHover;
+		}
 
-	&.mod-multiline {
-		@include framedMultiline;
+		&:is(:focus-visible, .is-focused, .focused) {
+			@include inputFocus;
+		}
+	}
 
-		&.mod-S {
-			@include framedMultilineS;
+	.textfield-options-entry {
+		&:is(:hover, .is-focus, .focus) {
+			@include entryHover;
 		}
 	}
+}
 
-	&.mod-search {
-		@include framedSearch;
+@layer mods {
+	.textfield-suffix {
+		&.mod-icon {
+			@include suffixIcon;
+		}
 	}
+}
 
-	&:is(.is-error, .error) {
-		@include framedState('error');
+@layer mods {
+	.textfield.mod-framed,
+	.form.mod-framed .textfield {
+		@include framed;
 
-		&:is(:focus-within, :hover) {
-			@include framedErrorHover;
-		}
+		&.mod-multiline {
+			@include framedMultiline;
 
-		&:is(:hover) {
-			@include framedStateHover('error');
+			&.mod-S {
+				@include framedMultilineS;
+			}
 		}
 
-		&:is(:focus-within) {
-			@include framedStateFocus('error');
+		&.mod-search {
+			@include framedSearch;
 		}
+	}
+}
 
-		.textfield-input {
-			&:hover {
-				@include framedStateInputHover('error');
+@layer states {
+	.textfield.mod-framed,
+	.form.mod-framed .textfield {
+		&:is(.is-error, .error) {
+			@include framedState('error');
+
+			&:is(:focus-within, :hover) {
+				@include framedErrorHover;
 			}
 
-			&:focus {
-				@include framedStateInputFocus('error');
+			&:is(:hover) {
+				@include framedStateHover('error');
 			}
-		}
 
-		&.mod-search,
-		&.mod-autocomplete,
-		&.mod-select {
-			@include framedStateSearch('error');
-		}
-	}
+			&:is(:focus-within) {
+				@include framedStateFocus('error');
+			}
 
-	&:is(.is-loading, .loading) {
-		@include framedLoading;
-	}
+			.textfield-input {
+				&:hover {
+					@include framedStateInputHover('error');
+				}
 
-	&:is(.is-warning, .warning) {
-		@include framedState('warning');
+				&:focus {
+					@include framedStateInputFocus('error');
+				}
+			}
 
-		&:is(:hover) {
-			@include framedStateHover('warning');
+			&.mod-search,
+			&.mod-autocomplete,
+			&.mod-select {
+				@include framedStateSearch('error');
+			}
 		}
 
-		&:is(:focus-within) {
-			@include framedStateFocus('warning');
+		&:is(.is-loading, .loading) {
+			@include framedLoading;
 		}
 
-		.textfield-input {
-			&:hover {
-				@include framedStateInputHover('warning');
+		&:is(.is-warning, .warning) {
+			@include framedState('warning');
+
+			&:is(:hover) {
+				@include framedStateHover('warning');
 			}
 
-			&:focus {
-				@include framedStateInputFocus('warning');
+			&:is(:focus-within) {
+				@include framedStateFocus('warning');
 			}
-		}
 
-		&.mod-search,
-		&.mod-autocomplete,
-		&.mod-select {
-			@include framedStateSearch('warning');
-		}
-	}
+			.textfield-input {
+				&:hover {
+					@include framedStateInputHover('warning');
+				}
 
-	&:is(.is-success, .is-valid, .valid, .success) {
-		@include framedState('success');
+				&:focus {
+					@include framedStateInputFocus('warning');
+				}
+			}
 
-		&:is(:hover) {
-			@include framedStateHover('success');
+			&.mod-search,
+			&.mod-autocomplete,
+			&.mod-select {
+				@include framedStateSearch('warning');
+			}
 		}
 
-		&:is(:focus-within) {
-			@include framedStateFocus('success');
-		}
+		&:is(.is-success, .is-valid, .valid, .success) {
+			@include framedState('success');
 
-		.textfield-input {
-			&:hover {
-				@include framedStateInputHover('success');
+			&:is(:hover) {
+				@include framedStateHover('success');
 			}
 
-			&:focus {
-				@include framedStateInputFocus('success');
+			&:is(:focus-within) {
+				@include framedStateFocus('success');
 			}
-		}
 
-		&.mod-search,
-		&.mod-autocomplete,
-		&.mod-select {
-			@include framedStateSearch('success');
-		}
-	}
+			.textfield-input {
+				&:hover {
+					@include framedStateInputHover('success');
+				}
 
-	.textfield-input {
-		&:is(:hover) {
-			@include framedInputHover;
-		}
+				&:focus {
+					@include framedStateInputFocus('success');
+				}
+			}
 
-		&:is(:focus) {
-			@include framedInputFocus;
+			&.mod-search,
+			&.mod-autocomplete,
+			&.mod-select {
+				@include framedStateSearch('success');
+			}
 		}
 
-		&:is(:invalid, .is-invalid, .invalid) {
-			@include framedInputInvalid;
-		}
+		.textfield-input {
+			&:is(:hover) {
+				@include framedInputHover;
+			}
 
-		&:is(.is-error, .invalid) {
+			&:is(:focus) {
+				@include framedInputFocus;
+			}
+
+			&:is(:invalid, .is-invalid, .invalid) {
+				@include framedInputInvalid;
+			}
 		}
 	}
 }