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

package/src/components/_tag.scss

@@ -1,59 +0,0 @@
-.tag {
-	border-radius: _theme("commons.border.radius");
-	display: inline-block;
-	font-size: _theme("sizes.smaller.font-size");
-	font-weight: 600;
-	line-height: 1rem;
-	margin-right: _theme("spacings.smallest");
-	padding: 0 _theme("spacings.smallest");
-	text-align: center;
-	text-decoration: none;
-	vertical-align: baseline;
-	white-space: nowrap;
-}
-
-
-// Palettes
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.tag {
-	@mixin tagColoring($palette) {
-		background-color: _color($palette, 100);
-		color: _color($palette, 900);
-
-		&.mod-clickable {
-			&:hover {
-				color: _color($palette, 900);
-			}
-		}
-	}
-
-	@include tagColoring("tag.default-palette");
-
-	// palettes coloring
-	@each $name, $palette in _getMap("palettes") {
-		&.palette-#{$name} {
-			@include tagColoring($name);
-		}
-	}
-}
-
-
-// Mods
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.tag {
-	&.mod-clickable {
-		cursor: pointer;
-
-		&:hover, &:focus {
-			text-decoration: underline;
-		}
-	}
-
-	&.mod-outlined {
-		color: _color("grey","600");
-		border: _theme("commons.divider.width") solid _color("grey","300");
-		background-color: _color("white");
-	}
-}

package/src/components/_timeline.scss

