@lucca-front/scss 8.2.2 → 9.0.0-alpha.3

package/src/_components.overridable.scss

@@ -1,54 +0,0 @@
-@import
-	"theming/components",
-	"components.override";
-
-@import
-	"components/action-icon",
-	"components/box",
-	"components/breadcrumbs",
-	"components/button",
-	'components/button-group',
-	"components/callout",
-	"components/card",
-	"components/chips",
-	"components/code",
-	"components/collapse",
-	"components/container",
-	"components/content-section",
-	"components/divider",
-	"components/empty-state",
-	"components/error-page",
-	"components/filters",
-	"components/form",
-	"components/gauge",
-	"components/grid",
-	"components/header",
-	"components/label",
-	"components/layout",
-	"components/link",
-	"components/list",
-	"components/loading",
-	"components/main",
-	"components/menu",
-	"components/nav-side",
-	"components/pagination",
-	"components/page-header",
-	"components/progress",
-	"components/section",
-	"components/table",
-	"components/timeline",
-	"components/table-of-content",
-	"components/tag",
-	"components/toasts",
-	"components/title-section",
-	"components/communicationBanner",
-
-	// Forms
-	"components/inputs/checkbox/checkbox",
-	"components/inputs/checkbox/checkboxesfield",
-	"components/inputs/textfield/textfield",
-	"components/inputs/radio/radio",
-	"components/inputs/radio/radiosfield",
-	"components/inputs/radio-buttons/radio-buttons",
-	"components/inputs/switch/switch",
-	"components/inputs/file/file";

package/src/_components.scss

@@ -1,51 +0,0 @@
-@import 'theming/components';
-
-@import 'components/action-icon';
-@import 'components/box';
-@import 'components/breadcrumbs';
-@import 'components/button';
-@import 'components/button-group';
-@import 'components/callout';
-@import 'components/card';
-@import 'components/chips';
-@import 'components/code';
-@import 'components/collapse';
-@import 'components/container';
-@import 'components/content-section';
-@import 'components/divider';
-@import 'components/empty-state';
-@import 'components/error-page';
-@import 'components/filters';
-@import 'components/form';
-@import 'components/gauge';
-@import 'components/grid';
-@import 'components/header';
-@import 'components/label';
-@import 'components/layout';
-@import 'components/link';
-@import 'components/list';
-@import 'components/loading';
-@import 'components/main';
-@import 'components/menu';
-@import 'components/nav-side';
-@import 'components/pagination';
-@import 'components/page-header';
-@import 'components/progress';
-@import 'components/section';
-@import 'components/table';
-@import 'components/timeline';
-@import 'components/table-of-content';
-@import 'components/tag';
-@import 'components/toasts';
-@import 'components/title-section';
-@import 'components/communicationBanner';
-
-// Forms
-@import 'components/inputs/checkbox/checkbox';
-@import 'components/inputs/checkbox/checkboxesfield';
-@import 'components/inputs/textfield/textfield';
-@import 'components/inputs/radio/radio';
-@import 'components/inputs/radio/radiosfield';
-@import 'components/inputs/radio-buttons/radio-buttons';
-@import 'components/inputs/switch/switch';
-@import 'components/inputs/file/file';

package/src/_icons.scss

@@ -1,32 +0,0 @@
-$font-path: _theme("icons.font-path", true);
-$font-name: _theme("icons.name", true);
-@import "node_modules/@lucca-front/icons/src/main";
-@import "node_modules/@lucca-front/icons/src/mixins";
-
-// Sizing mixin
-@mixin iconSizing($size) {
-	font-size: calc(#{_theme("sizes.#{$size}.font-size")} * 1.25); /* stylelint-disable-line function-calc-no-unspaced-operator */
-}
-
-.lucca-icon {
-	// all sizes
-	@each $name, $size in _getMap("sizes") {
-		&.size-#{$name} {
-			@include iconSizing($name);
-		}
-	}
-}
-
-@if _theme("icons.prefix", true) != lucca-icon {
-	.#{_theme("icons.prefix", true)} {
-		// default lucca-icon style
-		@extend %lucca-icon;
-		@include buildIconClasses;
-		// all sizes
-		@each $name, $size in _getMap("sizes") {
-			&.size-#{$name} {
-				@include iconSizing($name);
-			}
-		}
-	}
-}

package/src/_mixins.scss

