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

package/src/components/_collapse.scss

@@ -1,50 +0,0 @@
-.collapse {
-	display: block;
-}
-
-.collapse-title {
-	cursor: pointer;
-	display: inline-flex;
-	margin-bottom: _theme("spacings.smallest");
-	overflow: hidden;
-
-	&::-webkit-details-marker {
-		display: none;
-	}
-
-	&:focus-within,
-	&:hover {
-		color: _color("text.dark");
-	}
-
-	&::before {
-		@include makeIcon("chevron_east");
-		font-size: _theme("sizes.smaller.font-size");
-		margin-right: _theme("spacings.smallest");
-		transition: transform _theme("commons.animations.durations.fast");
-		vertical-align: middle;
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.collapse {
-	&:not([open]) {
-		&:not(.is-open) {
-			> .collapse-content {
-				display: none;
-			}
-		}
-	}
-
-	&.is-open,
-	&[open] {
-		> .collapse-title {
-			&::before {
-				transform: rotate(90deg);
-			}
-		}
-	}
-}

package/src/components/_communicationBanner.scss

@@ -1,50 +0,0 @@
-.communicationBanner {
-	background-color: _color("primary", "700");
-	color: _color("white");
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	padding: _theme("spacings.smaller") _theme("spacings.standard") _theme("spacings.smaller") _theme("spacings.bigger");
-	position: relative;
-}
-
-.communicationBanner-visual {
-	bottom: 0;
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	width: _theme("spacings.bigger");
-}
-
-.communicationBanner-blob {
-	fill: _color("primary", "600");
-	height: 100%;
-	position: absolute;
-	width: 100%;
-}
-.communicationBanner-illustration {
-	height: 100%;
-	left: _theme("spacings.smallest");
-	position: absolute;
-	top: _theme("spacings.smallest");
-	width: _theme("spacings.standard");
-}
-
-.communicationBanner-title {
-	font-size: _theme("sizes.small.font-size");
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.communicationBanner {
-	&.mod-light {
-		background-color: _color("grey", "100");
-		color: _color("grey", "800");
-
-		.communicationBanner-blob {
-			fill: _color("primary", "300");
-		}
-	}
-}

package/src/components/_container.scss

@@ -1,10 +0,0 @@
-.container {
-	padding: _component("container.padding");
-	position: relative;
-	max-width: _component("container.max-width");
-
-	&.mod-center {
-		margin-left: auto;
-		margin-right: auto;
-	}
-}

package/src/components/_content-section.scss

@@ -1,3 +0,0 @@
-.contentSection {
-	margin-bottom: _component("contentSection.margin-bottom");
-}

package/src/components/_divider.scss

@@ -1,6 +0,0 @@
-.divider {
-	border: 0;
-	border-top: _theme("commons.divider.width") solid _theme("commons.divider.color");
-	margin-top: _theme("spacings.standard");
-	margin-bottom: _theme("spacings.standard");
-}

package/src/components/_empty-state.scss

@@ -1,14 +0,0 @@
-.emptyState {
-	margin: 6rem auto 4rem;
-	text-align: center;
-	max-width: 30rem;
-}
-
-.emptyState-title {
-	color: _color("text.light");
-}
-
-.emptyState-description {
-	color: _color("text.light");
-	margin-bottom: 2rem;
-}

package/src/components/_error-page.scss

@@ -1,62 +0,0 @@
-.errorPage {
-	background-color: _component("errorPage.background");
-	height: 100vh;
-	width: 100vw;
-	overflow: hidden;
-	line-height: 1.2;
-}
-
-.errorPage-section {
-	margin: 0 auto;
-	height: 100%;
-	max-width: 1200px;
-	padding: 0 2rem;
-	width: 100vw;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.errorPage-section-info {
-	margin-top: 10vh;
-	max-width: 90vw;
-	width: 450px;
-	padding-right: 2rem;
-}
-
-.errorPage-section-info-title {
-	font-size: 2.5rem;
-	color: _component("errorPage.header.color");
-}
-
-.errorPage-section-info-text {
-	font-size: 1.5rem;
-}
-
-.errorPage-section-image {
-	margin-top: 10vh;
-	width: 50%;
-	max-width: 580px;
-	min-width: 350px;
-}
-
-@include media_smaller_than("s") {
-	.errorPage {
-		overflow-y: auto;
-	}
-	.errorPage-section {
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.errorPage-section-info {
-		margin-top: 2rem;
-		margin-bottom: 2rem;
-		order: 1;
-		padding: 0;
-	}
-	.errorPage-section-image {
-		margin-top: 2rem;
-		order: 0;
-	}
-}

package/src/components/_filters.scss

@@ -1,83 +0,0 @@
-.filters {
-	@include elevate(1);
-	align-items: center;
-	background-color: _component("filters.background");
-	display: flex;
-	min-height: _component("filters.height");
-	position: relative;
-	z-index: 99;
-}
-
-.filters-sectionLeft {
-	align-items: center;
-	display: flex;
-	padding-right: 2rem;
-}
-
-.filters-sectionRight {
-	align-items: center;
-	display: flex;
-	margin-left: auto;
-	padding-left: 2rem;
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-
-.navSide ~ .main-content, .mod-withMenu .main-content {
-	.filters.mod-sticky {
-		left: _theme("components.navSide.width");
-	}
-}
-
-.navSide.mod-compact ~ .main-content, .mod-withMenuCompact .main-content {
-	.filters.mod-sticky {
-		left: _theme("components.navSide.compact.width");
-	}
-}
-
-.filters {
-	&.mod-sticky {
-		position: fixed;
-		left: 0;
-		right: 0;
-		top: _theme("commons.banner-height");
-
-		@include media_smaller_than(_theme("commons.mobile", true)) {
-			left: 0 !important;
-			top: calc(#{_theme("commons.banner-height")} + #{_component("navSide.mobile.toggle-height")});
-
-			@include ie11 {
-				top: 0;
-			}
-		}
-	}
-}
-
-
-// CHILDS COMPONENTS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.filters {
-	.textfield {
-		&.mod-framed {
-			border-right: _theme("commons.divider.width") solid _theme("commons.divider.color");
-			max-width: 16rem;
-
-			.textfield-input {
-				box-shadow: none !important;
-			}
-		}
-	}
-}
-
-.filters-sectionRight {
-	.textfield {
-		&.mod-framed {
-			border-left: _theme("commons.divider.width") solid _theme("commons.divider.color");
-			border-right: 0;
-		}
-	}
-}

package/src/components/_form.scss

@@ -1,220 +0,0 @@
-@use "sass:math";
-
-.form-group {
-	padding: 0;
-	border: 0;
-	margin: 0 0 _component("form.group.margin-bottom");
-	position: relative;
-}
-
-.form-group-label, .form-group-legend, .form-group-title {
-	display: block;
-	font-weight: 600;
-	font-size: _component("form.label.font-size");
-	margin: 0;
-	padding: 0 0 _component("form.label.margin-bottom");
-	width: 100%;
-	text-align: left;
-}
-
-.form-group-legend, .form-group-title {
-	font-size: _component("field.framed.title.font-size");
-	line-height: _component("field.framed.title.line-height");
-	padding-bottom: _theme("spacings.smallest");
-}
-
-.form-title {
-	margin-bottom: _theme("spacings.small");
-}
-
-.form-actions {
-	text-align: right;
-}
-
-.form:not(.mod-framed) {
-	.textfield, .radiosfield, .checkboxesfield, .checkbox.mod-field {
-		margin-bottom: _component("form.field.margin-bottom");
-	}
-}
-
-.form-group-line {
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-}
-
-.form-group-line-col {
-	flex-basis: 0;
-	flex-grow: 1;
-	display: flex;
-	flex-direction: column;
-
-	> * {
-		flex-grow: 1;
-	}
-
-	@each $bp-name, $bp-obj in $breakpoints {
-		@for $i from 1 through 12 {
-			&.mod-#{$bp-name}#{$i} {
-				flex-basis: 100%;
-				flex-grow: 0;
-			}
-		}
-
-		@include media_larger_than($bp-name) {
-			@for $i from 1 through 12 {
-				&.mod-#{$bp-name}#{$i} {
-					flex-basis: (math.div(100%, 12) * $i);
-				}
-			}
-		}
-	}
-}
-
-.form-group-line-col {
-	&[class*="mod-overlay"] {
-		&:focus-within {
-			.textfield-input {
-				box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
-				z-index: 4;
-			}
-
-			.is-error {
-				.textfield-input {
-					background-color: white !important;
-				}
-			}
-
-			.is-warning {
-				.textfield-input {
-					background-color: white;
-					box-shadow: fakeborderoverlay(_color("warning")), 0 0 0 4px _color("warning", "50");
-				}
-			}
-
-			.is-valid, .is-success {
-				.textfield-input {
-					background-color: white;
-					box-shadow: fakeborderoverlay(_color("success")), 0 0 0 4px _color("success", "50");
-				}
-			}
-		}
-
-		.textfield, .checkbox, .radio, .select {
-			+ .textfield, + .checkbox, + .radio, + .select {
-				position: absolute;
-				bottom: 0;
-				right: 0;
-				z-index: 10;
-				padding: _component("field.framed.label-top-offset") _component("field.framed.side-padding") _component("field.framed.bottom-padding");
-			}
-		}
-	}
-}
-
-.form-group-line-col {
-	&.mod-overlay-top {
-		.textfield, .checkbox, .radio, .select {
-			+ .textfield, + .checkbox, + .radio, + .select {
-				top: 0;
-				bottom: auto;
-			}
-		}
-	}
-}
-
-.checkboxesfield.mod-framed,
-.radiosfield.mod-framed,
-.form.mod-framed .fieldsetWrapper {
-	background-color: _color("white");
-	padding: 0;
-	box-shadow: fakeborderoverlay(_component("field.framed.border"));
-	transition: background-color _theme("commons.animations.durations.standard");
-	margin-bottom: 0 !important;
-
-	&::before,
-	&::after {
-		content: " ";
-		display: table;
-	}
-
-	&::after {
-		clear: both;
-	}
-
-	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
-		&:hover,
-		&:focus {
-			position: relative;
-			z-index: 1;
-			background-color: _color("white");
-			box-shadow: fakeborderoverlay(_component("field.framed.color"));
-		}
-
-		&:focus {
-			z-index: 4;
-			box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
-		}
-	}
-
-	.radiosfield, .checkboxesfield {
-		margin-top: _component("field.framed.side-padding");
-		padding: 0 _component("field.framed.side-padding") _component("field.framed.bottom-padding");
-	}
-
-	&.is-error {
-		@include fieldFramedState("error");
-	}
-
-	&.is-warning {
-		@include fieldFramedState("warning");
-	}
-
-	&.is-valid,
-	&.is-success {
-		@include fieldFramedState("success");
-	}
-
-	&.is-disabled, &.is-readonly {
-		background-color: _theme("commons.disabled.background");
-	}
-
-	&.is-loading {
-		@include loading;
-
-		&::before, &::after {
-			left: auto !important;
-			bottom: auto !important;
-			right: _component("field.framed.side-padding") !important;
-			top: _component("field.framed.side-padding") !important;
-		}
-	}
-}
-
-.checkboxesfield.mod-framed,
-.radiosfield.mod-framed {
-	margin-top: 0;
-	padding: _component("field.framed.side-padding") _component("field.framed.side-padding") _component("field.framed.bottom-padding");
-}
-
-.form-group-label {
-	&.is-required {
-		&:not(:empty) {
-			&::after {
-				@extend %isRequired;
-			}
-		}
-	}
-}
-
-.radiosfield-label,
-.checkboxesfield-label,
-.textfield-label {
-	&.is-required {
-		&:not(:empty) {
-			&::after {
-				@extend %isRequired;
-			}
-		}
-	}
-}

package/src/components/_gauge.scss

@@ -1,73 +0,0 @@
-.gauge {
-	background-color: rgba(0, 0, 0, .05);
-	border-radius: _theme("commons.border.radius");
-	height: _component("gauge.height");
-	overflow: hidden;
-	position: relative;
-}
-
-.gauge-bar {
-	top: 0;
-	left: 0;
-	position: absolute;
-	transition: border-color _theme("commons.animations.durations.standard") ease, width _theme("commons.animations.durations.standard") ease, height _theme("commons.animations.durations.standard") ease;
-	border-bottom-width: _component("gauge.height");
-	border-bottom-style: solid;
-	border-color: currentColor;
-}
-
-
-/////////////////////////////////////
-// MODS
-
-.gauge {
-	&.mod-thin {
-		height: _component("gauge.thin.height");
-
-		.gauge-bar {
-			border-bottom-width: _component("gauge.thin.height");
-		}
-	}
-
-	&.mod-vertical {
-		height: 100%;
-		width: _component("gauge.height");
-
-		.gauge-bar {
-			border-bottom-width: 0;
-			border-left-style: solid;
-			border-left-width: _component("gauge.height");
-		}
-
-		&.mod-thin {
-			width: _component("gauge.thin.height");
-
-			.gauge-bar {
-				border-left-width: _component("gauge.thin.height");
-			}
-		}
-	}
-}
-
-
-// PALETTES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.gauge {
-	@mixin gaugeColoring($palette) {
-		color: _color($palette);
-	}
-
-	.gauge-bar {
-		@include gaugeColoring("gauge.default-palette");
-	}
-
-	// palette colors
-	@each $name, $palette in _getMap("palettes") {
-		&.palette-#{$name} {
-			.gauge-bar {
-				@include gaugeColoring($name);
-			}
-		}
-	}
-}

package/src/components/_grid.scss

@@ -1,116 +0,0 @@
-@use "sass:math";
-
-.grid {
-	display: flex;
-	flex: 0 1 auto;
-	flex-direction: row;
-	flex-wrap: wrap;
-	margin-left: -.5rem;
-	margin-right: -.5rem;
-}
-
-%allColumns {
-	flex: 0 0 auto;
-	flex-basis: 100%;
-	max-width: 100%;
-	padding-left: .5rem;
-	padding-right: .5rem;
-	position: relative;
-}
-
-@each $bp-name, $bp-obj in $breakpoints {
-	.grid-#{$bp-name} {
-		@extend %allColumns;
-	}
-	@for $i from 1 through 12 {
-		.grid-#{$bp-name}#{$i} {
-			@extend %allColumns;
-		}
-	}
-}
-
-@each $bp-name, $bp-obj in $breakpoints {
-	@media (min-width: map-get($bp-obj, breakAt)) {
-		.grid-#{$bp-name} {
-			flex-basis: 0;
-			flex-grow: 1;
-			max-width: 100%;
-		}
-
-		@for $i from 1 through 12 {
-			.grid-#{$bp-name}#{$i} {
-				flex-basis: percentage(math.div($i, 12));
-				max-width: percentage(math.div($i, 12));
-			}
-
-			.grid-#{$bp-name}Offset#{$i} {
-				margin-left: percentage(math.div($i, 12));
-			}
-		}
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.grid {
-	&.mod-reverse {
-		flex-direction: row-reverse;
-	}
-
-	@each $bp-name, $bp-obj in $breakpoints {
-		@media (min-width: map-get($bp-obj, breakAt)) {
-			&.mod-#{$bp-name}Start {
-				justify-content: flex-start;
-				text-align: start;
-			}
-
-			&.mod-#{$bp-name}Center {
-				justify-content: center;
-				text-align: center;
-			}
-
-			&.mod-#{$bp-name}End {
-				justify-content: flex-end;
-				text-align: end;
-			}
-
-			&.mod-#{$bp-name}Top {
-				align-items: flex-start;
-			}
-
-			&.mod-#{$bp-name}Middle {
-				align-items: center;
-			}
-
-			&.mod-#{$bp-name}Bottom {
-				align-items: flex-end;
-			}
-
-			&.mod-#{$bp-name}Around {
-				justify-content: space-around;
-			}
-
-			&.mod-#{$bp-name}Between {
-				justify-content: space-between;
-			}
-		}
-	}
-}
-
-// GRID UTILITIES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.grid {
-	@each $bp-name, $bp-obj in $breakpoints {
-		@media (min-width: map-get($bp-obj, breakAt)) {
-			.u-#{$bp-name}First {
-				order: -1;
-			}
-
-			.u-#{$bp-name}Last {
-				order: 1;
-			}
-		}
-	}
-}