@lucca-front/ng 8.2.2 → 9.0.0-alpha.1

package/style/components/_popup.scss

@@ -1,19 +1,32 @@
+@use '../../scss/src/commons/utils/media';
+
+:root {
+  --components-popup-panel-background-color: #FFFFFF;
+  --components-popup-size-small: 32rem;
+  --components-popup-size-medium: 42rem;
+  --components-popup-size-large: 60rem;
+  --components-popup-padding-horizontal: 2rem;
+  --components-popup-padding-vertical: 1rem;
+}
+
 .lu-popup-panel {
-	@include elevate(3);
+	box-shadow: var(--commons-elevations-elevation-3);
 	position: relative;
-	background-color: _component("popup.panel.background-color");
-	border-radius: _theme("commons.border.radius");
-	width: _component("popup.sizes.medium");
+	background-color: var(--components-popup-panel-background-color);
+	border-radius: var(--commons-border-radius);
+	width: var(--components-popup-size-medium);
 	max-width: 95%;
 	max-height: 90vh;
 	overflow: auto;
-	animation: popupAnimation _theme("commons.animations.durations.fast") cubic-bezier(0.25, 0.8, 0.25, 1);
+	animation: popupAnimation var(--commons-animations-durations-fast) cubic-bezier(0.25, 0.8, 0.25, 1);
 
-	@each $panel-size, $size-obj in _getMap("components.popup.sizes") {
-		&.mod-#{$panel-size}, &.size-#{$panel-size} {
-			width: _component("popup.sizes."+$panel-size);
-		}
-	}
+  &.mod-small, &.size-small {
+    width: var(--components-popup-size-small);
+  }
+
+  &.mod-large, &.size-large {
+    width: var(--components-popup-size-large);
+  }
 }
 
 .lu-modal-panel-inner {
@@ -23,7 +36,7 @@
 }
 
 .lu-modal-header {
-	padding: _component("popup.padding.vertical") 4rem _component("popup.padding.vertical") _component("popup.padding.horizontal");
+	padding: var(--components-popup-padding-vertical) 4rem var(--components-popup-padding-vertical) var(--components-popup-padding-horizontal);
 	position: relative;
 }
 
@@ -43,21 +56,21 @@
 	right: .6rem;
 	top: .6rem;
 	border-radius: 50%;
-	transition: background _theme("commons.animations.durations.fast") ease;
+	transition: background var(--commons-animations-durations-fast) ease;
 
 	.lucca-icon {
 		font-size: 1.5rem;
-		color: _color("text.default");
+		color: var(--palettes-grey-700);
 	}
 
 	&:hover,
 	&:focus {
-		background-color: _component("button.default-palette.100");
+		background-color: var(--palettes-primary-100);
 	}
 }
 
 .lu-modal-content {
-	padding: 0 _component("popup.padding.horizontal");
+	padding: 0 var(--components-popup-padding-horizontal);
 	overflow: auto;
 	height: auto;
 
@@ -65,7 +78,7 @@
 	&:after {
 		content: '';
 		display: block;
-		padding-bottom: _component("popup.padding.vertical");
+		padding-bottom: var(--components-popup-padding-vertical);
 	}
 
 	&.mod-noPadding {
@@ -78,8 +91,8 @@
 }
 
 .lu-modal-footer {
-	border-top: 1px solid _theme("commons.divider.color");
-	padding: _theme("spacings.smaller") _theme("spacings.small") _theme("spacings.smaller") _component("popup.padding.horizontal");
+	border-top: var(--commons-divider-width) solid var(--commons-divider-color);
+	padding: var(--spacings-smaller) var(--spacings-small) var(--spacings-smaller) var(--components-popup-padding-horizontal);
 	display: flex;
 	margin-top: auto;
 	align-items: center;
@@ -103,7 +116,7 @@
 	}
 }
 
