@lucca-front/scss 18.3.0-rc.2 → 18.3.0-rc.3

package/src/components/filterBar/index.scss

@@ -1,4 +1,6 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 
 .filterBar {
 	@include vars;
@@ -8,3 +10,62 @@
 		@include neutral;
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'S',
+	$breakpoint2: null,
+	$inverted: false,
+	$at: 'container',
+	$containerName: 'filterBar',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.filterBar'
+) {
+	@if ($at == 'container') {
+		@include container.auto($containerName);
+	}
+
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include narrow;
+		}
+	}
+}
+
+@mixin responsiveActions(
+	$breakpoint: 'XS',
+	$breakpoint2: null,
+	$inverted: false,
+	$at: 'container',
+	$containerName: 'filterBar',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.filterBar'
+) {
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include actionsNarrow;
+		}
+	}
+}
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+	@include responsiveActions;
+}

package/src/components/filterBar/responsive.scss

@@ -0,0 +1,10 @@
+@mixin narrow {
+	--components-filterBar-footer-direction: row;
+	--components-filterBar-footer-justify: space-between;
+	--components-filterBar-footer-actions-marginInlineStart: auto;
+}
+
+@mixin actionsNarrow {
+	--components-filterBar-footer-actions-direction: row;
+	--components-filterBar-footer-actions-align: center;
+}

package/src/components/filterBar/vars.scss

@@ -1,3 +1,8 @@
 @mixin vars {
 	--components-filterBar-backgroundColor: var(--pr-t-elevation-surface-raised);
+	--components-filterBar-footer-direction: column;
+	--components-filterBar-footer-actions-direction: column;
+	--components-filterBar-footer-justify: center;
+	--components-filterBar-footer-actions-align: stretch;
+	--components-filterBar-footer-actions-marginInlineStart: 0;
 }

package/src/components/filters/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/filters/index.scss

@@ -1,4 +1,6 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 
 .filters {
 	@include vars;
@@ -15,3 +17,37 @@
 		@include stickyNavSide;
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'S',
+	$breakpoint2: null,
+	$inverted: true,
+	$at: 'media',
+	$containerName: 'filters',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.filters'
+) {
+	@if ($at == 'container') {
+		@include container.auto($containerName);
+	}
+
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include stickyNarrow;
+		}
+	}
+}
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+}

package/src/components/filters/mods.scss

@@ -1,15 +1,8 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
 @mixin sticky {
 	top: var(--commons-banner-height);
 	position: fixed;
 	left: 0;
 	right: 0;
-
-	@include media.max('S') {
-		left: 0 !important;
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-	}
 }
 
 @mixin stickyNavSide {

package/src/components/filters/responsive.scss

@@ -0,0 +1,6 @@
+@mixin stickyNarrow {
+	&.mod-sticky {
+		left: 0 !important;
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+	}
+}

package/src/components/footer/component.scss

@@ -8,9 +8,9 @@
 	gap: var(--pr-t-spacings-200);
 	align-items: var(--components-footer-alignItems);
 	box-shadow: var(--pr-t-elevation-shadow-overflow);
+	flex-direction: var(--components-footer-direction);
 	bottom: 0;
 	position: var(--components-footer-position);
-	flex-direction: var(--components-footer-direction);
 
 	@at-root ($atRoot) {
 		.footer-content {

package/src/components/footer/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/footer/index.scss

@@ -1,5 +1,6 @@
 @use 'exports' as *;
 @use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 
 .footer {
 	@include vars;
@@ -14,6 +15,7 @@
 	}
 
 	// default mod
+	// .mod-narrowAtMediaMaxXXX are deprecated
 	&:not([class*='mod-narrow']),
 	&.mod-narrowAtMediaMaxXXS {
 		@include media.max('XXS') {
@@ -39,3 +41,37 @@
 		}
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'XXS',
+	$breakpoint2: null,
+	$inverted: true,
+	$at: 'media',
+	$containerName: 'footer',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.footer'
+) {
+	@if ($at == 'container') {
+		@include container.auto($containerName);
+	}
+
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include narrow;
+		}
+	}
+}
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+}

package/src/components/footer/mods.scss

@@ -1,9 +1,3 @@
 @mixin sticky {
 	--components-footer-position: sticky;
 }
-
-@mixin narrow {
-	--components-footer-direction: column;
-	--components-footer-alignItems: stretch;
-	--components-footer-actions-margin: 0;
-}

package/src/components/footer/responsive.scss

@@ -0,0 +1,5 @@
+@mixin narrow {
+	--components-footer-direction: column;
+	--components-footer-alignItems: stretch;
+	--components-footer-actions-margin: 0;
+}

