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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "18.3.0-rc.1",
+  "version": "18.3.0-rc.2",
   "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": "18.3.0-rc.1"
+    "@lucca-front/icons": "18.3.0-rc.2"
   }
 }

package/src/commons/utils/container.scss

@@ -1,117 +1,77 @@
-@use 'sass:string';
 @use '@lucca-front/scss/src/commons/utils/media';
 
-@mixin auto($containerName) {
-	*:has(> .#{$containerName}:not(.rwd-disableAutoContainer)) {
-		container-type: inline-size;
-		container-name: string.unquote($containerName);
-	}
-}
-
-// dans ce qui suit tous les mixins sont des raccourcis vers media.query et media.queries
+// dans cette page tous les mixins sont des raccourcis vers media.query et media.queries
 
 // les raccourcis des requêtes simples et multiples
 
-@mixin query($breakpoint, $breakpoint2, $axis: 'width', $inverted: false, $containerName: '') {
-	// si on breakpoint supplémentaire est passé, c’est queries qu’il faut appeler
-	@if $breakpoint2 != null {
-		@include queries(
-			$breakpoint1: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$axis: $axis,
-			$at: 'container',
-			$containerName: $containerName,
-			$inverted: $inverted
-		) {
-			@content;
-		}
-	} @else {
-		@include media.query($breakpoint: $breakpoint, $axis: $axis, $inverted: $inverted, $at: 'container', $containerName: $containerName) {
-			@content;
-		}
-	}
-}
-
-@mixin queries($breakpoint1, $breakpoint2, $inverted: false, $axis: 'width', $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $inverted: $inverted, $axis: $axis, $at: 'container', $containerName: $containerName) {
+@mixin query($breakpoint, $property: 'width', $max: false, $name: '') {
+	@include media.query($breakpoint: $breakpoint, $property: $property, $max: $max, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-// les raccourcis pour min/max/inside/outside
-
-@mixin min($breakpoint, $axis: 'width', $containerName: '') {
-	@include media.query($breakpoint: $breakpoint, $axis: $axis, $at: 'container', $containerName: $containerName) {
+@mixin queries($breakpoint1, $breakpoint2, $property: 'width', $name: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $property: $property, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin max($breakpoint, $axis: 'width', $containerName: '') {
-	@include media.query($breakpoint, $axis: $axis, $inverted: true, $at: 'container', $containerName: $containerName) {
-		@content;
-	}
-}
+// les raccourcis pour min/max/between
 
-@mixin inside($breakpoint1, $breakpoint2, $axis: 'width', $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $axis: $axis, $at: 'container', $containerName: $containerName) {
+@mixin min($breakpoint, $property: 'width', $name: '') {
+	@include media.query($breakpoint: $breakpoint, $property: $property, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin outside($breakpoint1, $breakpoint2, $axis: 'width', $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $axis: $axis, $at: 'container', $containerName: $containerName, $inverted: true) {
+@mixin max($breakpoint, $property: 'width', $name: '') {
+	@include media.query($breakpoint, $property: $property, $max: true, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-// les raccourcis pour minWidth/maxWidth/insideWidths/outsideWidths
-
-@mixin minWidth($breakpoint, $containerName: '') {
-	@include media.query($breakpoint, $at: 'container', $containerName: $containerName) {
+@mixin between($breakpoint1, $breakpoint2, $property: 'width', $name: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $property: $property, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin maxWidth($breakpoint, $containerName: '') {
-	@include media.query($breakpoint, $inverted: true, $at: 'container', $containerName: $containerName) {
-		@content;
-	}
-}
+// les raccourcis pour minWidth/maxWidth/betweenWidths
 
-@mixin insideWidths($breakpoint1, $breakpoint2, $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $containerName: $containerName) {
+@mixin minWidth($breakpoint, $name: '') {
+	@include media.query($breakpoint, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin outsideWidths($breakpoint1, $breakpoint2, $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $containerName: $containerName, $inverted: true) {
+@mixin maxWidth($breakpoint, $name: '') {
+	@include media.query($breakpoint, $max: true, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-// les raccourcis pour minHeight/maxHeight/insideHeights/outsideHeights
-
-@mixin minHeight($breakpoint, $containerName: '') {
-	@include media.query($breakpoint, $axis: 'height', $at: 'container', $containerName: $containerName) {
+@mixin betweenWidths($breakpoint1, $breakpoint2, $name: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin maxHeight($breakpoint, $containerName: '') {
-	@include media.query($breakpoint, $inverted: true, $axis: 'height', $at: 'container', $containerName: $containerName) {
+// les raccourcis pour minHeight/maxHeight/betweenHeights
+
+@mixin minHeight($breakpoint, $name: '') {
+	@include media.query($breakpoint, $property: 'height', $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin insideHeights($breakpoint1, $breakpoint2, $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $axis: 'height', $at: 'container', $containerName: $containerName) {
+@mixin maxHeight($breakpoint, $name: '') {
+	@include media.query($breakpoint, $max: true, $property: 'height', $at: 'container', $name: $name) {
 		@content;
 	}
 }
 
-@mixin outsideHeights($breakpoint1, $breakpoint2, $containerName: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $axis: 'height', $at: 'container', $containerName: $containerName, $inverted: true) {
+@mixin betweenHeights($breakpoint1, $breakpoint2, $name: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $property: 'height', $at: 'container', $name: $name) {
 		@content;
 	}
 }

package/src/commons/utils/media.scss

@@ -13,55 +13,33 @@
 
 // les requêtes simples et multiples
 
-@mixin query($breakpoint, $breakpoint2: null, $axis: 'width', $inverted: false, $at: 'media', $containerName: '') {
-	// si on breakpoint supplémentaire est passé, c’est queries qu’il faut appeler
-	@if $breakpoint2 != null {
-		@include queries(
-			$breakpoint1: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$axis: $axis,
-			$at: $at,
-			$containerName: $containerName,
-			$inverted: $inverted
-		) {
-			@content;
-		}
-	} @else {
-		$reversed: '';
+@mixin query($breakpoint, $property: 'width', $max: false, $at: 'media', $name: '') {
+	$reversed: '';
 
-		@if $inverted {
-			$reversed: 'not all and';
-
-			@if $at == 'container' {
-				$reversed: 'not';
-			}
-		}
+	@if $max {
+		$reversed: 'not all and';
 
-		@if $at == 'media' {
-			$containerName: '';
+		@if $at == 'container' {
+			$reversed: 'not';
 		}
+	}
 
-		@if map.get(config.$breakpoints, $breakpoint) {
-			$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
-		}
+	@if map.get(config.$breakpoints, $breakpoint) {
+		$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
+	}
 
-		@#{$at} #{$containerName} #{$reversed} (min-#{$axis}: #{$breakpoint}) {
-			@content;
-		}
+	@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint}) {
+		@content;
 	}
 }
 
-@mixin queries($breakpoint1, $breakpoint2, $axis: 'width', $at: 'media', $containerName: '', $inverted: false) {
+@mixin queries($breakpoint1, $breakpoint2, $property: 'width', $at: 'media', $name: '') {
 	$reversed: 'not all and';
 
 	@if $at == 'container' {
 		$reversed: 'not';
 	}
 
-	@if $at == 'media' {
-		$containerName: '';
-	}
-
 	@if map.get(config.$breakpoints, $breakpoint1) {
 		$breakpoint1: pxToEm(map.get(config.$breakpoints, $breakpoint1));
 	}
@@ -77,49 +55,34 @@
 		$breakpoint1: $breakpointTmp;
 	}
 
-	// si on souhaite inverser, ce sont deux queries combinées (or)
-	@if $inverted == true {
-		@#{$at} #{$containerName} #{$reversed} (min-#{$axis}: #{$breakpoint1}), (min-#{$axis}: #{$breakpoint2}) {
+	@#{$at} #{$name} (min-#{$property}: #{$breakpoint1}) {
+		@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint2}) {
 			@content;
 		}
 	}
-	// sinon, ce sont deux queries imbriquées (and)
-	@else {
-		@#{$at} #{$containerName} (min-#{$axis}: #{$breakpoint1}) {
-			@#{$at} #{$containerName} #{$reversed} (min-#{$axis}: #{$breakpoint2}) {
-				@content;
-			}
-		}
-	}
 }
 
-// les raccourcis vers les requêtes pour min/max/inside/outside
+// les raccourcis vers les requêtes pour min/max/between
 
-@mixin min($breakpoint, $axis: 'width', $at: 'media') {
-	@include query($breakpoint, $axis: $axis, $at: $at) {
+@mixin min($breakpoint, $property: 'width', $at: 'media') {
+	@include query($breakpoint, $property: $property, $at: $at) {
 		@content;
 	}
 }
 
-@mixin max($breakpoint, $axis: 'width', $at: 'media') {
-	@include query($breakpoint, $axis: $axis, $inverted: true, $at: $at) {
+@mixin max($breakpoint, $property: 'width', $at: 'media') {
+	@include query($breakpoint, $property: $property, $max: true, $at: $at) {
 		@content;
 	}
 }
 
-@mixin inside($breakpoint1, $breakpoint2, $axis: 'width', $at: 'media') {
-	@include queries($breakpoint1, $breakpoint2, $axis: $axis, $at: $at) {
+@mixin between($breakpoint1, $breakpoint2, $property: 'width', $at: 'media') {
+	@include queries($breakpoint1, $breakpoint2, $property: $property, $at: $at) {
 		@content;
 	}
 }
 
-@mixin outside($breakpoint1, $breakpoint2, $axis: 'width', $at: 'media', $inverted: true) {
-	@include queries($breakpoint1, $breakpoint2, $axis: $axis, $at: $at) {
-		@content;
-	}
-}
-
-// les raccourcis vers les requêtes pour minWidth/maxWidth/insideWidths/outsideWidths
+// les raccourcis vers les requêtes pour minWidth/maxWidth/betweenWidths
 
 @mixin minWidth($breakpoint, $at: 'media') {
 	@include query($breakpoint, $at: $at) {
@@ -128,24 +91,18 @@
 }
 
 @mixin maxWidth($breakpoint, $at: 'media') {
-	@include query($breakpoint, $inverted: true, $at: $at) {
-		@content;
-	}
-}
-
-@mixin insideWidths($breakpoint1, $breakpoint2, $at: 'media') {
-	@include queries($breakpoint1, $breakpoint2, $at: $at) {
+	@include query($breakpoint, $max: true, $at: $at) {
 		@content;
 	}
 }
 
-@mixin outsideWidths($breakpoint1, $breakpoint2, $at: 'media') {
-	@include queries($breakpoint1, $breakpoint2, $at: $at, $inverted: true) {
-		@content;
-	}
+@mixin betweenWidths($breakpoint1, $breakpoint2, $at: 'media') {
+    @include queries($breakpoint1, $breakpoint2, $at: $at) {
+        @content;
+    }
 }
 
-// les raccourcis vers les requêtes pour minHeight/maxHeight/insideHeights/outsideHeights
+// les raccourcis vers les requêtes pour minHeight/maxHeight/betweenHeights
 
 @mixin minHeight($breakpoint, $at: 'media') {
 	@include query($breakpoint, 'height', $at: $at) {
@@ -154,21 +111,15 @@
 }
 
 @mixin maxHeight($breakpoint, $at: 'media') {
-	@include query($breakpoint, $inverted: true, $axis: 'height', $at: $at) {
+	@include query($breakpoint, $max: true, $property: 'height', $at: $at) {
 		@content;
 	}
 }
 
-@mixin insideHeights($breakpoint1, $breakpoint2, $at: 'media') {
-	@include queries($breakpoint1, $breakpoint2, $axis: 'height', $at: $at) {
-		@content;
-	}
-}
-
-@mixin outsideHeights($breakpoint1, $breakpoint2, $at: 'media') {
-	@include queries($breakpoint1, $breakpoint2, $axis: 'height', $at: $at, $inverted: true) {
-		@content;
-	}
+@mixin betweenHeights($breakpoint1, $breakpoint2, $at: 'media') {
+    @include queries($breakpoint1, $breakpoint2, $property: 'height', $at: $at) {
+        @content;
+    }
 }
 
 // Touch detection
@@ -182,4 +133,4 @@
 	@media not (any-pointer: coarse) {
 		@content;
 	}
-}
+}

package/src/commons/vars.scss

@@ -63,6 +63,6 @@
 	--commons-container-padding: 3.5rem;
 
 	--commons-navSide-width: 0rem; // unit is required for calc
-	--commons-navSide-compact-width: 7.5rem; // deprecated
+	--commons-navSide-compact-width: 7.5rem;
 	--commons-navSide-mobile-toggle-height: 3.5rem;
 }

package/src/components/_sample/exports.scss

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

package/src/components/_sample/index.scss

@@ -1,12 +1,9 @@
 // This file contains all the connections required to make the component functional.
 // The component’s mixins are requested, then assigned to classes.
 // To add the component to the list of all existing components, call it from `components/index` with `@forward 'sample';`.
-// Modifiers and states are optional and must be prefixed by `.mod-`, `.rwd-` and `.is-`.
-// A responsive mixin and varible define the default behaviour but can be overridden. All this settings must be preserved.
+// Modifiers and states are optional and must be prefixed by `.mod-` and `.is-`.
 
 @use 'exports' as *;
-@use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/container';
 
 .sample {
 	@include vars;
@@ -20,37 +17,3 @@
 		@include sampleStateA;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'M',
-	$breakpoint2: null,
-	$inverted: false,
-	$at: 'container',
-	$containerName: 'sample',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.sample'
-) {
-	@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 sampleBehaviour;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/actionIcon/exports.scss

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

package/src/components/avatar/exports.scss

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

package/src/components/box/exports.scss

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

package/src/components/breadcrumbs/exports.scss

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

package/src/components/button/exports.scss

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

package/src/components/buttonGroup/exports.scss

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

package/src/components/calendar/exports.scss

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

package/src/components/callout/exports.scss

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

package/src/components/calloutAccordion/exports.scss

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

package/src/components/calloutDisclosure/exports.scss

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

package/src/components/calloutFeedbackList/exports.scss

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

package/src/components/calloutPopover/exports.scss

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

package/src/components/card/exports.scss

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

package/src/components/checkbox/exports.scss

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

package/src/components/checkboxField/exports.scss

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

package/src/components/chip/exports.scss

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

package/src/components/clear/exports.scss

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

package/src/components/code/exports.scss

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

package/src/components/collapse/exports.scss

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

package/src/components/comment/component.scss

@@ -3,6 +3,7 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
+	container: comment / inline-size;
 	display: flex;
 	flex-direction: column;
 	gap: var(--pr-t-spacings-50);

package/src/components/comment/exports.scss

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

package/src/components/comment/index.scss

@@ -1,4 +1,3 @@
-@use '@lucca-front/scss/src/commons/utils/media';
 @use '@lucca-front/scss/src/commons/utils/container';
 
 @use 'exports' as *;
@@ -14,6 +13,10 @@
 	&.mod-noAvatar {
 		@include noAvatar;
 	}
+
+	@include container.max(25rem, $name: 'comment') {
+		@include narrow;
+	}
 }
 
 .commentWrapper {
@@ -35,37 +38,3 @@
 .commentWrapperChat {
 	@include chat;
 }
-
-@mixin responsive(
-	$breakpoint: 25rem,
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'comment',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.comment'
-) {
-	@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/comment/mods.scss

@@ -16,6 +16,20 @@
 	--components-comment-content-margin: 0;
 }
 
+@mixin narrow {
+	@at-root (namespace.$defaultAtRoot) {
+		.comment-infos-content {
+			--components-comment-info-content-display: flex;
+		}
+
+		.comment-infos-name + .comment-infos-date {
+			&::before {
+				--components-comment-info-separator: none;
+			}
+		}
+	}
+}
+
 @mixin wrapperCompact {
 	.commentWrapper-item {
 		&:not(:first-child) {

package/src/components/container/exports.scss

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

package/src/components/contentSection/exports.scss

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