@lucca-front/scss 16.4.1 → 16.4.3

package/src/commons/core.scss

@@ -1,107 +1,107 @@
-@use 'sass:string';
-@use 'sass:map';
-@use 'sass:list';
-
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/icons/src/commons/core' as transform;
-
-$contents: '0';
-$boxModel: 'margin', 'padding', 'border';
-$boxDirection: '', 'top', 'bottom', 'left', 'right', 'inline', 'block';
-$corners: '', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-';
-$gaps: 'column-gap', 'row-gap', 'gap';
-$displays: 'block', 'flex', 'inline', 'inline-flex', 'inline-block', 'none';
-$direction: 'column', 'column-reverse', 'row', 'row-reverse';
-$wrap: 'wrap', 'nowrap', 'wrap-reverse';
-$justify: 'flex-start', 'flex-end', 'space-around', 'space-between', 'space-evenly', 'center';
-$align: 'flex-start', 'flex-end', 'baseline', 'stretch', 'center';
-$flex: '0', '1', 'auto';
-$basis: '0', 'auto';
-$order: '-1', '1';
-$textAlign: 'left', 'center', 'right';
-$visibility: 'visible', 'hidden', 'collapse';
-$fontWeight: '400', '600', '700', '900', 'normal', 'semibold', 'bold', 'black';
-$fontStyle: 'normal', 'italic';
-$pointerEvents: 'none', 'auto';
-$scrollBehavior: 'auto', 'smooth';
-$whiteSpace: 'normal', 'nowrap';
-$float: 'left', 'right';
-$verticalAlign: 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle', 'top', 'bottom';
-$position: 'absolute', 'relative', 'static', 'fixed', 'sticky';
-$decoration: 'underline', 'line-through', 'none';
-$overflow: 'hidden', 'auto', 'visible', 'scroll';
-
-@mixin cssvars($name, $properties, $after: '') {
-	@each $key, $value in $properties {
-		--#{$name}#{if($key == '', '', '-')}#{$key}#{$after}: #{$value};
-	}
-}
-
-@mixin classes($name, $properties, $suffix: '!important', $prefix: '') {
-	@each $property in $properties {
-		@if $prefix == '' {
-			.u-#{transform.camelize($name)}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
-				#{$name}: #{$property} #{$suffix};
-			}
-		} @else {
-			.u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
-				#{$name}: #{$property} #{$suffix};
-			}
-		}
-	}
-}
-
-@mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important') {
-	.u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
-		#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: $value #{$suffix};
-	}
-}
-
-@mixin spacings {
-	@each $boxModel in $boxModel {
-		@each $boxDirection in $boxDirection {
-			@each $key, $value in config.$spacings {
-				@if $boxModel != 'border' or $value == 0 {
-					@include spacing($boxModel, $boxDirection, $key, $value);
-				}
-			}
-
-			@if $boxModel == 'margin' {
-				@include spacing($boxModel, $boxDirection, $key: 'auto', $value: auto);
-			}
-		}
-	}
-
-	@each $gap in $gaps {
-		@each $key, $value in config.$spacings {
-			@include spacing($gap, $boxDirection: '', $key: $key, $value: $value);
-		}
-	}
-}
-
-@mixin sizes($suffix: '!important') {
-	@each $key, $value in config.$sizes {
-		.u-text#{transform.capitalize($key)} {
-			font-size: var(--sizes-#{$key}-fontSize) #{$suffix};
-			line-height: var(--sizes-#{$key}-lineHeight) #{$suffix};
-		}
-	}
-}
-
-@mixin palettes($suffix: '!important') {
-	@each $palette in list.join(config.$palettes, config.$states) {
-		.u-text#{transform.capitalize($palette)} {
-			color: var(--palettes-#{$palette}-700) #{$suffix};
-		}
-	}
-}
-
-@mixin borderRadius($suffix: '!important') {
-	@each $corner in $corners {
-		@each $key, $value in config.$borderRadius {
-			.u-border#{transform.capitalize(transform.camelize($corner))}Radius#{transform.capitalize($key)} {
-				border-#{$corner}radius: $value #{$suffix};
-			}
-		}
-	}
-}
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/icons/src/commons/core' as transform;
+
+$contents: '0';
+$boxModel: 'margin', 'padding', 'border';
+$boxDirection: '', 'top', 'bottom', 'left', 'right', 'inline', 'block';
+$corners: '', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-';
+$gaps: 'column-gap', 'row-gap', 'gap';
+$displays: 'block', 'flex', 'inline', 'inline-flex', 'inline-block', 'none';
+$direction: 'column', 'column-reverse', 'row', 'row-reverse';
+$wrap: 'wrap', 'nowrap', 'wrap-reverse';
+$justify: 'flex-start', 'flex-end', 'space-around', 'space-between', 'space-evenly', 'center';
+$align: 'flex-start', 'flex-end', 'baseline', 'stretch', 'center';
+$flex: '0', '1', 'auto';
+$basis: '0', 'auto';
+$order: '-1', '1';
+$textAlign: 'left', 'center', 'right';
+$visibility: 'visible', 'hidden', 'collapse';
+$fontWeight: '400', '600', '700', '900', 'normal', 'semibold', 'bold', 'black';
+$fontStyle: 'normal', 'italic';
+$pointerEvents: 'none', 'auto';
+$scrollBehavior: 'auto', 'smooth';
+$whiteSpace: 'normal', 'nowrap';
+$float: 'left', 'right';
+$verticalAlign: 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle', 'top', 'bottom';
+$position: 'absolute', 'relative', 'static', 'fixed', 'sticky';
+$decoration: 'underline', 'line-through', 'none';
+$overflow: 'hidden', 'auto', 'visible', 'scroll';
+
+@mixin cssvars($name, $properties, $after: '') {
+	@each $key, $value in $properties {
+		--#{$name}#{if($key == '', '', '-')}#{$key}#{$after}: #{$value};
+	}
+}
+
+@mixin classes($name, $properties, $suffix: '!important', $prefix: '') {
+	@each $property in $properties {
+		@if $prefix == '' {
+			.u-#{transform.camelize($name)}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+				#{$name}: #{$property} #{$suffix};
+			}
+		} @else {
+			.u-#{$prefix}#{transform.capitalize(transform.camelize($name))}#{if(string.slice($property, 1, 1) == '-', 'Minus', '')}#{transform.capitalize(transform.camelize($property))} {
+				#{$name}: #{$property} #{$suffix};
+			}
+		}
+	}
+}
+
+@mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important') {
+	.u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
+		#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: $value #{$suffix};
+	}
+}
+
+@mixin spacings {
+	@each $boxModel in $boxModel {
+		@each $boxDirection in $boxDirection {
+			@each $key, $value in config.$spacings {
+				@if $boxModel != 'border' or $value == 0 {
+					@include spacing($boxModel, $boxDirection, $key, $value);
+				}
+			}
+
+			@if $boxModel == 'margin' {
+				@include spacing($boxModel, $boxDirection, $key: 'auto', $value: auto);
+			}
+		}
+	}
+
+	@each $gap in $gaps {
+		@each $key, $value in config.$spacings {
+			@include spacing($gap, $boxDirection: '', $key: $key, $value: $value);
+		}
+	}
+}
+
+@mixin sizes($suffix: '!important') {
+	@each $key, $value in config.$sizes {
+		.u-text#{transform.capitalize($key)} {
+			font-size: var(--sizes-#{$key}-fontSize) #{$suffix};
+			line-height: var(--sizes-#{$key}-lineHeight) #{$suffix};
+		}
+	}
+}
+
+@mixin palettes($suffix: '!important') {
+	@each $palette in list.join(config.$palettes, config.$states) {
+		.u-text#{transform.capitalize($palette)} {
+			color: var(--palettes-#{$palette}-700) #{$suffix};
+		}
+	}
+}
+
+@mixin borderRadius($suffix: '!important') {
+	@each $corner in $corners {
+		@each $key, $value in config.$borderRadius {
+			.u-border#{transform.capitalize(transform.camelize($corner))}Radius#{transform.capitalize($key)} {
+				border-#{$corner}radius: $value #{$suffix};
+			}
+		}
+	}
+}

