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

package/src/components/_button.scss

@@ -1,413 +0,0 @@
-// MIXINS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-@mixin buttonColoring($palette, $suffix: '') {
-	background-color: _color($palette) #{$suffix};
-	color: _color($palette, 'text') #{$suffix};
-
-	&:not([disabled], .is-disabled) {
-		&:hover {
-			background-color: _color($palette, 600);
-			box-shadow: _theme('commons.box-shadow.xs');
-		}
-
-		&:focus {
-			box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, 200);
-			outline: none;
-			background-color: _color($palette, 600);
-		}
-
-		&:active {
-			background-color: _color($palette, 800);
-			box-shadow: 0 0 0 4px _color($palette, 300);
-		}
-	}
-
-	.button-counter {
-		background-color: _color($palette, 500);
-	}
-}
-
-@mixin buttonLinkColoring($palette, $activeShadowPalette) {
-	color: _color($palette, 700);
-
-	&:not([disabled], .is-disabled) {
-		&:hover {
-			background-color: _color($palette, 50);
-			box-shadow: none;
-		}
-
-		&:focus {
-			background-color: _color($palette, 50);
-			box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($activeShadowPalette, 100),
-				inset 0 0 0 1px _color($activeShadowPalette, 400);
-			outline: none;
-		}
-
-		&:active {
-			background-color: _color($palette, 100);
-			box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($activeShadowPalette, 200),
-				inset 0 0 0 1px _color($activeShadowPalette, 500);
-		}
-	}
-}
-
-@mixin buttonOutlineColoring($palette) {
-	&:not([disabled], .is-disabled) {
-		color: _color($palette);
-		box-shadow: inset 0 0 0 1px _color($palette, 400);
-
-		&:hover {
-			background-color: _color($palette, 100);
-			color: _color($palette);
-			box-shadow: _theme('commons.box-shadow.xs'), inset 0 0 0 1px _color($palette, 400);
-		}
-
-		&:focus {
-			background-color: _color($palette, 100);
-			color: _color($palette);
-			box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, 100), inset 0 0 0 1px _color($palette, 400);
-			outline: none;
-		}
-
-		&:active {
-			background-color: _color($palette, 200);
-			color: _color($palette);
-			box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, 200), inset 0 0 0 1px _color($palette, 500);
-		}
-	}
-
-	.button-counter {
-		background-color: _color($palette, 300);
-		color: _color($palette);
-	}
-}
-
-// CLASSES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.button {
-	cursor: pointer;
-	border: 0;
-	border-radius: _component('button.border.radius');
-	display: inline-block;
-	font-family: unquote(_component('button.font.family'));
-	font-size: _component('button.font-size');
-	font-weight: _component('button.font-weight'); /* stylelint-disable-line font-weight-notation */
-	line-height: _component('button.line-height');
-	margin: _component('button.margin');
-	padding: _component('button.padding');
-	position: relative;
-	text-decoration: none;
-	transition: unquote(_component('button.transition'));
-	vertical-align: baseline;
-	white-space: nowrap;
-
-	&:first-of-type {
-		margin-left: 0;
-	}
-
-	&:last-of-type {
-		margin-right: 0;
-	}
-
-	.lucca-icon {
-		font-size: 1.25rem;
-		line-height: 1;
-	}
-}
-
-.button-counter {
-	border-radius: 1rem;
-	display: inline-block;
-	font-size: _theme('sizes.smaller.font-size');
-	font-weight: 600;
-	height: 1.5rem;
-	min-width: 1.5rem;
-	margin-left: _theme('spacings.smaller');
-	padding: 0 _theme('spacings.smallest');
-	vertical-align: bottom;
-}
-
-.button-icon {
-	height: 1.5rem;
-	line-height: 1.5rem;
-	font-size: 1.5rem;
-	transform: translateX(-0.2rem);
-	vertical-align: bottom;
-}
-
-// PALETTES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.button {
-	// default color
-	@include buttonColoring('button.default-palette');
-
-	// palette colors
-	@each $name, $palette in _getMap('palettes') {
-		&.palette-#{$name} {
-			@include buttonColoring($name);
-		}
-	}
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.button {
-	&.mod-small {
-		font-size: _component('button.small.font-size');
-		line-height: _component('button.small.line-height');
-		padding: _component('button.small.padding');
-
-		.lucca-icon {
-			line-height: 1;
-			font-size: 1rem;
-		}
-	}
-
-	&.mod-smaller {
-		font-size: _component('button.smaller.font-size');
-		line-height: _component('button.smaller.line-height');
-		padding: _component('button.smaller.padding');
-
-		.lucca-icon {
-			line-height: 1;
-			font-size: 0.875rem;
-		}
-	}
-
-	&.mod-link, // legacy class
-	&.mod-text {
-		background-color: transparent;
-		box-shadow: none;
-		padding: _component('button.mod-text.padding');
-
-		// default color
-		@include buttonLinkColoring('grey', 'button.default-palette');
-
-		// palette colors
-		@each $name, $palette in _getMap('palettes') {
-			&.palette-#{$name} {
-				@include buttonLinkColoring($name, $name);
-			}
-		}
-
-		&.mod-invert {
-			color: _color('white');
-
-			&:hover,
-			&:focus {
-				box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
-
-				&:not([disabled]) {
-					background-color: rgba(_color('white'), 0.1);
-					color: _color('white');
-				}
-			}
-		}
-	}
-
-	&.mod-more {
-		padding: 0 !important;
-		text-align: center;
-		min-width: 2rem;
-
-		&::before {
-			@include makeIcon('arrow_south');
-			height: 0;
-			vertical-align: text-top;
-		}
-
-		.mod-small {
-			width: 1.75rem;
-		}
-	}
-
-	// legacy: mod-outline
-	// new: mod-outlined
-	&.mod-outlined,
-	&.mod-outline {
-		background-color: _color('white');
-		box-shadow: inset 0 0 0 1px _color('grey', 400);
-		color: _color('text.default');
-
-		&:not([disabled], .is-disabled) {
-			&:hover {
-				background-color: _color('grey', 100);
-				color: _color('text.default');
-				box-shadow: 0 2px 8px rgba(19, 29, 53, 0.04), 0 1px 2px rgba(19, 29, 53, 0.06), inset 0 0 0 1px _color('grey', '400');
-			}
-
-			&:focus {
-				background-color: _color('grey', 100);
-				color: _color('text.default');
-				box-shadow: 0 2px 8px rgba(19, 29, 53, 0.04), 0 1px 2px rgba(19, 29, 53, 0.06), 0 0 0 4px _color('primary', 100),
-					inset 0 0 0 1px _color('primary', '400');
-				outline: none;
-			}
-
-			&:active {
-				background-color: _color('grey', 200);
-				color: _color('text.default');
-				box-shadow: 0 2px 8px rgba(19, 29, 53, 0.04), 0 1px 2px rgba(19, 29, 53, 0.06), 0 0 0 4px _color('primary', '200'),
-					inset 0 0 0 1px _color('primary', '500');
-			}
-		}
-
-		// TODO delete this class ?
-		&.mod-white {
-			background-color: _color('white');
-			color: _color('grey', 700);
-		}
-
-		// palette colors
-		@each $name, $palette in _getMap('palettes') {
-			&.palette-#{$name} {
-				@include buttonOutlineColoring($name);
-			}
-		}
-
-		.button-counter {
-			background-color: _color('grey', 300);
-			color: _color('text.default');
-		}
-	}
-
-	&.mod-counter {
-		padding-left: _theme('spacings.small');
-		padding-right: _theme('spacings.small');
-
-		&.mod-small,
-		&.mod-smaller {
-			.button-counter {
-				height: 1rem;
-				min-width: 1rem;
-			}
-		}
-	}
-
-	&.mod-icon {
-		align-items: center;
-		display: inline-flex;
-		gap: _theme('spacings.smaller');
-		padding-left: _theme('spacings.small');
-		padding-right: _theme('spacings.small');
-
-		&.mod-small {
-			.button-icon {
-				font-size: _component('button.small.font-size');
-				height: _component('button.small.line-height');
-				line-height: _component('button.small.line-height');
-			}
-		}
-
-		&.mod-smaller {
-			gap: _theme('spacings.smallest');
-
-			.button-icon {
-				font-size: _component('button.smaller.font-size');
-				height: _component('button.smaller.line-height');
-				line-height: _component('button.smaller.line-height');
-			}
-		}
-	}
-
-	&.mod-block {
-		width: 100%;
-	}
-}
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.button {
-	/* Disabled */
-
-	&.is-disabled,
-	&[disabled] {
-		outline: none;
-		background-color: _color('grey', 100);
-		color: _color('grey', 500);
-		cursor: default;
-
-		&.mod-outlined,
-		&.mod-outline {
-			// legacy
-			background-color: _color('white');
-			border-color: _color('grey', 200);
-		}
-
-		&.mod-link,
-		&.mod-text {
-			color: _color('grey', 500);
-			background-color: transparent;
-		}
-	}
-
-	/* Loading */
-	&.is-loading {
-		@include loading(_component('button.font-size'));
-
-		color: transparent !important;
-		opacity: _theme('commons.disabled.opacity');
-		pointer-events: none;
-		user-select: none;
-
-		&.mod-small {
-			@include loading(_component('button.small.font-size'));
-		}
-	}
-
-	/* States */
-	&.is-success {
-		@include buttonColoring('success', '!important');
-
-		&::after {
-			@include makeIcon('tick');
-		}
-	}
-
-	&.is-error {
-		@include buttonColoring('error', '!important');
-
-		&::after {
-			@include makeIcon('cross');
-		}
-	}
-
-	&.is-success,
-	&.is-error {
-		color: transparent !important;
-		pointer-events: none;
-		user-select: none;
-
-		&::after {
-			color: white;
-			font-size: calc(1.5 * #{_component('button.font-size')});
-			height: _component('button.line-height');
-			left: 0;
-			bottom: 0;
-			margin: auto;
-			position: absolute;
-			right: 0;
-			top: 0;
-			vertical-align: middle;
-		}
-
-		&.mod-small {
-			&::after {
-				font-size: calc(1.5 * #{_component('button.small.font-size')});
-				height: _component('button.small.line-height');
-			}
-		}
-
-		&.mod-smaller {
-			&::after {
-				font-size: calc(1.5 * #{_component('button.smaller.font-size')});
-				height: _component('button.smaller.line-height');
-			}
-		}
-	}
-}

package/src/components/_callout.scss

@@ -1,107 +0,0 @@
-.callout {
-	background-color: _component('callout.background');
-	border-radius: _theme('commons.border.radius');
-	border: _theme('commons.divider.width') solid _color('grey', 200, true);
-	margin: _component('callout.margin');
-	padding: _component('callout.padding');
-	position: relative;
-	color: _color('grey', 800);
-
-	a, .link {
-		color: _color('grey', 800);
-
-		&:hover {
-			color: inherit;
-			opacity: 0.8;
-		}
-	}
-}
-
-.callout-title {
-	font-weight: 600;
-	margin-bottom: _theme('spacings.smallest');
-}
-
-.callout-kill {
-	background-color: transparent;
-	border: 0;
-	color: currentColor;
-	cursor: pointer;
-	height: 1.5rem;
-	padding: 0;
-	position: absolute;
-	right: _theme('spacings.small');
-	top: 0.5rem;
-	transition: 150ms background-color ease;
-	width: 1rem;
-
-	&::before {
-		@include makeIcon('cross');
-	}
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.callout-icon {
-	position: absolute;
-	top: 0.4rem;
-	left: 0.75rem;
-	width: 2rem;
-	margin: auto;
-	border-radius: 50%;
-	text-align: center;
-	color: currentColor;
-
-	.lucca-icon {
-		font-size: 1.2rem;
-		vertical-align: middle;
-	}
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.callout {
-	&.mod-icon {
-		padding-left: 3rem;
-	}
-
-	&.mod-small {
-		font-size: _theme('sizes.small.font-size');
-		line-height: _theme('sizes.small.line-height');
-
-		&.mod-icon {
-			padding-left: 2.8rem;
-
-			.callout-icon {
-				top: 0.4rem;
-
-				.lucca-icon {
-					font-size: 1rem;
-				}
-			}
-		}
-	}
-
-	&.mod-killable {
-		padding-right: 2.5rem;
-	}
-}
-
-@mixin calloutDefaultPalette($palette) {
-	background-color: _color($palette, 100);
-	border: _theme('commons.divider.width') solid _color($palette, 200);
-
-	.callout-icon {
-		color: _color($palette, 700)
-	}
-}
-.callout {
-	@each $name, $palette in _getMap('palettes') {
-		&.palette-#{$name} {
-			@include calloutDefaultPalette($name);
-		}
-	}
-}

package/src/components/_card.scss

@@ -1,74 +0,0 @@
-.card {
-	background-color: _color("white");
-	border-radius: _component("card.border.radius");
-	border: 1px solid _component("card.border.color");
-	display: block;
-	margin-bottom: 1rem;
-	position: relative;
-	transition: background-color _theme("commons.animations.durations.fast") ease, color _theme("commons.animations.durations.fast") ease, box-shadow _theme("commons.animations.durations.fast") ease;
-}
-
-.card-content {
-	padding: _component("card.content.padding");
-}
-
-.card-footer {
-	align-items: center;
-	border-top: 1px solid _component("card.border.color");
-	display: flex;
-	min-height: 3rem;
-	padding: _component("card.footer.padding");
-}
-
-.card-footer-right {
-	margin-left: auto;
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.card {
-	&.mod-grey {
-		background-color: _component("card.mod-grey");
-	}
-
-	&.mod-clickable {
-		color: _color("text.default");
-		cursor: pointer;
-		text-decoration: none;
-
-		&:hover {
-			border-color: _component("card.hover.border");
-			background-color: _component("card.hover.background");
-		}
-	}
-
-	&.mod-elevated {
-		border: 0;
-		@include elevate(1);
-		&.mod-clickable:hover {
-			@include elevate(3);
-		}
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-
-.card {
-	&.is-disabled {
-		background-color: _theme("commons.disabled.background");
-		color: _theme("commons.disabled.color");
-
-		h1, h2, h3, h4, h5, h6 {
-			color: _theme("commons.disabled.color");
-		}
-
-		.u-h1, .u-h2 .u-h3, .u-h4, .u-h5, .u-h6 {
-			color: _theme("commons.disabled.color") !important;
-		}
-	}
-}

package/src/components/_chips.scss

@@ -1,67 +0,0 @@
-.chip {
-	background-color: _color("primary", "700");
-	border-radius: _theme("commons.border.radius");
-	color: _color("primary", "text");
-	display: inline-block;
-	margin: 0 .2rem .3rem 0;
-	padding: .15rem 1.8rem .15rem .75rem;
-	position: relative;
-	vertical-align: middle;
-}
-
-.chip-kill {
-	background-color: _color("primary", "text");
-	border: 0;
-	border-radius: 50%;
-	bottom: 0;
-	color: _color("primary", "700");
-	cursor: pointer;
-	font-size: .8rem;
-	font-weight: 700;
-	height: 1rem;
-	margin: auto;
-	padding: .05rem 0 0;
-	position: absolute;
-	right: .5rem;
-	top: 0;
-	transition: 150ms background-color ease;
-	width: 1rem;
-
-	&::before {
-		@include makeIcon("cross");
-	}
-
-	&:hover {
-		box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
-		background-color: _component("chip.kill.hover");
-	}
-	&:focus {
-		box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 2px _component("chip.kill.hover");
-		outline: none;
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.chip {
-	&.mod-unkillable {
-		padding: .15rem .75rem;
-
-		.chip-kill {
-			display: none;
-		}
-	}
-
-	&.mod-clickable {
-		cursor: pointer;
-		&:hover, &:focus {
-			background-color: _color("primary", "600");
-		}
-		&:focus {
-			box-shadow: 0 0 0 4px _color("primary", "200");
-			outline: none;
-		}
-	}
-}

package/src/components/_code.scss

@@ -1,24 +0,0 @@
-.code {
-	background-color: #FEF1F5;
-	border-radius: 3px;
-	color: #EC407A;
-	font-size: .8rem;
-	line-height: 1.4rem;
-	margin: .1rem;
-	padding: 0 .3rem;
-	tab-size: 2;
-	white-space: nowrap;
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.code {
-	&.mod-block {
-		display: block;
-		margin: .5rem 0;
-		padding: 1rem;
-		white-space: pre-wrap;
-	}
-}