-@include media_smaller_than("xxs") {
+@include media.smallerThan('xxs') {
 	.lu-popup-panel {
 		border-radius: 0;
 		max-width: none;
@@ -134,8 +147,8 @@
 			}
 		}
 		.lu-modal-content-title {
-			color: _color("grey", 800);
-			font-size: _theme('sizes.bigger.font-size');
+			color: var(--palettes-grey-800);
+			font-size: var(--sizes-biiger-font-size);
 			margin-top: 2.5rem;
 		}
 		.button {

package/style/components/_sidepanel.scss

@@ -1,37 +1,43 @@
-.lu-popup-panel {
-	&.mod-sidepanel {
-		position: fixed !important;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		width: _component("sidepanel.sizes.small");
-		max-width: 100%;
-		max-height: 100vh;
-		border-radius: 0;
-		animation-name: sidepanelAnimation;
-		transform-origin: center center;
-
-		@each $panel-size, $size-obj in _getMap("components.sidepanel.sizes") {
-			&.mod-#{$panel-size}, &.size-#{$panel-size} {
-				width: _component("sidepanel.sizes."+$panel-size);
-			}
-		}
-	}
+:root {
+  --components-sidepanel-size-small: 40rem;
+  --components-sidepanel-size-medium: 55rem;
+  --components-sidepanel-size-large: 70rem;
 }
 
-.lu-sidepanel-panel-inner {
-	display: flex;
-	overflow: auto;
-	height: 100%;
-	flex-flow: column;
-}
+// .lu-popup-panel {
+// 	&.mod-sidepanel {
+// 		position: fixed !important;
+// 		top: 0;
+// 		right: 0;
+// 		bottom: 0;
+// 		width: _component("sidepanel.sizes.small");
+// 		max-width: 100%;
+// 		max-height: 100vh;
+// 		border-radius: 0;
+// 		animation-name: sidepanelAnimation;
+// 		transform-origin: center center;
 
-@keyframes sidepanelAnimation {
-	from {
-		transform: translate(_theme("commons.animations.translate"), 0);
-	}
+// 		@each $panel-size, $size-obj in _getMap("components.sidepanel.sizes") {
+// 			&.mod-#{$panel-size}, &.size-#{$panel-size} {
+// 				width: _component("sidepanel.sizes."+$panel-size);
+// 			}
+// 		}
+// 	}
+// }
 
-	to {
-		transform: translate(0, 0);
-	}
-}
+// .lu-sidepanel-panel-inner {
+// 	display: flex;
+// 	overflow: auto;
+// 	height: 100%;
+// 	flex-flow: column;
+// }
+
+// @keyframes sidepanelAnimation {
+// 	from {
+// 		transform: translate(_theme("commons.animations.translate"), 0);
+// 	}
+
+// 	to {
+// 		transform: translate(0, 0);
+// 	}
+// }

package/style/components/cdk/_dragDrop.scss

@@ -1,68 +1,68 @@
-@import '~@lucca-front/scss/src/_mixins';
+// @import '~@lucca-front/scss/src/_mixins';
 
-.cdk-drag-placeholder {
-	box-shadow: fakeborderoverlay(_color("grey", "200"));
-	background-color: _color("grey", "100");
-	* {
-		opacity: 0;
-	}
-}
+// .cdk-drag-placeholder {
+// 	box-shadow: fakeborderoverlay(_color("grey", "200"));
+// 	background-color: _color("grey", "100");
+// 	* {
+// 		opacity: 0;
+// 	}
+// }
 
-.cdk-drag-handle,
-.cdk-drag-placeholder {
-	cursor: move;
-}
+// .cdk-drag-handle,
+// .cdk-drag-placeholder {
+// 	cursor: move;
+// }
 
-.dragDrop-card {
-	z-index: 1;
-}
+// .dragDrop-card {
+// 	z-index: 1;
+// }
 
-.dragDrop-list {
-	border-radius: _theme("commons.border.radius", true);
-	border-radius: _theme("commons.border.radius");
-}
+// .dragDrop-list {
+// 	border-radius: _theme("commons.border.radius", true);
+// 	border-radius: _theme("commons.border.radius");
+// }
 
-.dragDrop-item {
-	cursor: grab;
-	&:not(.cdk-drag-placeholder) {
-		&:first-of-type {
-			border-top-left-radius: _theme("commons.border.radius", true);
-			border-top-left-radius: _theme("commons.border.radius");
-			border-top-right-radius: _theme("commons.border.radius", true);
-			border-top-right-radius: _theme("commons.border.radius");
-		}
-		&:last-of-type {
-			border-bottom-left-radius: _theme("commons.border.radius", true);
-			border-bottom-left-radius: _theme("commons.border.radius");
-			border-bottom-right-radius: _theme("commons.border.radius", true);
-			border-bottom-right-radius: _theme("commons.border.radius");
-		}
-	}
-	&:active {
-		cursor: grabbing;
-	}
-}
-.dragDrop-item-content {
-	padding: _theme("spacings.smaller", true);
-	padding: _theme("spacings.smaller");
-}
+// .dragDrop-item {
+// 	cursor: grab;
+// 	&:not(.cdk-drag-placeholder) {
+// 		&:first-of-type {
+// 			border-top-left-radius: _theme("commons.border.radius", true);
+// 			border-top-left-radius: _theme("commons.border.radius");
+// 			border-top-right-radius: _theme("commons.border.radius", true);
+// 			border-top-right-radius: _theme("commons.border.radius");
+// 		}
+// 		&:last-of-type {
+// 			border-bottom-left-radius: _theme("commons.border.radius", true);
+// 			border-bottom-left-radius: _theme("commons.border.radius");
+// 			border-bottom-right-radius: _theme("commons.border.radius", true);
+// 			border-bottom-right-radius: _theme("commons.border.radius");
+// 		}
+// 	}
+// 	&:active {
+// 		cursor: grabbing;
+// 	}
+// }
+// .dragDrop-item-content {
+// 	padding: _theme("spacings.smaller", true);
+// 	padding: _theme("spacings.smaller");
+// }
 
-.cdk-drag-preview {
-	z-index: 9999 !important;
-	box-sizing: border-box;
-	box-shadow: fakeborderoverlay(_color("secondary", "200"));
-	background-color: _color("secondary", "50", true);
-	background-color: _color("secondary", "50");
-	border-radius: _theme("commons.border.radius", true);
-	border-radius: _theme("commons.border.radius");
-	cursor: grabbing;
-}
+// .cdk-drag-preview {
+// 	z-index: 9999 !important;
+// 	box-sizing: border-box;
+// 	box-shadow: fakeborderoverlay(_color("secondary", "200"));
+// 	background-color: _color("secondary", "50", true);
+// 	background-color: _color("secondary", "50");
+// 	border-radius: _theme("commons.border.radius", true);
+// 	border-radius: _theme("commons.border.radius");
+// 	cursor: grabbing;
+// }
 
-.cdk-drop-list-dragging {
-	.dragDrop-item {
-		cursor: grabbing;
-	}
-	.cdk-drag:not(.cdk-drag-placeholder) {
-		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-	}
-}
+// .cdk-drop-list-dragging {
+// 	.dragDrop-item {
+// 		cursor: grabbing;
+// 	}
+// 	.cdk-drag:not(.cdk-drag-placeholder) {
+// 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+// 	}
+// }

package/style/components/cdk/_global.scss

@@ -4,9 +4,6 @@
 	pointer-events: none;
 	top: 0;
 	width: 100%;
-}
-
-.cdk-global-overlay-wrapper {
 	display: flex;
 	position: absolute;
 	z-index: 1000;
@@ -14,10 +11,10 @@
 
 .cdk-global-scrollblock {
 	&,
-    body {
-        touch-action: none;
-        overscroll-behavior: none;
-        -webkit-overflow-scrolling: auto;
-        overflow: hidden;
-    }
-}
+	body {
+		touch-action: none;
+		overscroll-behavior: none;
+		-webkit-overflow-scrolling: auto;
+		overflow: hidden;
+	}
+}

package/style/components/cdk/_misc.scss

@@ -8,5 +8,5 @@
 	position: absolute !important;
 	width: 1px !important;
 	white-space: nowrap !important;
-	contain: paint !important
-}
+	contain: paint !important;
+}

