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

package/src/components/_header.scss

@@ -1,135 +0,0 @@
-.header {
-	@include elevate(1);
-	align-items: center;
-	background-color: _component("header.background");
-	display: flex;
-	min-height: _component("header.height");
-	padding: _component("header.padding");
-	position: relative;
-	z-index: 99;
-}
-
-.header-contentLeft {
-	display: flex;
-}
-
-.header-contentRight {
-	display: flex;
-	margin-left: auto;
-}
-
-.header-nav {
-	align-items: flex-start;
-	display: flex;
-	flex-direction: column;
-	height: _component("header.height");
-	justify-content: center;
-	padding-left: calc(#{_component("header.height")} + 1rem);
-	position: relative;
-}
-
-.header-nav-back {
-	border-right: _theme("commons.divider.width") solid _theme("commons.divider.color");
-	color: _color("text.light");
-	display: block;
-	font-size: 1.3rem;
-	height: _component("header.height");
-	left: 0;
-	line-height: _component("header.height");
-	position: absolute;
-	text-align: center;
-	text-decoration: none;
-	top: 0;
-	transition: all _theme("commons.animations.durations.fast") ease;
-	width: _component("header.height");
-
-	&:hover {
-		background-color: _theme("commons.background.base");
-		color: _color("text.default");
-	}
-
-	&::before {
-		@include makeIcon("arrow_full_west");
-	}
-}
-
-.header-nav-category {
-	color: _color("text.light");
-	font-size: _theme("sizes.small.font-size");
-}
-
-.header-nav-title {
-	color: _color("primary");
-	line-height: 1rem;
-	margin: 0;
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.navSide ~ .main-content, .mod-withMenu .main-content {
-	.header.mod-sticky {
-		left: _theme("components.navSide.width");
-
-		@include media_smaller_than("s") {
-			top: _component("navSide.mobile.toggle-height");
-		}
-	}
-}
-
-.navSide.mod-compact ~ .main-content, .mod-withMenuCompact .main-content {
-	.header.mod-sticky {
-		left: _theme("components.navSide.compact.width");
-
-		@include media_smaller_than("s") {
-			top: _component("navSide.mobile.toggle-height");
-		}
-	}
-}
-
-.header {
-	&.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;
-			}
-		}
-	}
-
-	&.mod-nav {
-		align-items: center;
-		padding-bottom: 0;
-		padding-left: 0;
-		padding-top: 0;
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.header {
-	&.is-loading {
-		height: 75px;
-
-		&::after {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			@include loadingGradientAnimation(rgba(0,0,0, .1), true);
-		}
-	}
-}

package/src/components/_label.scss

@@ -1,78 +0,0 @@
-.label {
-	border-radius: 1rem;
-	display: inline-block;
-	color: _color("text.default");
-	font-size: _theme("sizes.small.font-size");
-	font-weight: 600;
-	line-height: 1.2;
-	margin: 0 .3rem;
-	padding: .25rem .8rem;
-	text-align: center;
-	vertical-align: baseline;
-	white-space: nowrap;
-}
-
-
-// Palettes
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.label {
-	@mixin labelColoring($palette) {
-		background-color: _color($palette, 100);
-		color: _color($palette, 900);
-	}
-
-	@include labelColoring("label.default-palette");
-
-	// palettes coloring
-	@each $name, $palette in _getMap("palettes") {
-		&.palette-#{$name} {
-			@include labelColoring($name);
-		}
-	}
-}
-
-.label {
-	&.mod-number {
-		border-radius: 9999px;
-		padding: 0 _theme("spacings.smaller");
-		height: _theme("sizes.standard.line-height");
-		min-width: _theme("sizes.standard.line-height");
-		line-height: _theme("sizes.standard.line-height");
-		font-size: _theme("sizes.smaller.font-size");
-
-		&.mod-small {
-			height: 1.25rem;
-			min-width: 1.25rem;
-			padding: 0 .25rem;
-			line-height: 1.25rem;
-		}
-
-		&.mod-smaller {
-			height: 1rem;
-			min-width: 1rem;
-			padding: 0 .1rem;
-			line-height: 1rem;
-		}
-	}
-
-	&.mod-icon {
-		display: inline-flex;
-		align-items: center;
-		padding-left: .6rem;
-		padding-right: .6rem;
-
-		.label-icon {
-			font-size: _theme("sizes.standard.font-size");
-			margin-right: .25rem;
-
-			&:last-child {
-				margin-right: 0;
-				margin-left: .25rem;
-			}
-
-			&:only-child {
-				margin: 0;
-			}
-		}
-	}
-}

