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

package/src/components/icon/index.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../../commons/config';
+@use 'exports' as *;
+
+$font-path: '../font/lucca-icons';
+
+@import '../../../../icons/src/main';
+
+.lucca-icon {
+	@each $size in map.keys(config.$sizes) {
+		&.size-#{$size} {
+			@include size($size);
+		}
+	}
+}

package/src/components/icon/mods.scss

@@ -0,0 +1,3 @@
+@mixin size($size) {
+	font-size: calc(var(--sizes-#{$size}-font-size) * 1.25);
+}

package/src/components/index.scss

@@ -0,0 +1,55 @@
+@forward 'icon'; // 16 Ko
+@forward 'box'; // 1 Ko
+@forward 'toc'; // 1 Ko
+@forward 'tag'; // 1 Ko
+@forward 'code'; // 1 Ko
+@forward 'link'; // 1 Ko
+@forward 'link'; // 1 Ko
+@forward 'chip'; // 1 Ko
+@forward 'title'; // 1 Ko
+@forward 'label'; // 1 Ko
+@forward 'filters'; // 1 Ko
+@forward 'divider'; // 1 Ko
+@forward 'section'; // 1 Ko
+@forward 'collapse'; // 1 Ko
+@forward 'container'; // 1 Ko
+@forward 'errorPage'; // 1 Ko
+@forward 'emptyState'; // 1 Ko
+@forward 'pageHeader'; // 1 Ko
+@forward 'pagination'; // 1 Ko
+@forward 'mainContent'; // 1 Ko
+@forward 'titleSection'; // 1 Ko
+@forward 'contentSection'; // 1 Ko
+@forward 'list'; // 2 Ko
+@forward 'card'; // 2 Ko
+@forward 'gauge'; // 2 Ko
+@forward 'callout'; // 2 Ko
+@forward 'loading'; // 2 Ko
+@forward 'progress'; // 2 Ko
+@forward 'breadcrumb'; // 2 Ko
+@forward 'buttonGroup'; // 2 Ko
+@forward 'header'; // 3 Ko
+@forward 'actionIcon'; // 3 Ko
+@forward 'menu'; // 4 Ko
+
+@forward 'toast'; // 5 Ko
+@forward 'layout'; // 5 Ko
+@forward 'table'; // 7 Ko
+
+@forward 'tableSorted'; // 9 Ko
+@forward 'timeline'; // 10 Ko
+@forward 'button'; // 12 Ko
+@forward 'util'; // 14 Ko
+@forward 'navside'; // 15 Ko
+@forward 'tableFixed'; // 33 Ko
+@forward 'grid'; // 40 Ko
+@forward 'tableSticked'; // 67 Ko
+
+@forward 'form'; // 25 Ko
+@forward 'field';
+@forward 'textfield'; // 13 Ko
+@forward 'radio'; // 4 Ko
+@forward 'radioButtons'; // 5 Ko
+@forward 'checkbox'; // 7 Ko
+@forward 'switch'; // 4 Ko
+@forward 'file'; // 5 Ko

package/src/components/label/component.scss

@@ -0,0 +1,14 @@
+@mixin component {
+	background-color: var(--palettes-100, var(--components-label-default-palette-100));
+	color: var(--palettes-900, var(--components-label-default-palette-900));
+	font-size: var(--sizes-small-font-size);
+	display: inline-block;
+	text-align: center;
+	vertical-align: baseline;
+	white-space: nowrap;
+	border-radius: 1rem;
+	font-size: var(--sizes-smaller-font-size);
+	line-height: 1.2;
+	margin: 0 0.3rem;
+	padding: 0.25rem 0.8rem;
+}

package/src/components/label/exports.scss

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

package/src/components/label/index.scss

@@ -0,0 +1,22 @@
+@use 'exports' as *;
+
+.label {
+	@include vars;
+	@include component;
+
+	&.mod-number {
+		@include number;
+
+		&.mod-small {
+			@include numberSmall;
+		}
+
+		&.mod-smaller {
+			@include numberSmaller;
+		}
+	}
+
+	&.mod-icon {
+		@include icon;
+	}
+}

package/src/components/label/mods.scss

@@ -0,0 +1,42 @@
+@mixin number {
+	height: var(--sizes-standard-line-height);
+	min-width: var(--sizes-standard-line-height);
+	line-height: var(--sizes-standard-line-height);
+	padding: 0 var(--spacings-smaller);
+	border-radius: 9999px;
+	font-weight: 600;
+}
+
+@mixin numberSmall {
+	height: var(--sizes-small-line-height);
+	min-width: var(--sizes-small-line-height);
+	line-height: var(--sizes-small-line-height);
+	padding: 0 var(--spacings-smallest);
+}
+
+@mixin numberSmaller {
+	height: var(--sizes-smaller-line-height);
+	min-width: var(--sizes-smaller-line-height);
+	line-height: var(--sizes-smaller-line-height);
+	padding: 0 0.1rem;
+}
+
+@mixin icon {
+	display: inline-flex;
+	align-items: center;
+	padding-left: 0.6rem;
+	padding-right: 0.6rem;
+
+	.label-icon {
+		font-size: var(--sizes-standard-font-size);
+		margin-right: 0.25rem;
+
+		&:last-child {
+			margin-right: 0;
+			margin-left: 0.25rem;
+		}
+		&:only-child {
+			margin: 0;
+		}
+	}
+}

package/src/components/label/vars.scss

@@ -0,0 +1,12 @@
+@mixin vars {
+	--components-label-default-palette-50: var(--palettes-primary-50);
+	--components-label-default-palette-100: var(--palettes-primary-100);
+	--components-label-default-palette-200: var(--palettes-primary-200);
+	--components-label-default-palette-300: var(--palettes-primary-300);
+	--components-label-default-palette-400: var(--palettes-primary-400);
+	--components-label-default-palette-500: var(--palettes-primary-500);
+	--components-label-default-palette-600: var(--palettes-primary-600);
+	--components-label-default-palette-700: var(--palettes-primary-700);
+	--components-label-default-palette-800: var(--palettes-primary-800);
+	--components-label-default-palette-900: var(--palettes-primary-900);
+}

package/src/components/layout/component.scss

@@ -0,0 +1,171 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '../../commons/utils/media';
+@use '../../commons/config';
+
+@mixin component {
+	min-height: 100vh;
+	display: grid;
+
+	@include media.largerThan('l') {
+		grid-template-columns: var(--commons-navSide-compact-width) 1fr var(--components-aside-width);
+		grid-template-rows: var(--commons-banner-height) 1fr;
+		grid-template-areas:
+			'banner banner banner'
+			'navside content aside';
+	}
+
+	@include media.smallerThan('l') {
+		grid-template-columns: var(--commons-navSide-compact-width) 1fr;
+		grid-template-rows: var(--commons-banner-height) 1fr auto;
+		grid-template-areas:
+			'banner banner'
+			'navside content'
+			'navside aside';
+	}
+
+	@include media.smallerThan('s') {
+		grid-template-columns: 1fr;
+		grid-template-rows: var(--commons-banner-height) auto 1fr auto;
+		grid-template-areas:
+			'banner'
+			'navside'
+			'content'
+			'aside';
+	}
+
+	@at-root {
+		.layout-content-container {
+			max-width: math.div(map.get(config.$breakpoints, 'm'), 16px) * 1rem;
+		}
+
+		.layout-banner {
+			grid-area: banner;
+			height: var(--commons-banner-height);
+			background-color: var(--colors-white-color);
+			position: sticky;
+			top: 0;
+			z-index: 2;
+		}
+
+		.layout-content {
+			top: var(--commons-banner-height);
+			grid-area: content;
+			position: sticky;
+			display: flex;
+			flex-direction: column;
+
+			@include media.smallerThan('s') {
+				position: static;
+			}
+		}
+
+		.layout-content-headers,
+		.layout-content-headers-subheader,
+		.layout-content-headers-header {
+			background-color: var(--colors-white-color);
+			top: var(--commons-banner-height);
+			position: sticky;
+
+			@include media.smallerThan('s') {
+				position: static;
+			}
+		}
+
+		.layout-content-headers-header {
+			z-index: 1;
+		}
+
+		.layout-content-inner {
+			flex-grow: 1;
+		}
+
+		.layout-content-footer {
+			background-color: var(--colors-white-color);
+			position: sticky;
+			bottom: 0;
+
+			@include media.smallerThan('s') {
+				position: static;
+			}
+		}
+
+		.layout-navside,
+		.layout-aside {
+			min-height: calc(100vh - var(--commons-banner-height));
+			top: var(--commons-banner-height);
+			display: flex;
+			position: sticky;
+			flex-direction: column;
+			align-self: self-start;
+
+			@include media.smallerThan('s') {
+				min-height: 0;
+			}
+		}
+
+		.layout-aside {
+			grid-area: aside;
+
+			@include media.smallerThan('l') {
+				min-height: 0;
+				position: static;
+			}
+		}
+
+		.layout-navside {
+			max-height: calc(100vh - var(--commons-banner-height));
+			grid-area: navside;
+			z-index: 2;
+			overflow: auto;
+		}
+
+		.layout-navside-content-inner,
+		.layout-aside-content-inner {
+			flex-grow: 1;
+		}
+
+		.layout-navside-footer,
+		.layout-aside-footer {
+			position: sticky;
+			bottom: 0;
+			background-color: var(--colors-white-color);
+
+			@include media.smallerThan('s') {
+				margin-top: 0;
+				position: static;
+			}
+		}
+
+		.layout-navside-toggle {
+			background-color: var(--colors-white-color);
+			border: 0;
+			margin: 0;
+			padding: 0;
+			top: 0;
+			position: sticky;
+			color: inherit;
+			font: inherit;
+			cursor: pointer;
+
+			@include media.largerThan('s') {
+				display: none;
+			}
+		}
+
+		.layout-aside-content,
+		.layout-navside-content {
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.layout-navside-content {
+			@include media.smallerThan('s') {
+				.layout-navside-toggle[aria-expanded='false'] ~ & {
+					display: none;
+				}
+			}
+		}
+	}
+}

package/src/components/layout/exports.scss

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

package/src/components/layout/index.scss

@@ -0,0 +1,68 @@
+@use 'exports' as *;
+
+.layout {
+	@include vars;
+	@include component;
+
+	&.mod-navsideWithoutScrollbar {
+		@include navsideWithoutScrollbar;
+	}
+
+	&.mod-contentHeaderStatic {
+		@include contentHeaderStatic;
+	}
+
+	&.mod-contentSubheaderStatic {
+		@include contentSubheaderStatic;
+	}
+
+	&.mod-navsideFooterStatic {
+		@include navsideFooterStatic;
+	}
+
+	&.mod-asideFooterStatic {
+		@include asideFooterStatic;
+	}
+
+	&.mod-contentFooterStatic {
+		@include contentFooterStatic;
+	}
+
+	&.mod-asideBefore {
+		@include asideBefore;
+	}
+
+	&.mod-headerRemoved {
+		@include headerRemoved;
+	}
+
+	&.mod-subheaderRemoved {
+		@include subheaderRemoved;
+	}
+
+	&.mod-asideRemoved {
+		@include asideRemoved;
+	}
+
+	&.mod-asideFooterRemoved {
+		@include asideFooterRemoved;
+	}
+
+	&.mod-contentFooterRemoved {
+		@include contentFooterRemoved;
+	}
+
+	&.mod-navsideFooterRemoved {
+		@include navsideFooterRemoved;
+	}
+
+	&.mod-navsideLarge {
+		@include navsideLarge;
+	}
+}
+
+html {
+	&:is(.has-overlay, .withOverlay) {
+		@include overlay;
+	}
+}

package/src/components/layout/mods.scss

@@ -0,0 +1,109 @@
+@use '../../commons/utils/media';
+
+@mixin navsideWithoutScrollbar {
+	.layout-navside {
+		max-height: auto;
+		overflow: visible;
+	}
+}
+
+@mixin contentHeaderStatic {
+	.layout-content-headers-header {
+		position: static;
+	}
+}
+
+@mixin contentSubheaderStatic {
+	.layout-content-headers-subheader {
+		position: static;
+	}
+}
+
+@mixin navsideFooterStatic {
+	.layout-navside-footer {
+		position: static;
+	}
+}
+
+@mixin asideFooterStatic {
+	.layout-aside-footer {
+		position: static;
+	}
+}
+
+@mixin contentFooterStatic {
+	.layout-content-footer {
+		position: static;
+	}
+}
+
+@mixin asideBefore {
+	&:not(.mod-asideRemoved) {
+		@include media.largerThan('l') {
+			grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
+			grid-template-areas:
+				'banner	banner banner'
+				'navside aside	content';
+
+			&.mod-navsideLarge {
+				grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
+			}
+		}
+	}
+}
+
+@mixin headerRemoved {
+	.layout-content-headers-header {
+		display: none;
+	}
+}
+
+@mixin subheaderRemoved {
+	.layout-content-headers-subheader {
+		display: none;
+	}
+}
+
+@mixin asideRemoved {
+	grid-template-columns: var(--commons-navSide-compact-width) 1fr;
+
+	.layout-aside {
+		display: none;
+	}
+
+	&.mod-navsideLarge {
+		grid-template-columns: var(--commons-navSide-width) 1fr;
+	}
+}
+
+@mixin asideFooterRemoved {
+	.layout-aside-footer {
+		display: none;
+	}
+}
+
+@mixin contentFooterRemoved {
+	.layout-footer {
+		display: none;
+	}
+}
+
+@mixin navsideFooterRemoved {
+	.layout-navside-footer {
+		display: none;
+	}
+}
+
+@mixin navsideLarge {
+	@include media.largerThan('l') {
+		grid-template-columns: var(--commons-navSide-width) 1fr var(--components-aside-width);
+	}
+
+	@include media.smallerThan('l') {
+		grid-template-columns: var(--commons-navSide-width) 1fr;
+	}
+
+	@include media.smallerThan('s') {
+		grid-template-columns: 1fr;
+	}
+}

package/src/components/layout/states.scss

@@ -0,0 +1,26 @@
+@use '../../commons/utils/media';
+
+@mixin overlay {
+	&,
+	body {
+		touch-action: none;
+		overscroll-behavior: none;
+		-webkit-overflow-scrolling: auto;
+	}
+
+	body {
+		overflow: hidden !important;
+	}
+}
+
+@mixin active {
+	@include media.smallerThan('s') {
+		top: var(--commons-banner-height);
+		height: calc(100vh - var(--commons-banner-height));
+		background-color: var(--colors-white-color);
+		position: fixed;
+		overflow: auto;
+		left: 0;
+		right: 0;
+	}
+}

package/src/components/layout/vars.scss

@@ -0,0 +1,3 @@
+@mixin vars {
+	--components-aside-width: 18rem;
+}

package/src/components/link/component.scss

@@ -0,0 +1,15 @@
+@mixin component {
+	background-color: transparent;
+	border: 0;
+	color: var(--commons-text-link-color);
+	cursor: pointer;
+	display: inline;
+	font-family: var(--commons-font-family);
+	margin: 0;
+	padding: 0;
+	text-decoration: underline;
+
+	&:is(:hover, :focus) {
+		color: var(--commons-text-link-hover);
+	}
+}

package/src/components/link/exports.scss

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

package/src/components/link/index.scss

@@ -0,0 +1,6 @@
+@use 'exports' as *;
+
+.link {
+	@include vars;
+	@include component;
+}

package/src/components/link/vars.scss

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

package/src/components/list/component.scss

@@ -0,0 +1,63 @@
+@use '../../commons/utils/a11y';
+
+@mixin component {
+	background-color: var(--colors-white-color);
+	box-shadow: var(--commons-elevations-elevation-1);
+	margin-bottom: var(--components-list-margin-bottom);
+	list-style: none;
+	padding: 0;
+
+	@at-root {
+		.list-item {
+			border-bottom-width: var(--commons-divider-width);
+			border-bottom-color: var(--commons-divider-color);
+			color: var(--palettes-grey-800);
+			border-bottom-style: solid;
+			align-items: center;
+			display: flex;
+			position: relative;
+			text-decoration: none;
+
+			&:last-child {
+				border: 0;
+			}
+
+			// if no hover on list item
+			&:not(:hover) {
+				.actionIcon {
+					// and no focus on action icon
+					&:not(:focus) {
+						// then mask
+						@include a11y.mask;
+
+						opacity: 0;
+					}
+				}
+			}
+		}
+
+		.list-item-content {
+			padding: var(--components-list-padding);
+			color: var(--palettes-grey-800);
+			text-decoration: none;
+			width: 100%;
+		}
+
+		.list-item-content-title {
+			margin: 0;
+		}
+
+		.list-item-content-description {
+			margin: 0;
+		}
+
+		.list-item-actions {
+			padding: var(--components-list-padding);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: all;
+			margin-left: auto;
+			white-space: nowrap;
+			padding-left: 0;
+		}
+	}
+}

package/src/components/list/exports.scss

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

package/src/components/list/index.scss

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