@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/textfields/states.scss

@@ -1,229 +1,229 @@
-@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-eye {
-		display: none;
-	}
-}
-
-@mixin passwordActionNotPressed {
-	.icon-eyeStrikethrough {
-		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/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-eye {
+		display: none;
+	}
+}
+
+@mixin passwordActionNotPressed {
+	.icon-eyeStrikethrough {
+		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);
+}

package/src/components/textfields/vars.scss

@@ -1,41 +1,41 @@
-@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;
-}
+@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;
+}