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

package/src/mixins/_loading.scss

@@ -1,71 +0,0 @@
-@mixin loading($size: 1rem) {
-	&::before {
-		border: 2px solid _theme("commons.loading.background");
-		border-radius: 50%;
-		bottom: 0;
-		content: "";
-		display: block;
-		height: $size;
-		left: 0;
-		line-height: .8rem;
-		margin: auto;
-		position: absolute;
-		right: 0;
-		top: 0;
-		width: $size;
-	}
-
-	&::after {
-		animation: rotating _theme("commons.loading.speed") linear infinite;
-		border: 2px solid _theme("commons.loading.frontground");
-		border-color: _theme("commons.loading.frontground") transparent transparent transparent;
-		border-radius: 50%;
-		bottom: 0;
-		content: "";
-		display: block;
-		height: $size;
-		left: 0;
-		line-height: .8rem;
-		margin: auto;
-		position: absolute;
-		right: 0;
-		top: 0;
-		width: $size;
-	}
-}
-
-@keyframes rotating {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@mixin loadingGradientAnimation($color, $withBackground: false, $bgColor: null, $duration: 2s) {
-		animation: loadingGradientKeyframes $duration linear infinite;
-		animation-fill-mode: forwards;
-		@if $withBackground {
-			@if $bgColor != null {
-				background-color: $bgColor linear-gradient(315deg, transparent 40%, $color 50%, transparent 100%);
-			}
-			@else {
-				background-color: $color linear-gradient(315deg, transparent 40%, $color 50%, transparent 100%);
-			}
-		}
-		@else {
-			background-color: linear-gradient(315deg, transparent 40%, $color 50%, transparent 100%);
-		}
-		background-repeat: no-repeat;
-		background-size: 400% 100%;
-}
-
-@keyframes loadingGradientKeyframes {
-	0% {
-		background-position: 100% 0%;
-	}
-	100% {
-		background-position: -100% 0%;
-	}
-}

package/src/mixins/_responsiveness.scss

@@ -1,29 +0,0 @@
-@use "sass:math";
-
-@mixin media_larger_than($breakpoint, $reversed: false) {
-	$reverse: "";
-
-	@if $reversed {
-		$reverse: unquote("not all and");
-	} @else {
-		$reverse: unquote("");
-	}
-
-	@if map-has-key(_getMap("breakpoints"), $breakpoint) {
-		$breakpointInEm: math.div(_theme("breakpoints.#{$breakpoint}.breakAt", true), 16px) * 1em;
-
-		@media #{$reverse "(min-width:" $breakpointInEm ")"} {
-			@content;
-		}
-	} @else {
-		@media #{$reverse "(min-width:" $breakpoint")"} {
-			@content;
-		}
-	}
-}
-
-@mixin media_smaller_than($breakpoint) {
-	@include media_larger_than($breakpoint, true) {
-		@content;
-	}
-}

package/src/mixins/_typo.scss

