@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/formLabel/mods.scss

@@ -1,19 +1,19 @@
-@use '@lucca-front/icons/src/icon/exports' as icons;
-
-@mixin S {
-  --components-formLabel-fontSize: var(--sizes-S-fontSize);
-  --components-formLabel-lineHeight: var(--sizes-S-lineHeight);
-  --components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);
-  --components-formLabel-help-lineHeight: var(--sizes-S-lineHeight);
-}
-
-@mixin XS {
-  --components-formLabel-fontSize: var(--sizes-XS-fontSize);
-  --components-formLabel-lineHeight: var(--sizes-XS-lineHeight);
-  --components-formLabel-help-fontSize: .75rem;
-  --components-formLabel-help-lineHeight: var(--sizes-XS-lineHeight);
-}
-
-@mixin label {
-  cursor: pointer;
-}
+@use '@lucca-front/icons/src/icon/exports' as icons;
+
+@mixin S {
+  --components-formLabel-fontSize: var(--sizes-S-fontSize);
+  --components-formLabel-lineHeight: var(--sizes-S-lineHeight);
+  --components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);
+  --components-formLabel-help-lineHeight: var(--sizes-S-lineHeight);
+}
+
+@mixin XS {
+  --components-formLabel-fontSize: var(--sizes-XS-fontSize);
+  --components-formLabel-lineHeight: var(--sizes-XS-lineHeight);
+  --components-formLabel-help-fontSize: .75rem;
+  --components-formLabel-help-lineHeight: var(--sizes-XS-lineHeight);
+}
+
+@mixin label {
+  cursor: pointer;
+}

package/src/components/formLabel/states.scss

@@ -1,8 +1,8 @@
-@mixin error {
-  --components-formLabel-color: var(--palettes-error-700);
-}
-
-@mixin disabled {
-  --components-formLabel-color: var(--palettes-grey-500);
-  pointer-events: none;
-}
+@mixin error {
+  --components-formLabel-color: var(--palettes-error-700);
+}
+
+@mixin disabled {
+  --components-formLabel-color: var(--palettes-grey-500);
+  pointer-events: none;
+}

package/src/components/formLabel/vars.scss

@@ -1,7 +1,7 @@
-@mixin vars {
-  --components-formLabel-fontSize: var(--sizes-M-fontSize);
-  --components-formLabel-lineHeight: var(--sizes-M-lineHeight);
-  --components-formLabel-color: var(--palettes-grey-800);
-  --components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);
-  --components-formLabel-help-lineHeight: var(--sizes-M-lineHeight);
-}
+@mixin vars {
+  --components-formLabel-fontSize: var(--sizes-M-fontSize);
+  --components-formLabel-lineHeight: var(--sizes-M-lineHeight);
+  --components-formLabel-color: var(--palettes-grey-800);
+  --components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);
+  --components-formLabel-help-lineHeight: var(--sizes-M-lineHeight);
+}

package/src/components/gauge/component.scss