package/src/commons/exports.scss

@@ -1,3 +1,3 @@
-@forward 'normalize.css/normalize'; // 6 Ko
-@forward 'vars';
-@forward 'base';
+@forward 'normalize.css/normalize'; // 6 Ko
+@forward 'vars';
+@forward 'base';

package/src/commons/index.scss

@@ -1,6 +1,6 @@
-@use 'exports' as *;
-
-:root {
-	@include vars;
-	@include base;
-}
+@use 'exports' as *;
+
+:root {
+	@include vars;
+	@include base;
+}

package/src/commons/utils/a11y.scss

@@ -1,21 +1,21 @@
-@mixin mask($suffix: '') {
-	border: 0 #{$suffix};
-	clip: rect(1px, 1px, 1px, 1px) #{$suffix};
-	height: 1px #{$suffix};
-	margin: -1px #{$suffix};
-	overflow: hidden #{$suffix};
-	padding: 0 #{$suffix};
-	position: absolute #{$suffix};
-	width: 1px #{$suffix};
-	white-space: nowrap #{$suffix};
-	contain: paint #{$suffix};
-}
-
-@mixin focusVisible($offset: 2px, $borderRadius: false, $color: var(--palettes-primary-700)) {
-	outline: 2px solid $color;
-	outline-offset: $offset;
-
-	@if $borderRadius != false {
-	  border-radius: $borderRadius;
-	}
-}
+@mixin mask($suffix: '') {
+	border: 0 #{$suffix};
+	clip: rect(1px, 1px, 1px, 1px) #{$suffix};
+	height: 1px #{$suffix};
+	margin: -1px #{$suffix};
+	overflow: hidden #{$suffix};
+	padding: 0 #{$suffix};
+	position: absolute #{$suffix};
+	width: 1px #{$suffix};
+	white-space: nowrap #{$suffix};
+	contain: paint #{$suffix};
+}
+
+@mixin focusVisible($offset: 2px, $borderRadius: false, $color: var(--palettes-primary-700)) {
+	outline: 2px solid $color;
+	outline-offset: $offset;
+
+	@if $borderRadius != false {
+	  border-radius: $borderRadius;
+	}
+}