@@ -1,65 +0,0 @@
-@mixin hx($suffix:"") {
-	color: _color("text.dark");
-	font-weight: 600 #{$suffix};
-}
-
-@mixin h1($suffix:"") {
-	font-size: _theme("sizes.biggest.font-size") #{$suffix};
-	line-height: _theme("sizes.biggest.line-height") #{$suffix};
-	padding-top: _theme('sizes.biggest.vertical-padding') #{$suffix};
-	padding-bottom: _theme('sizes.biggest.vertical-padding') #{$suffix};
-	margin-top: 0;
-	margin-bottom: _theme("spacings.small");
-
-	&.mod-headline {
-		font-size: _theme("sizes.headline.font-size") #{$suffix};
-		line-height: _theme("sizes.headline.line-height") #{$suffix};
-		padding-top: _theme('sizes.headline.vertical-padding') #{$suffix};
-		padding-bottom: _theme('sizes.headline.vertical-padding') #{$suffix};
-	}
-}
-
-@mixin h2($suffix:"") {
-	font-size: _theme("sizes.bigger.font-size") #{$suffix};
-	line-height: _theme("sizes.bigger.line-height") #{$suffix};
-	padding-top: _theme('sizes.bigger.vertical-padding') #{$suffix};
-	padding-bottom: _theme('sizes.bigger.vertical-padding') #{$suffix};
-	margin-top: 0;
-	margin-bottom: _theme("spacings.small");
-}
-
-@mixin h3($suffix:"") {
-	font-size: _theme("sizes.big.font-size") #{$suffix};
-	line-height: _theme("sizes.big.line-height") #{$suffix};
-	padding-top: _theme('sizes.big.vertical-padding') #{$suffix};
-	padding-bottom: _theme('sizes.big.vertical-padding') #{$suffix};
-	margin-top: 0;
-	margin-bottom: _theme("spacings.small");
-}
-
-@mixin h4($suffix:"") {
-	font-size: _theme("sizes.standard.font-size") #{$suffix};
-	line-height: _theme("sizes.standard.line-height") #{$suffix};
-	padding-top: _theme('sizes.standard.vertical-padding') #{$suffix};
-	padding-bottom: _theme('sizes.standard.vertical-padding') #{$suffix};
-	margin-top: 0;
-	margin-bottom: _theme("spacings.small");
-}
-
-@mixin h5($suffix:"") {
-	font-size: _theme("sizes.small.font-size") #{$suffix};
-	line-height: _theme("sizes.small.line-height") #{$suffix};
-	padding-top: _theme('sizes.small.vertical-padding') #{$suffix};
-	padding-bottom: _theme('sizes.small.vertical-padding') #{$suffix};
-	margin-top: 0;
-	margin-bottom: _theme("spacings.small");
-}
-
-@mixin h6($suffix:"") {
-	font-size: _theme("sizes.smaller.font-size") #{$suffix};
-	line-height: _theme("sizes.smaller.line-height") #{$suffix};
-	padding-top: _theme('sizes.smaller.vertical-padding') #{$suffix};
-	padding-bottom: _theme('sizes.smaller.vertical-padding') #{$suffix};
-	margin-top: 0;
-	margin-bottom: _theme("spacings.small");
-}

package/src/mixins/_utilities.scss

@@ -1,77 +0,0 @@
-@function fakeborderoverlay($fakeborderoverlaycolor: currentColor, $fakeborderoverlaywidth: 1px) {
-	@return   ($fakeborderoverlaywidth * -1) 0                              $fakeborderoverlaycolor,       // left                outside
-			0 ($fakeborderoverlaywidth * -1)                                $fakeborderoverlaycolor,       // top                 outside
-			  ($fakeborderoverlaywidth * -1) ($fakeborderoverlaywidth * -1) $fakeborderoverlaycolor,       // top left     corner outside
-			  ($fakeborderoverlaywidth * -1) ($fakeborderoverlaywidth * -1) $fakeborderoverlaycolor inset; // bottom right         inside
-}
-
-@mixin mask($suffix: "!important") {
-	border: 0 #{$suffix};
-	clip: rect(1px, 1px, 1px, 1px) #{$suffix};
-	height: 1px #{$suffix};
-	margin: -1px #{$suffix};
-	overflow: hidden #{$suffix};
-	padding: 0 #{$suffix};
-	position: absolute #{$suffix};
-	width: 1px #{$suffix};
-	white-space: nowrap #{$suffix};
-	contain: paint #{$suffix};
-}
-
-@mixin listReset($suffix: "") {
-	list-style-type: none #{$suffix};
-	padding: 0 #{$suffix};
-	margin: 0 #{$suffix};
-}
-
-@mixin definitionListReset($suffix: "") {
-	padding: 0 #{$suffix};
-	
-	&,
-	& > dd,
-	& > div > dd {
-		margin: 0 #{$suffix};
-	}
-}
-
-@mixin buttonReset($suffix: "") {
-	cursor: pointer #{$suffix};
-	font: inherit #{$suffix};
-	color: inherit #{$suffix};
-	background-color: transparent #{$suffix};
-	display: block #{$suffix};
-	padding: 0 #{$suffix};
-	border: 0 #{$suffix};
-	width: 100% #{$suffix};
-	text-align: left #{$suffix};
-}
-
-@mixin ie11() {
-	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-		@content;
-	}
-}
-
-@mixin buttonReset($suffix: "") {
-	cursor: pointer #{$suffix};
-	font: inherit #{$suffix};
-	color: inherit #{$suffix};
-	background-color: transparent #{$suffix};
-	display: block #{$suffix};
-	padding: 0 #{$suffix};
-	border: 0 #{$suffix};
-	width: 100% #{$suffix};
-	text-align: left #{$suffix};
-}
-
-@mixin clearfix($suffix: "") {
-	&::before,
-	&::after {
-		content: " " #{$suffix};
-		display: table #{$suffix};
-	}
-
-	&::after {
-		clear: both #{$suffix};
-	}
-}

