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

package/src/components/textfields/index.scss

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