package/src/commons/utils/form.scss

@@ -1,19 +1,19 @@
-@mixin required {
-	color: var(--palettes-error-700);
-	display: inline-block;
-	margin-left: 0.2em;
-
-	@supports (content: '*' / '') {
-		content: '*' / '';
-	}
-
-	@supports not (content: '*' / '') {
-		content: '*';
-	}
-}
-
-@function fakeBorderOverlay($fakeBorderOverlayColor: currentColor, $fakeBorderOverlayWidth: 1px) {
-	@return ($fakeBorderOverlayWidth * -1) 0 $fakeBorderOverlayColor, 0 ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor,
-		($fakeBorderOverlayWidth * -1) ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor,
-		($fakeBorderOverlayWidth * -1) ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor inset;
-}
+@mixin required {
+	color: var(--palettes-error-700);
+	display: inline-block;
+	margin-left: 0.2em;
+
+	@supports (content: '*' / '') {
+		content: '*' / '';
+	}
+
+	@supports not (content: '*' / '') {
+		content: '*';
+	}
+}
+
+@function fakeBorderOverlay($fakeBorderOverlayColor: currentColor, $fakeBorderOverlayWidth: 1px) {
+	@return ($fakeBorderOverlayWidth * -1) 0 $fakeBorderOverlayColor, 0 ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor,
+		($fakeBorderOverlayWidth * -1) ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor,
+		($fakeBorderOverlayWidth * -1) ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor inset;
+}

package/src/commons/utils/index.scss