@@ -1,8 +0,0 @@
-@import
-
-	"mixins/elevation",
-	"mixins/forms",
-	"mixins/loading",
-	"mixins/responsiveness",
-	"mixins/utilities",
-	"mixins/typo";

package/src/_shame.scss

@@ -1,12 +0,0 @@
-// SHAME! SHAME!
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-//
-// "My room is not messy; it is an obstable course designed to keep me fit"
-
-
-// https://github.com/necolas/normalize.css/issues/685
-// normalize 7+ dont hide the `x` added by webkit on input type=search
-// so we remove it ourselves
-[type="search"]::-webkit-search-cancel-button {
-	-webkit-appearance: none;  /* stylelint-disable-line property-no-vendor-prefix */
-}

package/src/_theming.overridable.scss

@@ -1,22 +0,0 @@
-$theme: () !default;
-$noCssVar: false !default;
-@import
-	"theming/utils",
-	"theming/get-set";
-
-
-@import
-	"theming/palettes",
-	"palettes.override",
-
-	"theming/sizes",
-	"sizes.override",
-
-	"theming/breakpoints",
-	"breakpoints.override",
-
-	"theming/icons",
-	"icons.override",
-
-	"theming/commons",
-	"commons.override";

package/src/_theming.scss

@@ -1,12 +0,0 @@
-$theme: () !default;
-$noCssVar: false !default;
-@import
-	"theming/utils",
-	"theming/get-set";
-
-@import
-	"theming/palettes",
-	"theming/sizes",
-	"theming/breakpoints",
-	"theming/icons",
-	"theming/commons";

package/src/_typo.scss

@@ -1,88 +0,0 @@
-html {
-	font-size: _theme("commons.font.size");
-	line-height: _theme("commons.font.line-height");
-}
-
-*, ::after, ::before {
-	box-sizing: border-box;
-}
-
-body {
-	background-color: _theme("commons.background.base");
-	color: _color("text.default");
-	font-family: _theme("commons.font.family");
-	font-size: _theme("sizes.standard.font-size");
-	line-height: _theme("sizes.standard.line-height");
-	vertical-align: middle;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	@include hx;
-}
-
-h1 {
-	@include h1;
-}
-
-h2 {
-	@include h2;
-}
-
-h3 {
-	@include h3;
-}
-
-h4 {
-	@include h4;
-}
-
-h5 {
-	@include h5;
-}
-
-h6 {
-	@include h6;
-}
-
-p {
-	margin: 0 0 _theme("spacings.small");
-}
-
-.mod-body1 {
-	font-size: _theme("sizes.standard.font-size");
-	line-height: _theme("sizes.standard.line-height");
-	padding-top: _theme("sizes.standard.vertical-padding");
-	padding-bottom: _theme("sizes.standard.vertical-padding");
-}
-
-.mod-body2 {
-	font-size: _theme("sizes.small.font-size");
-	line-height: _theme("sizes.small.line-height");
-	padding-top: _theme("sizes.small.vertical-padding");
-	padding-bottom: _theme("sizes.small.vertical-padding");
-}
-
-.mod-body3 {
-	font-size: _theme("sizes.smaller.font-size");
-	line-height: _theme("sizes.smaller.line-height");
-	padding-top: _theme("sizes.smaller.vertical-padding");
-	padding-bottom: _theme("sizes.smaller.vertical-padding");
-}
-
-.mod-caption {
-	font-style: italic;
-}
-
-b, strong {
-	font-weight: 600;
-}
-
-button {
-	font-family: _theme("commons.font.family");
-}
-
-abbr[title] {
-	border: none;
-	text-decoration: none;
-}

package/src/_utilities.scss

@@ -1,13 +0,0 @@
-@import
-
-	"utilities/animations",
-	"utilities/elevation",
-	"utilities/visibility",
-	"utilities/misc",
-	"utilities/flex",
-	"utilities/spacing",
-	"utilities/display",
-	"utilities/position",
-	"utilities/text",
-	"utilities/textfield",
-	"utilities/print";

package/src/components/_action-icon.scss

