@lucca-front/scss 20.3.0-rc.9 → 20.3.1-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.0-rc.9",
+  "version": "20.3.1-rc.1",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "20.3.0-rc.9"
+    "@lucca-front/icons": "20.3.1-rc.1"
   }
 }

package/src/commons/utils/index.scss

@@ -8,7 +8,8 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/text';
 @use '@lucca-front/scss/src/commons/utils/a11y';
-
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
 @layer utils {
@@ -25,108 +26,6 @@
 		}
 	}
 
-	%animated {
-		&FadeIn,
-		&FadeOut {
-			animation-name: fadeIn;
-
-			@include keyframe.fadeIn;
-		}
-
-		&ScaleIn,
-		&ScaleOut {
-			animation-name: scaleIn;
-
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInTop,
-		&ScaleOutTop {
-			animation-name: scaleInTop;
-
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInRight,
-		&ScaleOutRight {
-			animation-name: scaleInRight;
-
-			@include keyframe.scaleInRight;
-		}
-
-		&ScaleInBottom,
-		&ScaleOutBottom {
-			animation-name: scaleInBottom;
-
-			@include keyframe.scaleInBottom;
-		}
-
-		&ScaleInLeft,
-		&ScaleOutLeft {
-			animation-name: scaleInLeft;
-
-			@include keyframe.scaleInLeft;
-		}
-
-		&SlideIn,
-		&SlideInTop,
-		&SlideOut,
-		&SlideOutTop {
-			animation-name: slideIn;
-
-			@include keyframe.slideIn;
-		}
-
-		&SlideInRight,
-		&SlideOutRight {
-			animation-name: slideInRight;
-
-			@include keyframe.slideInRight;
-		}
-
-		&SlideInBottom,
-		&SlideOutBottom {
-			animation-name: slideInBottom;
-
-			@include keyframe.slideInBottom;
-		}
-
-		&SlideInLeft,
-		&SlideOutLeft {
-			animation-name: slideInLeft;
-
-			@include keyframe.slideInLeft;
-		}
-
-		&Shake {
-			animation-name: shake;
-
-			@include keyframe.shake;
-		}
-
-		&Pulse {
-			animation-name: pulse;
-			animation-direction: alternate;
-			animation-iteration-count: var(--commons-animations-iteration-count);
-
-			@include keyframe.pulse;
-		}
-
-		&FadeOut,
-		&SlideOut,
-		&SlideOutTop,
-		&SlideOutRight,
-		&SlideOutBottom,
-		&SlideOutLeft,
-		&ScaleOut,
-		&ScaleOutTop,
-		&ScaleOutRight,
-		&ScaleOutBottom,
-		&ScaleOutLeft {
-			animation-direction: reverse;
-		}
-	}
-
 	%mask {
 		@include a11y.mask('!important');
 	}
@@ -292,7 +191,105 @@
 	}
 
 	.pr-u-animated {
-		@extend %animated;
+		&FadeIn,
+		&FadeOut {
+			animation-name: fadeIn;
+
+			@include keyframe.fadeIn;
+		}
+
+		&ScaleIn,
+		&ScaleOut {
+			animation-name: scaleIn;
+
+			@include keyframe.scaleIn;
+		}
+
+		&ScaleInTop,
+		&ScaleOutTop {
+			animation-name: scaleInTop;
+
+			@include keyframe.scaleIn;
+		}
+
+		&ScaleInRight,
+		&ScaleOutRight {
+			animation-name: scaleInRight;
+
+			@include keyframe.scaleInRight;
+		}
+
+		&ScaleInBottom,
+		&ScaleOutBottom {
+			animation-name: scaleInBottom;
+
+			@include keyframe.scaleInBottom;
+		}
+
+		&ScaleInLeft,
+		&ScaleOutLeft {
+			animation-name: scaleInLeft;
+
+			@include keyframe.scaleInLeft;
+		}
+
+		&SlideIn,
+		&SlideInTop,
+		&SlideOut,
+		&SlideOutTop {
+			animation-name: slideIn;
+
+			@include keyframe.slideIn;
+		}
+
+		&SlideInRight,
+		&SlideOutRight {
+			animation-name: slideInRight;
+
+			@include keyframe.slideInRight;
+		}
+
+		&SlideInBottom,
+		&SlideOutBottom {
+			animation-name: slideInBottom;
+
+			@include keyframe.slideInBottom;
+		}
+
+		&SlideInLeft,
+		&SlideOutLeft {
+			animation-name: slideInLeft;
+
+			@include keyframe.slideInLeft;
+		}
+
+		&Shake {
+			animation-name: shake;
+
+			@include keyframe.shake;
+		}
+
+		&Pulse {
+			animation-name: pulse;
+			animation-direction: alternate;
+			animation-iteration-count: var(--commons-animations-iteration-count);
+
+			@include keyframe.pulse;
+		}
+
+		&FadeOut,
+		&SlideOut,
+		&SlideOutTop,
+		&SlideOutRight,
+		&SlideOutBottom,
+		&SlideOutLeft,
+		&ScaleOut,
+		&ScaleOutTop,
+		&ScaleOutRight,
+		&ScaleOutBottom,
+		&ScaleOutLeft {
+			animation-direction: reverse;
+		}
 	}
 
 	.pr-u-mask {
@@ -489,6 +486,32 @@
 		}
 	}
 
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			.pr-u-displayNoneAtMediaMin#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include media.max($breakpoint) {
+			.pr-u-displayNoneAtMediaMax#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include container.min($breakpoint) {
+			.pr-u-displayNoneAtContainerMin#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include container.max($breakpoint) {
+			.pr-u-displayNoneAtContainerMax#{$breakpoint} {
+				display: none !important;
+			}
+		}
+	}
+
 	%inset0 {
 		inset: 0 !important;
 	}
