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

package/src/{_normalize.scss → commons/normalize.scss}

@@ -8,343 +8,344 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
- html {
+html {
 	line-height: 1.15; /* 1 */
 	-webkit-text-size-adjust: 100%; /* 2 */
-  }
-  
-  /* Sections
-	 ========================================================================== */
-  
-  /**
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
    * Remove the margin in all browsers.
    */
-  
-  body {
+
+body {
 	margin: 0;
-  }
-  
-  /**
+}
+
+/**
    * Render the `main` element consistently in IE.
    */
-  
-  main {
+
+main {
 	display: block;
-  }
-  
-  /**
+}
+
+/**
    * Correct the font size and margin on `h1` elements within `section` and
    * `article` contexts in Chrome, Firefox, and Safari.
    */
-  
-  h1 {
+
+h1 {
 	font-size: 2em;
 	margin: 0.67em 0;
-  }
-  
-  /* Grouping content
-	 ========================================================================== */
-  
-  /**
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
    * 1. Add the correct box sizing in Firefox.
    * 2. Show the overflow in Edge and IE.
    */
-  
-  hr {
+
+hr {
 	box-sizing: content-box; /* 1 */
 	height: 0; /* 1 */
 	overflow: visible; /* 2 */
-  }
-  
-  /**
+}
+
+/**
    * 1. Correct the inheritance and scaling of font size in all browsers.
    * 2. Correct the odd `em` font sizing in all browsers.
    */
-  
-  pre {
+
+pre {
 	font-family: monospace, monospace; /* 1 */
 	font-size: 1em; /* 2 */
-  }
-  
-  /* Text-level semantics
-	 ========================================================================== */
-  
-  /**
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
    * Remove the gray background on active links in IE 10.
    */
-  
-  a {
+
+a {
 	background-color: transparent;
-  }
-  
-  /**
+}
+
+/**
    * 1. Remove the bottom border in Chrome 57-
    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    */
-  
-  abbr[title] {
+
+abbr[title] {
 	border-bottom: none; /* 1 */
 	text-decoration: underline; /* 2 */
 	text-decoration: underline dotted; /* 2 */
-  }
-  
-  /**
+}
+
+/**
    * Add the correct font weight in Chrome, Edge, and Safari.
    */
-  
-  b,
-  strong {
+
+b,
+strong {
 	font-weight: bolder;
-  }
-  
-  /**
+}
+
+/**
    * 1. Correct the inheritance and scaling of font size in all browsers.
    * 2. Correct the odd `em` font sizing in all browsers.
    */
-  
-  code,
-  kbd,
-  samp {
+
+code,
+kbd,
+samp {
 	font-family: monospace, monospace; /* 1 */
 	font-size: 1em; /* 2 */
-  }
-  
-  /**
+}
+
+/**
    * Add the correct font size in all browsers.
    */
-  
-  small {
+
+small {
 	font-size: 80%;
-  }
-  
-  /**
+}
+
+/**
    * Prevent `sub` and `sup` elements from affecting the line height in
    * all browsers.
    */
-  
-  sub,
-  sup {
+
+sub,
+sup {
 	font-size: 75%;
 	line-height: 0;
 	position: relative;
 	vertical-align: baseline;
-  }
-  
-  sub {
+}
+
+sub {
 	bottom: -0.25em;
-  }
-  
-  sup {
+}
+
+sup {
 	top: -0.5em;
-  }
-  
-  /* Embedded content
-	 ========================================================================== */
-  
-  /**
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
    * Remove the border on images inside links in IE 10.
    */
-  
-  img {
+
+img {
 	border-style: none;
-  }
-  
-  /* Forms
-	 ========================================================================== */
-  
-  /**
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
    * 1. Change the font styles in all browsers.
    * 2. Remove the margin in Firefox and Safari.
    */
-  
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
+
+button,
+input,
+optgroup,
+select,
+textarea {
 	font-family: inherit; /* 1 */
 	font-size: 100%; /* 1 */
 	line-height: 1.15; /* 1 */
 	margin: 0; /* 2 */
-  }
-  
-  /**
+}
+
+/**
    * Show the overflow in IE.
    * 1. Show the overflow in Edge.
    */
-  
-  button,
-  input { /* 1 */
+
+button,
+input {
+	/* 1 */
 	overflow: visible;
-  }
-  
-  /**
+}
+
+/**
    * Remove the inheritance of text transform in Edge, Firefox, and IE.
    * 1. Remove the inheritance of text transform in Firefox.
    */
-  
-  button,
-  select { /* 1 */
+
+button,
+select {
+	/* 1 */
 	text-transform: none;
-  }
-  
-  /**
+}
+
+/**
    * Correct the inability to style clickable types in iOS and Safari.
    */
-  
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
 	-webkit-appearance: button;
-  }
-  
-  /**
+}
+
+/**
    * Remove the inner border and padding in Firefox.
    */
-  
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
 	border-style: none;
 	padding: 0;
-  }
-  
-  /**
+}
+
+/**
    * Restore the focus styles unset by the previous rule.
    */
-  
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
 	outline: 1px dotted ButtonText;
-  }
-  
-  /**
+}
+
+/**
    * Correct the padding in Firefox.
    */
-  
-  fieldset {
+
+fieldset {
 	padding: 0.35em 0.75em 0.625em;
-  }
-  
-  /**
+}
+
+/**
    * 1. Correct the text wrapping in Edge and IE.
    * 2. Correct the color inheritance from `fieldset` elements in IE.
    * 3. Remove the padding so developers are not caught out when they zero out
    *    `fieldset` elements in all browsers.
    */
-  
-  legend {
+
+legend {
 	box-sizing: border-box; /* 1 */
 	color: inherit; /* 2 */
 	display: table; /* 1 */
 	max-width: 100%; /* 1 */
 	padding: 0; /* 3 */
 	white-space: normal; /* 1 */
-  }
-  
-  /**
+}
+
+/**
    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
    */
-  
-  progress {
+
+progress {
 	vertical-align: baseline;
-  }
-  
-  /**
+}
+
+/**
    * Remove the default vertical scrollbar in IE 10+.
    */
-  
-  textarea {
+
+textarea {
 	overflow: auto;
-  }
-  
-  /**
+}
+
+/**
    * 1. Add the correct box sizing in IE 10.
    * 2. Remove the padding in IE 10.
    */
-  
-  [type="checkbox"],
-  [type="radio"] {
+
+[type='checkbox'],
+[type='radio'] {
 	box-sizing: border-box; /* 1 */
 	padding: 0; /* 2 */
-  }
-  
-  /**
+}
+
+/**
    * Correct the cursor style of increment and decrement buttons in Chrome.
    */
-  
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
 	height: auto;
-  }
-  
-  /**
+}
+
+/**
    * 1. Correct the odd appearance in Chrome and Safari.
    * 2. Correct the outline style in Safari.
    */
-  
-  [type="search"] {
+
+[type='search'] {
 	-webkit-appearance: textfield; /* 1 */
 	outline-offset: -2px; /* 2 */
-  }
-  
-  /**
+}
+
+/**
    * Remove the inner padding in Chrome and Safari on macOS.
    */
-  
-  [type="search"]::-webkit-search-decoration {
+
+[type='search']::-webkit-search-decoration {
 	-webkit-appearance: none;
-  }
-  
-  /**
+}
+
+/**
    * 1. Correct the inability to style clickable types in iOS and Safari.
    * 2. Change font properties to `inherit` in Safari.
    */
-  
-  ::-webkit-file-upload-button {
+
+::-webkit-file-upload-button {
 	-webkit-appearance: button; /* 1 */
 	font: inherit; /* 2 */
-  }
-  
-  /* Interactive
-	 ========================================================================== */
-  
-  /*
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
    * Add the correct display in Edge, IE 10+, and Firefox.
    */
-  
-  details {
+
+details {
 	display: block;
-  }
-  
-  /*
+}
+
+/*
    * Add the correct display in all browsers.
    */
-  
-  summary {
+
+summary {
 	display: list-item;
-  }
-  
-  /* Misc
-	 ========================================================================== */
-  
-  /**
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
    * Add the correct display in IE 10+.
    */
-  
-  template {
+
+template {
 	display: none;
-  }
-  
-  /**
+}
+
+/**
    * Add the correct display in IE 10.
    */
-  
-  [hidden] {
+
+[hidden] {
 	display: none;
-  }
-  
+}

package/src/commons/utils/a11y.scss

@@ -0,0 +1,12 @@
+@mixin mask($suffix: '') {
+	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};
+}

package/src/commons/utils/form.scss

@@ -0,0 +1,19 @@
+@mixin required {
+	color: var(--palettes-error-700);
+	display: inline-block;
+	margin-left: 0.2em;
+
+	@supports (content: '*' / '') {
+		content: '*' / '';
+	}
+
+	@supports not (content: '*' / '') {
+		content: '*';
+	}
+}
+
+@function fakeBorderOverlay($fakeBorderOverlayColor: currentColor, $fakeBorderOverlayWidth: 1px) {
+	@return ($fakeBorderOverlayWidth * -1) 0 $fakeBorderOverlayColor, 0 ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor,
+		($fakeBorderOverlayWidth * -1) ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor,
+		($fakeBorderOverlayWidth * -1) ($fakeBorderOverlayWidth * -1) $fakeBorderOverlayColor inset;
+}

package/src/commons/utils/index.scss

@@ -0,0 +1,6 @@
+@forward 'media'; // 0 Ko
+@forward 'a11y'; // 0 Ko
+@forward 'reset'; // 0 Ko
+@forward 'form'; // 0 Ko
+@forward 'loading'; // 0 Ko
+@forward 'text'; // 0 Ko

package/src/commons/utils/loading.scss

@@ -0,0 +1,60 @@
+@mixin spinner($size: 1rem) {
+	@keyframes rotating {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	&::before,
+	&::after {
+		width: $size;
+		height: $size;
+		border-radius: 50%;
+		line-height: 0.8rem;
+		border-width: 2px;
+		inset: 0;
+		margin: auto;
+		position: absolute;
+		border-style: solid;
+		content: '';
+	}
+
+	&::before {
+		border-color: var(--commons-loading-background);
+	}
+
+	&::after {
+		animation-name: rotating;
+		animation-duration: var(--commons-loading-speed);
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+
+		border-color: transparent;
+		border-top-color: var(--commons-loading-frontground);
+	}
+}
+
+@mixin gradient {
+	@keyframes loadingGradient {
+		0% {
+			background-position: 100% 0%;
+		}
+		100% {
+			background-position: -100% 0%;
+		}
+	}
+
+	animation-name: loadingGradient;
+	animation-duration: 2s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-fill-mode: forwards;
+	background-color: currentColor;
+	background-repeat: no-repeat;
+	background-image: linear-gradient(315deg, transparent 40%, currentColor 50%, transparent 100%);
+	background-size: 400% 100%;
+	color: rgba(0, 0, 0, 0.1);
+}

package/src/commons/utils/media.scss

@@ -0,0 +1,34 @@
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:math';
+@use '../config';
+
+@mixin largerThan($breakpoint, $reversed: false) {
+	$reverse: '';
+
+	@if $reversed {
+		$reverse: string.unquote('not all and');
+	} @else {
+		$reverse: string.unquote('');
+	}
+
+	$breakpointInPx: map.get(config.$breakpoints, $breakpoint);
+
+	@if $breakpointInPx {
+		$breakpointInEm: math.div($breakpointInPx, 16px) * 1em;
+
+		@media #{$reverse '(min-width:' $breakpointInEm ')'} {
+			@content;
+		}
+	} @else {
+		@media #{$reverse '(min-width:' $breakpoint')'} {
+			@content;
+		}
+	}
+}
+
+@mixin smallerThan($breakpoint) {
+	@include largerThan($breakpoint, true) {
+		@content;
+	}
+}