@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/file/component.scss

@@ -1,122 +1,122 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component {
-	padding: var(--spacings-M);
-	max-width: 30rem;
-	min-height: 17.5rem;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	position: relative;
-	text-align: center;
-
-	.file-icon {
-		font-size: var(--sizes-M-lineHeight);
-		margin: 0 var(--spacings-XXS);
-		display: none;
-	}
-
-	.file-title {
-		font-size: var(--sizes-M-fontSize);
-		line-height: var(--sizes-M-lineHeight);
-		margin-bottom: 0;
-		font-weight: 600;
-		display: block;
-		position: relative;
-		color: var(--palettes-grey-700);
-	}
-
-	.file-or {
-		font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-S-lineHeight);
-		margin-bottom: var(--spacings-XXS);
-		display: block;
-		position: relative;
-		color: var(--palettes-grey-600);
-
-		&:not(:empty) {
-			margin-bottom: var(--spacings-XS);
-			color: var(--palettes-grey-800);
-		}
-	}
-
-	.file-progress {
-		margin: var(--spacings-S) 0 var(--spacings-XS);
-		display: block;
-	}
-
-	.file-name {
-		&:not(:empty) {
-			font-size: var(--sizes-S-fontSize);
-			line-height: var(--sizes-S-lineHeight);
-			margin-bottom: var(--spacings-S);
-			color: var(--palettes-grey-600);
-			display: block;
-		}
-	}
-
-	.file-formats {
-		font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-S-lineHeight);
-		color: var(--palettes-grey-600);
-		position: relative;
-		display: block;
-	}
-
-	.file-button {
-		margin: 0;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	.file-input {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		opacity: 0.001;
-		z-index: 1;
-		cursor: pointer;
-
-		~ .file-content {
-			&::before {
-				border: 1px dashed var(--palettes-grey-400);
-				border-radius: var(--commons-borderRadius-M);
-				position: absolute;
-				inset: 0;
-				content: '';
-			}
-		}
-
-		&:hover {
-			&:not(:disabled) {
-				~ .file-content {
-					&::before {
-						border: 1px dashed var(--palettes-primary-400);
-					}
-				}
-			}
-		}
-
-		&:focus-visible {
-			&:not(:disabled) {
-				~ .file-content {
-					.button {
-						@include a11y.focusVisible;
-					}
-				}
-			}
-		}
-
-		&:not(.is-uploading) {
-			~ .file-content {
-				.file-progress {
-					display: none;
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component {
+	padding: var(--spacings-M);
+	max-width: 30rem;
+	min-height: 17.5rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: relative;
+	text-align: center;
+
+	.file-icon {
+		font-size: var(--sizes-M-lineHeight);
+		margin: 0 var(--spacings-XXS);
+		display: none;
+	}
+
+	.file-title {
+		font-size: var(--sizes-M-fontSize);
+		line-height: var(--sizes-M-lineHeight);
+		margin-bottom: 0;
+		font-weight: 600;
+		display: block;
+		position: relative;
+		color: var(--palettes-grey-700);
+	}
+
+	.file-or {
+		font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-S-lineHeight);
+		margin-bottom: var(--spacings-XXS);
+		display: block;
+		position: relative;
+		color: var(--palettes-grey-600);
+
+		&:not(:empty) {
+			margin-bottom: var(--spacings-XS);
+			color: var(--palettes-grey-800);
+		}
+	}
+
+	.file-progress {
+		margin: var(--spacings-S) 0 var(--spacings-XS);
+		display: block;
+	}
+
+	.file-name {
+		&:not(:empty) {
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+			margin-bottom: var(--spacings-S);
+			color: var(--palettes-grey-600);
+			display: block;
+		}
+	}
+
+	.file-formats {
+		font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-S-lineHeight);
+		color: var(--palettes-grey-600);
+		position: relative;
+		display: block;
+	}
+
+	.file-button {
+		margin: 0;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	.file-input {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0.001;
+		z-index: 1;
+		cursor: pointer;
+
+		~ .file-content {
+			&::before {
+				border: 1px dashed var(--palettes-grey-400);
+				border-radius: var(--commons-borderRadius-M);
+				position: absolute;
+				inset: 0;
+				content: '';
+			}
+		}
+
+		&:hover {
+			&:not(:disabled) {
+				~ .file-content {
+					&::before {
+						border: 1px dashed var(--palettes-primary-400);
+					}
+				}
+			}
+		}
+
+		&:focus-visible {
+			&:not(:disabled) {
+				~ .file-content {
+					.button {
+						@include a11y.focusVisible;
+					}
+				}
+			}
+		}
+
+		&:not(.is-uploading) {
+			~ .file-content {
+				.file-progress {
+					display: none;
+				}
+			}
+		}
+	}
+}

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

@@ -1,44 +1,44 @@
-@use 'exports' as *;
-
-.file {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-icon {
-		@include icon;
-	}
-
-	&:is(.is-droppable, .droppable) {
-		@include legacyDroppable;
-	}
-
-	&:is(.is_disabled, .is-disabled, .disabled) {
-		@include legacyDisabled;
-	}
-}
-
-.file-input {
-	&:is(:disabled) {
-		@include disabled;
-	}
-
-	&:is(.is-droppable, .droppable) {
-		@include droppable;
-	}
-
-	&:is(.is-uploading, .uploading) {
-		@include uploading;
-	}
-
-	&:is(.is-uploaded, .uploaded) {
-		@include uploaded;
-	}
-
-	&:is([aria-invalid='true']) {
-		@include invalid;
-	}
-}
+@use 'exports' as *;
+
+.file {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-icon {
+		@include icon;
+	}
+
+	&:is(.is-droppable, .droppable) {
+		@include legacyDroppable;
+	}
+
+	&:is(.is_disabled, .is-disabled, .disabled) {
+		@include legacyDisabled;
+	}
+}
+
+.file-input {
+	&:is(:disabled) {
+		@include disabled;
+	}
+
+	&:is(.is-droppable, .droppable) {
+		@include droppable;
+	}
+
+	&:is(.is-uploading, .uploading) {
+		@include uploading;
+	}
+
+	&:is(.is-uploaded, .uploaded) {
+		@include uploaded;
+	}
+
+	&:is([aria-invalid='true']) {
+		@include invalid;
+	}
+}

package/src/components/file/mods.scss

@@ -1,66 +1,66 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin icon {
-	padding: var(--spacings-XS) var(--spacings-M) var(--spacings-XS) var(--spacings-XL);
-}
-
-@mixin S {
-	padding: var(--spacings-XS) var(--spacings-S);
-	text-align: left;
-	min-height: 0;
-
-	.file-input {
-		// todo: extract state
-		&:not(.is-uploading) {
-			~ .file-content {
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-
-	.file-content {
-		gap: var(--spacings-XS);
-	}
-
-	.file-name {
-		margin-bottom: 0;
-		font-size: var(--sizes-XS-fontSize);
-		line-height: var(--sizes-XS-lineHeight);
-	}
-
-	.file-formats {
-		font-size: var(--sizes-XS-fontSize);
-		line-height: var(--sizes-XS-lineHeight);
-	}
-
-	.file-or {
-		@include a11y.mask;
-	}
-
-	.file-button {
-		margin-left: auto;
-
-		&::first-letter {
-			text-transform: capitalize;
-		}
-	}
-
-	.file-icon {
-		font-size: var(--sizes-S-lineHeight);
-		line-height: var(--sizes-S-lineHeight);
-		margin: 0;
-		align-self: start;
-	}
-
-	.file-title {
-		font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-S-lineHeight);
-		padding-right: var(--spacings-XS);
-		margin: 0;
-	}
-
-	.file-progress {
-		margin: var(--spacings-XS) 0;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin icon {
+	padding: var(--spacings-XS) var(--spacings-M) var(--spacings-XS) var(--spacings-XL);
+}
+
+@mixin S {
+	padding: var(--spacings-XS) var(--spacings-S);
+	text-align: left;
+	min-height: 0;
+
+	.file-input {
+		// todo: extract state
+		&:not(.is-uploading) {
+			~ .file-content {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	.file-content {
+		gap: var(--spacings-XS);
+	}
+
+	.file-name {
+		margin-bottom: 0;
+		font-size: var(--sizes-XS-fontSize);
+		line-height: var(--sizes-XS-lineHeight);
+	}
+
+	.file-formats {
+		font-size: var(--sizes-XS-fontSize);
+		line-height: var(--sizes-XS-lineHeight);
+	}
+
+	.file-or {
+		@include a11y.mask;
+	}
+
+	.file-button {
+		margin-left: auto;
+
+		&::first-letter {
+			text-transform: capitalize;
+		}
+	}
+
+	.file-icon {
+		font-size: var(--sizes-S-lineHeight);
+		line-height: var(--sizes-S-lineHeight);
+		margin: 0;
+		align-self: start;
+	}
+
+	.file-title {
+		font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-S-lineHeight);
+		padding-right: var(--spacings-XS);
+		margin: 0;
+	}
+
+	.file-progress {
+		margin: var(--spacings-XS) 0;
+	}
+}

package/src/components/file/states.scss

@@ -1,97 +1,97 @@
-@mixin disabled {
-	cursor: not-allowed;
-
-	~ .file-content {
-		.file-title,
-		.file-or,
-		.file-formats,
-		.file-button {
-			color: var(--palettes-grey-500);
-		}
-	}
-}
-
-@mixin droppable {
-	~ .file-content {
-		&::before {
-			background-color: var(--palettes-primary-50);
-			border: 1px dashed var(--palettes-primary-400);
-		}
-	}
-}
-
-@mixin uploading {
-	~ .file-content {
-		.file-title {
-			font-weight: 400;
-			color: var(--palettes-grey-600);
-			font-size: var(--sizes-S-fontSize);
-			line-height: var(--sizes-S-lineHeight);
-			font-style: italic;
-		}
-
-		.file-formats {
-			display: none;
-		}
-	}
-}
-
-@mixin uploaded {
-	~ .file-content {
-		.file-title {
-			color: var(--palettes-success-700);
-		}
-
-		.file-formats {
-			display: none;
-		}
-
-		.file-icon.icon-signSuccess {
-			display: block;
-		}
-	}
-}
-
-@mixin invalid {
-	~ .file-content {
-		.file-title {
-			color: var(--palettes-error-700);
-		}
-
-		.file-formats {
-			display: none;
-		}
-
-		.file-icon.icon-signError {
-			display: block;
-		}
-	}
-}
-
-@mixin legacyDroppable {
-	background-color: var(--commons-background-base);
-
-	.file-icon {
-		color: var(--palettes-primary-500);
-	}
-}
-
-@mixin legacyDisabled {
-	.file-title,
-	.file-or,
-	.file-formats,
-	.button {
-		color: var(--commons-disabled-color);
-	}
-
-	.button {
-		&,
-		&:hover,
-		&:focus,
-		&:active {
-			cursor: not-allowed;
-			box-shadow: 0 0 0 1px inset;
-			background-color: transparent;
-		}
-	}
-}
+@mixin disabled {
+	cursor: not-allowed;
+
+	~ .file-content {
+		.file-title,
+		.file-or,
+		.file-formats,
+		.file-button {
+			color: var(--palettes-grey-500);
+		}
+	}
+}
+
+@mixin droppable {
+	~ .file-content {
+		&::before {
+			background-color: var(--palettes-primary-50);
+			border: 1px dashed var(--palettes-primary-400);
+		}
+	}
+}
+
+@mixin uploading {
+	~ .file-content {
+		.file-title {
+			font-weight: 400;
+			color: var(--palettes-grey-600);
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+			font-style: italic;
+		}
+
+		.file-formats {
+			display: none;
+		}
+	}
+}
+
+@mixin uploaded {
+	~ .file-content {
+		.file-title {
+			color: var(--palettes-success-700);
+		}
+
+		.file-formats {
+			display: none;
+		}
+
+		.file-icon.icon-signSuccess {
+			display: block;
+		}
+	}
+}
+
+@mixin invalid {
+	~ .file-content {
+		.file-title {
+			color: var(--palettes-error-700);
+		}
+
+		.file-formats {
+			display: none;
+		}
+
+		.file-icon.icon-signError {
+			display: block;
+		}
+	}
+}
+
+@mixin legacyDroppable {
+	background-color: var(--commons-background-base);
+
+	.file-icon {
+		color: var(--palettes-primary-500);
+	}
+}
+
+@mixin legacyDisabled {
+	.file-title,
+	.file-or,
+	.file-formats,
+	.button {
+		color: var(--commons-disabled-color);
+	}
+
+	.button {
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			cursor: not-allowed;
+			box-shadow: 0 0 0 1px inset;
+			background-color: transparent;
+		}
+	}
+}

package/src/components/file/vars.scss

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