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

package/src/components/index.scss

@@ -1,62 +1,61 @@
-@forward 'field';
-
-@forward 'box';
-@forward 'tag';
-@forward 'main';
-@forward 'code';
-@forward 'link';
-@forward 'chip';
-@forward 'title';
-@forward 'label';
-@forward 'filters';
-@forward 'divider';
-@forward 'section';
-@forward 'collapse';
-@forward 'container';
-@forward 'errorPage';
-@forward 'pageHeader';
-@forward 'pagination';
-@forward 'titleSection';
-@forward 'contentSection';
-@forward 'tableOfContent';
-@forward 'list';
-@forward 'card';
-@forward 'gauge';
-@forward 'callout';
-@forward 'loading';
-@forward 'progress';
-@forward 'breadcrumbs';
-@forward 'buttonGroup';
-@forward 'header';
-@forward 'horizontalNavigation';
-
-@forward 'textfields';
-@forward 'checkbox';
-@forward 'switch';
-@forward 'radio';
-
-@forward 'textField'; // new component for checkbox
-@forward 'checkboxField'; // new component for checkbox
-@forward 'switchField'; // new component for switch
+@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 'filterBarDeprecated'; // 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 'horizontalNavigation'; // 4 Ko
+@forward 'radio'; // 4 Ko
 @forward 'radioField'; // new component for radio
-
-@forward 'file';
-@forward 'layout';
-@forward 'radioButtons';
-@forward 'table';
-@forward 'timeline';
-@forward 'button';
-@forward 'navside';
-@forward 'form';
-@forward 'tableFixed';
+@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';
 @forward 'fancyBox';
 @forward 'inputFramed';
+
+// caution: the two components cannot be loaded at the same time
 @forward 'grid';
-@forward 'tableSticked';
-@forward 'timepicker';
+@forward 'tableSticked'; // 8 Ko
+@forward 'timepicker'; //
 @forward 'notchBox';
 @forward 'statusBadge';
 @forward 'mobileHeader';
@@ -85,7 +84,7 @@
 @forward 'userPopover';
 @forward 'scrollBox';
 @forward 'comment';
-@forward 'toast';
+@forward 'toast'; // 5 Ko
 @forward 'popover';
 @forward 'userTile';
 @forward 'mobilePush';
@@ -110,7 +109,6 @@
 @forward 'listboxOption';
 @forward 'suggestion';
 
-@forward 'filterBarDeprecated';
-@forward 'tableFixedDeprecated';
-@forward 'tableStickedDeprecated';
-
+// Deprecated CSS components
+// @forward 'tableFixedDeprecated'; // 33 Ko
+// @forward 'tableStickedDeprecated'; // 67 Ko

package/src/components/indexTable/index.scss

