@lucca-front/scss 20.3.0-rc.2 → 20.3.0-rc.4

package/src/components/calendar/index.scss

@@ -2,87 +2,75 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .calendarWrapper {
-	@layer components {
-		@include wrapperVars;
-	}
+	@include wrapperVars;
 
-	@layer mods {
-		&.mod-daysOffHidden {
-			@include daysOffHidden;
-		}
+	&.mod-daysOffHidden {
+		@include daysOffHidden;
+	}
 
-		&.mod-daysOverflowingHidden {
-			@include daysOverflowingHidden;
-		}
+	&.mod-daysOverflowingHidden {
+		@include daysOverflowingHidden;
 	}
 }
 
 .calendar {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		// if rows have three columns (display for months and years)
-		&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
-			@include third;
-		}
+	// if rows have three columns (display for months and years)
+	&:has(.calendar-table-body-row-cell:nth-child(3):last-child) {
+		@include third;
 	}
 }
 
 .calendarShortcuts {
-	@layer components {
-		@include media.max('S') {
-			display: none;
-		}
+	@include media.max('S') {
+		display: none;
 	}
 }
 
 .calendar-table-body-row-cell {
-	@layer states {
-		&.is-daysOff {
-			@include daysOff;
-		}
-
-		&.is-overflow {
-			@include overflow;
-		}
+	&.is-daysOff {
+		@include daysOff;
+	}
 
-		&.is-current {
-			@include current;
-		}
+	&.is-overflow {
+		@include overflow;
+	}
 
-		&.is-selected,
-		&.is-selectionInProgress {
-			&:not(.is-overflow) {
-				@include selected;
-			}
-		}
+	&.is-current {
+		@include current;
+	}
 
-		&.is-singleDayInProgress,
-		&.is-start {
-			@include start;
+	&.is-selected,
+	&.is-selectionInProgress {
+		&:not(.is-overflow) {
+			@include selected;
 		}
+	}
 
-		&.is-end {
-			@include end;
-		}
+	&.is-singleDayInProgress,
+	&.is-start {
+		@include start;
+	}
 
-		&.is-startInProgress {
-			&:not(.is-endInProgress) {
-				@include startInProgress;
-			}
+	&.is-end {
+		@include end;
+	}
 
-			&.is-endInProgress {
-				@include startEndInProgress;
-			}
+	&.is-startInProgress {
+		&:not(.is-endInProgress) {
+			@include startInProgress;
 		}
 
 		&.is-endInProgress {
-			&:not(.is-startInProgress) {
-				@include endInProgress;
-			}
+			@include startEndInProgress;
+		}
+	}
+
+	&.is-endInProgress {
+		&:not(.is-startInProgress) {
+			@include endInProgress;
 		}
 	}
 }

package/src/components/callout/index.scss

@@ -1,15 +1,11 @@
 @use 'exports' as *;
 
 .callout {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 
 	&.mod-AI {

package/src/components/calloutDisclosure/index.scss

@@ -1,24 +1,18 @@
 @use 'exports' as *;
 
 .calloutDisclosure {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer states {
-		&[open] {
-			@include open;
-		}
+	&[open] {
+		@include open;
 	}
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-iconless {
-			@include iconless;
-		}
+	&.mod-iconless {
+		@include iconless;
 	}
 }

package/src/components/calloutFeedbackList/index.scss

@@ -1,14 +1,10 @@
 @use 'exports' as *;
 
 .calloutFeedbackList {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 }

package/src/components/calloutPopover/index.scss

@@ -1,30 +1,24 @@
 @use 'exports' as *;
 
 .calloutPopover {
-	@layer components {
-		@include component;
-		@include vars;
-	}
+	@include component;
+	@include vars;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-XS {
+		@include XS;
 	}
 }
 
 .calloutPopover-overlay {
-	@layer mods {
-		&.mod-S {
-			@include overlayS;
-		}
+	&.mod-S {
+		@include overlayS;
+	}
 
-		&.mod-iconless {
-			@include overlayIconless;
-		}
+	&.mod-iconless {
+		@include overlayIconless;
 	}
 }

package/src/components/card/component.scss

@@ -19,6 +19,7 @@
 	@at-root ($atRoot) {
 		.card-content {
 			padding: var(--components-card-content-padding);
+			position: relative;
 		}
 
 		.card-title {

package/src/components/card/index.scss

@@ -1,38 +1,36 @@
 @use 'exports' as *;
 
 .card {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	// .mod-grey is deprecated
+	&.mod-neutral,
+	&.mod-grey {
+		@include neutral;
 	}
 
-	@layer mods {
-		// .mod-grey is deprecated
-		&.mod-neutral,
-		&.mod-grey {
-			@include neutral;
-		}
+	&.mod-clickable {
+		@include clickable;
+	}
 
-		&.mod-clickable {
-			@include clickable;
-		}
+	&.mod-elevated {
+		@include elevated;
+	}
 
-		&.mod-elevated {
-			@include elevated;
-		}
+	&.mod-action {
+		@include action;
+	}
 
-		&.mod-action {
-			@include action;
-		}
+	&.mod-nested {
+		@include nested;
+	}
 
-		&.mod-nested {
-			@include nested;
-		}
+	&.mod-expand {
+		@include expand;
 	}
 
-	@layer states {
-		&:is(.is-disabled, .disabled) {
-			@include disabled;
-		}
+	&:is(.is-disabled, .disabled) {
+		@include disabled;
 	}
 }

package/src/components/card/mods.scss

@@ -59,3 +59,34 @@
 @mixin nested {
 	--components-card-border-radius: var(--pr-t-border-radius-default);
 }
+
+@mixin expand {
+	border: 0;
+	background-color: transparent;
+	box-shadow: none;
+	cursor: pointer;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background-color: var(--pr-t-elevation-surface-raised);
+		border-radius: var(--components-card-border-radius);
+		box-shadow: var(--pr-t-elevation-shadow-raised);
+		transition-duration: var(--commons-animations-durations-fast);
+		transition-property: inset, box-shadow;
+	}
+
+	&:hover {
+		box-shadow: none;
+
+		&::before {
+			inset: -2px -6px;
+			box-shadow: var(--pr-t-elevation-shadow-overlay);
+		}
+	}
+
+	.card-content {
+		z-index: 1;
+	}
+}

package/src/components/checkbox/index.scss

@@ -1,54 +1,48 @@
 @use 'exports' as *;
 
 .checkbox {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
 	}
 
-	@layer mods {
-		&.mod-inline {
-			@include inline;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-noLabel {
+		@include noLabel;
+	}
 
-		&.mod-noLabel {
-			@include noLabel;
-		}
+	&:is(.is-required, .required) {
+		@include required;
 	}
 
-	@layer states {
-		&:is(.is-required, .required) {
-			@include required;
-		}
+	&:is(.is-error, .error) {
+		@include state('error');
+	}
 
-		&:is(.is-error, .error) {
-			@include state('error');
-		}
+	&:is(.is-warning, .warning) {
+		@include state('warning');
+	}
 
-		&:is(.is-warning, .warning) {
-			@include state('warning');
-		}
+	&:is(.is-success, .success) {
+		@include state('success');
+	}
 
-		&:is(.is-success, .success) {
-			@include state('success');
+	.checkbox-input {
+		&:is(.is-incomplete, .incomplete) {
+			@include incomplete;
 		}
 
-		.checkbox-input {
-			&:is(.is-incomplete, .incomplete) {
-				@include incomplete;
-			}
-
-			&:is([disabled], [read-only]) {
-				@include disabled;
-			}
+		&:is([disabled], [read-only]) {
+			@include disabled;
+		}
 
-			&:is([aria-required]) {
-				@include required;
-			}
+		&:is([aria-required]) {
+			@include required;
 		}
 	}
 }

package/src/components/checkboxField/index.scss

@@ -1,60 +1,52 @@
 @use 'exports' as *;
 
 .checkboxField {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
 	&.mod-S {
-		@layer mods {
-			@include S;
-		}
+		@include S;
 	}
 
 	&.mod-checklist {
-		@layer mods {
-			@include checklist;
-		}
+		@include checklist;
+
+		.checkboxField-input {
+			&:hover {
+				@include checklistHover;
+			}
+
+			&:active {
+				@include checklistActive;
+			}
+
+			&:disabled {
+				@include checklistDisabled;
+			}
+
+			&:checked {
+				@include checklistChecked;
 
-		@layer states {
-			.checkboxField-input {
 				&:hover {
-					@include checklistHover;
+					@include checklistCheckedHover;
 				}
 
 				&:active {
-					@include checklistActive;
+					@include checklistCheckedActive;
 				}
 
 				&:disabled {
-					@include checklistDisabled;
-				}
-
-				&:checked {
-					@include checklistChecked;
-
-					&:hover {
-						@include checklistCheckedHover;
-					}
-
-					&:active {
-						@include checklistCheckedActive;
-					}
-
-					&:disabled {
-						@include checklistCheckedDisabled;
-					}
+					@include checklistCheckedDisabled;
 				}
 			}
+		}
 
-			&:has(.checkboxField-input:focus-visible) {
-				.checkboxField-input {
-					@include checklistHover;
+		&:has(.checkboxField-input:focus-visible) {
+			.checkboxField-input {
+				@include checklistHover;
 
-					&:checked {
-						@include checklistCheckedHover;
-					}
+				&:checked {
+					@include checklistCheckedHover;
 				}
 			}
 		}
@@ -62,89 +54,87 @@
 }
 
 .checkboxField-input {
-	@layer states {
+	&[aria-checked='mixed'] {
+		@include checked;
+		@include mixed;
+	}
+
+	&:focus-visible {
+		@include focusVisible;
+	}
+
+	&:hover {
+		@include hover;
+
 		&[aria-checked='mixed'] {
-			@include checked;
-			@include mixed;
+			@include checkedHover;
 		}
+	}
 
-		&:focus-visible {
-			@include focusVisible;
+	&:active {
+		@include active;
+
+		&[aria-checked='mixed'] {
+			@include checkedActive;
 		}
+	}
 
-		&:hover {
-			@include hover;
+	&:disabled {
+		@include disabled;
 
-			&[aria-checked='mixed'] {
-				@include checkedHover;
-			}
+		&[aria-checked='mixed'] {
+			@include checkedDisabled;
 		}
+	}
 
-		&:active {
-			@include active;
+	&[aria-invalid='true'] {
+		@include invalid;
 
-			&[aria-checked='mixed'] {
-				@include checkedActive;
-			}
+		&[aria-checked='mixed'] {
+			@include checkedInvalid;
 		}
 
-		&:disabled {
-			@include disabled;
+		&:hover {
+			@include invalidHover;
 
 			&[aria-checked='mixed'] {
-				@include checkedDisabled;
+				@include checkedInvalidHover;
 			}
 		}
 
-		&[aria-invalid='true'] {
-			@include invalid;
+		&:active {
+			@include invalidActive;
 
 			&[aria-checked='mixed'] {
-				@include checkedInvalid;
+				@include checkedInvalidActive;
 			}
+		}
+	}
 
-			&:hover {
-				@include invalidHover;
+	&:checked {
+		@include checked;
 
-				&[aria-checked='mixed'] {
-					@include checkedInvalidHover;
-				}
-			}
+		&:hover {
+			@include checkedHover;
+		}
 
-			&:active {
-				@include invalidActive;
+		&:active {
+			@include checkedActive;
+		}
 
-				&[aria-checked='mixed'] {
-					@include checkedInvalidActive;
-				}
-			}
+		&:disabled {
+			@include checkedDisabled;
 		}
 
-		&:checked {
-			@include checked;
+		&[aria-invalid='true'] {
+			@include checkedInvalid;
 
 			&:hover {
-				@include checkedHover;
+				@include checkedInvalidHover;
 			}
 
 			&:active {
-				@include checkedActive;
-			}
-
-			&:disabled {
-				@include checkedDisabled;
-			}
-
-			&[aria-invalid='true'] {
-				@include checkedInvalid;
-
-				&:hover {
-					@include checkedInvalidHover;
-				}
-
-				&:active {
-					@include checkedInvalidActive;
-				}
+				@include checkedInvalidActive;
 			}
 		}
 	}