@@ -1,9 +1,9 @@
-// les utilitaires sont forwardés et préfixés afin de conserver leurs contextes
-// https://sass-lang.com/documentation/at-rules/forward#adding-a-prefix
-
-@forward 'media' as media-*; // 0 Ko
-@forward 'a11y' as a11y-*; // 0 Ko
-@forward 'reset' as reset-*; // 0 Ko
-@forward 'form' as form-*; // 0 Ko
-@forward 'loading' as loading-*; // 0 Ko
-@forward 'text' as text-*; // 0 Ko
+// les utilitaires sont forwardés et préfixés afin de conserver leurs contextes
+// https://sass-lang.com/documentation/at-rules/forward#adding-a-prefix
+
+@forward 'media' as media-*; // 0 Ko
+@forward 'a11y' as a11y-*; // 0 Ko
+@forward 'reset' as reset-*; // 0 Ko
+@forward 'form' as form-*; // 0 Ko
+@forward 'loading' as loading-*; // 0 Ko
+@forward 'text' as text-*; // 0 Ko

package/src/commons/utils/loading.scss

@@ -1,45 +1,45 @@
-@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
-
-@mixin spinner($size: 1.5rem) {
-	&::after {
-		width: $size;
-		height: $size;
-		border-radius: 50%;
-		line-height: 0.8rem;
-		border-width: 3px;
-		inset: 0;
-		margin: auto;
-		position: absolute;
-		border-style: solid;
-		content: '';
-		
-		@include keyframe.rotate;
-		animation-name: rotate;
-		animation-duration: var(--commons-loading-speed);
-		animation-timing-function: linear;
-		animation-iteration-count: infinite;
-		border-color:  var(--commons-loading-frontground);
-		border-top-color: transparent;
-	}
-}
-
-@mixin gradient($backgroundColor: transparent, $color: rgba(var(--colors-grey-900-rgb), 0.1)) {
-	@keyframes loadingGradient {
-		0% {
-			background-position: 100% 0%;
-		}
-		100% {
-			background-position: -100% 0%;
-		}
-	}
-
-	animation-name: loadingGradient;
-	animation-duration: 2s;
-	animation-timing-function: linear;
-	animation-iteration-count: infinite;
-	animation-fill-mode: forwards;
-	background-color: $backgroundColor;
-	background-repeat: no-repeat;
-	background-image: linear-gradient(315deg, $backgroundColor 40%, $color 50%, $backgroundColor 100%);
-	background-size: 400% 100%;
-}
+@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
+
+@mixin spinner($size: 1.5rem) {
+	&::after {
+		width: $size;
+		height: $size;
+		border-radius: 50%;
+		line-height: 0.8rem;
+		border-width: 3px;
+		inset: 0;
+		margin: auto;
+		position: absolute;
+		border-style: solid;
+		content: '';
+		
+		@include keyframe.rotate;
+		animation-name: rotate;
+		animation-duration: var(--commons-loading-speed);
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		border-color:  var(--commons-loading-frontground);
+		border-top-color: transparent;
+	}
+}
+
+@mixin gradient($backgroundColor: transparent, $color: rgba(var(--colors-grey-900-rgb), 0.1)) {
+	@keyframes loadingGradient {
+		0% {
+			background-position: 100% 0%;
+		}
+		100% {
+			background-position: -100% 0%;
+		}
+	}
+
+	animation-name: loadingGradient;
+	animation-duration: 2s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-fill-mode: forwards;
+	background-color: $backgroundColor;
+	background-repeat: no-repeat;
+	background-image: linear-gradient(315deg, $backgroundColor 40%, $color 50%, $backgroundColor 100%);
+	background-size: 400% 100%;
+}

package/src/commons/utils/media.scss

