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

package/src/components/_toasts.scss

@@ -1,214 +0,0 @@
-.toasts {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	font-size: _theme("sizes.small.font-size");
-	line-height: _theme("sizes.small.line-height");
-	position: fixed;
-	right: _component("toasts.right");
-	top: _component("toasts.top");
-	width: _component("toasts.width");
-	z-index: 9999;
-}
-
-.toasts-item {
-	animation: toast _theme("commons.animations.durations.standard") 1;
-	background-color: _component("toasts.background");
-	border-radius: _theme("commons.border.radius");
-	color: _component("toasts.color");
-	margin-bottom: _component("toasts.margin-bottom");
-	margin-left: auto;
-	overflow: hidden;
-	padding: _component("toasts.padding");
-	position: relative;
-	transform-origin: top;
-
-	@each $name, $palette in _getMap("palettes") {
-		&.palette-#{$name} {
-			background-color: _safeGet($palette,"800");
-		}
-	}
-}
-
-.toasts-item-kill {
-	background-color: transparent;
-	border: 0;
-	bottom: 0;
-	color: white;
-	cursor: pointer;
-	height: 1.25rem;
-	margin: auto;
-	padding: 0;
-	position: absolute;
-	right: .5rem;
-	top: 0;
-	transition: opacity _theme("commons.animations.durations.fast") ease;
-	width: 1.25rem;
-
-	&:hover {
-		opacity: .66;
-	}
-
-	&::after {
-		@include makeIcon("cross");
-	}
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.toasts {
-	&.mod-commInApp {
-		top: inherit;
-		left: _component("toasts.left");
-		bottom: _component("toasts.bottom");
-		width: _component("toasts.big");
-
-		.toasts-item {
-			background-color: _color("primary", "700");
-			margin-left: inherit;
-			padding: 0;
-			display: flex;
-		}
-
-		.toasts-visual {
-			bottom: 0;
-			position: absolute;
-			left: 0;
-			right: 0;
-			top: 0;
-			width: 5rem;
-		}
-
-		.toasts-blob {
-			fill: _color("primary", "600");
-			height: 100%;
-			position: absolute;
-			width: 100%;
-		}
-		.toasts-illustration {
-			height: 100%;
-			left: _theme("spacings.small");
-			position: absolute;
-			top: - _theme("spacings.smaller");
-			width: 2.5rem;
-		}
-
-		.toasts-content {
-			padding: _theme("spacings.small") 0;
-			margin-left: calc(#{_theme("spacings.small", true)} + 5rem);
-			margin-right: _theme("spacings.small");
-		}
-
-		.toasts-content-title {
-			margin-bottom: _theme("spacings.smaller");
-		}
-
-		.toasts-item-kill {
-			bottom: inherit;
-			top: _theme("spacings.smaller");
-		}
-	}
-
-	&.mod-bottom {
-		top: auto;
-		bottom: _theme('spacings.standard');
-	}
-
-	&.mod-withCircularGauge {
-
-		&: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 {
-					content: '';
-					position: absolute;
-					left: 2px;
-					top: 2px;
-					width: calc(100% - 4px);
-					height: calc(100% - 4px);
-					background-color: transparent;
-					z-index: 1;
-					border-radius: 50%;
-				}
-
-				svg {
-					width: 100%;
-					height: auto;
-					transform: rotate(-90deg);
-					border-radius: 50%;
-					display: block;
-				}
-
-				circle {
-					fill: currentColor;
-					stroke: white;
-					stroke-width: 20%;
-					stroke-dasharray: 100.5, 100.5;
-					animation-name: stroke;
-					animation-timing-function: linear;
-					animation-fill-mode: forwards;
-
-					@keyframes stroke {
-						from {
-							stroke-dashoffset: 100.5;
-						}
-						to {
-							stroke-dashoffset: 0;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-
-@keyframes toast {
-	from {
-		transform: translateY(1rem);
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-

package/src/components/inputs/checkbox/_checkbox.scss

@@ -1,232 +0,0 @@
-.checkbox {
-	display: block;
-	position: relative;
-
-	&.is-required {
-		.checkbox-label {
-			&:not(:empty) {
-				&::after {
-					@extend %isRequired;
-				}
-			}
-		}
-	}
-
-	.checkbox-input {
-		&[aria-required] {
-			~ .checkbox-label {
-				&:not(:empty) {
-					&::after {
-						@extend %isRequired;
-					}
-				}
-			}
-		}
-	}
-}
-
-.checkbox-input {
-	@include mask;
-
-	&:checked ~ .checkbox-label {
-		&::before {
-			color: _color('white');
-			background-color: _component('checkbox.default-palette.700');
-			border: 2px solid _component('checkbox.default-palette.700');
-		}
-	}
-
-	&:not(:disabled):checked ~ .checkbox-label {
-		&:hover {
-			&::before {
-				background-color: _component('checkbox.default-palette.600');
-				border-color: _component('checkbox.default-palette.600');
-			}
-		}
-
-		&:active {
-			&::before {
-				background-color: _component('checkbox.default-palette.800');
-				border-color: _component('checkbox.default-palette.800');
-			}
-		}
-	}
-
-	&:focus ~ .checkbox-label {
-		&::before {
-			box-shadow: 0 0 0 4px _component('checkbox.default-palette.200');
-		}
-	}
-}
-
-.checkbox-label {
-	cursor: pointer;
-	display: inline-flex;
-	align-items: flex-start;
-	transition: color _theme('commons.animations.durations.fast') ease;
-
-	&::before {
-		@include makeIcon('tick');
-		background-color: _color('white');
-		border-radius: _component('checkbox.input.border-radius');
-		border: 2px solid _component('checkbox.input.border.color');
-		color: transparent;
-		display: block;
-		flex: 0 0 auto;
-		font-size: 1rem;
-		height: _component('checkbox.input.size');
-		line-height: .85;
-		margin-right: _component('checkbox.input.margin-right');
-		margin-top: _component('checkbox.input.margin-top');
-		text-align: center;
-		text-indent: -.1rem;
-		transition: all _theme('commons.animations.durations.fast') ease;
-		width: _component('checkbox.input.size');
-	}
-
-	&:hover {
-		&::before {
-			border-color: _component('checkbox.default-palette.600');
-		}
-	}
-
-	&:active {
-		&::before {
-			border-color: _component('checkbox.default-palette.800');
-			box-shadow: 0 0 0 4px _component('checkbox.default-palette.300');
-		}
-	}
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.checkbox {
-	&.mod-inline {
-		vertical-align: middle;
-		display: inline-block;
-		margin-right: 1.5rem;
-	}
-
-	&.mod-big {
-		.checkbox-label {
-			line-height: 1.75rem;
-
-			&::before {
-				font-size: 1.1rem;
-				height: 1.25rem;
-				width: 1.25rem;
-				margin-top: 1px;
-			}
-		}
-	}
-
-	&.mod-small {
-		.checkbox-label {
-			font-size: _theme('sizes.small.font-size');
-			line-height: _theme('sizes.small.line-height');
-
-			&::before {
-				width: _theme('sizes.small.font-size');
-				height: _theme('sizes.small.font-size');
-				font-size: _theme('sizes.smaller.font-size');
-				margin-top: _component('checkbox.input.small-top');
-			}
-		}
-	}
-
-	&.mod-noLabel {
-		height: 1rem;
-
-		.checkbox-label {
-			vertical-align: top;
-
-			&::before {
-				margin: 0;
-			}
-		}
-	}
-
-	&.mod-grey {
-		.checkbox-input {
-			&:checked ~ .checkbox-label {
-				&::before {
-					color: _color('white');
-					background-color: _color('grey', 700);
-					border: 2px solid _color('grey', 700);
-				}
-			}
-
-			&:not(:disabled):checked ~ .checkbox-label {
-				&:hover {
-					&::before {
-						background-color: _color('grey', 600);
-						border-color: _color('grey', 600);
-					}
-				}
-
-				&:active {
-					&::before {
-						background-color: _color('grey', 800);
-						border-color: _color('grey', 800);
-						box-shadow: 0 0 0 4px _color('grey', 300);
-					}
-				}
-			}
-
-			&:focus ~ .checkbox-label {
-				&::before {
-					box-shadow: 0 0 0 4px _color('grey', 200);
-				}
-			}
-		}
-
-		.checkbox-label {
-			&:hover {
-				&::before {
-					border-color: _color('grey', 600);
-				}
-			}
-
-			&:active {
-				&::before {
-					border-color: _color('grey', 800);
-					box-shadow: 0 0 0 4px _color('grey', 300);
-				}
-			}
-		}
-	}
-}
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.checkbox .checkbox-input {
-	&[disabled],
-	&[read-only] {
-		~ .checkbox-label {
-			color: _color('grey', 500);
-			cursor: default;
-
-			&::before {
-				border: 2px solid _color('grey', 500);
-				box-shadow: none;
-			}
-		}
-
-		&:checked ~ .checkbox-label {
-			&::before {
-				color: _color('grey', 500);
-				background-color: _color('grey', 200);
-				border: 2px solid _color('grey', 200);
-			}
-		}
-	}
-
-	~ .checkbox-mixed ~ .checkbox-label,
-	&.is-incomplete ~ .checkbox-label {
-		&::before {
-			@include makeIcon('partial');
-		}
-	}
-}

package/src/components/inputs/checkbox/_checkboxesfield.scss

@@ -1,50 +0,0 @@
-@import "../field/field";
-
-@include field("checkboxesfield");
-
-.checkboxesfield {
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-
-.checkboxesfield-input {
-	@include field-input("checkboxesfield");
-
-	&.mod-row {
-		@extend %checkboxesfield-row;
-	}
-}
-
-.form.mod-compact .checkboxesfield, .checkboxesfield.mod-compact {
-	@include field-compact("checkboxesfield");
-	align-items: flex-start;
-	.checkboxesfield-input {
-		@extend %checkboxesfield-row;
-	}
-}
-
-.form.mod-framed .checkboxesfield, .checkboxesfield.mod-framed {
-	display: block;
-
-	.checkboxesfield-input {
-		@extend %checkboxesfield-row;
-	}
-
-	fieldset {
-		border: none;
-		padding: 0;
-	}
-}
-
-%checkboxesfield-row {
-	display: flex;
-	flex-wrap: wrap;
-	.checkbox {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-	.checkbox {
-		margin-right: _component("field.horizontal-spacing");
-	}
-}

package/src/components/inputs/field/_field.compact.scss

@@ -1,78 +0,0 @@
-@mixin field-compact($fieldname) {
-	align-items: center;
-	margin-bottom: 1rem;
-	flex-direction: row;
-
-	.#{$fieldname}-label {
-		color: _component("field.compact.label.color");
-		flex: 0 0 auto;
-		margin-bottom: 0;
-		margin-right: _component("field.compact.label.right-margin");
-		order: -1;
-		width: _component("field.compact.label.sizes.default");
-	}
-
-	.#{$fieldname}-messages {
-		align-items: center;
-		bottom: 0;
-		display: inline-flex;
-		left: 100%;
-		line-height: 1.1;
-		margin: 0 0 0 1rem;
-		position: absolute;
-		top: 0;
-		width: 100%;
-		max-width: _component("field.compact.label.sizes.default");
-
-		&.mod-helper {
-			bottom: auto;
-			left: 0;
-			max-width: 100%;
-			padding-left: calc(#{_component("field.compact.label.sizes.default")} + #{_component("field.compact.label.right-margin")});
-			right: 0;
-			top: 100%;
-		}
-	}
-
-	// MODS
-	// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-	/* Label Width */
-
-	& {
-		@include inputWidth(_component("field.sizes.default"), _component("field.compact.label.sizes.default"));
-	}
-
-	@each $input-size-name, $input-width in _getMap("components.field.sizes") {
-		&.mod-#{$input-size-name} {
-			@include inputWidth($input-width, _component("field.compact.label.sizes.default"));
-			@each $label-size-name, $label-width in _getMap("components.field.compact.label.sizes") {
-				&.mod-label-#{$label-size-name} {
-					@include inputWidth($input-width, $label-width);
-				}
-			}
-		}
-	}
-
-	@each $label-size-name, $label-width in _getMap("components.field.sizes") {
-		&.mod-label-#{$label-size-name} {
-			.#{$fieldname}-label {
-				width: $label-width;
-			}
-
-			.#{$fieldname}-messages.mod-helper {
-				padding-left: calc(#{$label-width} + #{_component("field.compact.label.right-margin", true)});
-			}
-		}
-	}
-
-	/* Display */
-
-	&.mod-block {
-		width: 100%;
-	}
-}
-
-@mixin inputWidth($iWidth, $lWidth) {
-	width: calc(#{$iWidth} + #{_component("field.compact.label.right-margin", true)} + #{$lWidth});
-}

package/src/components/inputs/field/_field.framed.scss

@@ -1,90 +0,0 @@
-@mixin field-framed($fieldname) {
-	.#{$fieldname}-messages {
-		position: absolute;
-		bottom: 0;
-		left: -1px;
-		right: 0;
-		text-align: center;
-		transform: translateY(0);
-		transition: transform _theme("commons.animations.durations.standard");
-		z-index: 4;
-
-		> * {
-			display: block;
-		}
-	}
-
-	.#{$fieldname}-messages-error {
-		background-color: _color("error");
-		color: _theme("palettes.error.text");
-	}
-
-	.#{$fieldname}-messages-warning {
-		background-color: _color("warning");
-		color: _theme("palettes.warning.text");
-	}
-
-	.#{$fieldname}-messages-valid, .#{$fieldname}-messages-success {
-		background-color: _color("success");
-		color: _theme("palettes.success.text");
-	}
-
-	.#{$fieldname}-messages-helper {
-		background-color: _color("text.light");
-		color: white;
-	}
-
-	.#{$fieldname}-input {
-		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
-			background-color: _color("white");
-
-			&:focus, &:hover {
-				position: relative;
-				z-index: 1;
-				background-color: _color("white");
-				box-shadow: fakeborderoverlay(_component("field.framed.color"));
-
-				~ .#{$fieldname}-messages {
-					transform: translateY(100%);
-				}
-			}
-
-			&:focus {
-				z-index: 4;
-				box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
-			}
-		}
-	}
-
-	.#{$fieldname}-suffix {
-		z-index: 10;
-		top: auto;
-		right: 0;
-		bottom: 0;
-		padding: _component("field.framed.side-padding");
-
-		&.is-error {
-			@include fieldFramedState("error");
-		}
-
-		&.is-warning {
-			@include fieldFramedState("warning");
-		}
-
-		&.is-valid, &.is-success {
-			@include fieldFramedState("success");
-		}
-
-		~ .textfield-input {
-			padding-right: _component("field.framed.suffix.padding-right");
-		}
-	}
-
-	&.is-loading {
-		&::before, &::after {
-			bottom: auto !important;
-			right: _component("field.framed.side-padding") !important;
-			top: _component("field.framed.side-padding") !important;
-		}
-	}
-}