@@ -1,21 +1,21 @@
-@mixin component($atRoot: 'without: rule') {
-	border-radius: var(--commons-borderRadius-M);
-	height: var(--components-gauge-height);
-	overflow: hidden;
-	position: relative;
-	background-color: rgba(var(--colors-grey-900-rgb), 0.05);
-
-	@at-root ($atRoot) {
-		.gauge-bar {
-			color: var(--palettes-700, var(--palettes-primary-700));
-			border-bottom-width: var(--components-gauge-height);
-			transition-duration: var(--commons-animations-durations-standard);
-			transition-property: border-color, width, height;
-			top: 0;
-			left: 0;
-			position: absolute;
-			border-bottom-style: solid;
-			border-color: currentColor;
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	border-radius: var(--commons-borderRadius-M);
+	height: var(--components-gauge-height);
+	overflow: hidden;
+	position: relative;
+	background-color: rgba(var(--colors-grey-900-rgb), 0.05);
+
+	@at-root ($atRoot) {
+		.gauge-bar {
+			color: var(--palettes-700, var(--palettes-primary-700));
+			border-bottom-width: var(--components-gauge-height);
+			transition-duration: var(--commons-animations-durations-standard);
+			transition-property: border-color, width, height;
+			top: 0;
+			left: 0;
+			position: absolute;
+			border-bottom-style: solid;
+			border-color: currentColor;
+		}
+	}
+}

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

@@ -1,14 +1,14 @@
-@use 'exports' as *;
-
-.gauge {
-	@include vars;
-	@include component;
-
-	&.mod-thin {
-		@include thin;
-	}
-
-	&.mod-vertical {
-		@include vertical;
-	}
-}
+@use 'exports' as *;
+
+.gauge {
+	@include vars;
+	@include component;
+
+	&.mod-thin {
+		@include thin;
+	}
+
+	&.mod-vertical {
+		@include vertical;
+	}
+}

package/src/components/gauge/mods.scss

@@ -1,14 +1,14 @@
-@mixin thin {
-	--components-gauge-height: var(--spacings-XXS);
-}
-
-@mixin vertical {
-	width: var(--components-gauge-height);
-	height: 100%;
-
-	.gauge-bar {
-		border-left-width: var(--components-gauge-height);
-		border-bottom-width: 0;
-		border-left-style: solid;
-	}
-}
+@mixin thin {
+	--components-gauge-height: var(--spacings-XXS);
+}
+
+@mixin vertical {
+	width: var(--components-gauge-height);
+	height: 100%;
+
+	.gauge-bar {
+		border-left-width: var(--components-gauge-height);
+		border-bottom-width: 0;
+		border-left-style: solid;
+	}
+}

package/src/components/gauge/vars.scss

@@ -1,3 +1,3 @@
-@mixin vars {
-	--components-gauge-height: 0.625rem;
-}
+@mixin vars {
+	--components-gauge-height: 0.625rem;
+}

package/src/components/grid/component.scss

@@ -1,68 +1,68 @@
-@use 'sass:string';
-
-@use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/config';
-
-@mixin component($atRoot: 'without: rule') {
-	display: grid;
-	grid-template-columns: var(--grid-template-columns);
-	gap: var(--grid-row-gap) var(--grid-column-gap);
-
-	// workaround for Angular replacing CamelCase by kebab-case
-	// max-width: var(--grid-max-width, var(--grid-maxWidth));
-	width: var(--grid-max-width, var(--grid-maxWidth));
-	max-width: 100%;
-
-	@at-root ($atRoot) {
-		.grid-column {
-			align-self: var(--grid-align, var(--grid-column-align));
-			justify-self: var(--grid-justify, var(--grid-column-justify));
-
-			grid-column-start: var(--grid-column, var(--grid-column-start));
-			grid-row-start: var(--grid-row, var(--grid-row-start));
-
-			grid-column-end: span var(--grid-colspan, var(--grid-column-end));
-			grid-row-end: span var(--grid-rowspan, var(--grid-row-end));
-
-			@each $breakpoint, $value in config.$breakpoints {
-				@include media.min($breakpoint) {
-					&[style*='grid-colspanAtMediaMin#{$breakpoint}'] {
-						grid-column-end: span var(--grid-colspanAtMediaMin#{$breakpoint});
-					}
-
-					&[style*='grid-rowspanAtMediaMin#{$breakpoint}'] {
-						grid-row-end: span var(--grid-rowspanAtMediaMin#{$breakpoint});
-					}
-
-					&[style*='grid-columnAtMediaMin#{$breakpoint}'] {
-						grid-column-start: var(--grid-columnAtMediaMin#{$breakpoint});
-					}
-
-					&[style*='grid-rowAtMediaMin#{$breakpoint}'] {
-						grid-row-start: var(--grid-rowAtMediaMin#{$breakpoint});
-					}
-
-					// workaround for Angular replacing CamelCase by kebab-case
-					&[style*='grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
-						grid-column-end: span var(--grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)});
-					}
-
-					// workaround for Angular replacing CamelCase by kebab-case
-					&[style*='grid-rowspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
-						grid-row-end: span var(--grid-rowspan-at-media-min-#{string.to-lower-case($breakpoint)});
-					}
-
-					// workaround for Angular replacing CamelCase by kebab-case
-					&[style*='grid-column-at-media-min-#{string.to-lower-case($breakpoint)}'] {
-						grid-column-start: var(--grid-column-at-media-min-#{string.to-lower-case($breakpoint)});
-					}
-
-					// workaround for Angular replacing CamelCase by kebab-case
-					&[style*='grid-row-at-media-min-#{string.to-lower-case($breakpoint)}'] {
-						grid-row-start: var(--grid-row-at-media-min-#{string.to-lower-case($breakpoint)});
-					}
-				}
-			}
-		}
-	}
-}
+@use 'sass:string';
+
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/config';
+
+@mixin component($atRoot: 'without: rule') {
+	display: grid;
+	grid-template-columns: var(--grid-template-columns);
+	gap: var(--grid-row-gap) var(--grid-column-gap);
+
+	// workaround for Angular replacing CamelCase by kebab-case
+	// max-width: var(--grid-max-width, var(--grid-maxWidth));
+	width: var(--grid-max-width, var(--grid-maxWidth));
+	max-width: 100%;
+
+	@at-root ($atRoot) {
+		.grid-column {
+			align-self: var(--grid-align, var(--grid-column-align));
+			justify-self: var(--grid-justify, var(--grid-column-justify));
+
+			grid-column-start: var(--grid-column, var(--grid-column-start));
+			grid-row-start: var(--grid-row, var(--grid-row-start));
+
+			grid-column-end: span var(--grid-colspan, var(--grid-column-end));
+			grid-row-end: span var(--grid-rowspan, var(--grid-row-end));
+
+			@each $breakpoint, $value in config.$breakpoints {
+				@include media.min($breakpoint) {
+					&[style*='grid-colspanAtMediaMin#{$breakpoint}'] {
+						grid-column-end: span var(--grid-colspanAtMediaMin#{$breakpoint});
+					}
+
+					&[style*='grid-rowspanAtMediaMin#{$breakpoint}'] {
+						grid-row-end: span var(--grid-rowspanAtMediaMin#{$breakpoint});
+					}
+
+					&[style*='grid-columnAtMediaMin#{$breakpoint}'] {
+						grid-column-start: var(--grid-columnAtMediaMin#{$breakpoint});
+					}
+
+					&[style*='grid-rowAtMediaMin#{$breakpoint}'] {
+						grid-row-start: var(--grid-rowAtMediaMin#{$breakpoint});
+					}
+
+					// workaround for Angular replacing CamelCase by kebab-case
+					&[style*='grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
+						grid-column-end: span var(--grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)});
+					}
+
+					// workaround for Angular replacing CamelCase by kebab-case
+					&[style*='grid-rowspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
+						grid-row-end: span var(--grid-rowspan-at-media-min-#{string.to-lower-case($breakpoint)});
+					}
+
+					// workaround for Angular replacing CamelCase by kebab-case
+					&[style*='grid-column-at-media-min-#{string.to-lower-case($breakpoint)}'] {
+						grid-column-start: var(--grid-column-at-media-min-#{string.to-lower-case($breakpoint)});
+					}
+
+					// workaround for Angular replacing CamelCase by kebab-case
+					&[style*='grid-row-at-media-min-#{string.to-lower-case($breakpoint)}'] {
+						grid-row-start: var(--grid-row-at-media-min-#{string.to-lower-case($breakpoint)});
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,20 +1,20 @@
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/utils/media';
-@use 'exports' as *;
-
-.grid {
-	@include vars;
-	@include component;
-
-	&.mod-auto {
-		@include auto;
-	}
-
-	&.mod-form {
-		@include form;
-	}
-
-	&.mod-dense {
-		@include dense;
-	}
-}
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/utils/media';
+@use 'exports' as *;
+
+.grid {
+	@include vars;
+	@include component;
+
+	&.mod-auto {
+		@include auto;
+	}
+
+	&.mod-form {
+		@include form;
+	}
+
+	&.mod-dense {
+		@include dense;
+	}
+}

package/src/components/grid/mods.scss

@@ -1,17 +1,17 @@
-@mixin auto {
-	--grid-template-columns: none;
-	grid-auto-columns: 1fr;
-
-	.grid-column {
-		grid-row: 1;
-	}
-}
-
-@mixin form {
-	--grid-columns: 4;
-	--grid-maxWidth: 40rem;
-}
-
-@mixin dense {
-	grid-auto-flow: dense;
-}
+@mixin auto {
+	--grid-template-columns: none;
+	grid-auto-columns: 1fr;
+
+	.grid-column {
+		grid-row: 1;
+	}
+}
+
+@mixin form {
+	--grid-columns: 4;
+	--grid-maxWidth: 40rem;
+}
+
+@mixin dense {
+	grid-auto-flow: dense;
+}

package/src/components/grid/vars.scss

@@ -1,18 +1,18 @@
-@mixin vars {
-	--grid-columns: 12;
-	--grid-gap: var(--spacings-S);
-	--grid-column-gap: var(--grid-gap);
-	--grid-row-gap: var(--grid-gap);
-	--grid-maxWidth: none;
-
-	--grid-column-start: auto;
-	--grid-row-start: auto;
-
-	--grid-column-end: auto;
-	--grid-row-end: auto;
-
-	--grid-column-align: auto;
-	--grid-column-justify: auto;
-
-	--grid-template-columns: repeat(var(--grid-columns), 1fr);
-}
+@mixin vars {
+	--grid-columns: 12;
+	--grid-gap: var(--spacings-S);
+	--grid-column-gap: var(--grid-gap);
+	--grid-row-gap: var(--grid-gap);
+	--grid-maxWidth: none;
+
+	--grid-column-start: auto;
+	--grid-row-start: auto;
+
+	--grid-column-end: auto;
+	--grid-row-end: auto;
+
+	--grid-column-align: auto;
+	--grid-column-justify: auto;
+
+	--grid-template-columns: repeat(var(--grid-columns), 1fr);
+}

package/src/components/gridLegacy/component.scss

@@ -1,34 +1,34 @@
-@use 'sass:math';
-
-@mixin component {
-	display: flex;
-	flex: 0 1 auto;
-	flex-direction: row;
-	flex-wrap: wrap;
-	margin-left: calc(var(--spacings-XS) * -1);
-	margin-right: calc(var(--spacings-XS) * -1);
-}
-
-@mixin column {
-	flex: 0 0 auto;
-	flex-basis: 100%;
-	max-width: 100%;
-	padding-left: var(--spacings-XS);
-	padding-right: var(--spacings-XS);
-	position: relative;
-}
-
-@mixin grow {
-	flex-basis: 0;
-	flex-grow: 1;
-	max-width: 100%;
-}
-
-@mixin basis($i) {
-	flex-basis: math.percentage(math.div($i, 12));
-	max-width: math.percentage(math.div($i, 12));
-}
-
-@mixin offset($i) {
-	margin-left: math.percentage(math.div($i, 12));
-}
+@use 'sass:math';
+
+@mixin component {
+	display: flex;
+	flex: 0 1 auto;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-left: calc(var(--spacings-XS) * -1);
+	margin-right: calc(var(--spacings-XS) * -1);
+}
+
+@mixin column {
+	flex: 0 0 auto;
+	flex-basis: 100%;
+	max-width: 100%;
+	padding-left: var(--spacings-XS);
+	padding-right: var(--spacings-XS);
+	position: relative;
+}
+
+@mixin grow {
+	flex-basis: 0;
+	flex-grow: 1;
+	max-width: 100%;
+}
+
+@mixin basis($i) {
+	flex-basis: math.percentage(math.div($i, 12));
+	max-width: math.percentage(math.div($i, 12));
+}
+
+@mixin offset($i) {
+	margin-left: math.percentage(math.div($i, 12));
+}

package/src/components/gridLegacy/exports.scss

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