@@ -1,452 +0,0 @@
-.timeline {
-	list-style-type: none;
-	padding: 0;
-	margin: _theme('spacings.small') 0;
-	display: flex;
-	align-items: center;
-}
-
-.timeline-step {
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-
-	//Line
-	&:not(:last-child)::after {
-		content: '';
-		display: flex;
-		flex-grow: 1;
-		height: 2px;
-		margin: _theme('spacings.smaller');
-		background-color: _color('primary', 200);
-		border-radius: 2px;
-	}
-
-	&:last-child {
-		flex-grow: 0;
-	}
-
-	&[aria-current='step'] {
-		//Line
-		&::after {
-			background-color: _color('grey', 200);
-		}
-
-		.timeline-step-title {
-			color: _color('primary', 700);
-
-			&::before {
-				background-color: _color('primary', 700);
-				box-shadow: 0 0 0 _theme('spacings.smallest') _color('primary', 200);
-				color: _color('white');
-			}
-		}
-
-		~ .timeline-step {
-			//Line
-			&::after {
-				background-color: _color('grey', 200);
-			}
-			.timeline-step-title {
-				color: _color('grey', 600);
-
-				&::before {
-					background-color: _color('grey', 200);
-					color: _color('grey', 600);
-				}
-			}
-		}
-	}
-}
-
-.timeline-step-title,
-.timeline-step:not([aria-current='step']):not([aria-current='step']
-		~ .timeline-step)
-	.timeline-step-title-icon,
-.timeline.mod-addStep .timeline-step-title-icon {
-	&::before {
-		content: '';
-		color: _color('primary', 800);
-		width: 1rem;
-		height: 1rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background-color: _color('primary', 300);
-		position: absolute;
-		left: _theme('spacings.smallest');
-		top: 50%;
-		transform: translateY(-50%);
-	}
-}
-
-.timeline-step-title {
-	padding-left: 1.75rem;
-	position: relative;
-	display: block;
-	color: _color('primary', 600);
-	font-weight: 400;
-	margin: 0;
-	font-size: _theme('sizes.standard.font-size');
-	line-height: _theme('sizes.standard.line-height');
-	min-width: _theme('spacings.standard');
-}
-
-.timeline-step-title-action {
-	@include buttonReset;
-	color: currentColor;
-	cursor: default;
-	display: inline-block;
-	text-decoration: none;
-	width: auto;
-
-	&:not([disabled]) {
-		&:hover,
-		&:focus {
-			color: currentColor;
-			cursor: pointer;
-			text-decoration: underline;
-		}
-	}
-}
-
-// MOD
-.timeline {
-	&.mod-small {
-		.timeline-step-title {
-			padding-left: 1.25rem;
-
-			&::before {
-				width: 0.5rem;
-				height: 0.5rem;
-			}
-		}
-	}
-
-	&.mod-big {
-		.timeline-step-title {
-			padding-left: 2.25rem;
-			min-width: _theme('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,
-		&.mod-addStep .timeline-step-title-icon {
-			&::before {
-				left: _theme('spacings.smaller');
-			}
-		}
-	}
-
-	&.mod-vertical {
-		align-items: flex-start;
-		flex-direction: column;
-
-		.timeline-step {
-			margin-top: _theme('spacings.smaller');
-			display: block;
-			position: relative;
-			width: 100%;
-
-			//line
-			&:not(:last-child)::after {
-				content: '';
-				display: block;
-				height: auto;
-				width: 2px;
-				position: absolute;
-				top: _theme('spacings.big') + _theme('spacings.smallest');
-				bottom: -0.75rem;
-				left: 0.45rem; // magic number
-				margin: 0;
-			}
-
-			&:not(:last-child)[aria-current='step'] {
-				&::after {
-					top: _theme('spacings.big') + _theme('spacings.smallest');
-				}
-			}
-		}
-
-		.timeline-step-title {
-			margin: _theme('spacings.smaller') 0;
-			min-height: _theme('spacings.standard');
-			min-width: 0;
-		}
-
-		&:not(.mod-small):not(.mod-big) {
-			.timeline-step-title {
-				&:before {
-					left: 0;
-				}
-			}
-		}
-
-		.timeline-step-description {
-			padding-left: _theme('spacings.big');
-		}
-
-		&.mod-small {
-			.timeline-step {
-				&::after {
-					bottom: calc(#{_theme('spacings.small')} * -1);
-					left: 0.45rem; // magic number
-					top: _theme('spacings.big');
-				}
-
-				&[aria-current='step'] {
-					&::after {
-						top: _theme('spacings.big');
-					}
-				}
-			}
-			.timeline-step-description {
-				padding-left: _theme('spacings.standard');
-			}
-		}
-
-		&.mod-big {
-			.timeline-step {
-				&::after {
-					bottom: calc(#{_theme('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: _theme('spacings.big');
-			}
-		}
-
-		.timeline-stepAddBetweenStep {
-			min-height: 3rem;
-		}
-
-		&.mod-progress {
-			.timeline-step[aria-current='step'] {
-				&::after {
-					background: linear-gradient(
-						180deg,
-						_color('primary', 700) var(--progress),
-						_color('grey', 200) var(--progress)
-					);
-				}
-			}
-		}
-	}
-
-	&:not(.mod-checkedPastStep) {
-		.timeline-step {
-			&::after {
-				background-color: _color('grey', 200);
-			}
-		}
-		.timeline-step-title {
-			color: _color('grey', 900);
-
-			&::before {
-				background-color: _color('primary', 700);
-				color: _color('white');
-			}
-		}
-	}
-
-	&.mod-number {
-		counter-reset: timeline;
-
-		.timeline-step:not(.timeline-stepAddBetweenStep) {
-			.timeline-step-title {
-				counter-increment: timeline;
-
-				&::before {
-					content: counter(timeline);
-					font-size: _theme('sizes.smaller.font-size');
-					line-height: 1;
-				}
-			}
-		}
-
-		&.mod-big {
-			.timeline-step-title::after {
-				font-size: _theme('sizes.small.font-size');
-			}
-		}
-	}
-
-	&.mod-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 makeIcon('tick');
-					display: flex;
-				}
-			}
-		}
-
-		&.mod-vertical:not(.mod-big) {
-			.timeline-step:not([aria-current='step']):not([aria-current='step']
-					~ .timeline-step) {
-				.timeline-step-title {
-					.timeline-step-title-icon::before {
-						left: 0;
-					}
-				}
-			}
-		}
-
-		&.mod-vertical.mod-big {
-			.timeline-step:not([aria-current='step']):not([aria-current='step']
-					~ .timeline-step) {
-				.timeline-step-title {
-					.timeline-step-title-icon::before {
-						left: _theme('spacings.smaller');
-					}
-				}
-			}
-		}
-	}
-
-	&.mod-addStep {
-		.timeline-step {
-			&:nth-last-child(2)::after {
-				background-color: transparent;
-				background-image: linear-gradient(
-					90deg,
-					transparent 25%,
-					_color('grey', 200) 25%,
-					_color('grey', 200) 50%,
-					transparent 50%,
-					transparent 75%,
-					_color('grey', 200) 75%,
-					_color('grey', 200) 100%
-				);
-				background-size: _theme('spacings.smaller') _theme('spacings.smaller');
-			}
-
-			&:last-child {
-				.timeline-step-title {
-					&:before {
-						display: none;
-					}
-					.timeline-step-title-icon::before {
-						@include makeIcon('plus');
-						display: flex;
-					}
-				}
-			}
-		}
-
-		&.mod-vertical {
-			.timeline-step {
-				&:nth-last-child(2)::after {
-					background-color: transparent;
-					background-image: linear-gradient(
-						0deg,
-						transparent 25%,
-						_color('grey', 200) 25%,
-						_color('grey', 200) 50%,
-						transparent 50%,
-						transparent 75%,
-						_color('grey', 200) 75%,
-						_color('grey', 200) 100%
-					);
-					background-size: _theme('spacings.smaller') _theme('spacings.smaller');
-				}
-			}
-
-			&:not(.mod-big) {
-				.timeline-step:last-child {
-					.timeline-step-title {
-						.timeline-step-title-icon::before {
-							left: 0;
-						}
-					}
-				}
-			}
-
-			&.mod-big {
-				.timeline-step:last-child {
-					.timeline-step-title {
-						.timeline-step-title-icon::before {
-							left: _theme('spacings.smaller');
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.mod-addBetweenStep {
-		.timeline-stepAddBetweenStep {
-			.timeline-step-title {
-				padding-left: 0;
-				&:before {
-					display: none;
-				}
-			}
-		}
-		.timeline-stepAddBetweenStep-title {
-			@include buttonReset;
-			width: auto;
-
-			&:focus,
-			&:hover {
-				.timeline-step-title-icon::before {
-					box-shadow: 0 0 0 0.25rem _color('primary', 500);
-				}
-			}
-		}
-		.timeline-step:not([aria-current='step']):not([aria-current='step']
-				~ .timeline-step)
-			.timeline-step-title-icon::before {
-			@include makeIcon('plus');
-			display: flex;
-			transition: box-shadow _theme('commons.animations.durations.standard');
-		}
-
-		&.mod-vertical:not(.mod-big) {
-			.timeline-step:not([aria-current='step']):not([aria-current='step']
-					~ .timeline-step)
-				.timeline-step-title-icon::before {
-				left: 0;
-			}
-		}
-
-		&.mod-big {
-			.timeline-step:not([aria-current='step']):not([aria-current='step']
-					~ .timeline-step)
-				.timeline-step-title-icon::before {
-				width: 1.5rem;
-				height: 1.5rem;
-				left: _theme('spacings.smallest');
-			}
-		}
-	}
-
-	&.mod-progress {
-		.timeline-step[aria-current='step'] {
-			&::after {
-				background: linear-gradient(
-					90deg,
-					_color('primary', 700) var(--progress),
-					_color('grey', 200) var(--progress)
-				);
-			}
-		}
-	}
-}

package/src/components/_title-section.scss

@@ -1,52 +0,0 @@
-.titleSection {
-	margin-bottom: 1.2rem;
-
-	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;	
-	}
-}
-
-.titleSection-sub {
-	color: _color("text.light");
-	font-size: _theme("sizes.standard.font-size");
-	font-weight: 400;
-	line-height: _theme("sizes.standard.line-height");
-	margin: 0;
-}
-
-h1 {
-	&, &.mod-headline {
-		~ .titleSection-sub {
-			font-size: calc(#{_theme("sizes.standard.font-size")} * 1.3);
-			line-height: calc(#{_theme("sizes.standard.line-height")} * 1.3);
-			margin: .2rem 0 0;
-		}
-	}
-}
-
-.u-h1 {
-	&, &.mod-headline {
-		~ .titleSection-sub {
-			font-size: calc(#{_theme("sizes.standard.font-size")} * 1.3) !important;
-			line-height: calc(#{_theme("sizes.standard.line-height")} * 1.3) !important;
-			margin: .2rem 0 0 !important;
-		}
-	}
-}
-
-h2, h3, h4, h5, h6 {
-	~ .titleSection-sub {
-		font-size: _theme("sizes.small.font-size");
-		line-height: _theme("sizes.small.line-height");
-	}
-}
-
-.u-h2, .u-h3, .u-h4, .u-h5, .u-h6 {
-	~ .titleSection-sub {
-		font-size: _theme("sizes.small.font-size") !important;
-		line-height: _theme("sizes.small.line-height") !important;
-	}
-}