package/src/components/_layout.scss

@@ -1,295 +0,0 @@
-.layout {
-	min-height: 100vh;
-	display: grid;
-
-	@include media_larger_than("l") {
-		grid-template-columns: _theme("components.navSide.compact.width") 1fr _theme("components.aside.width");
-		grid-template-rows: _theme("commons.banner-height") 1fr;
-		grid-template-areas: "banner banner banner"
-			"navside content aside";
-	}
-
-	@include media_smaller_than("l") {
-		grid-template-columns: _theme("components.navSide.compact.width") 1fr;
-		grid-template-rows: _theme("commons.banner-height") 1fr auto;
-		grid-template-areas: "banner banner"
-		"navside content"
-		"navside aside";
-	}
-
-	@include media_smaller_than("s") {
-		grid-template-columns: 1fr;
-		grid-template-rows: _theme("commons.banner-height") auto 1fr auto;
-		grid-template-areas: "banner"
-			"navside"
-			"content"
-			"aside";
-	}
-}
-
-.layout-content-container {
-	max-width: calc(#{_theme("breakpoints.m.breakAt", true)} / 16px * 1rem);
-}
-
-.layout-banner {
-	grid-area: banner;
-	height: _theme("commons.banner-height");
-	background-color: _color("white");
-	position: sticky;
-	top: 0;
-	z-index: 2;
-}
-
-.layout-content {
-	grid-area: content;
-	position: sticky;
-	top: _theme("commons.banner-height");
-	display: flex;
-	flex-direction: column;
-
-	@include media_smaller_than("s") {
-		position: static;
-	}
-}
-
-.layout-content-headers, .layout-content-headers-subheader, .layout-content-headers-header {
-	background-color: _color("white");
-	position: sticky;
-	top: _theme("commons.banner-height");
-
-	@include media_smaller_than("s") {
-		position: static;
-	}
-}
-
-.layout-content-headers-header {
-	z-index: 1;
-}
-
-.layout-content-inner {
-	flex-grow: 1;
-}
-
-.layout-content-footer {
-	background-color: _color("white");
-	position: sticky;
-	bottom: 0;
-
-	@include media_smaller_than("s") {
-		position: static;
-	}
-}
-
-.layout-navside, .layout-aside {
-	display: flex;
-	flex-direction: column;
-	align-self: self-start;
-	min-height: calc(100vh - #{_theme("commons.banner-height")});
-	position: sticky;
-	top: _theme("commons.banner-height");
-
-	@include media_smaller_than("s") {
-		min-height: 0;
-	}
-}
-
-.layout-aside {
-	@include media_smaller_than("l") {
-		min-height: 0;
-		position: static;
-	}
-}
-
-.layout-aside {
-	grid-area: aside;
-}
-
-.layout-navside {
-	grid-area: navside;
-	z-index: 2;
-	overflow: auto;
-	max-height: calc(100vh - #{_theme("commons.banner-height")});
-
-	&.is-active {
-		@include media_smaller_than("s") {
-			position: fixed;
-			top: _theme("commons.banner-height");
-			height: calc(100vh - #{_theme("commons.banner-height")});
-			left: 0;
-			right: 0;
-			background-color: _color("white");
-			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: _color("white");
-
-	@include media_smaller_than("s") {
-		margin-top: 0;
-		position: static;
-	}
-}
-
-.layout-navside-toggle {
-	border: 0;
-	margin: 0;
-	padding: 0;
-	font: inherit;
-	color: inherit;
-	background-color: _color("white");
-	cursor: pointer;
-	position: sticky;
-	top: 0;
-
-	@include media_larger_than("s") {
-		display: none;
-	}
-}
-
-.layout-aside-content, .layout-navside-content {
-	flex-grow: 1;
-	display: flex;
-	flex-direction: column;
-}
-
-// the contents of the navside
-.layout-navside-content {
-	// if you are on the move
-	@include media_smaller_than("s") {
-		// if it is preceded by a menu activation button that is not activated
-		.layout-navside-toggle[aria-expanded="false"] ~ & {
-			// is hidden
-			display: none;
-		}
-	}
-}
-
-.layout {
-	&.mod-navsideWithoutScrollbar {
-		.layout-navside {
-			max-height: auto;
-			overflow: visible;
-		}
-	}
-
-	&.mod-contentHeaderStatic {
-		.layout-content-headers-header {
-			position: static;
-		}
-	}
-
-	&.mod-contentSubheaderStatic {
-		.layout-content-headers-subheader {
-			position: static;
-		}
-	}
-
-	&.mod-navsideFooterStatic {
-		.layout-navside-footer {
-			position: static;
-		}
-	}
-
-	&.mod-asideFooterStatic {
-		.layout-aside-footer {
-			position: static;
-		}
-	}
-
-	&.mod-contentFooterStatic {
-		.layout-content-footer {
-			position: static;
-		}
-	}
-
-	&.mod-asideBefore {
-		&:not(.mod-asideRemoved) {
-			@include media_larger_than("l") {
-				grid-template-columns: _theme("components.navSide.width") _theme("components.aside.width") 1fr;
-				grid-template-areas: "banner	banner banner"
-					"navside aside	content";
-
-				&.mod-navsideLarge {
-					grid-template-columns: _theme("components.navSide.width") _theme("components.aside.width") 1fr;
-				}
-			}
-		}
-	}
-
-	&.mod-headerRemoved {
-		.layout-content-headers-header {
-			display: none;
-		}
-	}
-
-	&.mod-subheaderRemoved {
-		.layout-content-headers-subheader {
-			display: none;
-		}
-	}
-
-	&.mod-asideRemoved {
-		grid-template-columns: _theme("components.navSide.compact.width") 1fr;
-
-		.layout-aside {
-			display: none;
-		}
-
-		&.mod-navsideLarge {
-			grid-template-columns: _theme("components.navSide.width") 1fr;
-		}
-	}
-
-	&.mod-asideFooterRemoved {
-		.layout-aside-footer {
-			display: none;
-		}
-	}
-
-	&.mod-contentFooterRemoved {
-		.layout-footer {
-			display: none;
-		}
-	}
-
-	&.mod-navsideFooterRemoved {
-		.layout-navside-footer {
-			display: none;
-		}
-	}
-
-	&.mod-navsideLarge {
-
-		@include media_larger_than("l") {
-			grid-template-columns: _theme("components.navSide.width") 1fr _theme("components.aside.width");
-		}
-
-		@include media_smaller_than("l") {
-			grid-template-columns: _theme("components.navSide.width") 1fr;
-		}
-
-		@include media_smaller_than("s") {
-			grid-template-columns: 1fr;
-		}
-	}
-}
-
-.has-overlay {
-	&, body {
-		touch-action: none;
-		overscroll-behavior: none;
-		-webkit-overflow-scrolling: auto;
-	}
-
-	body {
-		overflow: hidden;
-	}
-}

package/src/components/_link.scss

@@ -1,25 +0,0 @@
-a {
-	color: _color("text.link");
-	cursor: pointer;
-	text-decoration: underline;
-
-	&:hover {
-		color: _color("text.link", "hover");
-	}
-}
-
-.link {
-	background-color: transparent;
-	border: 0;
-	color: _color("text.link");
-	cursor: pointer;
-	display: inline;
-	font-family: _theme("commons.font.family");
-	margin: 0;
-	padding: 0;
-	text-decoration: underline;
-
-	&:hover {
-		color: _color("text.link", "hover");
-	}
-}

package/src/components/_list.scss

@@ -1,95 +0,0 @@
-.list {
-	background-color: white;
-	@include elevate(1);
-	list-style: none;
-	margin-bottom: _component("list.margin-bottom");
-	padding: 0;
-}
-
-.list-item {
-	align-items: center;
-	border-bottom: _theme("commons.divider.width") solid _theme("commons.divider.color");
-	color: _color("text.default");
-	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 mask;
-				opacity: 0;
-			}
-		}
-	}
-}
-
-.list-item-content {
-	color: _color("text.default");
-	padding: _component("list.padding");
-	text-decoration: none;
-	width: 100%;
-}
-
-.list-item-content-title {
-	margin: 0;
-}
-
-.list-item-content-description {
-	margin: 0;
-}
-
-.list-item-actions {
-	margin-left: auto;
-	padding: _component("list.padding");
-	padding-left: 0;
-	transition: all _theme("commons.animations.durations.fast") ease;
-	white-space: nowrap;
-}
-
-.list-item-handler {
-	color: _color("text.placeholder");
-	cursor: move;
-	font-size: 1.3rem;
-	left: 0;
-	text-align: center;
-	position: absolute;
-	width: 2.4rem;
-
-	&::before {
-		@include makeIcon("drag");
-		vertical-align: middle;
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-
-.list-item {
-
-	// Clickable
-
-	&.mod-clickable {
-		cursor: pointer;
-		transition: background-color _theme("commons.animations.durations.fast") ease;
-
-		&:hover {
-			background-color: _component("list.hover.background");
-		}
-	}
-
-	// Draggable
-
-	&.mod-draggable {
-		padding-left: 1rem;
-	}
-}