@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/pageHeader/component.scss

@@ -1,58 +1,58 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin component($atRoot: 'without: rule') {
-	padding: var(--spacings-L) 2.5rem var(--spacings-M);
-
-	.menu {
-		margin-top: var(--spacings-XS);
-	}
-
-	@at-root ($atRoot) {
-		.pageHeader-content {
-			display: flex;
-			justify-content: space-between;
-			align-items: flex-start;
-			flex-wrap: wrap;
-			row-gap: var(--spacings-XS);
-		}
-
-		.pageHeader-content-title {
-			display: flex;
-			column-gap: var(--spacings-S);
-			align-items: center;
-			flex-wrap: wrap;
-		}
-
-		.pageHeader-content-actions {
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			row-gap: var(--spacings-S);
-		}
-
-		.pageHeader-content-actions {
-			gap: var(--spacings-S);
-
-			.button {
-				margin: 0;
-
-				@include media.max('XS') {
-					flex: 1;
-				}
-			}
-
-			.textfield.mod-search {
-				@include media.max('XS') {
-					width: 100%;
-					flex: auto;
-				}
-			}
-		}
-
-		.pageHeader-description {
-			max-width: var(--components-pageHeader-description-max-width);
-			margin-top: var(--spacings-XS);
-			color: var(--palettes-grey-700);
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin component($atRoot: 'without: rule') {
+	padding: var(--spacings-L) 2.5rem var(--spacings-M);
+
+	.menu {
+		margin-top: var(--spacings-XS);
+	}
+
+	@at-root ($atRoot) {
+		.pageHeader-content {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			row-gap: var(--spacings-XS);
+		}
+
+		.pageHeader-content-title {
+			display: flex;
+			column-gap: var(--spacings-S);
+			align-items: center;
+			flex-wrap: wrap;
+		}
+
+		.pageHeader-content-actions {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			row-gap: var(--spacings-S);
+		}
+
+		.pageHeader-content-actions {
+			gap: var(--spacings-S);
+
+			.button {
+				margin: 0;
+
+				@include media.max('XS') {
+					flex: 1;
+				}
+			}
+
+			.textfield.mod-search {
+				@include media.max('XS') {
+					width: 100%;
+					flex: auto;
+				}
+			}
+		}
+
+		.pageHeader-description {
+			max-width: var(--components-pageHeader-description-max-width);
+			margin-top: var(--spacings-XS);
+			color: var(--palettes-grey-700);
+		}
+	}
+}

package/src/components/pageHeader/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/pageHeader/index.scss

@@ -1,18 +1,18 @@
-@use 'exports' as *;
-
-.pageHeader {
-	@include vars;
-	@include component;
-
-	&.mod-withMenu {
-		@include menu;
-	}
-
-	&.mod-withBreadcrumbs {
-		@include breadcrumbs;
-	}
-
-	&.mod-sticky {
-		@include sticky;
-	}
-}
+@use 'exports' as *;
+
+.pageHeader {
+	@include vars;
+	@include component;
+
+	&.mod-withMenu {
+		@include menu;
+	}
+
+	&.mod-withBreadcrumbs {
+		@include breadcrumbs;
+	}
+
+	&.mod-sticky {
+		@include sticky;
+	}
+}

package/src/components/pageHeader/mods.scss

@@ -1,27 +1,27 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin menu {
-	padding-bottom: 0;
-}
-
-@mixin breadcrumbs {
-	padding-top: var(--spacings-S);
-
-	.breadcrumbs {
-		margin-bottom: 0;
-	}
-}
-
-@mixin sticky {
-	background-color: var(--commons-background-base);
-	top: var(--commons-banner-height);
-	position: sticky;
-	left: 0;
-	right: 0;
-	z-index: 99;
-
-	@include media.max('S') {
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-		left: 0 !important;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin menu {
+	padding-bottom: 0;
+}
+
+@mixin breadcrumbs {
+	padding-top: var(--spacings-S);
+
+	.breadcrumbs {
+		margin-bottom: 0;
+	}
+}
+
+@mixin sticky {
+	background-color: var(--commons-background-base);
+	top: var(--commons-banner-height);
+	position: sticky;
+	left: 0;
+	right: 0;
+	z-index: 99;
+
+	@include media.max('S') {
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		left: 0 !important;
+	}
+}

package/src/components/pageHeader/vars.scss

@@ -1,3 +1,3 @@
-@mixin vars {
-	--components-pageHeader-description-max-width: 50rem;
-}
+@mixin vars {
+	--components-pageHeader-description-max-width: 50rem;
+}

package/src/components/pagination/component.scss

@@ -1,39 +1,39 @@
-@mixin component($atRoot: 'without: rule') {
-	display: flex;
-	flex-wrap: wrap;
-	padding: var(--spacings-XS) .75rem;
-	justify-content: flex-end;
-
-	> *:not(:last-child) {
-		margin-right: var(--spacings-XS);
-	}
-
-	@at-root ($atRoot) {
-		.pagination-count,
-		.pagination-navigation,
-		.pagination-scrolling {
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-		}
-
-		.pagination-count-separator {
-			margin: 0 var(--spacings-XXS);
-		}
-
-		.pagination-navigation {
-			list-style: none;
-			padding: 0;
-			margin-top: 0;
-			margin-bottom: 0;
-
-			> *:not(:last-child) {
-				margin-right: var(--spacings-XXS);
-			}
-		}
-
-		.pagination-navigation-item {
-			margin-right: var(--spacings-XXS);
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	display: flex;
+	flex-wrap: wrap;
+	padding: var(--spacings-XS) .75rem;
+	justify-content: flex-end;
+
+	> *:not(:last-child) {
+		margin-right: var(--spacings-XS);
+	}
+
+	@at-root ($atRoot) {
+		.pagination-count,
+		.pagination-navigation,
+		.pagination-scrolling {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+		}
+
+		.pagination-count-separator {
+			margin: 0 var(--spacings-XXS);
+		}
+
+		.pagination-navigation {
+			list-style: none;
+			padding: 0;
+			margin-top: 0;
+			margin-bottom: 0;
+
+			> *:not(:last-child) {
+				margin-right: var(--spacings-XXS);
+			}
+		}
+
+		.pagination-navigation-item {
+			margin-right: var(--spacings-XXS);
+		}
+	}
+}

package/src/components/pagination/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/pagination/index.scss

@@ -1,16 +1,16 @@
-@use 'exports' as *;
-
-.pagination {
-	@include vars;
-	@include component;
-
-	&.mod-compact {
-		@include compact;
-	}
-}
-
-.pagination-navigation-item {
-	&:is(.is-ellipsis, .ellipsis) {
-		@include ellipsis;
-	}
-}
+@use 'exports' as *;
+
+.pagination {
+	@include vars;
+	@include component;
+
+	&.mod-compact {
+		@include compact;
+	}
+}
+
+.pagination-navigation-item {
+	&:is(.is-ellipsis, .ellipsis) {
+		@include ellipsis;
+	}
+}

package/src/components/pagination/mods.scss

@@ -1,4 +1,4 @@
-@mixin compact {
-  padding: 0;
-  justify-content: start;
-}
+@mixin compact {
+  padding: 0;
+  justify-content: start;
+}

package/src/components/pagination/states.scss

@@ -1,5 +1,5 @@
-@mixin ellipsis {
-	&::after {
-		content: '…';
-	}
-}
+@mixin ellipsis {
+	&::after {
+		content: '…';
+	}
+}

package/src/components/pagination/vars.scss

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

package/src/components/progress/component.scss

@@ -1,42 +1,42 @@
-@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
-
-@mixin component($atRoot: 'without: rule') {
-	@keyframes progress {
-		0% {
-			transform: scale(0, 1);
-			opacity: 1;
-		}
-
-		100% {
-			transform: scale(1, 1);
-			opacity: 0.3;
-		}
-	}
-
-	background-color: var(--commons-background-base);
-	height: var(--components-progress-height);
-	margin: var(--components-progress-margin-vertical) var(--components-progress-margin-horizontal);
-	position: relative;
-	overflow: hidden;
-
-	@at-root ($atRoot) {
-		.progress-bar {
-			background-color: var(--palettes-700, var(--components-progress-bar-background));
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color, width;
-			bottom: 0;
-			left: 0;
-			position: absolute;
-			top: 0;
-
-			&::after {
-				animation: progress var(--components-progress-duration) infinite;
-				background-image: var(--components-progress-bar-gradient);
-				transform-origin: left;
-				position: absolute;
-				inset: 0;
-				content: '';
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
+
+@mixin component($atRoot: 'without: rule') {
+	@keyframes progress {
+		0% {
+			transform: scale(0, 1);
+			opacity: 1;
+		}
+
+		100% {
+			transform: scale(1, 1);
+			opacity: 0.3;
+		}
+	}
+
+	background-color: var(--commons-background-base);
+	height: var(--components-progress-height);
+	margin: var(--components-progress-margin-vertical) var(--components-progress-margin-horizontal);
+	position: relative;
+	overflow: hidden;
+
+	@at-root ($atRoot) {
+		.progress-bar {
+			background-color: var(--palettes-700, var(--components-progress-bar-background));
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color, width;
+			bottom: 0;
+			left: 0;
+			position: absolute;
+			top: 0;
+
+			&::after {
+				animation: progress var(--components-progress-duration) infinite;
+				background-image: var(--components-progress-bar-gradient);
+				transform-origin: left;
+				position: absolute;
+				inset: 0;
+				content: '';
+			}
+		}
+	}
+}

package/src/components/progress/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/progress/index.scss

@@ -1,18 +1,18 @@
-@use 'exports' as *;
-
-.progress {
-	@include vars;
-	@include component;
-
-	&.mod-indeterminate {
-		@include indeterminate;
-	}
-
-	&:is(.is-success, .success, .palette-success) {
-		@include success;
-	}
-
-	&:is(.is-error, .error, .palette-error) {
-		@include error;
-	}
-}
+@use 'exports' as *;
+
+.progress {
+	@include vars;
+	@include component;
+
+	&.mod-indeterminate {
+		@include indeterminate;
+	}
+
+	&:is(.is-success, .success, .palette-success) {
+		@include success;
+	}
+
+	&:is(.is-error, .error, .palette-error) {
+		@include error;
+	}
+}

package/src/components/progress/mods.scss

@@ -1,19 +1,19 @@
-@mixin indeterminate {
-	@keyframes indeterminate {
-		0% {
-			left: calc(100% / -3);
-			right: 100%;
-		}
-
-		100% {
-			left: 100%;
-			right: calc(100% / -3);
-		}
-	}
-
-	.progress-bar {
-		animation: indeterminate var(--components-progress-duration) infinite;
-		width: calc(100% / 3) !important;
-		animation-timing-function: linear;
-	}
-}
+@mixin indeterminate {
+	@keyframes indeterminate {
+		0% {
+			left: calc(100% / -3);
+			right: 100%;
+		}
+
+		100% {
+			left: 100%;
+			right: calc(100% / -3);
+		}
+	}
+
+	.progress-bar {
+		animation: indeterminate var(--components-progress-duration) infinite;
+		width: calc(100% / 3) !important;
+		animation-timing-function: linear;
+	}
+}

package/src/components/progress/states.scss

@@ -1,21 +1,21 @@
-@mixin state {
-	.progress-bar {
-		width: 100% !important;
-
-		&::after {
-			display: none;
-		}
-	}
-}
-
-@mixin success {
-	@include state;
-
-	--palettes-700: var(--palettes-success-700);
-}
-
-@mixin error {
-	@include state;
-
-	--palettes-700: var(--palettes-error-700);
-}
+@mixin state {
+	.progress-bar {
+		width: 100% !important;
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+@mixin success {
+	@include state;
+
+	--palettes-700: var(--palettes-success-700);
+}
+
+@mixin error {
+	@include state;
+
+	--palettes-700: var(--palettes-error-700);
+}

package/src/components/progress/vars.scss

@@ -1,8 +1,8 @@
-@mixin vars {
-	--components-progress-margin-vertical: var(--spacings-S);
-	--components-progress-margin-horizontal: 0;
-	--components-progress-height: var(--spacings-XXS);
-	--components-progress-bar-background: var(--palettes-primary-700);
-	--components-progress-bar-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
-	--components-progress-duration: 1.5s;
-}
+@mixin vars {
+	--components-progress-margin-vertical: var(--spacings-S);
+	--components-progress-margin-horizontal: 0;
+	--components-progress-height: var(--spacings-XXS);
+	--components-progress-bar-background: var(--palettes-primary-700);
+	--components-progress-bar-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
+	--components-progress-duration: 1.5s;
+}