package/src/overrides/_breakpoints.override.scss

@@ -1 +0,0 @@
-// empty file because we keep the default theme

package/src/overrides/_commons.override.scss

@@ -1 +0,0 @@
-// empty file because we keep the default theme

package/src/overrides/_components.override.scss

@@ -1 +0,0 @@
-// empty file because we keep the default theme

package/src/overrides/_icons.override.scss

@@ -1 +0,0 @@
-// empty file because we keep the default theme

package/src/overrides/_palettes.override.scss

@@ -1 +0,0 @@
-// empty file because we keep the default theme

package/src/overrides/_sizes.override.scss

@@ -1 +0,0 @@
-// empty file because we keep the default theme

package/src/theming/_breakpoints.scss

@@ -1,31 +0,0 @@
-$breakpoints: (
-	xxxs: (
-		"breakAt": 320px,
-	),
-	xxs: (
-		"breakAt": 480px,
-	),
-	xs: (
-		"breakAt": 640px,
-	),
-	s: (
-		"breakAt": 800px,
-	),
-	m: (
-		"breakAt": 1024px,
-	),
-	l: (
-		"breakAt": 1280px,
-	),
-	xl: (
-		"breakAt": 1366px,
-	),
-	xxl: (
-		"breakAt": 1600px,
-	),
-	xxxl: (
-		"breakAt": 1920px,
-	)
-);
-
-$theme: _set($theme, "breakpoints", $breakpoints);

package/src/theming/_commons.scss

