@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/layout/mods.scss

@@ -1,109 +1,109 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin navsideWithoutScrollbar {
-	.layout-navside {
-		max-height: auto;
-		overflow: visible;
-	}
-}
-
-@mixin contentHeaderStatic {
-	.layout-content-headers-header {
-		position: static;
-	}
-}
-
-@mixin contentSubheaderStatic {
-	.layout-content-headers-subheader {
-		position: static;
-	}
-}
-
-@mixin navsideFooterStatic {
-	.layout-navside-footer {
-		position: static;
-	}
-}
-
-@mixin asideFooterStatic {
-	.layout-aside-footer {
-		position: static;
-	}
-}
-
-@mixin contentFooterStatic {
-	.layout-content-footer {
-		position: static;
-	}
-}
-
-@mixin asideBefore {
-	&:not(.mod-asideRemoved) {
-		@include media.min('L') {
-			grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
-			grid-template-areas:
-				'banner	banner banner'
-				'navside aside	content';
-
-			&.mod-navsideLarge {
-				grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
-			}
-		}
-	}
-}
-
-@mixin headerRemoved {
-	.layout-content-headers-header {
-		display: none;
-	}
-}
-
-@mixin subheaderRemoved {
-	.layout-content-headers-subheader {
-		display: none;
-	}
-}
-
-@mixin asideRemoved {
-	grid-template-columns: var(--commons-navSide-compact-width) 1fr;
-
-	.layout-aside {
-		display: none;
-	}
-
-	&.mod-navsideLarge {
-		grid-template-columns: var(--commons-navSide-width) 1fr;
-	}
-}
-
-@mixin asideFooterRemoved {
-	.layout-aside-footer {
-		display: none;
-	}
-}
-
-@mixin contentFooterRemoved {
-	.layout-footer {
-		display: none;
-	}
-}
-
-@mixin navsideFooterRemoved {
-	.layout-navside-footer {
-		display: none;
-	}
-}
-
-@mixin navsideLarge {
-	@include media.min('L') {
-		grid-template-columns: var(--commons-navSide-width) 1fr var(--components-aside-width);
-	}
-
-	@include media.max('L') {
-		grid-template-columns: var(--commons-navSide-width) 1fr;
-	}
-
-	@include media.max('S') {
-		grid-template-columns: 1fr;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin navsideWithoutScrollbar {
+	.layout-navside {
+		max-height: auto;
+		overflow: visible;
+	}
+}
+
+@mixin contentHeaderStatic {
+	.layout-content-headers-header {
+		position: static;
+	}
+}
+
+@mixin contentSubheaderStatic {
+	.layout-content-headers-subheader {
+		position: static;
+	}
+}
+
+@mixin navsideFooterStatic {
+	.layout-navside-footer {
+		position: static;
+	}
+}
+
+@mixin asideFooterStatic {
+	.layout-aside-footer {
+		position: static;
+	}
+}
+
+@mixin contentFooterStatic {
+	.layout-content-footer {
+		position: static;
+	}
+}
+
+@mixin asideBefore {
+	&:not(.mod-asideRemoved) {
+		@include media.min('L') {
+			grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
+			grid-template-areas:
+				'banner	banner banner'
+				'navside aside	content';
+
+			&.mod-navsideLarge {
+				grid-template-columns: var(--commons-navSide-width) var(--components-aside-width) 1fr;
+			}
+		}
+	}
+}
+
+@mixin headerRemoved {
+	.layout-content-headers-header {
+		display: none;
+	}
+}
+
+@mixin subheaderRemoved {
+	.layout-content-headers-subheader {
+		display: none;
+	}
+}
+
+@mixin asideRemoved {
+	grid-template-columns: var(--commons-navSide-compact-width) 1fr;
+
+	.layout-aside {
+		display: none;
+	}
+
+	&.mod-navsideLarge {
+		grid-template-columns: var(--commons-navSide-width) 1fr;
+	}
+}
+
+@mixin asideFooterRemoved {
+	.layout-aside-footer {
+		display: none;
+	}
+}
+
+@mixin contentFooterRemoved {
+	.layout-footer {
+		display: none;
+	}
+}
+
+@mixin navsideFooterRemoved {
+	.layout-navside-footer {
+		display: none;
+	}
+}
+
+@mixin navsideLarge {
+	@include media.min('L') {
+		grid-template-columns: var(--commons-navSide-width) 1fr var(--components-aside-width);
+	}
+
+	@include media.max('L') {
+		grid-template-columns: var(--commons-navSide-width) 1fr;
+	}
+
+	@include media.max('S') {
+		grid-template-columns: 1fr;
+	}
+}

package/src/components/layout/states.scss

@@ -1,26 +1,26 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin overlay {
-	&,
-	body {
-		touch-action: none;
-		overscroll-behavior: none;
-		-webkit-overflow-scrolling: auto;
-	}
-
-	body {
-		overflow: hidden !important;
-	}
-}
-
-@mixin active {
-	@include media.max('S') {
-		top: var(--commons-banner-height);
-		height: calc(100vh - var(--commons-banner-height));
-		background-color: var(--colors-white-color);
-		position: fixed;
-		overflow: auto;
-		left: 0;
-		right: 0;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin overlay {
+	&,
+	body {
+		touch-action: none;
+		overscroll-behavior: none;
+		-webkit-overflow-scrolling: auto;
+	}
+
+	body {
+		overflow: hidden !important;
+	}
+}
+
+@mixin active {
+	@include media.max('S') {
+		top: var(--commons-banner-height);
+		height: calc(100vh - var(--commons-banner-height));
+		background-color: var(--colors-white-color);
+		position: fixed;
+		overflow: auto;
+		left: 0;
+		right: 0;
+	}
+}

package/src/components/layout/vars.scss

@@ -1,3 +1,3 @@
-@mixin vars {
-	--components-aside-width: 18rem;
-}
+@mixin vars {
+	--components-aside-width: 18rem;
+}

package/src/components/link/component.scss

@@ -1,22 +1,22 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component {
-	background-color: transparent;
-	border: 0;
-	color: var(--commons-text-link-color);
-	cursor: pointer;
-	font-family: inherit;
-	margin: 0;
-	padding: 0;
-	text-decoration: underline;
-
-	&:not(:disabled, .is-disabled) {
-		&:hover {
-			color: var(--commons-text-link-hover);
-		}
-
-		&:focus-visible {
-			@include a11y.focusVisible($borderRadius: var(--commons-borderRadius-M));
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component {
+	background-color: transparent;
+	border: 0;
+	color: var(--commons-text-link-color);
+	cursor: pointer;
+	font-family: inherit;
+	margin: 0;
+	padding: 0;
+	text-decoration: underline;
+
+	&:not(:disabled, .is-disabled) {
+		&:hover {
+			color: var(--commons-text-link-hover);
+		}
+
+		&:focus-visible {
+			@include a11y.focusVisible($borderRadius: var(--commons-borderRadius-M));
+		}
+	}
+}

package/src/components/link/exports.scss

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

package/src/components/link/index.scss

@@ -1,18 +1,18 @@
-@use 'exports' as *;
-
-.link {
-	@include vars;
-	@include component;
-
-	&.mod-icon {
-		@include icon;
-	}
-
-	&.mod-decorationHover {
-		@include decorationHover;
-	}
-
-	&:is(:disabled, .is-disabled) {
-		@include disabled;
-	}
-}
+@use 'exports' as *;
+
+.link {
+	@include vars;
+	@include component;
+
+	&.mod-icon {
+		@include icon;
+	}
+
+	&.mod-decorationHover {
+		@include decorationHover;
+	}
+
+	&:is(:disabled, .is-disabled) {
+		@include disabled;
+	}
+}

package/src/components/link/mods.scss

@@ -1,16 +1,16 @@
-@mixin icon {
-	.lucca-icon {
-		text-decoration: none;
-		margin-left: var(--spacings-XXS);
-		font-size: var(--sizes-M-fontSize);
-		line-height: var(--sizes-XS-lineHeight);
-	}
-}
-
-@mixin decorationHover {
-	text-decoration: none;
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
+@mixin icon {
+	.lucca-icon {
+		text-decoration: none;
+		margin-left: var(--spacings-XXS);
+		font-size: var(--sizes-M-fontSize);
+		line-height: var(--sizes-XS-lineHeight);
+	}
+}
+
+@mixin decorationHover {
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}

package/src/components/link/states.scss

@@ -1,4 +1,4 @@
-@mixin disabled {
-	color: var(--commons-text-link-disabled);
-	cursor: not-allowed;
-}
+@mixin disabled {
+	color: var(--commons-text-link-disabled);
+	cursor: not-allowed;
+}

package/src/components/link/vars.scss

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

package/src/components/list/component.scss

@@ -1,48 +1,48 @@
-@mixin component($atRoot: 'without: rule') {
-	background-color: var(--colors-white-color);
-	box-shadow: var(--commons-elevations-elevation-1);
-	margin-bottom: var(--components-list-margin-bottom);
-	list-style: none;
-	padding: 0;
-
-	@at-root ($atRoot) {
-		.list-item {
-			border-bottom-width: var(--commons-divider-width);
-			border-bottom-color: var(--commons-divider-color);
-			color: var(--palettes-grey-800);
-			border-bottom-style: solid;
-			align-items: center;
-			display: flex;
-			position: relative;
-			text-decoration: none;
-
-			&:last-child {
-				border: 0;
-			}
-		}
-
-		.list-item-content {
-			padding: var(--components-list-padding);
-			color: var(--palettes-grey-800);
-			text-decoration: none;
-			width: 100%;
-		}
-
-		.list-item-content-title {
-			margin: 0;
-		}
-
-		.list-item-content-description {
-			margin: 0;
-		}
-
-		.list-item-actions {
-			padding: var(--components-list-padding);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: all;
-			margin-left: auto;
-			white-space: nowrap;
-			padding-left: 0;
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--colors-white-color);
+	box-shadow: var(--commons-elevations-elevation-1);
+	margin-bottom: var(--components-list-margin-bottom);
+	list-style: none;
+	padding: 0;
+
+	@at-root ($atRoot) {
+		.list-item {
+			border-bottom-width: var(--commons-divider-width);
+			border-bottom-color: var(--commons-divider-color);
+			color: var(--palettes-grey-800);
+			border-bottom-style: solid;
+			align-items: center;
+			display: flex;
+			position: relative;
+			text-decoration: none;
+
+			&:last-child {
+				border: 0;
+			}
+		}
+
+		.list-item-content {
+			padding: var(--components-list-padding);
+			color: var(--palettes-grey-800);
+			text-decoration: none;
+			width: 100%;
+		}
+
+		.list-item-content-title {
+			margin: 0;
+		}
+
+		.list-item-content-description {
+			margin: 0;
+		}
+
+		.list-item-actions {
+			padding: var(--components-list-padding);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: all;
+			margin-left: auto;
+			white-space: nowrap;
+			padding-left: 0;
+		}
+	}
+}

package/src/components/list/exports.scss

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

package/src/components/list/index.scss

@@ -1,20 +1,20 @@
-@use 'exports' as *;
-
-.list {
-	@include vars;
-	@include component;
-}
-
-.list-item {
-	&.mod-clickable {
-		@include clickable;
-	}
-
-	&.mod-draggable {
-		@include draggable;
-	}
-
-	&.mod-actionsHidden {
-		@include actionsHidden; // Legacy
-	}
-}
+@use 'exports' as *;
+
+.list {
+	@include vars;
+	@include component;
+}
+
+.list-item {
+	&.mod-clickable {
+		@include clickable;
+	}
+
+	&.mod-draggable {
+		@include draggable;
+	}
+
+	&.mod-actionsHidden {
+		@include actionsHidden; // Legacy
+	}
+}

package/src/components/list/mods.scss

@@ -1,53 +1,53 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin clickable {
-	transition-duration: var(--commons-animations-durations-fast);
-	transition-property: background-color;
-	text-decoration: none;
-	cursor: pointer;
-
-	&:focus {
-		outline: none;
-	}
-
-	&:focus-visible,
-	&:hover {
-		outline: none;
-		background-color: var(--components-list-hover-background);
-	}
-}
-
-@mixin draggable {
-	padding-left: var(--spacings-S);
-
-	.list-item-handler {
-		color: var(--palettes-grey-400);
-		font-size: 1.3rem;
-		left: 0;
-		width: 2.4rem;
-		text-align: center;
-		position: absolute;
-		cursor: move;
-
-		&::before {
-			@include icon.generate('dots_drag');
-
-			vertical-align: middle;
-		}
-	}
-}
-
-@mixin actionsHidden {
-	// if no hover on list item
-	@media (hover: hover) {
-		&:not(:hover) {
-			.actionIcon {
-				&:not(:focus) {
-					@include a11y.mask;
-					opacity: 0;
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin clickable {
+	transition-duration: var(--commons-animations-durations-fast);
+	transition-property: background-color;
+	text-decoration: none;
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible,
+	&:hover {
+		outline: none;
+		background-color: var(--components-list-hover-background);
+	}
+}
+
+@mixin draggable {
+	padding-left: var(--spacings-S);
+
+	.list-item-handler {
+		color: var(--palettes-grey-400);
+		font-size: 1.3rem;
+		left: 0;
+		width: 2.4rem;
+		text-align: center;
+		position: absolute;
+		cursor: move;
+
+		&::before {
+			@include icon.generate('dots_drag');
+
+			vertical-align: middle;
+		}
+	}
+}
+
+@mixin actionsHidden {
+	// if no hover on list item
+	@media (hover: hover) {
+		&:not(:hover) {
+			.actionIcon {
+				&:not(:focus) {
+					@include a11y.mask;
+					opacity: 0;
+				}
+			}
+		}
+	}
+}

package/src/components/list/vars.scss

@@ -1,5 +1,5 @@
-@mixin vars {
-	--components-list-margin-bottom: var(--spacings-S);
-	--components-list-padding: var(--spacings-S) var(--spacings-M);
-	--components-list-hover-background: var(--palettes-primary-50);
-}
+@mixin vars {
+	--components-list-margin-bottom: var(--spacings-S);
+	--components-list-padding: var(--spacings-S) var(--spacings-M);
+	--components-list-hover-background: var(--palettes-primary-50);
+}