@lucca-front/scss 8.2.2 → 9.0.0-alpha.1

package/src/components/timeline/component.scss

@@ -0,0 +1,74 @@
+@mixin component {
+	list-style-type: none; 
+	padding: 0;
+	margin: var(--spacings-small) 0;
+	display: flex;
+	align-items: center;
+
+	@at-root {
+		.timeline-step {
+			flex-grow: 1;
+			display: flex;
+			align-items: center;
+
+			&:not(:last-child) {
+				&::after {
+					content: '';
+					display: flex;
+					flex-grow: 1;
+					height: 2px;
+					margin: var(--spacings-smaller);
+					background-color: var(--palettes-primary-200);
+					border-radius: 2px;
+				}
+			}
+
+			&:last-child {
+				flex-grow: 0;
+			}
+		}
+
+		.timeline-step-title {
+			padding-left: 1.75rem;
+			position: relative;
+			display: block;
+			color: var(--palettes-primary-600);
+			font-weight: 400;
+			margin: 0;
+			font-size: var(--sizes-standard-font-size);
+			line-height: var(--sizes-big-line-height);
+			min-width: var(--spacings-standard);
+		}
+
+		.timeline-step-title,
+		.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
+			&::before {
+				content: '';
+				color: var(--palettes-primary-800);
+				width: 1rem;
+				height: 1rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				background-color: var(--palettes-primary-300);
+				position: absolute;
+				left: var(--spacings-smallest);
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+
+		.timeline-step-title-action {
+			color: currentColor;
+			text-decoration: none;
+
+			&:hover,
+			&:focus {
+				color: currentColor;
+				text-decoration: underline;
+			}
+		}
+	}
+	
+}

package/src/components/timeline/exports.scss

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

package/src/components/timeline/index.scss

@@ -0,0 +1,87 @@
+@use 'exports' as *;
+
+.timeline {
+	@include vars;
+	@include component;
+
+	&.mod-number {
+		@include number;
+		&.mod-big {
+			@include numberBig;
+		}
+	}
+
+	&.mod-small {
+		@include small;
+	}
+
+	&.mod-big {
+		@include big;
+	}
+
+	&.mod-vertical {
+		@include vertical;
+		&:not(.mod-small):not(.mod-big) {
+			@include verticalNotSmallNotBig();
+		}
+		&.mod-small {
+			@include verticalSmall;
+		}
+		&.mod-big {
+			@include verticalBig;
+		}
+		&.mod-progress {
+			@include verticalProgress;
+		}
+	}
+
+	&.mod-addStep {
+		@include addStep;
+		&.mod-big {
+			@include addStepBig;
+		}
+		&.mod-vertical {
+			@include addStepVertical;
+			&:not(.mod-big) {
+				@include addStepVerticalNotBig;
+			}
+			&.mod-big {
+				@include addStepVerticalBig;
+			}
+		}
+	}
+
+	&.mod-checkedPastStep {
+		@include checkedPastStep;
+		&.mod-vertical:not(.mod-big) {
+			@include checkedPastStepVerticalNotBig;
+		}
+		&.mod-vertical.mod-big {
+			@include checkedPastStepVerticalBig;
+		}
+	}
+
+	&.mod-addBetweenStep {
+		@include addBetweenStep;
+		&.mod-vertical:not(.mod-big) {
+			@include addBetweenStepVerticalNotBig()
+		}
+		&.mod-big {
+			@include addBetweenStepBig;
+		}
+	}
+
+	&.mod-progress {
+		@include progress;
+	}
+
+	&:not(.mod-checkedPastStep) {
+		@include notPastChecked;
+	}
+}
+
+.timeline-step {
+	&:is([aria-current='step']) {
+		@include current;
+	}
+}

package/src/components/timeline/mods.scss

@@ -0,0 +1,351 @@
+@use '../../commons/utils/reset';
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin small {
+	.timeline-step-title {
+		padding-left: 1.25rem;
+
+		&::before {
+			width: 0.5rem;
+			height: 0.5rem;
+		}
+	}
+}
+
+@mixin big {
+	.timeline-step-title {
+		padding-left: 2.25rem;
+		min-width: var(--spacings-big);
+
+		&::before {
+			width: 1.5rem;
+			height: 1.5rem;
+		}
+	}
+
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
+		&::before {
+			left: var(--spacings-smaller);
+		}
+	}
+}
+
+@mixin addStepBig {
+	.timeline-step-title-icon {
+		&::before {
+			left: var(--spacings-smaller);
+		}
+	}
+}
+
+@mixin vertical {
+	align-items: flex-start;
+	flex-direction: column;
+
+	.timeline-step {
+		margin-top: var(--spacings-smaller);
+		display: block;
+		position: relative;
+		width: 100%;
+
+		//line
+		&:not(:last-child)::after {
+			content: '';
+			display: block;
+			height: auto;
+			width: 2px;
+			position: absolute;
+			top: calc(var(--spacings-big) + var(--spacings-smallest));
+			bottom: -0.75rem;
+			left: 0.45rem; // magic number
+			margin: 0;
+		}
+
+		&:not(:last-child)[aria-current='step'] {
+			&::after {
+				top: calc(var(--spacings-big) + var(--spacings-smallest));
+			}
+		}
+	}
+
+	.timeline-step-title {
+		margin: var(--spacings-smaller) 0;
+		min-height: var(--spacings-standard);
+		min-width: 0;
+	}
+
+	.timeline-step-description {
+		padding-left: var(--spacings-big);
+	}
+
+	.timeline-stepAddBetweenStep {
+		min-height: 3rem;
+	}
+}
+
+@mixin verticalNotSmallNotBig {
+	.timeline-step-title {
+		&:before {
+			left: 0;
+		}
+	}
+}
+
+@mixin verticalSmall {
+	.timeline-step {
+		&::after {
+			bottom: calc(var(--spacings-small) * -1);
+			left: 0.45rem; // magic number
+			top: var(--spacings-big);
+		}
+
+		&[aria-current='step'] {
+			&::after {
+				top: var(--spacings-big);
+			}
+		}
+	}
+	.timeline-step-description {
+		padding-left: var(--spacings-standard);
+	}
+}
+
+@mixin verticalBig {
+	.timeline-step {
+		&::after {
+			bottom: calc(var(--spacings-smaller) * -1);
+			left: 0.95rem; // magic number
+			top: 2.5rem;
+		}
+
+		&[aria-current='step'] {
+			&::after {
+				top: 2.5rem;
+			}
+		}
+	}
+	.timeline-step-description {
+		padding-left: 2.5rem;
+		min-height: var(--spacings-big);
+	}
+}
+
+@mixin verticalProgress {
+	.timeline-step[aria-current='step'] {
+		&::after {
+			background: linear-gradient(
+				180deg,
+				var(--palettes-primary-700) var(--progress),
+				var(--palettes-grey-200) var(--progress)
+			);
+		}
+	}
+}
+
+@mixin number {
+	counter-reset: timeline;
+	.timeline-step:not(.timeline-stepAddBetweenStep) {
+		.timeline-step-title {
+			counter-increment: timeline;
+
+			&::before {
+				content: counter(timeline);
+				font-size: var(--sizes-smaller-font-size);
+				line-height: 1;
+			}
+		}
+	}
+}
+
+@mixin numberBig {
+	.timeline-step-title::after {
+		font-size: var(--sizes-small-font-size);
+	}
+}
+
+@mixin checkedPastStep {
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step):not(.timeline-stepAddBetweenStep) {
+		.timeline-step-title {
+			.timeline-step-title-icon::before {
+				@include icon.makeIcon('tick');
+				display: flex;
+			}
+		}
+	}
+}
+
+@mixin checkedPastStepVerticalNotBig {
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
+		.timeline-step-title {
+			.timeline-step-title-icon::before {
+				left: 0;
+			}
+		}
+	}
+}
+
+@mixin checkedPastStepVerticalBig {
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
+		.timeline-step-title {
+			.timeline-step-title-icon::before {
+				left: var(--sizes-smaller-font-size);
+			}
+		}
+	}
+}
+
+
+@mixin addStep {
+	.timeline-step {
+		&:nth-last-child(2)::after {
+			background-color: transparent;
+			background-image: linear-gradient(
+				90deg,
+				transparent 25%,
+				var(--palettes-grey-200) 25%,
+				var(--palettes-grey-200) 50%,
+				transparent 50%,
+				transparent 75%,
+				var(--palettes-grey-200) 75%,
+				var(--palettes-grey-200) 100%
+			);
+			background-size: var(--spacings-smaller) var(--spacings-smaller);
+		}
+
+		&:last-child {
+			.timeline-step-title {
+				&:before {
+					display: none;
+				}
+				.timeline-step-title-icon::before {
+					@include icon.makeIcon('plus');
+					display: flex;
+				}
+			}
+		}
+	}
+
+	.timeline-step-title-icon {
+		content: '';
+		color: var(--palettes-primary-800);
+		width: 1rem;
+		height: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background-color: var(--palettes-primary-300);
+		position: absolute;
+		left: var(--spacings-smallest);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+}
+
+@mixin addStepVertical {
+	.timeline-step {
+		&:nth-last-child(2)::after {
+			background-color: transparent;
+			background-image: linear-gradient(
+				0deg,
+				transparent 25%,
+				var(--palettes-grey-200) 25%,
+				var(--palettes-grey-200) 50%,
+				transparent 50%,
+				transparent 75%,
+				var(--palettes-grey-200) 75%,
+				var(--palettes-grey-200) 100%
+			);
+			background-size: var(--spacings-smaller) var(--spacings-smaller);
+		}
+	}
+}
+
+@mixin addStepVerticalNotBig {
+	.timeline-step:last-child {
+		.timeline-step-title {
+			.timeline-step-title-icon::before {
+				left: 0;
+			}
+		}
+	}
+}
+
+@mixin addStepVerticalBig {
+	.timeline-step:last-child {
+		.timeline-step-title {
+			.timeline-step-title-icon::before {
+				left: var(--spacings-smaller);
+			}
+		}
+	}
+}
+
+@mixin addBetweenStep {
+	.timeline-stepAddBetweenStep {
+		.timeline-step-title {
+			padding-left: 0;
+			&:before {
+				display: none;
+			}
+		}
+	}
+	.timeline-stepAddBetweenStep-title {
+		@include reset.button;
+		width: auto;
+
+		&:focus,
+		&:hover {
+			.timeline-step-title-icon::before {
+				box-shadow: 0 0 0 0.25rem var(--palettes-primary-500);
+			}
+		}
+	}
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
+		@include icon.makeIcon('plus');
+		display: flex;
+		transition: box-shadow var(--commons-animations-durations-standard);
+	}
+}
+
+@mixin addBetweenStepVerticalNotBig {
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
+		left: 0;
+	}
+}
+
+@mixin addBetweenStepBig {
+	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
+		width: 1.5rem;
+		height: 1.5rem;
+		left: var(--spacings-smallest);
+	}
+}
+
+@mixin progress {
+	.timeline-step[aria-current='step'] {
+		&::after {
+			background: linear-gradient(
+				90deg,
+				var(--palettes-primary-700) var(--progress),
+				var(--palettes-grey-200) var(--progress)
+			);
+		}
+	}
+}
+
+@mixin notPastChecked {
+	.timeline-step {
+		&::after {
+			background-color: var(--palettes-grey-200);
+		}
+	}
+	.timeline-step-title {
+		color: var(--palettes-grey-900);
+
+		&::before {
+			background-color: var(--palettes-primary-700);
+			color: var(--colors-white-color);
+		}
+	}
+}