@@ -1,74 +0,0 @@
-$commons: (
-	animations: (
-		durations: (
-			fast: 100ms,
-			standard: 250ms,
-			slow: 350ms,
-		),
-		translate: 3rem,
-		function: ease,
-		iteration-count: 5,
-	),
-	divider: (
-		width: 1px,
-		color: _color("grey", "200"),
-	),
-	disabled: (
-		opacity: .4,
-		background: _color("grey", 100),
-		color: #999999,
-		placeholder: #BBBBBB
-	),
-	background: (
-		base: #F5F5F5
-	),
-	highlight: _color("primary", "50"),
-	selected: _color("primary", "100"),
-	text: (
-		link: (
-			color: #00B2ED,
-			hover: #16C5FE
-		),
-	),
-	border: (
-		radius: 4px,
-		radius-big: 8px
-	),
-	font: (
-		family: unquote("Source Sans Pro, Tahoma, sans-serif"),
-		line-height: 1.5rem,
-		size: 16px
-	),
-	elevations: (
-		elevation-1: unquote("0 1px 2px " + rgba(_color('grey', 900), .06) + ", 0px 2px 8px " + rgba(_color('grey', 900), .04)),
-		elevation-2: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 1px 2px " + rgba(_color('grey', 900), .02) + ", 0 2px 6px " + rgba(_color('grey', 900), .05)),
-		elevation-3: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 2px 4px " + rgba(_color('grey', 900), .02) + ", 0 4px 10px " + rgba(_color('grey', 900), .06)),
-		elevation-4: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 3px 6px " + rgba(_color('grey', 900), .04) + ", 0 4px 16px " + rgba(_color('grey', 900), .08)),
-		elevation-5: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 4px 8px " + rgba(_color('grey', 900), .06) + ", 0 12px 32px " + rgba(_color('grey', 900), .08)),
-		elevation-6: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", -2px 2px 8px " + rgba(_color('grey', 900), .04) + ", -12px 6px 24px " + rgba(_color('grey', 900), .06)),
-	),
-	box-shadow: (
-		hard: unquote("0 2px 8px " + rgba(_color('grey', 900), .2) + ", 0 1px 2px " + rgba(_color('grey', 900), 0.15)),
-		xs: unquote("0 1px 2px " + rgba(_color('grey', 900), .06) + ", 0 2px 8px " + rgba(_color('grey', 900), .04)),
-		s: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 1px 2px " + rgba(_color('grey', 900), .02) + ", 0 2px 6px " + rgba(_color('grey', 900), .05)),
-		m: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 2px 4px " + rgba(_color('grey', 900), .02) + ", 0 4px 10px " + rgba(_color('grey', 900), .06)),
-		l: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 3px 6px " + rgba(_color('grey', 900), .04) + ", 0 4px 16px " + rgba(_color('grey', 900), .08)),
-		xl: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", 0 4px 8px " + rgba(_color('grey', 900), .06) + ", 0 12px 32px " + rgba(_color('grey', 900), .08)),
-		xxl: unquote("0 0 0 1px " + rgba(_color('grey', 900), .03) + ", -2px 2px 8px " + rgba(_color('grey', 900), .04) + ", -12px 6px 24px " + rgba(_color('grey', 900), .06)),
-	),
-	overlays: (
-		background: #323232,
-		text: #FFFFFF
-	),
-	banner-height: 50px,
-	transition: unquote("all 150ms ease"),
-	focused: 0 0 1px 2px #A6C7FF,
-	mobile: "s",
-	loading: (
-		background: _color("primary", "200"),
-		frontground: _color("primary", "color"),
-		speed: 600ms
-	),
-);
-
-$theme: _set($theme, "commons", $commons);

package/src/theming/_components.scss

@@ -1,39 +0,0 @@
-@import
-	"components/action-icon.theme",
-	"components/aside.theme",
-	"components/button.theme",
-	"components/box.theme",
-	"components/callout.theme",
-	"components/card.theme",
-	"components/checkbox.theme",
-	"components/chips.theme",
-	"components/content-section.theme",
-	"components/container.theme",
-	"components/error-page.theme",
-	"components/field.theme",
-	"components/filters.theme",
-	"components/form.theme",
-	"components/gauge.theme",
-	"components/header.theme",
-	"components/list.theme",
-	"components/menu.theme",
-	"components/nav-side.theme",
-	"components/page-header.theme",
-	"components/progress.theme",
-	"components/radio.theme",
-	"components/table-of-content.theme",
-	"components/toasts.theme",
-	"components/textfield.theme",
-	"components/switch.theme",
-	"components/label.theme",
-	"components/table.theme",
-	"components/tag.theme",
-	"components/radio-buttons.theme";
-
-	// "components/code.theme",
-	// "components/form.theme",
-	// "components/global.theme",
-	// "components/grid.theme",
-	// "components/section.theme",
-	// "components/tooltip.theme",
-	// "components/titleSection.theme";

package/src/theming/_get-set.scss