package/src/components/form/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/formLabel/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/gauge/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/grid/component.scss

@@ -15,10 +15,7 @@
 	max-width: var(--grid-max-width, var(--grid-maxWidth));
 
 	@at-root ($atRoot) {
-		.grid-containerWrapper {
-			container-type: inline-size;
-			container-name: grid;
-		}
+		@include container.auto('grid');
 
 		.grid-column {
 			align-self: var(--grid-align, var(--grid-column-align));
@@ -71,7 +68,7 @@
 					}
 				}
 
-				@include container.min($breakpoint, $name: grid) {
+				@include container.min($breakpoint, $containerName: grid) {
 					&[style*='grid-colspanAtContainerMin#{$breakpoint}'] {
 						grid-column-end: span var(--grid-colspanAtContainerMin#{$breakpoint});
 					}

package/src/components/grid/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/grid/index.scss

@@ -23,7 +23,7 @@
 		&.mod-autoAtContainerMin#{$breakpoint} {
 			@include autoAt;
 
-			@include container.min($breakpoint, $name: grid) {
+			@include container.min($breakpoint, $containerName: grid) {
 				@include auto;
 			}
 		}

package/src/components/gridLegacy/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/header/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/header/index.scss

@@ -1,4 +1,6 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 
 .header {
 	@include vars;
@@ -21,3 +23,38 @@
 		@include loading;
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'S',
+	$breakpoint2: null,
+	$inverted: true,
+	$at: 'media',
+	$containerName: 'header',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.header'
+) {
+	@if ($at == 'container') {
+		@include container.auto($containerName);
+	}
+
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include stickyNarrow;
+			@include stickyLeftNarrow;
+		}
+	}
+}
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+}

package/src/components/header/mods.scss