package/src/components/timeline/states.scss

@@ -0,0 +1,30 @@
+@mixin current {
+	&::after {
+		background-color: var(--palettes-grey-200);
+	}
+
+	.timeline-step-title {
+		color: var(--palettes-primary-700);
+
+		&::before {
+			background-color: var(--palettes-primary-700);
+			box-shadow: 0 0 0 var(--spacings-smallest) var(--palettes-primary-200);
+			color: var(--colors-white-color);
+		}
+	}
+
+	~ .timeline-step {
+		&::after {
+			background-color: var(--palettes-grey-200);
+		}
+
+		.timeline-step-title {
+			color: var(--palettes-grey-600);
+
+			&::before {
+				background-color: var(--palettes-grey-200);
+				color: var(--palettes-grey-600);
+			}
+		}
+	}
+}

package/src/components/timeline/vars.scss

@@ -0,0 +1,2 @@
+@mixin vars {
+}

package/src/components/title/component.scss

@@ -0,0 +1,13 @@
+@mixin component($suffix: '') {
+	// no suffix here
+	margin-top: 0;
+	color: var(--palettes-grey-800);
+	margin-bottom: var(--spacings-small);
+
+	// suffix here
+	font-weight: 600 #{$suffix};
+	font-size: var(--sizes-font-size) #{$suffix};
+	line-height: var(--sizes-line-height) #{$suffix};
+	padding-top: var(--sizes-vertical-padding) #{$suffix};
+	padding-bottom: var(--sizes-vertical-padding) #{$suffix};
+}

