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

package/src/components/textfield/states.scss

@@ -1,229 +1,81 @@
-@use '@lucca-front/scss/src/commons/utils/form';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin inputHover {
-	box-shadow: 0 0 0 1px var(--palettes-grey-400);
-}
-
-@mixin inputFocus {
-	@include a11y.focusVisible($offset: 3px);
-}
-
-@mixin inputDisabled {
-	background-color: var(--components-textfield-disabled-background);
-	color: var(--components-textfield-disabled-color);
-	box-shadow: 0 0 0 1px var(--palettes-grey-300);
-	cursor: default;
-
-	&::placeholder {
-		color: var(--commons-disabled-placeholder);
-	}
-
-	~ .textfield-clear {
-		color: var(--palettes-grey-500) !important;
-		pointer-events: none;
-	}
-
-	~ .textfield-actionClear { // deprecated
-		color: var(--palettes-grey-500) !important;
-		pointer-events: none;
-	}
-}
-
-@mixin filterHover {
-	background-color: var(--palettes-grey-50);
-}
-
-@mixin open {
-	z-index: 999 !important;
-
-	.textfield-options {
-		opacity: 1;
-		transform: scaleY(1);
-	}
-}
-
-@mixin framedInputHover {
-	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
-		position: relative;
-		z-index: 1;
-		background-color: var(--colors-white-color);
-		box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color));
-	}
-}
-
-@mixin framedInputFocus {
-	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
-		position: relative;
-		z-index: 4;
-		background-color: var(--colors-white-color);
-		box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color)), 0 0 0 4px var(--components-field-framed-color50);
-	}
-}
-
-@mixin framedInputInvalid {
-	~ .textfield-label {
-		color: var(--palettes-error-700);
-	}
-}
-
-@mixin framedState($state) {
-	@if $state == 'error' {
-		z-index: 3;
-		box-shadow: form.fakeBorderOverlay(var(--palettes-error-700));
-		background-color: var(--palettes-error-50);
-	}
-
-	// todo: déplacer dans field
-	.radiosfield-label,
-	.checkboxesfield-label,
-	.textfield-label {
-		color: var(--palettes-#{$state}-700);
-	}
-
-	.textfield-input {
-		&::placeholder {
-			color: var(--palettes-#{$state}-300);
-		}
-
-		@if $state == 'error' {
-			background-color: var(--palettes-error-50) !important;
-			box-shadow: form.fakeBorderOverlay(var(--palettes-error-700)) !important;
-		}
-	}
-}
-
-@mixin framedLoading {
-	&::before,
-	&::after {
-		right: var(--components-field-framed-side-padding) !important;
-		top: var(--components-field-framed-side-padding) !important;
-		bottom: auto !important;
-	}
-}
-
-@mixin framedStateInputHover($state) {
-	background-color: var(--palettes-#{$state}-50) !important;
-
-	@if $state == 'error' {
-		background-color: var(--palettes-#{$state}-100) !important;
-	}
-}
-
-@mixin framedStateInputFocus($state) {
-	background-color: var(--colors-white-color) !important;
-	box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
-
-	@if $state == 'error' {
-		box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50) !important;
-		background-color: var(--colors-white-color) !important;
-	}
-}
-
-@mixin framedErrorHover {
-	z-index: 4;
-}
-
-@mixin framedStateSearch($state) {
-	&::after {
-		color: var(--palettes-#{$state}-700);
-	}
-}
-
-@mixin framedStateHover($state) {
-	background-color: var(--palettes-#{$state}-50);
-
-	// todo: déplacer dans field
-	.textfield-messages,
-	.radiosfield-messages,
-	.checkboxesfield-messages {
-		transform: translateY(100%);
-	}
-}
-
-@mixin framedStateFocus($state) {
-	background-color: var(--colors-white-color);
-	box-shadow: form.fakeBorderOverlay(var(--palettes-#{$state}-700)), 0 0 0 4px var(--palettes-#{$state}-50);
-
-	// todo: déplacer dans field
-	.textfield-messages,
-	.radiosfield-messages,
-	.checkboxesfield-messages {
-		transform: translateY(100%);
-	}
-}
-
-@mixin passwordActionPressed {
-	.icon-watch {
-		display: none;
-	}
-}
-
-@mixin passwordActionNotPressed {
-	.icon-unwatch {
-		display: none;
-	}
-}
-
-@mixin materialInputFocus {
-	outline: none;
-
-	&::placeholder {
-		opacity: 1;
-	}
-
-	.textfield-label,
-	~ .textfield-label {
-		font-size: var(--sizes-S-fontSize);
-		color: var(--palettes-700, var(--components-textfield-material-default-palette-color));
-		top: 0;
-	}
-}
-
-@mixin materialLoading {
-	&::before,
-	&::after {
-		bottom: 0.4rem !important;
-		right: 0 !important;
-	}
-}
-
-@mixin materialInputFilled {
-	~ .textfield-label {
-		font-size: var(--sizes-S-fontSize);
-		top: 0;
-	}
-}
-
-@mixin materialInputDisabled {
-	background-image: linear-gradient(to right, var(--components-textfield-material-border-color) 33%, rgba(255, 255, 255, 0) 0%);
-	background-size: 3px 1px;
-	background-color: transparent;
-	background-position: bottom;
-	background-repeat: repeat-x;
-	box-shadow: none;
-}
-
-@mixin materialInputState($state) {
-	@if $state == 'error' {
-		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
-	}
-
-	&:focus {
-		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
-	}
-
-	~ .textfield-label {
-		color: var(--palettes-#{$state}-700);
-	}
-
-	&:focus {
-		~ .textfield-label {
-			color: var(--palettes-#{$state}-700);
-		}
-	}
-}
-
-@mixin entryHover {
-	background-color: var(--palettes-primary-50);
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+// @use '@lucca-front/icons/src/commons/utils/icon';
+// @use '@lucca-front/scss/src/commons/utils/form';
+// @use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin invalid {
+  --component-textField-input-placeholder: var(--palettes-error-400);
+
+  ~ .textField-label {
+    --component-textField-input-border: var(--palettes-error-400);
+    --component-textField-input-background: var(--palettes-error-50);
+
+    .formLabel {
+      @include formLabel.error;
+    }
+  }
+
+  ~ .inlineMessage {
+    @include inlineMessage.error;
+  }
+
+  &:hover {
+    ~ .textField-label {
+      --component-textField-input-border: var(--palettes-error-600);
+    }
+  }
+}
+
+@mixin disabled {
+  --component-textField-input-color: var(--palettes-grey-600);
+
+  ~ .textField-label {
+    --component-textField-input-border: var(--palettes-grey-300);
+    --component-textField-input-background: var(--palettes-grey-100);
+    --component-textField-input-prefix: var(--palettes-grey-500);
+
+    .textField-label-prefix,
+    .textField-label-suffix,
+    .formLabel {
+      cursor: default;
+    }
+  }
+}
+
+@mixin readonly {
+  padding: 0;
+
+  ~ .textField-label {
+    // .formLabel {
+    //   font-size: var(--sizes-S-fontSize);
+    //   line-height: var(--sizes-S-lineHeight);
+    // }
+
+    .textField-label-input {
+      border: none;
+    }
+
+    .textField-label-prefix-item,
+    .textField-label-suffix-item {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .textField-label-prefix-item {
+      padding-left: 0;
+
+      &:last-child {
+        padding-right: var(--spacings-XS);
+      }
+    }
+
+    .textField-label-suffix-item {
+      padding-right: 0;
+
+      &:first-child {
+        padding-left: var(--spacings-XS);
+      }
+    }
+  }
 }

package/src/components/textfield/vars.scss

@@ -1,41 +1,14 @@
 @mixin vars {
-	--components-textfield-border-radius: 4px;
-	--components-textfield-input-padding-horizontal: var(--spacings-XS);
-	--components-textfield-input-padding-vertical: var(--spacings-XS);
-	--components-textfield-input-placeholder: var(--palettes-primary-400);
-	--components-textfield-hover-background: var(--palettes-primary-100);
-	--components-textfield-hover-placeholder: var(--palettes-primary-400);
-	--components-textfield-focus-placeholder: var(--palettes-primary-300);
-	--components-textfield-focus-shadow-color: var(--palettes-primary-200);
-	--components-textfield-focus-border-color: var(--palettes-primary-600);
-	--components-textfield-disabled-background: var(--commons-disabled-background);
-	--components-textfield-disabled-color: var(--palettes-grey-600);
-	--components-textfield-suffix-top: 1.75rem;
-	--components-textfield-suffix-padding-right: var(--spacings-L);
-	--components-textfield-sizes-shortest: 3rem;
-	--components-textfield-sizes-shorter: 6rem;
-	--components-textfield-sizes-short: 9rem;
-	--components-textfield-sizes-default: 13rem;
-	--components-textfield-sizes-long: 17rem;
-	--components-textfield-sizes-longer: 22rem;
-	--components-textfield-sizes-longest: 28rem;
-
-	--components-textfield-material-padding-top: var(--spacings-S);
-	--components-textfield-material-default-palette-color: var(--palettes-grey-600);
-	--components-textfield-material-border-color: #ccc;
-	--components-textfield-material-label-color: var(--palettes-grey-600);
-	--components-textfield-material-label-font-size: var(--sizes-M-fontSize);
-	--components-textfield-material-suffix-padding-right: var(--spacings-S);
-
-	--components-textfield-compact-padding: var(--spacings-XS);
-	--components-textfield-compact-label-color: #96a6c5;
-	--components-textfield-compact-label-font-size: var(--sizes-M-fontSize);
-	--components-textfield-compact-label-right-margin: 0.3rem;
-	--components-textfield-compact-label-sizes-shorter: 3rem;
-	--components-textfield-compact-label-sizes-short: 5rem;
-	--components-textfield-compact-label-sizes-default: 7rem;
-	--components-textfield-compact-label-sizes-long: 9rem;
-	--components-textfield-compact-label-sizes-longer: 11rem;
-
-	--components-textfield-filter-width: 18rem;
+  --component-textField-label-fontSize: var(--sizes-M-fontSize);
+  --component-textField-label-lineHeight: var(--sizes-M-lineHeight);
+  --component-textField-input-paddingVertical: var(--spacings-XS);
+  --component-textField-input-lineHeight: var(--sizes-M-lineHeight);
+  --component-textField-input-color: var(--palettes-grey-800);
+  --component-textField-input-placeholder: var(--palettes-grey-400);
+  --component-textField-input-prefix: var(--palettes-grey-600);
+  --component-textField-input-border: var(--palettes-grey-300);
+  --component-textField-input-background: var(--colors-white-color);
+  --component-textField-action-icon-fontSize: var(--sizes-S-lineHeight);
+  --component-textField-action-icon-size: calc(var(--spacings-L) + var(--spacings-XS));
+  --component-textField-input-lines: 4;
 }

package/src/components/textfields/component.scss

@@ -0,0 +1,77 @@
+@mixin component($atRoot: 'without: rule') {
+	vertical-align: middle;
+	width: var(--components-textfield-sizes-default);
+
+	@at-root ($atRoot) {
+		.textfield-input {
+			min-width: 0;
+			border: 0;
+			box-shadow: 0 0 0 1px var(--palettes-grey-300);
+			line-height: var(--sizes-M-lineHeight);
+			-webkit-appearance: none;
+			background-color: var(--colors-white-color);
+			border-radius: var(--components-textfield-border-radius);
+			padding: var(--components-textfield-input-padding-vertical) var(--components-textfield-input-padding-horizontal);
+			transition-property: box-shadow, background-color, color;
+			transition-duration: var(--commons-animations-durations-fast);
+
+			&::placeholder {
+				color: var(--palettes-grey-400);
+				transition-property: color;
+				transition-duration: var(--commons-animations-durations-fast);
+				opacity: 1;
+			}
+
+			&[type='search'] {
+				&::-webkit-search-cancel-button,
+				&::-webkit-search-decoration {
+					appearance: none;
+				}
+			}
+		}
+
+		.textfield-suffix {
+			color: var(--palettes-grey-600);
+			top: calc(var(--components-textfield-suffix-top) + var(--components-textfield-input-padding-vertical));
+			right: var(--components-textfield-input-padding-horizontal);
+			position: absolute;
+			pointer-events: none;
+			line-height: var(--sizes-M-lineHeight);
+			z-index: 1;
+		}
+
+		.textfield-options {
+			box-shadow: var(--commons-boxShadow-M);
+			background-color: var(--colors-white-color);
+			border-radius: var(--commons-borderRadius-M);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: all;
+			list-style: none;
+			overflow: auto;
+			position: absolute;
+			transform-origin: right top;
+			transform: scaleY(0);
+			margin: 3px 0 0;
+			max-height: 15rem;
+			opacity: 0;
+			padding: 0;
+			left: 0;
+			top: 100%;
+			z-index: 999;
+			width: 100%;
+		}
+
+		.textfield-options-mark {
+			background-color: transparent;
+			text-decoration: underline;
+			color: inherit;
+		}
+
+		.textfield-options-entry {
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color;
+			padding: var(--spacings-XS) var(--spacings-S);
+			cursor: pointer;
+		}
+	}
+}

package/src/components/textfields/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';