@@ -1,15 +1,8 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
 @mixin sticky {
 	top: var(--commons-banner-height);
 	position: fixed;
 	left: 0;
 	right: 0;
-
-	@include media.max('S') {
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-		left: 0 !important;
-	}
 }
 
 @mixin nav {
@@ -21,8 +14,4 @@
 
 @mixin left {
 	left: var(--commons-navSide-width);
-
-	@include media.max('S') {
-		top: var(--commons-navSide-mobile-toggle-height);
-	}
 }

package/src/components/header/responsive.scss

@@ -0,0 +1,14 @@
+@mixin stickyLeftNarrow {
+	&.mod-sticky {
+		.navSide ~ .main-content & {
+			top: var(--commons-navSide-mobile-toggle-height);
+		}
+	}
+}
+
+@mixin stickyNarrow {
+	&.mod-sticky {
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		left: 0 !important;
+	}
+}

package/src/components/index.scss

@@ -1,96 +1,100 @@
-@forward 'field'; //
-@forward 'box'; // 1 Ko
-@forward 'tag'; // 1 Ko
-@forward 'main'; // 1 Ko
-@forward 'code'; // 1 Ko
-@forward 'link'; // 1 Ko
-@forward 'chip'; // 1 Ko
-@forward 'title'; // 1 Ko
-@forward 'label'; // 1 Ko
-@forward 'filterBar'; // 1 Ko
-@forward 'filters'; // 1 Ko
-@forward 'divider'; // 1 Ko
-@forward 'section'; // 1 Ko
-@forward 'collapse'; // 1 Ko
-@forward 'container'; // 1 Ko
-@forward 'errorPage'; // 1 Ko
-@forward 'pageHeader'; // 1 Ko
-@forward 'pagination'; // 1 Ko
-@forward 'titleSection'; // 1 Ko
-@forward 'contentSection'; // 1 Ko
-@forward 'tableOfContent'; // 1 Ko
-@forward 'list'; // 2 Ko
-@forward 'card'; // 2 Ko
-@forward 'gauge'; // 2 Ko
-@forward 'callout'; // 2 Ko
-@forward 'loading'; // 2 Ko
-@forward 'progress'; // 2 Ko
-@forward 'breadcrumbs'; // 2 Ko
-@forward 'buttonGroup'; // 2 Ko
-@forward 'header'; // 3 Ko
-@forward 'actionIcon'; // 3 Ko
-@forward 'menu'; // 4 Ko
-@forward 'radio'; // 4 Ko
-@forward 'radioField'; // new component for radio
-@forward 'switch'; // 4 Ko
-@forward 'switchField'; // new component for switch
-@forward 'file'; // 5 Ko
-@forward 'layout'; // 5 Ko
-@forward 'radioButtons'; // 5 Ko
-@forward 'table'; // 7 Ko
-@forward 'checkbox'; // 7 Ko
-@forward 'checkboxField'; // new component for checkbox
-@forward 'timeline'; // 10 Ko
-@forward 'button'; // 12 Ko
-@forward 'textfields'; // 13 Ko
-@forward 'textField'; // new component for checkbox
-@forward 'navside'; // 15 Ko
-@forward 'form'; // 25 Ko
-@forward 'tableFixed'; // 33 Ko
-@forward 'segmentedControl';
-@forward 'calendar';
-@forward 'skipLinks';
+// no responsive components
+@use 'box';
+@use 'tag';
+@use 'code';
+@use 'link';
+@use 'chip';
+@use 'title';
+@use 'label';
+@use 'divider';
+@use 'collapse';
+@use 'container';
+@use 'pagination';
+@use 'titleSection';
+@use 'contentSection';
+@use 'tableOfContent';
+@use 'list';
+@use 'card';
+@use 'gauge';
+@use 'callout';
+@use 'loading';
+@use 'progress';
+@use 'breadcrumbs';
+@use 'buttonGroup';
+@use 'actionIcon';
+@use 'menu';
+@use 'radioField';
+@use 'switchField';
+@use 'file';
+@use 'layout';
+@use 'radioButtons';
+@use 'table';
+@use 'checkboxField';
+@use 'timeline';
+@use 'button';
+@use 'textField';
+@use 'form';
+@use 'tableFixed';
+@use 'skipLinks';
+@use 'grid';
+@use 'tableSticked';
+@use 'timepicker';
+@use 'notchBox';
+@use 'statusBadge';
+@use 'mobileHeader';
+@use 'clear';
+@use 'newBadge';
+@use 'inlineMessage';
+@use 'numericBadge';
+@use 'mobileNavigation';
+@use 'formLabel';
+@use 'verticalNavigation';
+@use 'sortableList';
+@use 'fieldset';
+@use 'skeleton';
+@use 'calloutDisclosure';
+@use 'calloutPopover';
+@use 'calloutFeedbackList';
+@use 'simpleSelect';
+@use 'multiSelect';
+@use 'avatar';
+@use 'tableSortable';
+@use 'tooltip';
+@use 'userPopover';
+@use 'scrollBox';
+@use 'toast';
+@use 'popover';
+@use 'userTile';
+@use 'plgPush';
+@use 'calendar';
 
-// caution: the two components cannot be loaded at the same time
-@forward 'grid';
-@forward 'tableSticked'; // 8 Ko
-@forward 'timepicker'; //
-@forward 'notchBox';
-@forward 'statusBadge';
-@forward 'mobileHeader';
-@forward 'clear';
-@forward 'newBadge';
-@forward 'inlineMessage';
-@forward 'numericBadge';
-@forward 'mobileNavigation';
-@forward 'footer';
-@forward 'formLabel';
-@forward 'verticalNavigation';
-@forward 'sortableList';
-@forward 'fieldset';
-@forward 'skeleton';
-@forward 'calloutDisclosure';
-@forward 'calloutPopover';
-@forward 'calloutFeedbackList';
-@forward 'simpleSelect';
-@forward 'multiSelect';
-@forward 'emptyState';
-@forward 'dialog';
-@forward 'avatar';
-@forward 'indexTable';
-@forward 'tableSortable';
-@forward 'tooltip';
-@forward 'userPopover';
-@forward 'scrollBox';
-@forward 'comment';
-@forward 'toast'; // 5 Ko
-@forward 'popover';
-@forward 'userTile';
-@forward 'plgPush';
+// deprecated components, no responsive
+@use 'field';
+@use 'radio';
+@use 'switch';
+@use 'checkbox';
+@use 'textfields';
 
-// Deprecated CSS components
-// @forward 'gridLegacy'; // 40 Ko
-// @forward 'emptyStateDeprecated';
+// responsive components with media queries
+@use 'dialog';
+@use 'filters';
+@use 'header';
+@use 'errorPage';
+@use 'main';
+@use 'navside';
+@use 'segmentedControl';
+@use 'emptyState';
+@use 'pageHeader';
+@use 'footer';
+@use 'indexTable';
+@use 'section'; // deprecated
 
-// @forward 'tableFixedDeprecated'; // 33 Ko
-// @forward 'tableStickedDeprecated'; // 67 Ko
+// responsive components with container queries
+@use 'comment';
+@use 'filterBar';
+
+// deprecated components not loaded by default
+// @use 'gridLegacy'; // caution: grid and gridLegacy cannot be loaded at the same time
+// @use 'emptyStateDeprecated';
+// @use 'tableFixedDeprecated';
+// @use 'tableStickedDeprecated';

package/src/components/indexTable/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';