@@ -531,7 +554,106 @@
 		}
 
 		.u-animated {
-			@extend %animated;
+			&FadeIn,
+			&FadeOut {
+				animation-name: fadeIn;
+
+
+				@include keyframe.fadeIn;
+			}
+
+			&ScaleIn,
+			&ScaleOut {
+				animation-name: scaleIn;
+
+				@include keyframe.scaleIn;
+			}
+
+			&ScaleInTop,
+			&ScaleOutTop {
+				animation-name: scaleInTop;
+
+				@include keyframe.scaleIn;
+			}
+
+			&ScaleInRight,
+			&ScaleOutRight {
+				animation-name: scaleInRight;
+
+				@include keyframe.scaleInRight;
+			}
+
+			&ScaleInBottom,
+			&ScaleOutBottom {
+				animation-name: scaleInBottom;
+
+				@include keyframe.scaleInBottom;
+			}
+
+			&ScaleInLeft,
+			&ScaleOutLeft {
+				animation-name: scaleInLeft;
+
+				@include keyframe.scaleInLeft;
+			}
+
+			&SlideIn,
+			&SlideInTop,
+			&SlideOut,
+			&SlideOutTop {
+				animation-name: slideIn;
+
+				@include keyframe.slideIn;
+			}
+
+			&SlideInRight,
+			&SlideOutRight {
+				animation-name: slideInRight;
+
+				@include keyframe.slideInRight;
+			}
+
+			&SlideInBottom,
+			&SlideOutBottom {
+				animation-name: slideInBottom;
+
+				@include keyframe.slideInBottom;
+			}
+
+			&SlideInLeft,
+			&SlideOutLeft {
+				animation-name: slideInLeft;
+
+				@include keyframe.slideInLeft;
+			}
+
+			&Shake {
+				animation-name: shake;
+
+				@include keyframe.shake;
+			}
+
+			&Pulse {
+				animation-name: pulse;
+				animation-direction: alternate;
+				animation-iteration-count: var(--commons-animations-iteration-count);
+
+				@include keyframe.pulse;
+			}
+
+			&FadeOut,
+			&SlideOut,
+			&SlideOutTop,
+			&SlideOutRight,
+			&SlideOutBottom,
+			&SlideOutLeft,
+			&ScaleOut,
+			&ScaleOutTop,
+			&ScaleOutRight,
+			&ScaleOutBottom,
+			&ScaleOutLeft {
+				animation-direction: reverse;
+			}
 		}
 
 		.u-mask {

package/src/components/appLayout/component.scss

@@ -7,6 +7,7 @@
 	inline-size: var(--components-appLayout-inlineSize);
 	grid-template: var(--components-appLayout-gridTemplate);
 	display: grid;
+	isolation: isolate;
 
 	@at-root ($atRoot) {
 		.appLayout-banner {

package/src/components/button/mods.scss

@@ -141,7 +141,7 @@
 		min-block-size: 1.5rem;
 	}
 
-	&::before {
+	&::after {
 		content: none;
 	}
 }

package/src/components/buttonGroup/component.scss

@@ -66,22 +66,5 @@
 
 	&:is(ul) {
 		flex-wrap: wrap;
-
-		.button.mod-more {
-			block-size: 100%;
-			min-block-size: 2.25rem;
-
-			&.mod-S {
-				min-block-size: 2rem;
-			}
-
-			&.mod-XS {
-				min-block-size: 1.5rem;
-			}
-
-			&::after {
-				content: none;
-			}
-		}
 	}
 }

package/src/components/callout/mods.scss

@@ -3,6 +3,7 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
+	--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	--components-callout-gap: var(--pr-t-spacings-100);
 	--components-callout-font: var(--pr-t-font-body-S);
 	--components-callout-kill-size: 1.25rem;

package/src/components/calloutDisclosure/component.scss

@@ -18,9 +18,8 @@
 	@at-root ($atRoot) {
 		.calloutDisclosure-summary {
 			display: flex;
-			gap: var(--pr-t-spacings-150);
-			padding-block: var(--pr-t-spacings-100);
-			padding-inline: var(--components-calloutDisclosure-paddingHorizontal);
+			gap: var(--components-calloutDisclosure-gap);
+			padding: var(--components-calloutDisclosure-padding);
 			border-radius: var(--pr-t-border-radius-default);
 			transition: background-color var(--commons-animations-durations-fast) ease;
 			cursor: pointer;

package/src/components/calloutDisclosure/mods.scss

@@ -2,8 +2,13 @@
 @use '@lucca-front/scss/src/components/calloutFeedbackList/exports' as calloutFeedbackList;
 
 @mixin S {
+	--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);
+  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);
+	--components-calloutDisclosure-gap: var(--pr-t-spacings-100);
+
 	.calloutDisclosure-summary-title {
 		font: var(--pr-t-font-body-S);
+		font-weight: var(--pr-t-font-fontWeight-semibold);
 	}
 
 	.calloutDisclosure-summary-icon {

package/src/components/calloutDisclosure/vars.scss

@@ -1,3 +1,6 @@
 @mixin vars {
+	--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);
   --components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);
+  --components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);
+	--components-calloutDisclosure-gap: var(--pr-t-spacings-150);
 }