@@ -1,108 +0,0 @@
-// will try to get $map.$keys or throw if no result
-
-@function _get($map, $keys, $noVars: $noCssVar) {
-	$keysArray: str-explode($keys, '.');
-
-	$result: $map;
-
-	@for $i from 1 through length($keysArray) {
-		$key: nth($keysArray, $i);
-		@if (map-has-key($result, $key)) {
-			$result: map-get($result, $key);
-		} @else {
-			@error "There is no #{$key} key in map";
-			@return "";
-		}
-	}
-
-	@if $noVars {
-		@return $result;
-	}
-	@return var(#{_getCSSVarName($keys)});
-}
-
-// will try to get $map.$keys or false if no result - might still throw depending on keys
-@function _safeGet($map, $keys, $noVars: $noCssVar) {
-	$keysArray: str-explode($keys, '.');
-
-	$result: $map;
-
-	@for $i from 1 through length($keysArray) {
-		$key: nth($keysArray, $i);
-		@if (map-has-key($result, $key)) {
-			$result: map-get($result, $key);
-		} @else {
-			@return false;
-		}
-	}
-
-	@if $noVars {
-		@return $result;
-	}
-	@return var(#{_getCSSVarName($keys)});
-}
-
-// sets stuff
-@function _set($map, $keys, $values) {
-	$keys: str-explode($keys, '.');
-	$l: length($keys);
-	@for $i from 1 through $l {
-		$key: nth($keys, $l - $i + 1);
-		$values: ($key: $values);
-	}
-	$map: map-extend($map, $values, true);
-	@return $map;
-}
-
-@function _getCSSVarName($string) {
-	@return str-replace("--"+$string, ".", "-");
-}
-
-@function _theme($keys, $noVars: $noCssVar) {
-	@return _get($theme, $keys, $noVars);
-}
-
-@function _getMap($keys) {
-	@return _get($theme, $keys, true);
-}
-
-@function _color($keys, $type:"color", $noVars: $noCssVar) {
-	$result: _safeGet($theme, "colors." + $keys + "." + $type, $noVars);
-	@if $result {
-		@return $result;
-	}
-	// try to find color associated with same palette
-	$result: _safeGet($theme, "palettes." + $keys + "." + $type, $noVars);
-	@if $result {
-		@return $result;
-	}
-		// try to find it in components
-	$result: _safeGet($theme, "components." + $keys + "." + $type, $noVars);
-	@if $result {
-		@return $result;
-	}
-	// try to find it in commons
-	$result: _safeGet($theme, "commons." + $keys + "." + $type, $noVars);
-	@if $result {
-		@return $result;
-	}
-	// throw
-	@warn "couldn't find color #{$keys}.#{$type} in theme";
-	@return "";
-}
-
-@function _component($keys, $noVars: $noCssVar) {
-	$result: _safeGet($theme, "components." + $keys, $noVars);
-	@if $result {
-		@return $result;
-	}
-
-	// try to find in commons
-	$commonKeys: "commons" + str-slice($keys, str-index($keys, '.'));
-	$result: _safeGet($theme, $commonKeys, $noVars);
-	@if $result {
-		@return $result;
-	}
-	@error "couldn't find #{$keys} in components or in commons";
-	@return "";
-}

package/src/theming/_icons.scss

@@ -1,6 +0,0 @@
-$icons: (
-	name: "Lucca icons",
-	prefix: unquote("lucca-icon"),
-	font-path: unquote("//cdn.lucca.fr/lucca-front/icons/next/lucca-icons")
-);
-$theme: _set($theme, "icons", $icons);

package/src/theming/_palettes.scss

@@ -1,147 +0,0 @@
-$palettes: (
-"primary": (
-	"darker": #A82D00,
-	"dark": #CC3D00,
-	"color": #FF6600,
-	"light": #FF9D5C,
-	"lighter": #FFD3B3,
-	"lightest": #FFE1CC,
-	"text": #FFFFFF,
-	"see-through": #FFEDE0,
-	"50": #FFEDE0,
-	"100": #FFE1CC,
-	"200": #FFD3B3,
-	"300": #FFC79E,
-	"400": #FFB685,
-	"500": #FF9D5C,
-	"600": #FF7E29,
-	"700": #FF6600,
-	"800": #CC3D00,
-	"900": #A82D00
-),
-"secondary": (
-	"darker": #083691,
-	"dark": #0A48C2,
-	"color": #2067F3,
-	"light": #6699FF,
-	"lighter": #B3CCFF,
-	"lightest": #CCDDFF,
-	"text": #FFFFFF,
-	"see-through": #E2EBFD,
-	"50": #E2EBFD,
-	"100": #CCDDFF,
-	"200": #B3CCFF,
-	"300": #9EBEFF,
-	"400": #85AEFF,
-	"500": #6699FF,
-	"600": #4280FA,
-	"700": #2067F3,
-	"800": #0A48C2,
-	"900": #083691
-),
-"grey": (
-	"darker": #131D35,
-	"dark": #2A3551,
-	"color": #445473,
-	"light": #96A6C5,
-	"lighter": #D2DCEF,
-	"lightest": #E0E7F6,
-	"text": #FFFFFF,
-	"see-through": #EBF0FA,
-	"50": #EBF0FA,
-	"100": #E0E7F6,
-	"200": #D2DCEF,
-	"300": #BECBE4,
-	"400": #ACBBD7,
-	"500": #96A6C5,
-	"600": #667799,
-	"700": #445473,
-	"800": #2A3551,
-	"900": #131D35
-),
-"success": (
-	"lightest": #E7FAE5,
-	"lighter": #D7F7D4,
-	"light": #8CDB85,
-	"color": #3C9933,
-	"dark": #1B7D12,
-	"darker": #0E6B06,
-	"text": #FFFFFF,
-	"see-through": #F7FEF6,
-	"50": #F7FEF6,
-	"100": #E7FAE5,
-	"200": #D7F7D4,
-	"300": #C2F4BE,
-	"400": #ACECA7,
-	"500": #8CDB85,
-	"600": #49B540,
-	"700": #3C9933,
-	"800": #1B7D12,
-	"900": #0E6B06
-),
-"warning": (
-	"lightest": #FFEEE5,
-	"lighter": #FFE4D6,
-	"light": #F79C6E,
-	"color": #E55006,
-	"dark": #CC3D00,
-	"darker": #B23000,
-	"text": #FFFFFF,
-	"see-through": #FEF5F0,
-	"50": #FEF5F0,
-	"100": #FFEEE5,
-	"200": #FFE4D6,
-	"300": #FFCFB8,
-	"400": #FCBC9C,
-	"500": #F79C6E,
-	"600": #F46A25,
-	"700": #E55006,
-	"800": #CC3D00,
-	"900": #B23000
-),
-"error": (
-	"lightest": #FFECEF,
-	"lighter": #FFE0E6,
-	"light": #EF8F9F,
-	"color": #E51A3B,
-	"dark": #AF0E29,
-	"darker": #91081F,
-	"text": #FFFFFF,
-	"see-through": #FFF5F7,
-	"50": #FFF5F7,
-	"100": #FFECEF,
-	"200": #FFE0E6,
-	"300": #FCC5CE,
-	"400": #FBA7B5,
-	"500": #EF8F9F,
-	"600": #EF3957,
-	"700": #E51A3B,
-	"800": #AF0E29,
-	"900": #91081F
-),
-);
-
-$colors: (
-	"text": (
-		"dark": (
-			"color": #131D35
-		),
-		"default": (
-			"color": #2A3551
-		),
-		"light": (
-			"color": #96A6C5
-		),
-		"placeholder": (
-			"color": #ACBBD7
-		)
-	),
-	"white": (
-		"color": #FFFFFF
-	),
-	"black": (
-		"color": #121212
-	)
-);
-$theme: _set($theme, "palettes", $palettes);
-$theme: _set($theme, "colors", $colors);