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

package/src/components/card/states.scss

@@ -0,0 +1,19 @@
+@mixin disabled {
+	color: var(--commons-disabled-color);
+	background-color: var(--commons-disabled-background);
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	.u-h1,
+	.u-h2,
+	.u-h3,
+	.u-h4,
+	.u-h5,
+	.u-h6 {
+		color: var(--commons-disabled-color) !important;
+	}
+}

package/src/components/card/vars.scss

@@ -0,0 +1,9 @@
+@mixin vars {
+	--components-card-content-padding: 1.5rem;
+	--components-card-footer-padding: 0.33rem 1.5rem;
+	--components-card-mod-grey: var(--commons-background-base);
+	--components-card-border-radius: var(--commons-border-radius-big);
+	--components-card-border-color: var(--commons-divider-color);
+	--components-card-hover-border: var(--palettes-grey-400);
+	--components-card-hover-background: var(--palettes-grey-100);
+}

package/src/components/checkbox/component.scss

@@ -0,0 +1,86 @@
+@use '../../../../icons/src/mixins' as icon;
+@use '../../commons/utils/a11y';
+
+@mixin component {
+	display: block;
+	position: relative;
+
+	@at-root {
+		.checkbox-label {
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: color;
+			display: inline-flex;
+			align-items: flex-start;
+			cursor: pointer;
+
+			&::before {
+				@include icon.makeIcon('tick');
+				background-color: var(--colors-white-color);
+				width: var(--components-checkbox-input-size);
+				height: var(--components-checkbox-input-size);
+				margin-right: var(--components-checkbox-input-margin-right);
+				margin-top: var(--components-checkbox-input-margin-top);
+				border-radius: var(--components-checkbox-input-border-radius);
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-property: all;
+				border: 2px solid var(--components-checkbox-input-border-color);
+				line-height: .85;
+				font-size: 1rem;
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: auto;
+				color: transparent;
+				display: block;
+				text-align: center;
+				text-indent: -.1rem;
+			}
+
+			&:hover {
+				&::before {
+					border-color: var(--palettes-600, var(--components-checkbox-input-border-hover));
+				}
+			}
+
+			&:active {
+				&::before {
+					border-color: var(--palettes-800, var(--components-checkbox-default-palette-800));
+					box-shadow: 0 0 0 4px var(--palettes-300, var(--components-checkbox-default-palette-300));
+				}
+			}
+		}
+
+		.checkbox-input {
+			@include a11y.mask;
+
+			&:checked ~ .checkbox-label {
+				&::before {
+					color: var(--colors-white-color);
+					background-color: var(--palettes-700, var(--components-checkbox-default-palette-700));
+					border-color: var(--palettes-700, var(--components-checkbox-default-palette-700));
+				}
+			}
+
+			&:not(:disabled):checked ~ .checkbox-label {
+				&:hover {
+					&::before {
+						background-color: var(--palettes-600, var(--components-checkbox-default-palette-600));
+						border-color: var(--palettes-600, var(--components-checkbox-default-palette-600));
+					}
+				}
+
+				&:active {
+					&::before {
+						background-color: var(--palettes-800, var(--components-checkbox-default-palette-800));
+						border-color: var(--palettes-800, var(--components-checkbox-default-palette-800));
+					}
+				}
+			}
+
+			&:focus ~ .checkbox-label {
+				&::before {
+					box-shadow: 0 0 0 4px var(--palettes-200, var(--components-checkbox-default-palette-200));
+				}
+			}
+		}
+	}
+}

package/src/components/checkbox/exports.scss

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

package/src/components/checkbox/index.scss