package/style/components/cdk/_overlay.scss

@@ -7,6 +7,7 @@
 	top: 0;
 	width: 100%;
 }
+
 .cdk-overlay-connected-position-bounding-box {
 	position: absolute;
 	z-index: 1000;
@@ -47,19 +48,18 @@
 }
 
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
-	opacity: _component("popup.backdrop.opacity");
-	animation: fadeInBackdrop _theme("commons.animations.durations.fast") ease-out;
+	opacity: _component('popup.backdrop.opacity');
+	animation: fadeInBackdrop _theme('commons.animations.durations.fast') ease-out;
 }
 
 // MODS
 // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
 
 .cdk-overlay-pane {
-
 	/* Option picker */
 
 	&.mod-optionPicker {
 		min-width: 13rem;
 		max-width: 30rem;
 	}
-}
+}

package/style/components/cdk/_textarea.scss

@@ -1,13 +1,13 @@
-.cdk-textarea-autosize {
-	resize: none;
-	line-height: 1.3;
-	box-sizing: content-box;
-	width: calc(100% - (2 * #{_component("textfield.input.padding-horizontal")}));
-}
+// .cdk-textarea-autosize {
+// 	resize: none;
+// 	line-height: 1.3;
+// 	box-sizing: content-box;
+// 	width: calc(100% - (2 * #{_component("textfield.input.padding-horizontal")}));
+// }
 
-.cdk-textarea-autosize-measuring {
-	height: auto !important;
-	overflow: hidden !important;
-	padding: 2px 0 !important;
-	box-sizing: content-box !important;
-}
+// .cdk-textarea-autosize-measuring {
+// 	height: auto !important;
+// 	overflow: hidden !important;
+// 	padding: 2px 0 !important;
+// 	box-sizing: content-box !important;
+// }

package/style/definitions/option/_option-item.scss

@@ -1,121 +1,121 @@
-@import '~@lucca-front/icons/src/_mixins';
+// @import '~@lucca-front/icons/src/_mixins';
 
-@mixin optionItemStyle {
-	:host {
-		display: block;
-	}
+// @mixin optionItemStyle {
+// 	:host {
+// 		display: block;
+// 	}
 	
-	.optionItem {
-		position: relative;
-	}
+// 	.optionItem {
+// 		position: relative;
+// 	}
 
-	.optionItem-value {
-		display: block;
-		cursor: pointer;
-		padding: #{_component("options.item.padding-vertical", true)} #{_component("options.item.padding-horizontal", true)};
-		padding: _component("options.item.padding-vertical") _component("options.item.padding-horizontal");
-		transition: background 50ms ease;
+// 	.optionItem-value {
+// 		display: block;
+// 		cursor: pointer;
+// 		padding: #{_component("options.item.padding-vertical", true)} #{_component("options.item.padding-horizontal", true)};
+// 		padding: _component("options.item.padding-vertical") _component("options.item.padding-horizontal");
+// 		transition: background 50ms ease;
 
-		&.is-selected {
-			background: _theme('commons.selected',true);
-			background: _theme('commons.selected');
-		}
+// 		&.is-selected {
+// 			background: _theme('commons.selected',true);
+// 			background: _theme('commons.selected');
+// 		}
 
-		&:hover, &.is-highlighted, &.is-focus{
-			background: _theme('commons.highlight',true);
-			background: _theme('commons.highlight');
-		}
-	}
+// 		&:hover, &.is-highlighted, &.is-focus{
+// 			background: _theme('commons.highlight',true);
+// 			background: _theme('commons.highlight');
+// 		}
+// 	}
 
-	:host-context(.lu-select-value) {
-		.optionItem-value {
-			padding: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
+// 	:host-context(.lu-select-value) {
+// 		.optionItem-value {
+// 			padding: 0;
+// 			overflow: hidden;
+// 			text-overflow: ellipsis;
 
-			&:hover, &.is-focus, &.is-highlighted {
-				background: inherit;
-			}
-		}
-	}
+// 			&:hover, &.is-focus, &.is-highlighted {
+// 				background: inherit;
+// 			}
+// 		}
+// 	}
 
-	:host-context(.mod-multiple) {
-		.optionItem-value {
-			position: relative;
-			padding-left: _component("options.item.multiple-padding", true);
-			padding-left: _component("options.item.multiple-padding");
+// 	:host-context(.mod-multiple) {
+// 		.optionItem-value {
+// 			position: relative;
+// 			padding-left: _component("options.item.multiple-padding", true);
+// 			padding-left: _component("options.item.multiple-padding");
 
-			&::after, &::before {
-				display: block;
-				position: absolute;
-				left: _component("options.checkbox.left", true);
-				left: _component("options.checkbox.left");
-				top: 50%;
-				transform: translateY(-50%);
-			}
+// 			&::after, &::before {
+// 				display: block;
+// 				position: absolute;
+// 				left: _component("options.checkbox.left", true);
+// 				left: _component("options.checkbox.left");
+// 				top: 50%;
+// 				transform: translateY(-50%);
+// 			}
 
-			&::before {
-				border-radius: _component("options.checkbox.border.radius", true);
-				border-radius: _component("options.checkbox.border.radius");
-				box-shadow: inset 0 0 0 2px _component("options.checkbox.border.color", true);
-				box-shadow: inset 0 0 0 2px _component("options.checkbox.border.color");
-				content: "";
-				display: block;
-				height: _component("options.checkbox.size", true);
-				height: _component("options.checkbox.size");
-				transition: all 100ms ease;
-				width: _component("options.checkbox.size", true);
-				width: _component("options.checkbox.size");
-			}
+// 			&::before {
+// 				border-radius: _component("options.checkbox.border.radius", true);
+// 				border-radius: _component("options.checkbox.border.radius");
+// 				box-shadow: inset 0 0 0 2px _component("options.checkbox.border.color", true);
+// 				box-shadow: inset 0 0 0 2px _component("options.checkbox.border.color");
+// 				content: "";
+// 				display: block;
+// 				height: _component("options.checkbox.size", true);
+// 				height: _component("options.checkbox.size");
+// 				transition: all 100ms ease;
+// 				width: _component("options.checkbox.size", true);
+// 				width: _component("options.checkbox.size");
+// 			}
 
-			&::after {
-				color: white;
-				font-size: .8rem;
-				@include makeIcon("tick");
-				line-height: _component("options.checkbox.size", true);
-				line-height: _component("options.checkbox.size");
-				padding-top: .05rem;
-				position: absolute;
-				text-align: center;
-				transform: translateY(-50%) scale(0);
-				transition: all 100ms ease;
-				width: _component("options.checkbox.size", true);
-				width: _component("options.checkbox.size");
-			}
+// 			&::after {
+// 				color: white;
+// 				font-size: .8rem;
+// 				@include makeIcon("tick");
+// 				line-height: _component("options.checkbox.size", true);
+// 				line-height: _component("options.checkbox.size");
+// 				padding-top: .05rem;
+// 				position: absolute;
+// 				text-align: center;
+// 				transform: translateY(-50%) scale(0);
+// 				transition: all 100ms ease;
+// 				width: _component("options.checkbox.size", true);
+// 				width: _component("options.checkbox.size");
+// 			}
 
-			&.is-selected {
-				&::before {
-					background-color: _component("options.checkbox.color", true);
-					background-color: _component("options.checkbox.color");
-					box-shadow: inset 0 0 0 2px #{_component("options.checkbox.color", true)};
-					box-shadow: inset 0 0 0 2px _component("options.checkbox.color");
-				}
+// 			&.is-selected {
+// 				&::before {
+// 					background-color: _component("options.checkbox.color", true);
+// 					background-color: _component("options.checkbox.color");
+// 					box-shadow: inset 0 0 0 2px #{_component("options.checkbox.color", true)};
+// 					box-shadow: inset 0 0 0 2px _component("options.checkbox.color");
+// 				}
 
-				&::after {
-					transform: translateY(-50%) scale(1);
-				}
-			}
+// 				&::after {
+// 					transform: translateY(-50%) scale(1);
+// 				}
+// 			}
 
-			&:hover {
-				&::before {
-					box-shadow: inset 0 0 0 2px #{_component("options.checkbox.color", true)};
-					box-shadow: inset 0 0 0 2px _component("options.checkbox.color");
-				}
-			}
-		}
+// 			&:hover {
+// 				&::before {
+// 					box-shadow: inset 0 0 0 2px #{_component("options.checkbox.color", true)};
+// 					box-shadow: inset 0 0 0 2px _component("options.checkbox.color");
+// 				}
+// 			}
+// 		}
 
-		&.establishmentOption {
-			.optionItem-value {
-				position: relative;
-				padding-left: calc(2 * #{_component("options.item.padding-horizontal", true)} + #{_component("options.checkbox.size", true)} + #{_theme("spacings.smaller", true)});
-				padding-left: calc(2 * #{_component("options.item.padding-horizontal")} + #{_component("options.checkbox.size")} + #{_theme("spacings.smaller")});
-			}
-			.optionItem-value {
-				&::before, &::after {
-					left: calc(2 * #{_component("options.item.padding-horizontal", true)});
-					left: calc(2 * #{_component("options.item.padding-horizontal")});
-				}
-			}
-		}
-	}
-}
+// 		&.establishmentOption {
+// 			.optionItem-value {
+// 				position: relative;
+// 				padding-left: calc(2 * #{_component("options.item.padding-horizontal", true)} + #{_component("options.checkbox.size", true)} + #{_theme("spacings.smaller", true)});
+// 				padding-left: calc(2 * #{_component("options.item.padding-horizontal")} + #{_component("options.checkbox.size")} + #{_theme("spacings.smaller")});
+// 			}
+// 			.optionItem-value {
+// 				&::before, &::after {
+// 					left: calc(2 * #{_component("options.item.padding-horizontal", true)});
+// 					left: calc(2 * #{_component("options.item.padding-horizontal")});
+// 				}
+// 			}
+// 		}
+// 	}
+// }