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

package/src/components/textfields/states.scss

@@ -0,0 +1,224 @@
+@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;
+	}
+}
+
+@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);
+}

package/src/components/textfields/vars.scss

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

package/src/components/title/component.scss

@@ -5,7 +5,7 @@
 	margin-bottom: var(--spacings-S);
 
 	// suffix here
-	font-weight: 600 #{$suffix};
+	font-weight: var(--components-title-weight, 600) #{$suffix};
 	font-size: var(--sizes-fontSize) #{$suffix};
 	line-height: var(--sizes-lineHeight) #{$suffix};
 	padding-top: var(--sizes-verticalPadding) #{$suffix};

package/src/components/verticalNavigation/component.scss

@@ -0,0 +1,42 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@mixin component($atRoot: 'without: rule') {
+
+	@at-root ($atRoot) {
+		.verticalNavigation-list {
+			@include reset.list;
+			background-color: var(--colors-white-color);
+		}
+
+		.verticalNavigation-list-item-link {
+			@include reset.button;
+			display: flex;
+			padding: var(--spacings-XS) var(--spacings-S);
+			border-radius: var(--commons-borderRadius-M);
+			color: var(--components-verticalNavigation-link-color);
+			text-decoration: none;
+			background-color: var(--components-verticalNavigation-link-background);
+			transition: background-color var(--commons-animations-durations-fast) ease;
+			font-weight: 600;
+
+			.lucca-icon {
+				margin-left: auto;
+				font-size: var(--sizes-M-lineHeight);
+			}
+
+			&:hover {
+				--components-verticalNavigation-link-background: var(--palettes-grey-50);
+				color: var(--components-verticalNavigation-link-color);
+			}
+
+			&:focus-visible {
+				@include a11y.focusVisible();
+			}
+
+			&:active {
+				--components-verticalNavigation-link-background: var(--palettes-grey-100);
+			}
+		}
+	}
+}

package/src/components/verticalNavigation/exports.scss

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

package/src/components/verticalNavigation/index.scss

@@ -0,0 +1,26 @@
+@use 'exports' as *;
+
+.vertical-navigation {
+	@include vars;
+	@include component;
+}
+
+.verticalNavigation-list {
+	&.mod-child {
+		@include child;
+	}
+}
+
+.verticalNavigation-list-item-link {
+	&[aria-expanded="true"] {
+		@include expanded;
+	}
+
+	&[aria-current="page"] {
+		@include active;
+	}
+
+	&[disabled], &.is-disabled {
+		@include disabled;
+	}
+}

package/src/components/verticalNavigation/mods.scss

@@ -0,0 +1,7 @@
+@mixin child {
+  display: none;
+
+  .verticalNavigation-list-item-link {
+    font-weight: 400;
+  }
+}

package/src/components/verticalNavigation/states.scss

@@ -0,0 +1,28 @@
+@mixin active {
+	--components-verticalNavigation-link-background: var(--palettes-primary-50);
+	color: var(--components-verticalNavigation-link-color);
+
+  &:hover {
+  	--components-verticalNavigation-link-background: var(--palettes-primary-100);
+  }
+
+	&:active {
+		--components-verticalNavigation-link-background: var(--palettes-primary-200);
+	}
+}
+
+@mixin disabled {
+	--components-verticalNavigation-link-background: transparent;
+	color: var(--palettes-grey-500);
+	pointer-events: none;
+}
+
+@mixin expanded {
+	~ .verticalNavigation-list {
+		display: block;
+	}
+
+	.lucca-icon {
+		transform: rotate(180deg);
+	}
+}

package/src/components/verticalNavigation/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+  --components-verticalNavigation-link-background: var(--colors-white-color);
+  --components-verticalNavigation-link-color: var(--palettes-grey-800);
+}

package/src/components/sortableList/component.scss

@@ -1,68 +0,0 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin component($atRoot: 'without: rule') {
-	background-color: var(--colors-white-color);
-	border: var(--commons-divider-width) solid var(--commons-divider-color);
-	border-radius: var(--commons-borderRadius-M);
-	list-style: none;
-	padding: 0;
-
-	@at-root ($atRoot) {
-		.sortableList-item {
-			border-bottom-width: var(--commons-divider-width);
-			border-bottom-color: var(--commons-divider-color);
-			border-bottom-style: solid;
-			color: var(--palettes-grey-800);
-			display: flex;
-			position: relative;
-			text-decoration: none;
-			gap: var(--spacings-XS);
-			padding: var(--components-sortableList-padding);
-
-			&:last-child {
-				border: 0;
-			}
-		}
-
-		.sortableList-item-content {
-			color: var(--palettes-grey-800);
-			text-decoration: none;
-			width: 100%;
-		}
-
-		.sortableList-item-content-description {
-			margin: 0;
-			font-size: var(--components-sortableList-description-fontSize);
-			line-height: var(--components-sortableList-description-lineHeight);
-		}
-
-		.sortableList-item-content-helper {
-			margin: 0;
-			color: var(--palettes-grey-600);
-			font-size: var(--components-sortableList-helper-fontSize);
-			line-height: var(--components-sortableList-helper-lineHeight);
-		}
-
-		.sortableList-item-actions {
-			margin-left: auto;
-			white-space: nowrap;
-			padding-left: 0;
-		}
-
-
-		.sortableList-item-handler {
-			color: var(--palettes-grey-600);
-			font-size: var(--components-sortableList-handler-size);
-			cursor: move;
-
-			&::before {
-				@include icon.generate('drag');
-				vertical-align: top;
-			}
-		}
-
-		.sortableList-clear {
-			margin-top: var(--spacings-XXS);
-		}
-	}
-}

package/src/components/sortableList/index.scss

@@ -1,16 +0,0 @@
-@use 'exports' as *;
-
-.sortableList {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-}
-
-.sortableList-item {
-	&.mod-clickable {
-		@include clickable;
-	}
-}

package/src/components/sortableList/mods.scss

@@ -1,19 +0,0 @@
-@mixin clickable {
-	transition-duration: var(--commons-animations-durations-fast);
-	transition-property: background-color;
-	text-decoration: none;
-	cursor: pointer;
-
-	&:hover {
-		background-color: var(--palettes-grey-50);
-	}
-}
-
-@mixin S {
-	--components-sortableList-padding: .375rem var(--spacings-XS);
-	--components-sortableList-handler-size: var(--sizes-S-lineHeight);
-	--components-sortableList-description-fontSize: var(--sizes-S-fontSize);
-	--components-sortableList-description-lineHeight: var(--sizes-S-lineHeight);
-	--components-sortableList-helper-fontSize: var(--sizes-XS-fontSize);
-	--components-sortableList-helper-lineHeight: var(--sizes-XS-lineHeight);
-}

package/src/components/sortableList/vars.scss

@@ -1,8 +0,0 @@
-@mixin vars {
-  --components-sortableList-padding: var(--spacings-XS) .75rem;
-  --components-sortableList-handler-size: var(--sizes-M-lineHeight);
-  --components-sortableList-description-fontSize: var(--sizes-M-fontSize);
-  --components-sortableList-description-lineHeight: var(--sizes-M-lineHeight);
-  --components-sortableList-helper-fontSize: var(--sizes-S-fontSize);
-  --components-sortableList-helper-lineHeight: var(--sizes-S-lineHeight);
-}