@lucca-front/scss 16.2.7-rc.2 → 16.3.0-rc.1

package/src/components/textfield/mods.scss

@@ -1,628 +1,70 @@
-@use '@lucca-front/scss/src/commons/utils/form';
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin password {
-	.textfield-suffix {
-		pointer-events: auto;
-	}
-
-	.textfield-input {
-		padding-right: var(--spacings-XL) !important;
-
-		&::-ms-reveal {
-			display: none;
-		}
-	}
-
-	.textfield-suffix-action {
-		text-decoration: none;
-		color: currentColor;
-		display: block;
-	}
-}
-
-@mixin clearable {
-	.textfield-input {
-		padding-right: 2rem;
-	}
-
-	.textfield-clear {
-		position: absolute;
-		bottom: .75rem;
-		right: var(--spacings-XS);
-	}
-
-	.textfield-actionClear { // deprecated
-		text-align: center;
-		position: absolute;
-		bottom: .75rem;
-		right: var(--spacings-XS);
-		width: 1rem;
-		height: 1rem;
-		padding: 0;
-		line-height: 0;
-		background-color: var(--palettes-grey-700);
-		border-radius: 50%;
-
-		.lucca-icon {
-			font-size: var(--sizes-XS-lineHeight);
-			color: white;
-		}
-
-		&:hover {
-			background-color: var(--palettes-grey-600) !important;
-		}
-	}
-}
-
-@mixin clearableS {
-	.textfield-clear {
-		bottom: var(--spacings-XXS);
-		right: var(--spacings-XXS);
-	}
-
-	.textfield-actionClear { // deprecated
-		bottom: var(--spacings-XXS);
-		right: var(--spacings-XXS);
-	}
-}
-
-@mixin clearableXS {
-	.textfield-clear {
-		bottom: var(--spacings-XXS);
-		right: var(--spacings-XXS);
-	}
-
-	.textfield-actionClear { // deprecated
-		bottom: var(--spacings-XXS);
-		right: var(--spacings-XXS);
-		height: 1rem;
-		width: 1rem;
-
-		.lucca-icon {
-			font-size: 1rem;
-		}
-	}
-}
-
-@mixin suffix {
-	.textfield-input {
-		padding-right: var(--components-textfield-suffix-padding-right);
-	}
-}
-
-@mixin noLabel {
-	.textfield-suffix {
-		top: var(--components-textfield-input-padding-vertical);
-	}
-}
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/clear/exports' as clear;
 
 @mixin S {
-	.textfield-label {
-		line-height: var(--sizes-S-lineHeight);
-		font-size: var(--sizes-S-fontSize);
-	}
+  --component-textField-label-fontSize: var(--sizes-S-fontSize);
+  --component-textField-label-lineHeight: var(--sizes-S-lineHeight);
+  --component-textField-input-paddingVertical: var(--spacings-XXS);
+  --component-textField-input-lineHeight: var(--sizes-M-lineHeight);
+  --component-textField-action-icon-fontSize: var(--sizes-XS-lineHeight);
+  --component-textField-action-icon-size: var(--spacings-M);
+  --component-textField-input-lines: 3;
 
-	.textfield-input {
-		line-height: var(--sizes-S-lineHeight);
-		font-size: var(--sizes-S-fontSize);
-		padding: .375rem;
+	.formLabel {
+		@include formLabel.S;
 	}
 
-	.textfield-suffix {
-		line-height: calc(var(--sizes-S-fontSize) * 1.25);
-		font-size: var(--sizes-S-fontSize);
-
-		.lucca-icon {
-			font-size: calc(var(--sizes-S-fontSize) * 1.25);
-		}
-	}
+  .clear {
+    @include clear.S;
+  }
 }
 
 @mixin XS {
-	.textfield-label {
-		line-height: var(--sizes-XS-lineHeight);
-		font-size: var(--sizes-XS-fontSize);
-	}
-
-	.textfield-input {
-		line-height: var(--sizes-XS-lineHeight);
-		font-size: var(--sizes-XS-fontSize);
-		padding: var(--spacings-XXS);
-	}
-
-	.textfield-suffix {
-		line-height: calc(var(--sizes-XS-fontSize) * 1.25);
-		font-size: var(--sizes-XS-fontSize);
-		top: calc(var(--components-textfield-suffix-top) + var(--spacings-XXS));
-
-		.lucca-icon {
-			font-size: calc(var(--sizes-XS-fontSize) * 1.25);
-		}
-	}
-
-	.textfield-messages {
-		font-size: var(--sizes-XS-fontSize);
-		line-height: var(--sizes-XS-lineHeight);
-
-		.lucca-icon {
-			font-size: .75rem;
-			line-height: var(--sizes-XS-lineHeight);
-		}
-	}
-}
-
-@mixin noLabelXS {
-	.textfield-suffix {
-		top: var(--spacings-XXS);
-	}
-}
-
-@mixin SInputIcon {
-	line-height: var(--sizes-XS-lineHeight);
-	font-size: var(--sizes-S-fontSize);
-}
-
-@mixin XSInputIcon {
-	line-height: var(--sizes-XS-lineHeight);
-	font-size: var(--sizes-S-fontSize);
-}
-
-@mixin size($size) {
-	width: var(--components-textfield-sizes-#{$size});
-}
-
-@mixin multiline {
-	.textfield-input {
-		line-height: var(--sizes-M-lineHeight);
-		font-size: var(--sizes-M-fontSize);
-		resize: vertical;
-		height: 5rem;
-	}
-}
-
-@mixin multilineS {
-	.textfield-input {
-		line-height: var(--sizes-XS-lineHeight);
-		font-size: var(--sizes-S-fontSize);
-		height: 4rem;
-	}
-}
-
-@mixin invert {
-	.textfield-label {
-		color: var(--colors-white-color);
-	}
-}
-
-@mixin materialSearchBlockClearableInput {
-	.textfield-input {
-		padding-right: 3.75rem;
-	}
-
-	.textfield-clear {
-		right: 2rem;
-	}
-
-	.textfield-actionClear { // deprecated
-		right: 2rem;
-	}
-}
-
-@mixin search {
-	&::after {
-		@include icon.generate('search');
-
-		color: var(--palettes-grey-600);
-		position: absolute;
-		pointer-events: none;
-		bottom: var(--spacings-XS);
-		font-size: var(--sizes-M-lineHeight);
-		line-height: var(--sizes-M-lineHeight);
-		right: var(--spacings-XS);
-	}
-
-	.textfield-input {
-		padding-right: var(--spacings-L);
-
-		&[type='search']:is(:hover, :focus) {
-			&::-webkit-search-cancel-button {
-				display: none;
-			}
-		}
-	}
-}
-
-@mixin searchClearable {
-	.textfield-input {
-		padding-right: 4rem;
-	}
-
-	.textfield-clear {
-		right: 2.5rem;
-	}
-
-	.textfield-actionClear { // deprecated
-		right: 2.5rem;
-	}
-}
-
-@mixin searchS {
-	&::after {
-		line-height: var(--sizes-S-lineHeight);
-		font-size: var(--sizes-S-lineHeight);
-		bottom: .375rem;
-		right: .375rem;
-	}
-}
-
-@mixin searchClearableS {
-	.textfield-input {
-		padding-right: 3.5rem;
-	}
-
-	.textfield-clear {
-		--components-clear-size: .75rem;
-		--components-clear-icon-size: .75rem;
-
-		right: 2.125rem;
-		bottom: .625rem;
-	}
-
-	.textfield-actionClear { // deprecated
-		right: 2.125rem;
-		bottom: .625rem;
-		width: .75rem;
-		height: .75rem;
-
-		.lucca-icon {
-			font-size: .75rem;
-		}
-	}
-}
-
-@mixin searchXS {
-	&::after {
-		line-height: var(--sizes-XS-lineHeight);
-		font-size: var(--sizes-XS-lineHeight);
-		bottom: var(--spacings-XXS);
-		right: var(--spacings-XXS);
-	}
-}
-
-@mixin searchClearableXS {
-	.textfield-input {
-		padding-right: 3rem;
-	}
-
-	.textfield-clear {
-		--components-clear-size: .75rem;
-		--components-clear-icon-size: .75rem;
-
-		right: 1.75rem;
-		bottom: .375rem;
-	}
-
-	.textfield-actionClear { // deprecated
-		right: 1.75rem;
-		bottom: .375rem;
-		width: .75rem;
-		height: .75rem;
-
-		.lucca-icon {
-			font-size: .75rem;
-		}
-	}
-}
-
-@mixin radio {
-	display: inline-block;
-	margin-left: var(--spacings-XXS);
-
-	.textfield-input {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-}
-
-@mixin filter {
-	width: var(--components-textfield-filter-width);
-	height: var(--components-filters-height);
-	border-right-color: var(--commons-divider-color);
-	border-right-width: 1px;
-	border-right-style: solid;
-	transition-duration: var(--commons-animations-durations-standard);
-	transition-property: background-color;
-	display: block;
-	position: relative;
-
-	.textfield-label {
-		color: var(--palettes-grey-600);
-		left: var(--spacings-S);
-		font-size: var(--sizes-S-fontSize);
-		font-weight: 400;
-		line-height: var(--sizes-S-lineHeight);
-		pointer-events: none;
-		position: absolute;
-		top: var(--spacings-XS);
-	}
-
-	.textfield-input {
-		background-color: transparent;
-		padding: var(--spacings-S) 2.5rem 0 var(--spacings-S);
-		// todo: déplacer dans filters ?
-		height: var(--components-filters-height);
-		border-radius: 0;
-		box-shadow: none;
-
-		&::after {
-			bottom: var(--spacings-XS);
-			color: var(--palettes-grey-600);
-			font-weight: 400;
-		}
-	}
-}
-
-@mixin suffixIcon {
-	color: var(--palettes-grey-600);
-	line-height: var(--sizes-M-lineHeight);
-}
-
-@mixin compact {
-	.textfield-options {
-		width: calc(100% - var(--components-textfield-compact-label-right-margin) - var(--components-textfield-compact-label-sizes-default));
-		left: auto;
-		right: 0;
-	}
-
-	.textfield-suffix {
-		top: var(--components-textfield-compact-padding);
-		right: var(--components-textfield-compact-padding);
-	}
-}
-
-@mixin compactMultiline {
-	align-items: flex-start;
-}
-
-@mixin compactSize($size) {
-	width: calc(
-		var(--components-textfield-sizes-#{$size}) + var(--components-textfield-compact-label-right-margin) +
-			var(--components-textfield-compact-label-sizes-default)
-	);
-
-	.textfield-options {
-		// width: $input-width; // todo: récupérer la bonne taille
-		outline: 2px dashed greenyellow !important;
-	}
-}
-
-@mixin framed {
-	width: 100%;
-	margin-bottom: 0 !important;
-
-	.textfield.mod-search {
-		@include framedSearch;
-	}
-
-	.textfield-options {
-		width: auto;
-		margin-top: -2px;
-		right: 1px;
-
-		mark {
-			background-color: transparent;
-			text-decoration: underline;
-			color: inherit;
-		}
-	}
-
-	.textfield-input {
-		width: 100%;
-		border-radius: 0;
-		box-shadow: form.fakeBorderOverlay(var(--components-field-framed-border));
-		padding: var(--components-field-framed-top-padding) var(--components-field-framed-side-padding)
-			var(--components-field-framed-bottom-padding);
-		line-height: var(--sizes-M-lineHeight);
-		outline: none;
-
-		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
-			background-color: var(--colors-white-color);
-		}
-	}
-
-	.textfield-label {
-		padding: var(--components-field-framed-label-top-offset) var(--components-field-framed-side-padding);
-		position: absolute;
-		pointer-events: none;
-		left: 0;
-		top: 0;
-		z-index: 10;
-		line-height: var(--sizes-M-lineHeight);
-		font-size: var(--sizes-S-fontSize);
-		color: var(--palettes-grey-600);
-	}
-
-	.textfield-messages,
-	.radiosfield-messages,
-	.checkboxesfield-messages {
-		transition-duration: var(--commons-animations-durations-standard);
-		transition-property: transform;
-		position: absolute;
-		text-align: center;
-		bottom: 0;
-		left: -1px;
-		right: 0;
-		transform: translateY(0);
-		z-index: 4;
-
-		> * {
-			display: block;
-		}
-	}
-
-	.textfield-messages-error,
-	.radiosfield-messages-error,
-	.checkboxesfield-messages-error {
-		background-color: var(--palettes-error-700);
-		color: var(--colors-white-color);
-	}
-
-	.textfield-messages-warning,
-	.radiosfield-messages-warning,
-	.checkboxesfield-messages-warning {
-		background-color: var(--palettes-warning-700);
-		color: var(--colors-white-color);
-	}
-
-	.textfield-messages-valid,
-	.radiosfield-messages-valid,
-	.checkboxesfield-messages-valid,
-	.textfield-messages-success,
-	.radiosfield-messages-success,
-	.checkboxesfield-messages-success {
-		background-color: var(--palettes-success-700);
-		color: var(--colors-white-color);
-	}
-
-	.textfield-messages-helper,
-	.radiosfield-messages-helper,
-	.checkboxesfield-messages-helper {
-		background-color: var(--palettes-grey-500);
-		color: var(--colors-white-color);
-	}
-}
-
-@mixin framedMultiline {
-	.textfield-input {
-		height: var(--components-field-framed-textarea-height);
-		min-height: var(--components-field-framed-textarea-min-height);
-		max-height: var(--components-field-framed-textarea-max-height);
-	}
-}
-
-@mixin framedMultilineS {
-	.textfield-input {
-		height: auto;
-	}
-}
-
-@mixin framedSearch {
-	&::after {
-		color: var(--palettes-grey-600);
-		padding: var(--components-field-framed-side-padding);
-		bottom: 0;
-		right: 0;
-		z-index: 4;
-	}
-
-	.textfield {
-		width: 100%;
-	}
-
-	.textfield-input {
-		padding-right: var(--components-field-framed-suffix-padding-right);
-	}
-}
-
-@mixin material {
-	padding-top: var(--components-textfield-material-padding-top);
-	vertical-align: baseline;
-
-	.textfield-input {
-		box-shadow: 0 1px 0 0 var(--components-textfield-material-border-color);
-		background-color: transparent;
-		border-radius: 0;
-		padding-left: 0;
-		padding-right: 0;
-
-		&::placeholder {
-			opacity: 0;
-			color: var(--palettes-grey-400);
-		}
-	}
-
-	.textfield-label {
-		color: var(--components-textfield-material-label-color);
-		font-size: var(--components-textfield-material-label-font-size);
-		position: absolute;
-		pointer-events: none;
-		font-weight: 400;
-		line-height: var(--sizes-M-lineHeight);
-		width: 100%;
-		top: var(--spacings-M);
-		left: 0;
-	}
-
-	.textfield-suffix {
-		top: calc(var(--components-textfield-material-padding-top) + var(--components-textfield-input-padding-vertical));
-		position: absolute;
-		right: 0;
-	}
-}
-
-@mixin materialS {
-	.textfield-label {
-		line-height: var(--sizes-S-lineHeight);
-		font-size: var(--sizes-S-fontSize);
-	}
-}
-
-@mixin materialSuffix {
-	.textfield-input {
-		padding-right: var(--components-textfield-material-suffix-padding-right);
-	}
-}
-
-@mixin materialNoLabel {
-	padding-top: 0;
-
-	.textfield-input {
-		&::placeholder {
-			opacity: 1;
-		}
-	}
-
-	.textfield-label {
-		display: none;
-	}
-
-	.textfield-suffix {
-		top: var(--components-textfield-input-padding-vertical);
-	}
-}
-
-@mixin materialSearch {
-	&::after {
-		color: var(--palettes-grey-500);
-		bottom: var(--spacings-XS);
-		right: 0;
-	}
-
-	.textfield-input {
-		padding-right: 1.75rem;
-	}
-
-	.textfield-label {
-		padding-right: 0;
-	}
-}
-
-@mixin materialRadio {
-	padding-top: 0;
-}
-
-@mixin materialValid {
-	&::before {
-		bottom: 0.7rem !important;
-		right: 0 !important;
-	}
-
-	.textfield-label {
-		padding-right: var(--spacings-M);
-	}
-
-	.textfield-input {
-		padding-right: var(--spacings-M);
-	}
+	--component-textField-label-fontSize: var(--sizes-XS-fontSize);
+	--component-textField-label-lineHeight: var(--sizes-XS-lineHeight);
+	--component-textField-input-paddingVertical: var(--spacings-XXS);
+	--component-textField-input-lineHeight: var(--sizes-XS-lineHeight);
+	--component-textField-action-icon-fontSize: .75rem;
+	--component-textField-action-icon-size: var(--spacings-M);
+	--component-textField-input-lines: 2;
+
+	.formLabel {
+		@include formLabel.XS;
+	}
+
+	.inlineMessage {
+		@include inlineMessage.S;
+	}
+
+  .clear {
+    @include clear.S;
+  }
+}
+
+@mixin textarea {
+  resize: vertical;
+  height: calc(var(--component-textField-input-lineHeight) * var(--component-textField-input-lines));
+  min-height: calc(var(--component-textField-input-lineHeight) * var(--component-textField-input-lines));
+  max-height: calc(100vh - var(--spacings-XXL));
+
+  .textField[style*="--component-textField-action-width"] &,
+  .textField[style*="--component-textField-label-suffix-width"] & {
+    grid-column-end: -1;
+    padding-right: calc(var(--component-textField-action-width, 0px) + var(--component-textField-label-suffix-width, 0px) + var(--spacings-XS));
+
+    ~ .textField-action {
+      position: relative;
+      z-index: 1;
+    }
+
+    ~ .textField-label {
+      .textField-label-suffix {
+        .textField-label-suffix-item {
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+  }
 }