@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/util/index.scss

@@ -1,329 +1,329 @@
-@use 'sass:list';
-
-@use '@lucca-front/icons/src/commons/core' as transform;
-
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/core';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/scss/src/commons/utils/reset';
-@use '@lucca-front/scss/src/commons/utils/text';
-
-@use '@lucca-front/scss/src/components/title/exports' as title;
-@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
-
-@use 'exports' as *;
-
-@each $elevation in config.$elevations {
-	$index: list.index(config.$elevations, $elevation);
-
-	.u-elevate#{$index} {
-		// deprecated
-		box-shadow: var(--commons-elevations-elevation-#{$index});
-	}
-}
-
-.u-mask {
-	@include a11y.mask('!important');
-}
-
-.u-clearfix,
-.u-clear {
-	@include reset.clearfix('!important');
-}
-
-.u-listReset {
-	@include reset.list('!important');
-}
-
-.u-descriptionListReset {
-	@include reset.list($list: 'dl', $suffix: '!important');
-}
-
-.u-buttonReset {
-	@include reset.button('!important');
-}
-
-@include core.classes('float', core.$float);
-@include core.classes('vertical-align', core.$verticalAlign);
-@include core.classes('white-space', core.$whiteSpace);
-@include core.classes('display', core.$displays);
-@include core.classes('flex-direction', core.$direction);
-@include core.classes('flex-wrap', core.$wrap);
-@include core.classes('justify-content', core.$justify);
-@include core.classes('align-items', core.$align);
-@include core.classes('flex-grow', core.$flex);
-@include core.classes('flex-shrink', core.$flex);
-@include core.classes('flex-basis', core.$basis);
-@include core.classes('order', core.$order);
-@include core.classes('align-self', core.$align);
-@include core.classes('position', core.$position);
-@include core.classes('min-width', core.$contents);
-@include core.classes('visibility', core.$visibility);
-@include core.classes('font-weight', core.$fontWeight);
-@include core.classes('font-style', core.$fontStyle);
-@include core.classes('pointer-events', core.$pointerEvents);
-@include core.classes('text-align', core.$textAlign);
-@include core.classes('text-decoration', core.$decoration);
-@include core.classes('overflow', core.$overflow);
-
-@media (prefers-reduced-motion: no-preference) {
-	@include core.classes('scroll-behavior', core.$scrollBehavior);
-}
-
-@media only print {
-	@include core.classes('display', core.$displays, $prefix: 'onlyPrint');
-}
-
-%displayNone {
-	display: none;
-}
-
-@each $display in core.$displays {
-	@if $display != 'none' {
-		.u-onlyPrintDisplay#{transform.capitalize($display)} {
-			@extend %displayNone;
-		}
-	}
-}
-
-@each $direction in core.$boxDirection {
-	@if $direction == '' {
-		.u-insetReset,
-		.u-inset0 {
-			inset: 0 !important;
-		}
-	} @else {
-		.u-#{$direction}Reset,
-		.u-#{$direction}0 {
-			#{$direction}: 0 !important;
-		}
-	}
-}
-
-@include core.spacings;
-@include core.sizes;
-@include core.borderRadius;
-@include core.palettes;
-
-.u-textLeft {
-	text-align: left !important;
-}
-
-.u-textRight {
-	text-align: right !important;
-}
-
-.u-textCenter {
-	text-align: center !important;
-}
-
-.u-textLight {
-	color: var(--palettes-grey-600) !important;
-}
-
-.u-textPlaceholder {
-	color: var(--palettes-grey-400) !important;
-}
-
-.u-textDefault {
-	color: var(--palettes-grey-700) !important;
-}
-
-.u-unit {
-	font-size: 0.66em !important;
-}
-
-.u-comma {
-	&:not(:last-child) {
-		&::after {
-			content: ', ' !important;
-		}
-	}
-}
-
-.u-ellipsis {
-	@include text.ellipsis('!important');
-}
-
-.u-fontWeightRegular {
-	font-weight: 400 !important;
-}
-
-.u-fontWeightSemiBold {
-	font-weight: 600 !important;
-}
-
-.u-noSpinButtons {
-	&::-webkit-outer-spin-button,
-	&::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-	}
-
-	&[type='number'] {
-		-moz-appearance: textfield;
-	}
-}
-
-[data-content-before] {
-	&::before {
-		content: attr(data-content-before);
-	}
-}
-
-[data-content-after] {
-	&::after {
-		content: attr(data-content-after);
-	}
-}
-
-.u-h1,
-.u-h2,
-.u-h3,
-.u-h4,
-.u-h5,
-.u-h6 {
-	@include title.component;
-}
-
-.u-h1 {
-	@include title.h1;
-
-	&.mod-XXXL {
-		@include title.XXXL;
-	}
-}
-
-.u-h2 {
-	@include title.h2;
-}
-
-.u-h3 {
-	@include title.h3;
-}
-
-.u-h4 {
-	@include title.h4;
-}
-
-.u-h5 {
-	@include title.h5;
-}
-
-.u-h6 {
-	@include title.h6;
-}
-
-.u-animated {
-	&FadeIn,
-	&FadeOut {
-		@include keyframe.fadeIn;
-
-		animation-name: fadeIn;
-	}
-
-	&ScaleIn,
-	&ScaleOut {
-		@include keyframe.scaleIn;
-
-		animation-name: scaleIn;
-	}
-
-	&ScaleInTop,
-	&ScaleOutTop {
-		@include keyframe.scaleIn;
-
-		animation-name: scaleInTop;
-	}
-
-	&ScaleInRight,
-	&ScaleOutRight {
-		@include keyframe.scaleInRight;
-
-		animation-name: scaleInRight;
-	}
-
-	&ScaleInBottom,
-	&ScaleOutBottom {
-		@include keyframe.scaleInBottom;
-
-		animation-name: scaleInBottom;
-	}
-
-	&ScaleInLeft,
-	&ScaleOutLeft {
-		@include keyframe.scaleInLeft;
-
-		animation-name: scaleInLeft;
-	}
-
-	&SlideIn,
-	&SlideInTop,
-	&SlideOut,
-	&SlideOutTop {
-		@include keyframe.slideIn;
-
-		animation-name: slideIn;
-	}
-
-	&SlideInRight,
-	&SlideOutRight {
-		@include keyframe.slideInRight;
-
-		animation-name: slideInRight;
-	}
-
-	&SlideInBottom,
-	&SlideOutBottom {
-		@include keyframe.slideInBottom;
-
-		animation-name: slideInBottom;
-	}
-
-	&SlideInLeft,
-	&SlideOutLeft {
-		@include keyframe.slideInLeft;
-
-		animation-name: slideInLeft;
-	}
-
-	&Shake {
-		@include keyframe.shake;
-
-		animation-name: shake;
-	}
-
-	&Pulse {
-		@include keyframe.pulse;
-
-		animation-name: pulse;
-		animation-direction: alternate;
-		animation-iteration-count: var(--commons-animations-iteration-count);
-	}
-
-	&FadeOut,
-	&SlideOut,
-	&SlideOutTop,
-	&SlideOutRight,
-	&SlideOutBottom,
-	&SlideOutLeft,
-	&ScaleOut,
-	&ScaleOutTop,
-	&ScaleOutRight,
-	&ScaleOutBottom,
-	&ScaleOutLeft {
-		animation-direction: reverse;
-	}
-}
-
-[class*='u-animated'] {
-	animation-duration: var(--duration, var(--commons-animations-durations-standard));
-	animation-timing-function: var(--commons-animations-function);
-
-	&.mod-animation-duration-fast {
-		@include duration('fast');
-	}
-
-	&.mod-animation-duration-slow {
-		@include duration('slow');
-	}
-}
+@use 'sass:list';
+
+@use '@lucca-front/icons/src/commons/core' as transform;
+
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/core';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/text';
+
+@use '@lucca-front/scss/src/components/title/exports' as title;
+@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
+
+@use 'exports' as *;
+
+@each $elevation in config.$elevations {
+	$index: list.index(config.$elevations, $elevation);
+
+	.u-elevate#{$index} {
+		// deprecated
+		box-shadow: var(--commons-elevations-elevation-#{$index});
+	}
+}
+
+.u-mask {
+	@include a11y.mask('!important');
+}
+
+.u-clearfix,
+.u-clear {
+	@include reset.clearfix('!important');
+}
+
+.u-listReset {
+	@include reset.list('!important');
+}
+
+.u-descriptionListReset {
+	@include reset.list($list: 'dl', $suffix: '!important');
+}
+
+.u-buttonReset {
+	@include reset.button('!important');
+}
+
+@include core.classes('float', core.$float);
+@include core.classes('vertical-align', core.$verticalAlign);
+@include core.classes('white-space', core.$whiteSpace);
+@include core.classes('display', core.$displays);
+@include core.classes('flex-direction', core.$direction);
+@include core.classes('flex-wrap', core.$wrap);
+@include core.classes('justify-content', core.$justify);
+@include core.classes('align-items', core.$align);
+@include core.classes('flex-grow', core.$flex);
+@include core.classes('flex-shrink', core.$flex);
+@include core.classes('flex-basis', core.$basis);
+@include core.classes('order', core.$order);
+@include core.classes('align-self', core.$align);
+@include core.classes('position', core.$position);
+@include core.classes('min-width', core.$contents);
+@include core.classes('visibility', core.$visibility);
+@include core.classes('font-weight', core.$fontWeight);
+@include core.classes('font-style', core.$fontStyle);
+@include core.classes('pointer-events', core.$pointerEvents);
+@include core.classes('text-align', core.$textAlign);
+@include core.classes('text-decoration', core.$decoration);
+@include core.classes('overflow', core.$overflow);
+
+@media (prefers-reduced-motion: no-preference) {
+	@include core.classes('scroll-behavior', core.$scrollBehavior);
+}
+
+@media only print {
+	@include core.classes('display', core.$displays, $prefix: 'onlyPrint');
+}
+
+%displayNone {
+	display: none;
+}
+
+@each $display in core.$displays {
+	@if $display != 'none' {
+		.u-onlyPrintDisplay#{transform.capitalize($display)} {
+			@extend %displayNone;
+		}
+	}
+}
+
+@each $direction in core.$boxDirection {
+	@if $direction == '' {
+		.u-insetReset,
+		.u-inset0 {
+			inset: 0 !important;
+		}
+	} @else {
+		.u-#{$direction}Reset,
+		.u-#{$direction}0 {
+			#{$direction}: 0 !important;
+		}
+	}
+}
+
+@include core.spacings;
+@include core.sizes;
+@include core.borderRadius;
+@include core.palettes;
+
+.u-textLeft {
+	text-align: left !important;
+}
+
+.u-textRight {
+	text-align: right !important;
+}
+
+.u-textCenter {
+	text-align: center !important;
+}
+
+.u-textLight {
+	color: var(--palettes-grey-600) !important;
+}
+
+.u-textPlaceholder {
+	color: var(--palettes-grey-400) !important;
+}
+
+.u-textDefault {
+	color: var(--palettes-grey-700) !important;
+}
+
+.u-unit {
+	font-size: 0.66em !important;
+}
+
+.u-comma {
+	&:not(:last-child) {
+		&::after {
+			content: ', ' !important;
+		}
+	}
+}
+
+.u-ellipsis {
+	@include text.ellipsis('!important');
+}
+
+.u-fontWeightRegular {
+	font-weight: 400 !important;
+}
+
+.u-fontWeightSemiBold {
+	font-weight: 600 !important;
+}
+
+.u-noSpinButtons {
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+	}
+
+	&[type='number'] {
+		-moz-appearance: textfield;
+	}
+}
+
+[data-content-before] {
+	&::before {
+		content: attr(data-content-before);
+	}
+}
+
+[data-content-after] {
+	&::after {
+		content: attr(data-content-after);
+	}
+}
+
+.u-h1,
+.u-h2,
+.u-h3,
+.u-h4,
+.u-h5,
+.u-h6 {
+	@include title.component;
+}
+
+.u-h1 {
+	@include title.h1;
+
+	&.mod-XXXL {
+		@include title.XXXL;
+	}
+}
+
+.u-h2 {
+	@include title.h2;
+}
+
+.u-h3 {
+	@include title.h3;
+}
+
+.u-h4 {
+	@include title.h4;
+}
+
+.u-h5 {
+	@include title.h5;
+}
+
+.u-h6 {
+	@include title.h6;
+}
+
+.u-animated {
+	&FadeIn,
+	&FadeOut {
+		@include keyframe.fadeIn;
+
+		animation-name: fadeIn;
+	}
+
+	&ScaleIn,
+	&ScaleOut {
+		@include keyframe.scaleIn;
+
+		animation-name: scaleIn;
+	}
+
+	&ScaleInTop,
+	&ScaleOutTop {
+		@include keyframe.scaleIn;
+
+		animation-name: scaleInTop;
+	}
+
+	&ScaleInRight,
+	&ScaleOutRight {
+		@include keyframe.scaleInRight;
+
+		animation-name: scaleInRight;
+	}
+
+	&ScaleInBottom,
+	&ScaleOutBottom {
+		@include keyframe.scaleInBottom;
+
+		animation-name: scaleInBottom;
+	}
+
+	&ScaleInLeft,
+	&ScaleOutLeft {
+		@include keyframe.scaleInLeft;
+
+		animation-name: scaleInLeft;
+	}
+
+	&SlideIn,
+	&SlideInTop,
+	&SlideOut,
+	&SlideOutTop {
+		@include keyframe.slideIn;
+
+		animation-name: slideIn;
+	}
+
+	&SlideInRight,
+	&SlideOutRight {
+		@include keyframe.slideInRight;
+
+		animation-name: slideInRight;
+	}
+
+	&SlideInBottom,
+	&SlideOutBottom {
+		@include keyframe.slideInBottom;
+
+		animation-name: slideInBottom;
+	}
+
+	&SlideInLeft,
+	&SlideOutLeft {
+		@include keyframe.slideInLeft;
+
+		animation-name: slideInLeft;
+	}
+
+	&Shake {
+		@include keyframe.shake;
+
+		animation-name: shake;
+	}
+
+	&Pulse {
+		@include keyframe.pulse;
+
+		animation-name: pulse;
+		animation-direction: alternate;
+		animation-iteration-count: var(--commons-animations-iteration-count);
+	}
+
+	&FadeOut,
+	&SlideOut,
+	&SlideOutTop,
+	&SlideOutRight,
+	&SlideOutBottom,
+	&SlideOutLeft,
+	&ScaleOut,
+	&ScaleOutTop,
+	&ScaleOutRight,
+	&ScaleOutBottom,
+	&ScaleOutLeft {
+		animation-direction: reverse;
+	}
+}
+
+[class*='u-animated'] {
+	animation-duration: var(--duration, var(--commons-animations-durations-standard));
+	animation-timing-function: var(--commons-animations-function);
+
+	&.mod-animation-duration-fast {
+		@include duration('fast');
+	}
+
+	&.mod-animation-duration-slow {
+		@include duration('slow');
+	}
+}

package/src/components/util/mods.scss

@@ -1,3 +1,3 @@
-@mixin duration($speed) {
-	--duration: var(--commons-animations-durations-#{$speed});
-}
+@mixin duration($speed) {
+	--duration: var(--commons-animations-durations-#{$speed});
+}