@@ -2,77 +2,79 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .indexTable {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-selectable {
+		@include selectable;
+
+		// Selectable states
+		@include selectableSelectedRow;
+		@include selectableHoveredRow;
 	}
 
-	@layer mods {
-		&.mod-selectable {
-			@include selectable;
-			@include selectableSelectedRow;
-			@include selectableHoveredRow;
-		}
+	&.mod-stackable {
+		@include stackable;
+	}
 
-		&.mod-stackable {
-			@include stackable;
-		}
+	&.mod-stickyHeader {
+		@include stickyHeader;
+	}
 
-		&.mod-stickyHeader {
-			@include stickyHeader;
-		}
+	// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
+	&[class*='mod-layoutFixed'] {
+		@include layoutFixed;
+	}
 
-		// Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
-		&[class*='mod-layoutFixed'] {
-			@include layoutFixed;
-		}
+	.indexTable-head-row.mod-massSelection {
+		@include massSelection;
+	}
 
-		.indexTable-head-row.mod-massSelection {
-			@include massSelection;
-		}
+	.indexTable-body-row-cell.mod-actions {
+		@include actions;
+	}
 
-		.indexTable-body-row-cell.mod-actions {
-			@include actions;
+	.indexTable-head-row-cell,
+	.indexTable-body-row-cell,
+	.indexTable-body-row-transparentCell,
+	.indexTable-foot-row-cell {
+		&.mod-alignRight {
+			@include alignRight;
 		}
 
-		.indexTable-head-row-cell,
-		.indexTable-body-row-cell,
-		.indexTable-body-row-transparentCell,
-		.indexTable-foot-row-cell {
-			&.mod-alignRight {
-				@include alignRight;
-			}
-
-			&.mod-alignCenter {
-				@include alignCenter;
-			}
+		&.mod-alignCenter {
+			@include alignCenter;
 		}
+	}
 
-		@include media.max('S') {
-			&.mod-responsiveCardList {
-				@include responsiveCardList;
-			}
+	// Responsive
+	@include media.max('S') {
+		&.mod-responsiveCardList {
+			@include responsiveCardList;
+		}
 
-			&.mod-selectable.mod-responsiveCardList {
-				@include selectableResponsiveCardList;
-			}
+		&.mod-selectable.mod-responsiveCardList {
+			@include selectableResponsiveCardList;
+		}
 
-			&.mod-stackable.mod-responsiveCardList {
-				@include stackableResponsiveCardList;
-			}
+		&.mod-stackable.mod-responsiveCardList {
+			@include stackableResponsiveCardList;
+		}
 
-			&.mod-selectable.mod-stackable.mod-responsiveCardList {
-				@include selectableStackableResponsiveCardList;
-			}
+		&.mod-selectable.mod-stackable.mod-responsiveCardList {
+			@include selectableStackableResponsiveCardList;
 		}
 	}
 
-	@layer states {
-		&:not(:has(.indexTable-head[inert='inert'])) {
-			@include focusedRow;
-			@include hoveredRow;
-		}
+	// generic states, non tied to a mod
+	&:not(:has(.indexTable-head[inert='inert'])) {
+		// focus-within
+		@include focusedRow;
 
-		@include openClosedRow;
+		// hover
+		@include hoveredRow;
 	}
+
+	// nested open / closed row
+	@include openClosedRow;
 }

package/src/components/inlineMessage/index.scss

@@ -1,28 +1,22 @@
 @use 'exports' as *;
 
 .inlineMessage {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 
-	@layer states {
-		&.is-success {
-			@include success;
-		}
+	&.is-success {
+		@include success;
+	}
 
-		&.is-warning {
-			@include warning;
-		}
+	&.is-warning {
+		@include warning;
+	}
 
-		&.is-error {
-			@include error;
-		}
+	&.is-error {
+		@include error;
 	}
 }

package/src/components/inputFramed/index.scss

@@ -2,41 +2,37 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 .inputFramed {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer states {
-		&:hover {
-			@include hover;
-		}
+	&:hover {
+		@include hover;
+	}
 
-		&:has(.inputFramed-header-input:checked) {
-			@include checked;
+	&:has(.inputFramed-header-input:checked) {
+		@include checked;
 
-			&:hover {
-				@include checkedHover;
-			}
+		&:hover {
+			@include checkedHover;
 		}
+	}
 
-		&:has(.inputFramed-header-input:focus-visible) {
-			@include a11y.focusVisible;
-		}
+	&:has(.inputFramed-header-input:focus-visible) {
+		@include a11y.focusVisible;
+	}
 
-		&:has(.inputFramed-header-input[aria-invalid="true"]) {
-			@include critical;
+	&:has(.inputFramed-header-input[aria-invalid="true"]) {
+		@include critical;
 
-			&:hover {
-				@include criticalHover;
-			}
+		&:hover {
+			@include criticalHover;
 		}
+	}
 
-		&:has(.inputFramed-header-input:disabled) {
-			&,
-			&:hover {
-				@include disabled;
-			}
+	&:has(.inputFramed-header-input:disabled) {
+		&,
+		&:hover {
+			@include disabled;
 		}
 	}
 
@@ -46,8 +42,6 @@
 }
 
 .inputFramedWrapper {
-	@layer components {
-		@include vars;
-		@include wrapper;
-	}
+	@include vars;
+	@include wrapper;
 }

package/src/components/label/index.scss

@@ -1,22 +1,18 @@
 @use 'exports' as *;
 
 .label {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-number {
-			@include number;
+	&.mod-number {
+		@include number;
 
-			&.mod-S {
-				@include numberS;
-			}
+		&.mod-S {
+			@include numberS;
+		}
 
-			&.mod-XS {
-				@include numberXS;
-			}
+		&.mod-XS {
+			@include numberXS;
 		}
 	}
 }

package/src/components/layout/index.scss

@@ -1,74 +1,68 @@
 @use 'exports' as *;
 
 .layout {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-navsideWithoutScrollbar {
-			@include navsideWithoutScrollbar;
-		}
+	&.mod-navsideWithoutScrollbar {
+		@include navsideWithoutScrollbar;
+	}
 
-		&.mod-contentHeaderStatic {
-			@include contentHeaderStatic;
-		}
+	&.mod-contentHeaderStatic {
+		@include contentHeaderStatic;
+	}
 
-		&.mod-contentSubheaderStatic {
-			@include contentSubheaderStatic;
-		}
+	&.mod-contentSubheaderStatic {
+		@include contentSubheaderStatic;
+	}
 
-		&.mod-navsideFooterStatic {
-			@include navsideFooterStatic;
-		}
+	&.mod-navsideFooterStatic {
+		@include navsideFooterStatic;
+	}
 
-		&.mod-asideFooterStatic {
-			@include asideFooterStatic;
-		}
+	&.mod-asideFooterStatic {
+		@include asideFooterStatic;
+	}
 
-		&.mod-contentFooterStatic {
-			@include contentFooterStatic;
-		}
+	&.mod-contentFooterStatic {
+		@include contentFooterStatic;
+	}
 
-		&.mod-asideBefore {
-			@include asideBefore;
-		}
+	&.mod-asideBefore {
+		@include asideBefore;
+	}
 
-		&.mod-headerRemoved {
-			@include headerRemoved;
-		}
+	&.mod-headerRemoved {
+		@include headerRemoved;
+	}
 
-		&.mod-subheaderRemoved {
-			@include subheaderRemoved;
-		}
+	&.mod-subheaderRemoved {
+		@include subheaderRemoved;
+	}
 
-		&.mod-asideRemoved {
-			@include asideRemoved;
-		}
+	&.mod-asideRemoved {
+		@include asideRemoved;
+	}
 
-		&.mod-asideFooterRemoved {
-			@include asideFooterRemoved;
-		}
+	&.mod-asideFooterRemoved {
+		@include asideFooterRemoved;
+	}
 
-		&.mod-contentFooterRemoved {
-			@include contentFooterRemoved;
-		}
+	&.mod-contentFooterRemoved {
+		@include contentFooterRemoved;
+	}
 
-		&.mod-navsideFooterRemoved {
-			@include navsideFooterRemoved;
-		}
+	&.mod-navsideFooterRemoved {
+		@include navsideFooterRemoved;
+	}
 
-		&.mod-navsideLarge {
-			@include navsideLarge;
-		}
+	&.mod-navsideLarge {
+		@include navsideLarge;
 	}
 }
 
 html {
-	@layer states {
-		&:is(.has-overlay, .withOverlay) {
-			@include overlay;
-		}
+	&:is(.has-overlay, .withOverlay) {
+		@include overlay;
 	}
 }

package/src/components/link/index.scss

@@ -1,24 +1,18 @@
 @use 'exports' as *;
 
 .link {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-icon {
-			@include icon;
-		}
+	&.mod-icon {
+		@include icon;
+	}
 
-		&.mod-decorationHover {
-			@include decorationHover;
-		}
+	&.mod-decorationHover {
+		@include decorationHover;
 	}
 
-	@layer states {
-		&:is(:disabled, .is-disabled) {
+	&:is(:disabled, .is-disabled) {
 		@include disabled;
 	}
-	}
 }

package/src/components/link/mods.scss

@@ -27,7 +27,7 @@
 			white-space: nowrap;
 
 			&::before {
-				// stylelint-disable-next-line no-irregular-whitespace
+				/* stylelint-disable-next-line no-irregular-whitespace */
 				content: ' ' / '';
 			}
 		}

package/src/components/list/index.scss

@@ -1,25 +1,21 @@
 @use 'exports' as *;
 
 .list {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
 .list-item {
-	@layer mods {
-		&.mod-clickable {
-			@include clickable;
-		}
+	&.mod-clickable {
+		@include clickable;
+	}
 
-		&.mod-draggable {
-			@include draggable;
-		}
+	&.mod-draggable {
+		@include draggable;
+	}
 
-		// .mod-actionsHidden is deprecated
-		&.mod-actionsHidden {
-			@include actionsHidden;
-		}
+	// .mod-actionsHidden is deprecated
+	&.mod-actionsHidden {
+		@include actionsHidden;
 	}
 }