@@ -0,0 +1,52 @@
+@use 'exports' as *;
+
+.checkbox {
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
+	}
+
+	&.mod-big {
+		@include big;
+	}
+
+	&.mod-small {
+		@include small;
+	}
+
+	&.mod-noLabel {
+		@include noLabel;
+	}
+
+	&:is(.is-required, .required) {
+		@include required;
+	}
+
+	&:is(.is-error, .error) {
+		@include state('error');
+	}
+
+	&:is(.is-warning, .warning) {
+		@include state('warning');
+	}
+
+	&:is(.is-success, .success) {
+		@include state('success');
+	}
+
+	.checkbox-input {
+		&:is(.is-incomplete, .incomplete) {
+			@include incomplete;
+		}
+
+		&:is([disabled], [read-only]) {
+			@include disabled;
+		}
+
+		&:is([aria-required]) {
+			@include required;
+		}
+	}
+}

package/src/components/checkbox/mods.scss

@@ -0,0 +1,44 @@
+@mixin inline {
+	vertical-align: middle;
+	display: inline-block;
+	margin-right: 1.5rem;
+}
+
+@mixin big {
+	.checkbox-label {
+		line-height: 1.75rem;
+
+		&::before {
+			font-size: 1.1rem;
+			height: 1.25rem;
+			width: 1.25rem;
+			margin-top: 1px;
+		}
+	}
+}
+
+@mixin small {
+	.checkbox-label {
+		font-size: var(--sizes-small-font-size);
+		line-height: var(--sizes-small-line-height);
+
+		&::before {
+			width: var(--sizes-small-font-size);
+			height: var(--sizes-small-font-size);
+			font-size: var(--sizes-smaller-font-size);
+			margin-top: var(--components-checkbox-input-small-top);
+		}
+	}
+}
+
+@mixin noLabel {
+	height: 1rem;
+
+	.checkbox-label {
+		vertical-align: top;
+
+		&::before {
+			margin: 0;
+		}
+	}
+}

package/src/components/checkbox/states.scss