@@ -1,146 +0,0 @@
-// CLASSES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.actionIcon {
-	background-color: transparent;
-	border: 0;
-	border-radius: _component("commons.border.radius");
-	color: _component("actionIcon.color");
-	height: 2.5rem;
-	width: 2.5rem;
-	transition: background-color _theme("commons.animations.durations.fast") ease, color _theme("commons.animations.durations.fast") ease;
-	vertical-align: middle;
-	text-decoration: none;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-
-	& + & {
-		margin-left: 2px;
-	}
-
-	&:not([disabled], .is-disabled) {
-		&:hover {
-			background-color: _component("actionIcon.hover.background");
-			color: _component("actionIcon.hover.color");
-		}
-
-		&:focus {
-			background-color: _component("actionIcon.focus.background");
-			color: _component("actionIcon.focus.color");
-			outline: none;
-		}
-
-		&:active {
-			background-color: _component("actionIcon.default-palette.100");
-			color: _component("actionIcon.default-palette.800");
-		}
-	}
-
-	.lucca-icon, .#{_theme("icons.prefix", true)} {
-		font-size: 1.2rem;
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.actionIcon {
-	&.mod-invert {
-		color: _component("actionIcon.invert.color");
-
-		&:not([disabled], .is-disabled) {
-			&:hover, &:focus {
-				background-color: rgba(255, 255, 255, .1);
-				color: _component("actionIcon.invert.color");
-			}
-
-			&:active {
-				background-color: rgba(255, 255, 255, .2);
-			}
-		}
-	}
-
-	&.mod-outlined {
-		box-shadow: 0 0 0 1px _color("grey", 400);
-
-		& + & {
-			margin-left: 6px;
-		}
-
-		&:hover {
-			box-shadow: 0 0 0 1px _color("grey", 400), _theme("commons.box-shadow.xs");
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 1px _component("actionIcon.default-palette.400"), 0 0 0 4px _component("actionIcon.default-palette.100");
-		}
-
-		&:active {
-			background-color: _color("grey", 200);
-			color: _color("grey", 800);
-			box-shadow: 0 0 0 1px _component("actionIcon.default-palette.500"), 0 0 0 4px _component("actionIcon.default-palette.200");
-		}
-	}
-
-	&.mod-delete {
-		&:hover {
-			background-color: _color("error", 50);
-			color: _color("error", 800);
-		}
-
-		&:focus {
-			background-color: _color("error", 100);
-			color: _color("error", 800);
-		}
-
-		&:active {
-			background-color: _color("error", 200);
-			color: _color("error", 800);
-		}
-
-		&.mod-outlined {
-			&:hover {
-				box-shadow: 0 0 0 1px _color("error", 400), _theme("commons.box-shadow.xs");
-			}
-
-			&:focus {
-				box-shadow: 0 0 0 1px _color("error", 400), 0 0 0 4px _color("error", 100);
-			}
-
-			&:active {
-				box-shadow: 0 0 0 1px _color("error", 400), 0 0 0 4px _color("error", 100);
-			}
-		}
-	}
-
-	&.mod-small {
-		height: 2rem;
-		width: 2rem;
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.actionIcon {
-	&[disabled], &.is-disabled, &.is-loading {
-		color: _color("grey", 500);
-		pointer-events: none;
-		cursor: default;
-
-		&.mod-outlined {
-			box-shadow: 0 0 0 1px _color("grey", 200);
-		}
-	}
-
-	&.is-loading {
-		@include loading(1rem);
-
-		color: transparent;
-		position: relative;
-	}
-}

package/src/components/_box.scss

@@ -1,44 +0,0 @@
-.box {
-	background-color: white;
-	border-radius: _component("box.border.radius");
-	display: block;
-	margin: _component("box.margin");
-	padding: _component("box.padding");
-	position: relative;
-}
-
-.box-close {
-	font-size: 1rem;
-	position: absolute;
-	right: .25rem;
-	top: .25rem;
-	z-index: 1;
-}
-
-.box {
-	&.mod-grey {
-		background-color: _component("box.background");
-	}
-
-	&.mod-toggle {
-		margin-top: _component("box.toggle.arrow.size");
-
-		&::before {
-			border-color: transparent transparent white;
-			border-style: solid;
-			border-width: 0 _component("box.toggle.arrow.size") _component("box.toggle.arrow.size") _component("box.toggle.arrow.size");
-			content: "";
-			height: 0;
-			left: _component("box.toggle.arrow.left");
-			position: absolute;
-			bottom: 100%;
-			width: 0;
-		}
-
-		&.mod-grey {
-			&::before {
-				border-color: transparent transparent _component("box.background");
-			}
-		}
-	}
-}

package/src/components/_breadcrumbs.scss

@@ -1,82 +0,0 @@
-.breadcrumbs-list {
-	display: flex;
-	flex-wrap: wrap;
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-}
-
-.breadcrumbs-list-item {
-	align-items: center;
-	display: flex;
-	font-size: _theme("sizes.small.font-size");
-	line-height: _theme("sizes.small.line-height");
-
-	&:not(:first-child) {
-		&::before {
-			@include makeIcon("chevron_east");
-			padding: 0 _theme("spacings.smallest");
-		}
-	}
-}
-
-.breadcrumbs-list-item-action {
-	color: _color("grey", "600");
-	transition: color _theme("commons.animations.durations.fast");
-	text-decoration: none;
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background-color: transparent;
-	cursor: pointer;
-
-	&:focus,
-	&:hover {
-		color: _color("grey", "800");
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.breadcrumbs-list-item-action {
-	&.is-active,
-	&[aria-current="page"] {
-		text-decoration: none;
-		cursor: default;
-		font-weight: 600;
-
-		&,
-		&:hover {
-			color: _color("grey", "600");
-		}
-	}
-}
-
-// MODS
-// ▒▒▒▒
-
-.breadcrumbs.mod-compact {
-	.breadcrumbs-list-item {
-		// two items
-		&:nth-last-child(2):first-child,
-		&:nth-last-child(2):first-child + .breadcrumbs-list-item {
-			&:last-child {
-				@include mask;
-			}
-
-			&:first-child {
-				.breadcrumbs-list-item-action {
-					display: flex;
-					align-items: center;
-
-					&::before {
-						@include makeIcon("format_undo");
-						padding-right: _theme("spacings.smallest");
-					}
-				}
-			}
-		}
-	}
-}

package/src/components/_button-group.scss

@@ -1,118 +0,0 @@
-.button-group {
-	display: inline-flex;
-	list-style-type: none;
-	padding: 0;
-	margin: 0;
-	gap: _theme('commons.divider.width');
-	border-radius: _component('button.border.radius');
-	overflow: hidden;
-
-	// to separate the legacy (without list) from the new version (with ul)
-	&:is(ul) {
-		flex-wrap: wrap;
-
-		.button.mod-more {
-			height: 100%;
-			min-height: 2.25rem;
-
-			&.mod-small {
-				min-height: 2rem;
-			}
-
-			&.mod-smaller {
-				min-height: 1.5rem;
-			}
-
-			&::before {
-				content: none;
-			}
-		}
-	}
-
-	&:focus-within {
-		box-shadow: 0 0 0 4px _color('primary', 200);
-	}
-
-	&.mod-outlined {
-		background-color: _color('grey', 400);
-		box-shadow: 0 0 0 1px _color('grey', 400);
-
-		.button {
-			&.mod-outline,
-			&.mod-outlined {
-				box-shadow: none;
-			}
-		}
-
-		&:focus-within {
-			box-shadow: 0 0 0 1px _color('grey', 400), 0 0 0 4px _color('primary', 200);
-		}
-	}
-
-	.button {
-		border-radius: 0;
-		display: block;
-		margin: 0;
-		padding-left: _theme('spacings.small');
-		padding-right: _theme('spacings.small');
-		position: relative;
-		flex-grow: 1;
-		white-space: normal;
-
-		&:first-child {
-			border-radius: _component('button.border.radius') 0 0 _component('button.border.radius');
-		}
-
-		&:last-child {
-			border-radius: 0 _component('button.border.radius') _component('button.border.radius') 0;
-		}
-
-		&:not(:first-child) {
-			&.mod-outline,
-			&.mod-outlined {
-				margin-left: -2px;
-			}
-		}
-
-		&:not([disabled], .is-disabled) {
-			&:hover,
-			&:focus {
-				z-index: 1;
-			}
-
-			&:focus {
-				background-color: _color('primary', 600);
-				box-shadow: none;
-			}
-		}
-	}
-
-	.button-group-item {
-		flex-grow: 1;
-
-		.button {
-			width: 100%;
-			border-radius: 0;
-		}
-	}
-
-	// palette colors
-	@each $name, $palette in _getMap('palettes') {
-		&.palette-#{$name} {
-			&:focus-within {
-				box-shadow: 0 0 0 4px _color($name, 200);
-			}
-
-			.button {
-				&:not([disabled], .is-disabled) {
-					@include buttonColoring($name);
-
-					&:focus {
-						background-color: _color($name, 600);
-						box-shadow: none;
-					}
-				}
-			}
-		}
-	}
-}