package/src/components/container/component.scss

@@ -6,4 +6,5 @@
 	max-inline-size: var(--commons-container-maxWidth);
 	margin-inline: var(--commons-container-marginInline);
 	position: relative;
+	display: block;
 }

package/src/components/dataTable/component.scss

@@ -22,6 +22,7 @@
 			overflow: var(--components-dataTable-overflow);
 			background-color: var(--components-dataTable-cell-background);
 			contain: paint; // Fix overflow on webkit when table has scroll
+			display: block;
 
 			&:focus-visible {
 				@include a11y.focusVisible;
@@ -67,6 +68,7 @@
 			text-align: var(--components-dataTable-cell-textAlign);
 			transition-property: background-color;
 			transition-duration: var(--commons-animations-durations-fast);
+			font-weight: var(--pr-t-font-fontWeight-regular);
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
@@ -90,6 +92,12 @@
 
 		.dataTable-body-row-cell {
 			vertical-align: var(--components-dataTable-cell-verticalAlign);
+
+			&:first-child {
+				&:has(.checkboxField-input) {
+					padding-bottom: var(--pr-t-spacings-150);
+				}
+			}
 		}
 
 		.dataTable-foot-row-cell {
@@ -104,6 +112,7 @@
 
 		.dataTable-body-row-cell-expand-button.button {
 			vertical-align: top;
+			margin-left: calc(var(--pr-t-spacings-25) * -1);
 
 			.lucca-icon {
 				transform: rotate(var(--components-dataTable-expand-rotation));

package/src/components/dataTable/index.scss

@@ -22,8 +22,17 @@
 			@include cellBorder;
 		}
 
-		&.mod-alignTop {
-			@include alignTop;
+		&.mod-alignTop,
+		&.mod-verticalAlignTop {
+			@include verticalAlignTop;
+		}
+
+		&.mod-verticalAlignBottom {
+			@include verticalAlignBottom;
+		}
+
+		&.mod-verticalAlignMiddle {
+			@includeverticalAlignMiddle;
 		}
 
 		&.mod-layoutFixed {
@@ -40,7 +49,7 @@
 		}
 
 		&.mod-hover {
-			:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
+			:is(.mod-selectable, .dataTable-body-row:not(.mod-group)) {
 				&:hover {
 					@include hover;
 				}
@@ -63,6 +72,7 @@
 			@include group;
 		}
 
+		&:has([selectable]),
 		&.mod-selectable {
 			@include selectable;
 
@@ -85,8 +95,13 @@
 			@include alignCenter;
 		}
 
-		&.mod-alignRight {
-			@include alignRight;
+		&.mod-alignRight,
+		&.mod-alignEnd {
+			@include alignEnd;
+		}
+
+		&.mod-alignStart {
+			@include alignStart;
 		}
 
 		&.mod-editable {

package/src/components/dataTable/mods.scss

@@ -14,10 +14,18 @@
 	}
 }
 
-@mixin alignTop {
+@mixin verticalAlignTop {
 	--components-dataTable-cell-verticalAlign: top;
 }
 
+@mixin verticalAlignBottom {
+	--components-dataTable-cell-verticalAlign: bottom;
+}
+
+@mixin verticalAlignMiddle {
+	--components-dataTable-cell-verticalAlign: middle;
+}
+
 @mixin buttonExpand {
 	--components-dataTable-tree-extraPadding: calc(1.5rem + var(--pr-t-spacings-100));
 
@@ -47,7 +55,16 @@
 }
 
 @mixin selectable {
-	--components-dataTable-cellFirst-width: 2.5rem;
+	--components-dataTable-cellFirst-width: 2.625rem;
+
+	.dataTable-head-row-cell,
+	.dataTable-body-row-cell,
+	.dataTable-foot-row-cell {
+		&:first-child {
+			inline-size: var(--components-dataTable-cellFirst-width);
+			max-inline-size: var(--components-dataTable-cellFirst-width);
+		}
+	}
 }
 
 @mixin draggable {
@@ -73,7 +90,7 @@
 
 @mixin editable {
 	--components-dataTable-cell-padding: var(--pr-t-spacings-100);
-	--components-dataTable-cell-paddingInlineStart: var(--components-dataTable-cell-padding);
+	--components-dataTable-cell-paddingInlineStart: var(--pr-t-spacings-50);
 }
 
 @mixin actions {
@@ -87,6 +104,8 @@
 		@include button.onlyIcon;
 		@include button.onlyIconS;
 		@include button.ghost;
+
+		transition-property: box-shadow, color;
 	}
 
 	&:is(.dataTable-head-row-cell) {
@@ -101,8 +120,12 @@
 	--components-dataTable-cell-textAlign: center;
 }
 
-@mixin alignRight {
-	--components-dataTable-cell-textAlign: right;
+@mixin alignEnd {
+	--components-dataTable-cell-textAlign: end;
+}
+
+@mixin alignStart {
+	--components-dataTable-cell-textAlign: start;
 }
 
 @mixin layoutFixed {

package/src/components/dataTableSticked/index.scss

@@ -8,7 +8,7 @@
 	}
 
 	@layer mods {
-		&:has(.dataTable.mod-stickyHeader) {
+		&:has(.dataTable.mod-stickyHeader, .dataTable-head.mod-sticky) {
 			@include stickyHeader;
 		}
 
@@ -44,4 +44,8 @@
 			}
 		}
 	}
+
+	&:has(.dataTable-head.is-firstBodyRowVisible) {
+		@include firstBodyRowVisible;
+	}
 }

package/src/components/dataTableSticked/mods.scss

@@ -6,7 +6,7 @@
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
-		z-index: 1;
+		z-index: 2;
 
 		&::after {
 			content: '';
@@ -16,6 +16,7 @@
 			background-image: linear-gradient(#{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
 			pointer-events: none;
 			box-shadow: 0 1px var(--commons-border-200) inset;
+			opacity: var(--components-dataTable-header-shadow-opacity);
 		}
 	}
 }
@@ -103,7 +104,7 @@
 	.dataTable-head-row-cell {
 		&.mod-stickyColumn {
 			&:first-child {
-				z-index: 1;
+				z-index: 2;
 			}
 		}
 	}
@@ -124,6 +125,7 @@
 
 			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
 				transform: translateX(-1px);
+				z-index: 1;
 
 				&:not(:has(+ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
 					&::after {

package/src/components/dataTableSticked/states.scss

@@ -13,3 +13,8 @@
 @mixin lastRowVisible {
 	--components-dataTable-shadow-lastRowOpacity: 0;
 }
+
+@mixin firstBodyRowVisible {
+	--components-dataTable-header-shadow-opacity: 0;
+}
+

package/src/components/dataTableSticked/vars.scss

@@ -3,4 +3,5 @@
 	--components-dataTable-shadow-lastColumnOpacity: 1;
 	--components-dataTable-shadow-firstRowOpacity: 1;
 	--components-dataTable-shadow-lastRowOpacity: 1;
+	--components-dataTable-header-shadow-opacity: 1;
 }

package/src/components/dialog/component.scss

@@ -143,7 +143,7 @@
 		.dialog_backdrop {
 			background-color: var(--palettes-neutral-900);
 			position: fixed;
-			opacity: 0.4;
+			opacity: 0.4 !important; // weird bug with Chrome and its inspector open
 			inset: 0;
 		}
 	}