@@ -0,0 +1,50 @@
+@use '../../../../icons/src/mixins' as icon;
+@use '../../commons/utils/form';
+
+@mixin disabled {
+	~ .checkbox-label {
+		color: var(--palettes-grey-500);
+		cursor: default;
+
+		&::before {
+			border: 2px solid var(--palettes-grey-500);
+			box-shadow: none;
+		}
+	}
+
+	&:checked ~ .checkbox-label {
+		&::before {
+			color: var(--palettes-grey-500);
+			background-color: var(--palettes-grey-200);
+			border: 2px solid var(--palettes-grey-200);
+		}
+	}
+}
+
+@mixin incomplete {
+	~ .checkbox-mixed ~ .checkbox-label,
+	~ .checkbox-label {
+		&::before {
+			@include icon.makeIcon('partial');
+		}
+	}
+}
+
+@mixin required {
+	~ .checkbox-label,
+	.checkbox-label {
+		&:not(:empty) {
+			&::after {
+				@include form.required;
+			}
+		}
+	}
+}
+
+@mixin state($state) {
+	.checkbox-label {
+		&::before {
+			border-color: var(--palettes-#{$state}-600);
+		}
+	}
+}

package/src/components/checkbox/vars.scss

@@ -0,0 +1,21 @@
+@mixin vars {
+	--components-checkbox-default-palette-50: var(--palettes-primary-50);
+	--components-checkbox-default-palette-100: var(--palettes-primary-100);
+	--components-checkbox-default-palette-200: var(--palettes-primary-200);
+	--components-checkbox-default-palette-300: var(--palettes-primary-300);
+	--components-checkbox-default-palette-400: var(--palettes-primary-400);
+	--components-checkbox-default-palette-500: var(--palettes-primary-500);
+	--components-checkbox-default-palette-600: var(--palettes-primary-600);
+	--components-checkbox-default-palette-700: var(--palettes-primary-700);
+	--components-checkbox-default-palette-800: var(--palettes-primary-800);
+	--components-checkbox-default-palette-900: var(--palettes-primary-900);
+	--components-checkbox-label-line-height: 1.5rem;
+	--components-checkbox-label-padding: 0 0 0 1.5rem;
+	--components-checkbox-input-margin-top: var(--spacings-smallest);
+	--components-checkbox-input-small-top: 1px;
+	--components-checkbox-input-margin-right: var(--spacings-smaller);
+	--components-checkbox-input-size: 1rem;
+	--components-checkbox-input-border-radius: var(--commons-border-radius);
+	--components-checkbox-input-border-color: var(--palettes-grey-700);
+	--components-checkbox-input-border-hover: var(--components-checkbox-default-palette-600);
+}

package/src/components/chip/component.scss

@@ -0,0 +1,52 @@
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin component {
+	background-color: var(--palettes-primary-700);
+	border-radius: var(--components-button-border-radius);
+	color: var(--colors-white-color);
+
+	display: inline-block;
+	position: relative;
+	vertical-align: middle;
+	margin: 0 0.2rem 0.3rem 0;
+	padding: 0.15rem 1.8rem 0.15rem 0.75rem;
+
+	@at-root {
+		.chip-kill {
+			background-color: var(--colors-white-color);
+			color: var(--palettes-primary-700);
+			border: 0;
+			border-radius: 50%;
+			bottom: 0;
+			font-size: 0.8rem;
+			font-weight: 700;
+			height: 1rem;
+			padding: 0.05rem 0 0;
+			right: 0.5rem;
+			top: 0;
+			width: 1rem;
+			transition-duration: 150ms;
+			transition-property: background-color;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: auto;
+			position: absolute;
+			cursor: pointer;
+
+			&::before {
+				@include icon.makeIcon('cross');
+			}
+
+			&:hover {
+				background-color: var(--components-chip-kill-hover);
+				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+			}
+
+			&:focus {
+				outline: none;
+				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 2px var(--components-chip-kill-hover);
+			}
+		}
+	}
+}

package/src/components/chip/exports.scss

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

package/src/components/chip/index.scss

@@ -0,0 +1,14 @@
+@use 'exports' as *;
+
+.chip {
+	@include vars;
+	@include component;
+
+	&.mod-unkillable {
+		@include unkillable;
+	}
+
+	&.mod-clickable {
+		@include clickable;
+	}
+}

package/src/components/chip/mods.scss

@@ -0,0 +1,24 @@
+@mixin unkillable {
+	padding: 0.15rem 0.75rem;
+
+	.chip-kill {
+		display: none;
+	}
+}
+
+@mixin clickable {
+	cursor: pointer;
+	display: inline-block;
+	text-decoration: none;
+
+	&:hover,
+	&:focus {
+		color: var(--colors-white-color);
+		background-color: var(--palettes-primary-600);
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 4px var(--palettes-primary-200);
+	}
+}

package/src/components/chip/vars.scss

@@ -0,0 +1,3 @@
+@mixin vars {
+	--components-chip-kill-hover: var(--palettes-primary-300);
+}

package/src/components/code/component.scss

@@ -0,0 +1,11 @@
+@mixin component {
+	background-color: #fef1f5;
+	color: #ec407a;
+	white-space: nowrap;
+	border-radius: 3px;
+	font-size: 0.8rem;
+	line-height: 1.4rem;
+	margin: 0.1rem;
+	padding: 0 0.3rem;
+	tab-size: 2;
+}

package/src/components/code/exports.scss

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

package/src/components/code/index.scss

@@ -0,0 +1,10 @@
+@use 'exports' as *;
+
+.code {
+	@include vars;
+	@include component;
+
+	&.mod-block {
+		@include block;
+	}
+}

package/src/components/code/mods.scss

@@ -0,0 +1,6 @@
+@mixin block {
+	display: block;
+	white-space: pre-wrap;
+	margin: 0.5rem 0;
+	padding: 1rem;
+}

package/src/components/code/vars.scss

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

package/src/components/collapse/component.scss

@@ -0,0 +1,33 @@
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin component {
+	display: block;
+
+	@at-root {
+		.collapse-title {
+			margin-bottom: var(--spacings-smallest);
+			display: inline-flex;
+			overflow: hidden;
+			cursor: pointer;
+
+			&::-webkit-details-marker {
+				display: none;
+			}
+
+			&:focus-within,
+			&:hover {
+				color: var(--palettes-grey-900);
+			}
+
+			&::before {
+				@include icon.makeIcon('chevron_east');
+
+				font-size: var(--sizes-smaller-font-size);
+				margin-right: var(--spacings-smallest);
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-property: transform;
+				vertical-align: middle;
+			}
+		}
+	}
+}

package/src/components/collapse/exports.scss

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

package/src/components/collapse/index.scss

@@ -0,0 +1,14 @@
+@use 'exports' as *;
+
+.collapse {
+	@include vars;
+	@include component;
+
+	&:not(.is-open, .open, [open]) {
+		@include close;
+	}
+
+	&:is(.is-open, .open, [open]) {
+		@include open;
+	}
+}

package/src/components/collapse/states.scss

@@ -0,0 +1,13 @@
+@mixin close {
+	> .collapse-content {
+		display: none;
+	}
+}
+
+@mixin open {
+	> .collapse-title {
+		&::before {
+			transform: rotate(90deg);
+		}
+	}
+}

package/src/components/collapse/vars.scss

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

package/src/components/container/component.scss

@@ -0,0 +1,5 @@
+@mixin component {
+	padding: var(--container-padding, calc(var(--spacings-bigger) + var(--spacings-smaller)));
+	position: relative;
+	max-width: 100rem;
+}

package/src/components/container/exports.scss

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

package/src/components/container/index.scss

@@ -0,0 +1,34 @@
+@use 'exports' as *;
+
+.container {
+	@include vars;
+	@include component;
+
+	&.mod-center {
+		@include center;
+	}
+
+	&.mod-small {
+		@include small;
+	}
+
+	&.mod-maxM {
+		@include maxM;
+	}
+
+	&.mod-maxL {
+		@include maxL;
+	}
+
+	&.mod-maxXL {
+		@include maxXL;
+	}
+
+	&.mod-maxXXL {
+		@include maxXXL;
+	}
+
+	&.mod-maxXXXL {
+		@include maxXXXL;
+	}
+}

package/src/components/container/mods.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+@use 'sass:map';
+
+@use '../../commons/config';
+
+@mixin center {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@mixin small {
+	--container-padding: var(--spacings-small);
+}
+
+@mixin maxM {
+	max-width: math.div(map.get(config.$breakpoints, 'm'), 16px) * 1rem;
+}
+
+@mixin maxL {
+	max-width: math.div(map.get(config.$breakpoints, 'l'), 16px) * 1rem;
+}
+
+@mixin maxXL {
+	max-width: math.div(map.get(config.$breakpoints, 'xl'), 16px) * 1rem;
+}
+
+@mixin maxXXL {
+	max-width: math.div(map.get(config.$breakpoints, 'xxl'), 16px) * 1rem;
+}
+
+@mixin maxXXXL {
+	max-width: math.div(map.get(config.$breakpoints, 'xxxl'), 16px) * 1rem;
+}

package/src/components/container/vars.scss

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

package/src/components/contentSection/component.scss

@@ -0,0 +1,3 @@
+@mixin component {
+	margin-bottom: var(--components-contentSection-margin-bottom);
+}

package/src/components/contentSection/exports.scss

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

package/src/components/contentSection/index.scss

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

package/src/components/contentSection/vars.scss

@@ -0,0 +1,3 @@
+@mixin vars {
+	--components-contentSection-margin-bottom: 2.5rem;
+}

package/src/components/divider/component.scss

@@ -0,0 +1,8 @@
+@mixin component {
+	border: 0;
+	border-top-color: var(--commons-divider-color);
+	border-top-width: var(--commons-divider-width);
+	border-top-style: solid;
+	margin-top: var(--spacings-standard);
+	margin-bottom: var(--spacings-standard);
+}

package/src/components/divider/exports.scss

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

package/src/components/divider/index.scss

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

package/src/components/divider/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+	@at-root {
+		html {
+			--commons-divider-width: 1px;
+			--commons-divider-color: #d6d6d6;
+		}
+	}
+}