package/src/components/title/exports.scss

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

package/src/components/title/index.scss

@@ -0,0 +1,39 @@
+@use 'exports' as *;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include vars;
+	@include component;
+}
+
+h1 {
+	@include h1;
+
+	&.mod-headline {
+		@include headline;
+	}
+}
+
+h2 {
+	@include h2;
+}
+
+h3 {
+	@include h3;
+}
+
+h4 {
+	@include h4;
+}
+
+h5 {
+	@include h5;
+}
+
+h6 {
+	@include h6;
+}

package/src/components/title/mods.scss

@@ -0,0 +1,41 @@
+@mixin headline {
+	--sizes-vertical-padding: var(--sizes-headline-vertical-padding);
+	--sizes-font-size: var(--sizes-headline-font-size);
+	--sizes-line-height: var(--sizes-headline-line-height);
+}
+
+@mixin h1 {
+	--sizes-vertical-padding: var(--sizes-biggest-vertical-padding);
+	--sizes-font-size: var(--sizes-biggest-font-size);
+	--sizes-line-height: var(--sizes-biggest-line-height);
+}
+
+@mixin h2 {
+	--sizes-vertical-padding: var(--sizes-bigger-vertical-padding);
+	--sizes-font-size: var(--sizes-bigger-font-size);
+	--sizes-line-height: var(--sizes-bigger-line-height);
+}
+
+@mixin h3 {
+	--sizes-vertical-padding: var(--sizes-big-vertical-padding);
+	--sizes-font-size: var(--sizes-big-font-size);
+	--sizes-line-height: var(--sizes-big-line-height);
+}
+
+@mixin h4 {
+	--sizes-vertical-padding: var(--sizes-standard-vertical-padding);
+	--sizes-font-size: var(--sizes-standard-font-size);
+	--sizes-line-height: var(--sizes-standard-line-height);
+}
+
+@mixin h5 {
+	--sizes-vertical-padding: var(--sizes-small-vertical-padding);
+	--sizes-font-size: var(--sizes-small-font-size);
+	--sizes-line-height: var(--sizes-small-line-height);
+}
+
+@mixin h6 {
+	--sizes-vertical-padding: var(--sizes-smaller-vertical-padding);
+	--sizes-font-size: var(--sizes-smaller-font-size);
+	--sizes-line-height: var(--sizes-smaller-line-height);
+}

package/src/components/title/vars.scss

@@ -0,0 +1,2 @@
+@mixin vars {
+}

package/src/components/titleSection/component.scss

@@ -0,0 +1,32 @@
+@mixin component {
+	margin-bottom: 1.2rem;
+
+	.titleSection-title,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-bottom: 0;
+	}
+
+	.u-h1,
+	.u-h2,
+	.u-h3,
+	.u-h4,
+	.u-h5,
+	.u-h6 {
+		margin-bottom: 0 !important;
+	}
+
+	@at-root {
+		.titleSection-sub {
+			color: var(--palettes-grey-500);
+			font-size: var(--sizes-standard-font-size);
+			line-height: var(--sizes-standard-line-height);
+			font-weight: 400;
+			margin: 0;
+		}
+	}
+}

package/src/components/titleSection/exports.scss

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