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

package/src/components/titleSection/index.scss

@@ -0,0 +1,24 @@
+@use 'exports' as *;
+
+.titleSection {
+	@include vars;
+	@include component;
+}
+
+.titleSection-sub {
+	:is(h1, h1.mod-headline) ~ & {
+		@include headline;
+	}
+
+	:is(.u-h1, .u-h1.mod-headline) ~ & {
+		@include headline('!important');
+	}
+
+	:is(h2, h3, h4, h5, h6) ~ & {
+		@include title;
+	}
+
+	:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
+		@include title('!important');
+	}
+}

package/src/components/titleSection/mods.scss

@@ -0,0 +1,10 @@
+@mixin headline($suffix: '') {
+	font-size: calc(var(--sizes-standard-font-size) * 1.3) #{$suffix};
+	line-height: calc(var(--sizes-standard-line-height) * 1.3) #{$suffix};
+	margin: 0.2rem 0 0 #{$suffix};
+}
+
+@mixin title($suffix: '') {
+	font-size: var(--sizes-small-font-size) #{$suffix};
+	line-height: var(--sizes-small-line-height) #{$suffix};
+}

package/src/components/titleSection/vars.scss

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

package/src/components/toast/component.scss

@@ -0,0 +1,65 @@
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin component {
+	@keyframes toast {
+		from {
+			transform: translateY(1rem);
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	right: var(--components-toasts-right);
+	top: var(--components-toasts-top);
+	width: var(--components-toasts-width);
+	font-size: var(--sizes-small-font-size);
+	line-height: var(--sizes-small-line-height);
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	position: fixed;
+	z-index: 9999;
+
+	.toasts-item {
+		color: var(--components-toasts-color);
+		padding: var(--components-toasts-padding);
+		margin-bottom: var(--components-toasts-margin-bottom);
+		background-color: var(--palettes-800, var(--components-toasts-background));
+		animation-name: toast;
+		animation-duration: var(--commons-animations-durations-standard);
+		animation-iteration-count: 1;
+		border-radius: var(--commons-border-radius);
+		margin-left: auto;
+		overflow: hidden;
+		position: relative;
+		transform-origin: top;
+	}
+
+	.toasts-item-kill {
+		color: var(--colors-white-color);
+		transition-property: opacity;
+		transition-duration: var(--commons-animations-durations-fast);
+		background-color: transparent;
+		right: 0.5rem;
+		bottom: 0;
+		top: 0;
+		border: 0;
+		padding: 0;
+		height: 1.25rem;
+		width: 1.25rem;
+		position: absolute;
+		margin: auto;
+		cursor: pointer;
+
+		&:hover {
+			opacity: 0.66;
+		}
+
+		&::after {
+			@include icon.makeIcon('cross');
+		}
+	}
+}

package/src/components/toast/exports.scss

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

package/src/components/toast/index.scss

@@ -0,0 +1,18 @@
+@use 'exports' as *;
+
+.toasts {
+	@include vars;
+	@include component;
+
+	&.mod-bottom {
+		@include bottom;
+	}
+
+	&.mod-commInApp {
+		@include commInApp;
+	}
+
+	&.mod-withCircularGauge {
+		@include circularGauge;
+	}
+}

package/src/components/toast/mods.scss

@@ -0,0 +1,137 @@
+@mixin bottom {
+	top: auto;
+	bottom: var(--spacings-standard);
+}
+
+@mixin commInApp {
+	left: var(--components-toasts-left);
+	bottom: var(--components-toasts-bottom);
+	width: var(--components-toasts-big);
+	top: inherit;
+
+	.toasts-item {
+		background-color: var(--palettes-primary-700);
+		margin-left: inherit;
+		display: flex;
+		padding: 0;
+	}
+
+	.toasts-visual {
+		inset: 0;
+		width: 5rem;
+		position: absolute;
+	}
+
+	.toasts-blob {
+		fill: var(--palettes-primary-600);
+		height: 100%;
+		width: 100%;
+		position: absolute;
+	}
+
+	.toasts-illustration {
+		left: var(--spacings-small);
+		top: calc(var(--spacings-smaller) * -1);
+		height: 100%;
+		width: 2.5rem;
+		position: absolute;
+	}
+
+	.toasts-content {
+		padding: var(--spacings-small) 0;
+		margin-left: calc(var(--spacings-small) + 5rem);
+		margin-right: var(--spacings-small);
+	}
+
+	.toasts-content-title {
+		margin-bottom: var(--spacings-smaller);
+	}
+
+	.toasts-item-kill {
+		top: var(--spacings-smaller);
+		bottom: inherit;
+	}
+}
+
+@mixin circularGauge {
+	@keyframes stroke {
+		from {
+			stroke-dashoffset: 100.5;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+
+	&:hover,
+	&:focus-within {
+		.circularGauge {
+			circle {
+				animation-play-state: paused;
+			}
+		}
+	}
+
+	.toasts-item-kill {
+		transition: transform 100ms, opacity 100ms;
+		top: 0.625rem;
+		bottom: auto;
+
+		.lucca-icon {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;
+		}
+
+		&::after {
+			content: none;
+		}
+
+		&:hover,
+		&:focus {
+			outline: 0;
+			opacity: 0.66;
+		}
+
+		.circularGauge {
+			color: transparent;
+			height: 1.25rem;
+			pointer-events: none;
+			position: relative;
+			width: 1.25rem;
+
+			&::after {
+				position: absolute;
+				background-color: transparent;
+				left: 2px;
+				top: 2px;
+				width: calc(100% - 4px);
+				height: calc(100% - 4px);
+				z-index: 1;
+				border-radius: 50%;
+				content: '';
+			}
+
+			svg {
+				transform: rotate(-90deg);
+				border-radius: 50%;
+				width: 100%;
+				height: auto;
+				display: block;
+			}
+
+			circle {
+				stroke-width: 20%;
+				stroke-dasharray: 100.5, 100.5;
+				stroke: var(--colors-white-color);
+				fill: currentColor;
+				animation-name: stroke;
+				animation-timing-function: linear;
+				animation-fill-mode: forwards;
+			}
+		}
+	}
+}

package/src/components/toast/vars.scss

@@ -0,0 +1,12 @@
+@mixin vars {
+	--components-toasts-background: #323232;
+	--components-toasts-color: var(--colors-white-color);
+	--components-toasts-top: var(--spacings-standard);
+	--components-toasts-right: var(--spacings-standard);
+	--components-toasts-left: var(--spacings-standard);
+	--components-toasts-bottom: var(--spacings-standard);
+	--components-toasts-margin-bottom: var(--spacings-smaller);
+	--components-toasts-width: 16rem;
+	--components-toasts-big: 22.5rem;
+	--components-toasts-padding: 0.75rem 2.25rem 0.75rem var(--spacings-small);
+}

package/src/components/toc/component.scss

@@ -0,0 +1,28 @@
+@use '../../commons/utils/reset';
+
+@mixin component {
+	align-items: flex-start;
+	display: flex;
+	flex-direction: column;
+	position: sticky;
+
+	@at-root {
+		.tableOfContent-list {
+			@include reset.list;
+		}
+
+		.tableOfContent-list-item-action {
+			@include reset.button;
+			border-radius: var(--commons-border-radius);
+			color: var(--palettes-grey-700);
+			cursor: pointer;
+			display: block;
+			outline: none;
+			padding: var(--components-tableOfContent-item-padding);
+			position: relative;
+			transition: all var(--commons-animations-durations-standard);
+			text-decoration: none;
+			width: auto;
+		}
+	}
+}

package/src/components/toc/exports.scss

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

package/src/components/toc/index.scss

@@ -0,0 +1,42 @@
+@use 'exports' as *;
+
+.tableOfContent {
+	@include vars;
+	@include component;
+}
+
+.tableOfContent-list-item-action {
+	&:not(.disabled, .is-disabled, [disabled]) {
+		&:is(:hover) {
+			@include hover;
+		}
+
+		&:is(:focus) {
+			@include focus;
+		}
+
+		&:is(:active) {
+			@include active;
+		}
+
+		&.is-active {
+			@include isActive;
+
+			&:is(:hover) {
+				@include isActiveHover;
+			}
+
+			&:is(:focus) {
+				@include isActiveFocus;
+			}
+
+			&:is(:active) {
+				@include isActiveActive;
+			}
+		}
+	}
+
+	&:is(.disabled, .is-disabled, [disabled]) {
+		@include disabled;
+	}
+}

package/src/components/toc/states.scss

@@ -0,0 +1,41 @@
+@mixin hover {
+	background-color: var(--palettes-grey-50);
+	color: var(--palettes-grey-700);
+}
+
+@mixin focus {
+	background-color: var(--palettes-grey-50);
+	color: var(--palettes-grey-700);
+	box-shadow: 0 0 0 4px var(--palettes-100, var(--components-tableOfContent-default-palette-100)), inset 0 0 0 1px var(--palettes-300, var(--components-tableOfContent-default-palette-300));
+}
+
+@mixin active {
+	background-color: var(--palettes-grey-100);
+	color: var(--palettes-grey-700);
+	box-shadow: 0 0 0 4px var(--palettes-200, var(--components-tableOfContent-default-palette-200)), inset 0 0 0 1px var(--palettes-400, var(--components-tableOfContent-default-palette-400));
+}
+
+@mixin isActive {
+	background-color: var(--palettes-50, var(--components-tableOfContent-default-palette-50));
+	color: var(--palettes-700, var(--components-tableOfContent-default-palette-700));
+}
+
+@mixin isActiveHover {
+	background-color: var(--palettes-100, var(--components-tableOfContent-default-palette-100));
+}
+
+@mixin isActiveFocus {
+	background-color: var(--palettes-100, var(--components-tableOfContent-default-palette-100));
+	box-shadow: 0 0 0 4px var(--palettes-200, var(--components-tableOfContent-default-palette-200)), inset 0 0 0 1px var(--palettes-400, var(--components-tableOfContent-default-palette-400));
+}
+
+@mixin isActiveActive {
+	background-color: var(--palettes-200, var(--components-tableOfContent-default-palette-200));
+	box-shadow: 0 0 0 4px var(--palettes-300, var(--components-tableOfContent-default-palette-300)), inset 0 0 0 1px var(--palettes-500, var(--components-tableOfContent-default-palette-500));
+	color: var(--palettes-grey-700);
+}
+
+@mixin disabled {
+	color: var(--palettes-grey-500);
+	pointer-events: none;
+}

package/src/components/toc/vars.scss

@@ -0,0 +1,14 @@
+@mixin vars {
+	--components-tableOfContent-default-palette-50: var(--palettes-primary-50);
+	--components-tableOfContent-default-palette-100: var(--palettes-primary-100);
+	--components-tableOfContent-default-palette-200: var(--palettes-primary-200);
+	--components-tableOfContent-default-palette-300: var(--palettes-primary-300);
+	--components-tableOfContent-default-palette-400: var(--palettes-primary-400);
+	--components-tableOfContent-default-palette-500: var(--palettes-primary-500);
+	--components-tableOfContent-default-palette-600: var(--palettes-primary-600);
+	--components-tableOfContent-default-palette-700: var(--palettes-primary-700);
+	--components-tableOfContent-default-palette-800: var(--palettes-primary-800);
+	--components-tableOfContent-default-palette-900: var(--palettes-primary-900);
+	--components-tableOfContent-item-padding: var(--spacings-smaller) var(--spacings-small);
+	--components-tableOfContent-item-border-width: 2px;
+}

package/src/components/util/exports.scss

@@ -0,0 +1 @@
+@forward '/';

package/src/components/util/index.scss

@@ -0,0 +1,177 @@
+@use 'sass:list';
+@use '../../commons/config';
+@use '../../commons/core';
+@use '../../commons/utils/a11y';
+@use '../../commons/utils/reset';
+@use '../../commons/utils/text';
+
+@use '../title/exports' as title;
+
+@include core.classes('min-width', core.$contents);
+@include core.classes('flex-direction', core.$direction);
+@include core.classes('flex-wrap', core.$wrap);
+@include core.classes('justify-content', core.$justify);
+@include core.classes('align-items', core.$align);
+@include core.classes('flex-grow', core.$flex);
+@include core.classes('flex-shrink', core.$flex);
+@include core.classes('flex-basis', core.$basis);
+@include core.classes('flex-order', core.$order);
+@include core.classes('align-self', core.$align);
+@include core.classes('text-align', core.$textAlign);
+@include core.classes('visibility', core.$visibility);
+@include core.classes('font-weight', core.$fontWeight);
+@include core.classes('pointer-events', core.$pointerEvents);
+@include core.classes('white-space', core.$whiteSpace);
+@include core.classes('vertical-align', core.$verticalAlign);
+@include core.classes('float', core.$float);
+@include core.classes('position', core.$position);
+@include core.classes('display', core.$displays);
+
+@media only print {
+	@include core.classes('display', core.$displays, $prefix: config.$prefix + 'onlyPrint');
+}
+
+@each $display in core.$displays {
+	@if $display != 'none' {
+		.#{config.$prefix}onlyPrintDisplay#{core.capitalize($display)} {
+			display: none;
+		}
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@include core.classes('scroll-behavior', core.$scrollBehavior);
+}
+
+@include core.spacings;
+@include core.sizes;
+@include core.palettes;
+@include core.borderRadius;
+
+.#{config.$prefix}positionStatic {
+	position: static !important;
+}
+
+.#{config.$prefix}textLeft {
+	text-align: left !important;
+}
+
+.#{config.$prefix}textRight {
+	text-align: right !important;
+}
+
+.#{config.$prefix}textCenter {
+	text-align: center !important;
+}
+
+.#{config.$prefix}mask {
+	@include a11y.mask('!important');
+}
+
+.#{config.$prefix}listReset {
+	@include reset.list('!important');
+}
+
+.#{config.$prefix}descriptionListReset {
+	@include reset.list($list: 'dl', $suffix: '!important');
+}
+
+.#{config.$prefix}buttonReset {
+	@include reset.button('!important');
+}
+
+.#{config.$prefix}clearfix,
+.#{config.$prefix}clear {
+	@include reset.clearfix('!important');
+}
+
+.#{config.$prefix}ellipsis {
+	@include text.ellipsis('!important');
+}
+
+[data-content-before] {
+	&::before {
+		content: attr(data-content-before);
+	}
+}
+
+[data-content-after] {
+	&::after {
+		content: attr(data-content-after);
+	}
+}
+
+.#{config.$prefix}h1,
+.#{config.$prefix}h2,
+.#{config.$prefix}h3,
+.#{config.$prefix}h4,
+.#{config.$prefix}h5,
+.#{config.$prefix}h6 {
+	@include title.component;
+}
+
+.#{config.$prefix}h1 {
+	@include title.h1;
+
+	&.mod-headline {
+		@include title.headline;
+	}
+}
+
+.#{config.$prefix}h2 {
+	@include title.h2;
+}
+
+.#{config.$prefix}h3 {
+	@include title.h3;
+}
+
+.#{config.$prefix}h4 {
+	@include title.h4;
+}
+
+.#{config.$prefix}h5 {
+	@include title.h5;
+}
+
+.#{config.$prefix}h6 {
+	@include title.h6;
+}
+
+.#{config.$prefix}ellipsis {
+	@include text.ellipsis;
+}
+
+.#{config.$prefix}unit {
+	font-size: 0.66em !important;
+}
+
+.#{config.$prefix}comma {
+	&:not(:last-child) {
+		&::after {
+			content: ', ' !important;
+		}
+	}
+}
+
+@each $direction in core.$boxDirection {
+	@if $direction == '' {
+		.#{config.$prefix}insetReset,
+		.#{config.$prefix}inset0 {
+			inset: 0 !important;
+		}
+	} @else {
+		.#{config.$prefix}#{$direction}Reset,
+		.#{config.$prefix}#{$direction}0 {
+			#{$direction}: 0 !important;
+		}
+	}
+}
+
+@each $elevation in config.$elevations {
+	$index: list.index(config.$elevations, $elevation);
+
+	.#{config.$prefix}-elevate#{$index} {
+		box-shadow: var(--commons-elevations-elevation-#{$index});
+	}
+}