@@ -1,35 +1,35 @@
-@use 'sass:string';
-@use 'sass:map';
-@use 'sass:math';
-
-@use '@lucca-front/scss/src/commons/config';
-
-@mixin min($breakpoint, $reversed: false) {
-	$reverse: '';
-
-	@if $reversed {
-		$reverse: string.unquote('not all and');
-	} @else {
-		$reverse: string.unquote('');
-	}
-
-	$breakpointInPx: map.get(config.$breakpoints, $breakpoint);
-
-	@if $breakpointInPx {
-		$breakpointInEm: math.div($breakpointInPx, 16px) * 1em;
-
-		@media #{$reverse '(min-width:' $breakpointInEm ')'} {
-			@content;
-		}
-	} @else {
-		@media #{$reverse '(min-width:' $breakpoint')'} {
-			@content;
-		}
-	}
-}
-
-@mixin max($breakpoint) {
-	@include min($breakpoint, $reversed: true) {
-		@content;
-	}
-}
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:math';
+
+@use '@lucca-front/scss/src/commons/config';
+
+@mixin min($breakpoint, $reversed: false) {
+	$reverse: '';
+
+	@if $reversed {
+		$reverse: string.unquote('not all and');
+	} @else {
+		$reverse: string.unquote('');
+	}
+
+	$breakpointInPx: map.get(config.$breakpoints, $breakpoint);
+
+	@if $breakpointInPx {
+		$breakpointInEm: math.div($breakpointInPx, 16px) * 1em;
+
+		@media #{$reverse '(min-width:' $breakpointInEm ')'} {
+			@content;
+		}
+	} @else {
+		@media #{$reverse '(min-width:' $breakpoint')'} {
+			@content;
+		}
+	}
+}
+
+@mixin max($breakpoint) {
+	@include min($breakpoint, $reversed: true) {
+		@content;
+	}
+}

package/src/commons/utils/reset.scss

@@ -1,39 +1,39 @@
-@mixin list($suffix: '', $list: 'ul') {
-	margin: 0 #{$suffix};
-
-	@if $list == ('ul' or 'ol') {
-		padding: 0 #{$suffix};
-		list-style-type: none #{$suffix};
-	}
-
-	@if $list == 'dl' {
-		> dd,
-		> div > dd {
-			margin: 0 #{$suffix};
-		}
-	}
-}
-
-@mixin button($suffix: '') {
-	padding: 0 #{$suffix};
-	border: 0 #{$suffix};
-	width: 100% #{$suffix};
-	background-color: transparent #{$suffix};
-	color: inherit #{$suffix};
-	text-align: left #{$suffix};
-	display: block #{$suffix};
-	font: inherit #{$suffix};
-	cursor: pointer #{$suffix};
-}
-
-@mixin clearfix($suffix: '') {
-	&::before,
-	&::after {
-		content: ' ';
-		display: table;
-	}
-
-	&:after {
-		clear: both;
-	}
-}
+@mixin list($suffix: '', $list: 'ul') {
+	margin: 0 #{$suffix};
+
+	@if $list == ('ul' or 'ol') {
+		padding: 0 #{$suffix};
+		list-style-type: none #{$suffix};
+	}
+
+	@if $list == 'dl' {
+		> dd,
+		> div > dd {
+			margin: 0 #{$suffix};
+		}
+	}
+}
+
+@mixin button($suffix: '') {
+	padding: 0 #{$suffix};
+	border: 0 #{$suffix};
+	width: 100% #{$suffix};
+	background-color: transparent #{$suffix};
+	color: inherit #{$suffix};
+	text-align: left #{$suffix};
+	display: block #{$suffix};
+	font: inherit #{$suffix};
+	cursor: pointer #{$suffix};
+}
+
+@mixin clearfix($suffix: '') {
+	&::before,
+	&::after {
+		content: ' ';
+		display: table;
+	}
+
+	&:after {
+		clear: both;
+	}
+}

package/src/commons/utils/text.scss

@@ -1,5 +1,5 @@
-@mixin ellipsis($suffix: '') {
-	overflow: hidden #{$suffix};
-	text-overflow: ellipsis #{$suffix};
-	white-space: nowrap #{$suffix};
-}
+@mixin ellipsis($suffix: '') {
+	overflow: hidden #{$suffix};
+	text-overflow: ellipsis #{$suffix};
+	white-space: nowrap #{$suffix};
+}