package/src/main.dist.scss

@@ -1,7 +1,4 @@
-@import
-	"main",
-	"mixins/cssvars";
+@use 'commons';
+@use 'components'; // chargement de tout les composants
 
-:root {
-	@include generateCSSVarsFromTheme($theme);
-}
+@import '../../ng/style/main';

package/src/main.scss

@@ -1,13 +1 @@
-$noCssVar: true;
-
-@import
-
-	"theming",
-	"mixins",
-	"mixins/cssvars",
-	"normalize",
-	"typo",
-	"utilities",
-	"icons",
-	"components",
-	"shame"; // Shame - Put here the bad code, weirdo
+@use 'commons';

package/src/_components.overridable.scss

@@ -1,54 +0,0 @@
-@import
-	"theming/components",
-	"components.override";
-
-@import
-	"components/action-icon",
-	"components/box",
-	"components/breadcrumbs",
-	"components/button",
-	'components/button-group',
-	"components/callout",
-	"components/card",
-	"components/chips",
-	"components/code",
-	"components/collapse",
-	"components/container",
-	"components/content-section",
-	"components/divider",
-	"components/empty-state",
-	"components/error-page",
-	"components/filters",
-	"components/form",
-	"components/gauge",
-	"components/grid",
-	"components/header",
-	"components/label",
-	"components/layout",
-	"components/link",
-	"components/list",
-	"components/loading",
-	"components/main",
-	"components/menu",
-	"components/nav-side",
-	"components/pagination",
-	"components/page-header",
-	"components/progress",
-	"components/section",
-	"components/table",
-	"components/timeline",
-	"components/table-of-content",
-	"components/tag",
-	"components/toasts",
-	"components/title-section",
-	"components/communicationBanner",
-
-	// Forms
-	"components/inputs/checkbox/checkbox",
-	"components/inputs/checkbox/checkboxesfield",
-	"components/inputs/textfield/textfield",
-	"components/inputs/radio/radio",
-	"components/inputs/radio/radiosfield",
-	"components/inputs/radio-buttons/radio-buttons",
-	"components/inputs/switch/switch",
-	"components/inputs/file/file";