@nappr/nappr-styles 0.3.2 → 0.3.5

package/sass/utilities/_typography.scss

@@ -0,0 +1,106 @@
+@use '../configs/' as configs;
+@use '../core/funcs/map' as map;
+@use '../core/mixins/' as mixins;
+@use '../core/funcs/list' as list;
+
+$font-sizes-map: list.steps(1, 20);
+$font-sizes-map: map.mirror($font-sizes-map);
+$font-sizes-map: map.merge(
+  $font-sizes-map,
+  (
+    '0': 0,
+    '0-75': 0.75,
+    '1': 1,
+    '1-5': 1.5,
+    '2': 2,
+    '2-5': 2.5,
+  )
+);
+
+@each $key, $value in $font-sizes-map {
+  .fs-#{$key}v {
+    font-size: #{$value}rem;
+  }
+}
+
+@each $key,
+  $value
+    in (
+      'thin': 100,
+      'light': 300,
+      'regular': 400,
+      'medium': 500,
+      'semi-bold': 600,
+      'bold': 700,
+      'extra-bold': 900
+    )
+{
+  .fw-#{$key} {
+    font-weight: $value;
+  }
+}
+
+// ==========================================================
+// HEADINGS
+// ==========================================================
+@include mixins.generate-heading-styles(configs.$NAPPR_HEADINGS, 'heading');
+
+// ==========================================================
+// TEXT ALIGNMENT
+// ==========================================================
+@each $key in (left, right, center, justify) {
+  .text-#{$key} {
+    text-align: $key;
+  }
+}
+
+// ==========================================================
+// TEXT TRANSFORM
+// ==========================================================
+@each $key in (lowercase, uppercase, capitalize) {
+  .is-#{$key} {
+    text-transform: $key;
+  }
+}
+
+// ==========================================================
+// TEXT DECORATION
+// ==========================================================
+.is-italic {
+  font-style: italic;
+}
+
+.is-underline {
+  text-decoration: underline;
+}
+
+.is-stroked {
+  text-decoration: line-through;
+}
+
+// ==========================================================
+// TEXT VARIANT
+// ==========================================================
+.is-small-caps {
+  font-variant: small-caps;
+}
+
+// ==========================================================
+// TEXT OVERFLOW
+// ==========================================================
+.text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ==========================================================
+// TEXT LINE BREAK
+// ==========================================================
+.text-line-break-normal {
+  overflow-wrap: normal;
+}
+
+.text-line-break--force-wrap {
+  overflow-wrap: break-word;
+}

package/sass/utilities/_visibility.scss

@@ -0,0 +1,60 @@
+@use '../configs/' as configs;
+@use '../core/mixins/' as mixins;
+
+// ==========================================================
+// Mixins
+// ==========================================================
+
+@mixin is-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+@mixin is-visible {
+  display: inherit;
+  visibility: inherit;
+}
+
+@mixin screen-reader-only {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+
+.is-hidden {
+  @include is-hidden;
+}
+
+.is-visible {
+  @include is-visible;
+}
+
+.sr-only {
+  @include screen-reader-only;
+}
+
+@each $key, $value in configs.$NAPPR_BREAKPOINTS {
+  @include mixins.media-query-min($key) {
+    .is-hidden-#{$key} {
+      @include is-hidden;
+    }
+
+    .is-visible-#{$key} {
+      @include is-visible;
+    }
+
+    .sr-only-#{$key} {
+      @include screen-reader-only;
+    }
+  }
+}

package/sass/utilities/_wrap.scss

@@ -0,0 +1,12 @@
+@use '../core/funcs/map' as map;
+@use '../core/placeholders/' as *;
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+
+@each $key, $value in map.each-index((100, 50, 33.3333, 25, 12.5)) {
+  .wrap-#{$key} {
+    @extend %flex-wrapper;
+  }
+}

package/styles.scss

@@ -1 +1,5 @@
-@use './lib/styles';
+@charset 'UTF-8';
+@use './styles.metadata.scss' as metadata;
+
+/*! @nappr/styles v#{metadata.$version} | @see #{metadata.$repository} | @since #{metadata.$since} */
+@use './sass/main';

package/lib/_globals.scss

@@ -1,16 +0,0 @@
-/**
- * Ce fichier permet de transformer
- * Les fichiers de variables
- * Vers des `sass:map` nécessaire à la surcharge
- * Des mixins du dossier `core`
- */
-@use "sass:meta";
-@use "variables/colors";
-@use "variables/breakpoints";
-
-// stylelint-disable-next-line
-// @debug meta.module-variables('colors');
-// @debug meta.module-variables('breakpoints');
-
-$PALETTE: meta.module-variables('colors');
-$BREAKPOINTS: meta.module-variables('breakpoints');

package/lib/_reset.scss

@@ -1,223 +0,0 @@
-@use './variables/defaults' as defaults;
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-overflow-scrolling: touch;
-  padding: 0;
-}
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  /* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-  */
-  border: 0;
-  font: inherit;
-  font-size: 100%;
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100vh;
-  padding: 0;
-}
-
-body {
-  color: #000000;
-  font-family: Helvetica, Arial, Verdana, sans-serif;
-  font-size: defaults.$BODY_FONT_SIZE;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1;
-  width: defaults.$body-width;
-}
-
-hr,
-input,
-button,
-textarea,
-[role='reset'],
-[role='submit'],
-[role='button'] {
-  margin: 0;
-  padding: 0;
-}
-
-ul,
-ol,
-li {
-  list-style-type: none;
-}
-
-ol + ol,
-li + li {
-  margin-top: defaults.$default-spacing;
-}
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-  content: '';
-  content: none;
-}
-
-a,
-button {
-  cursor: pointer;
-}
-
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-p {
-  white-space: initial;
-}
-
-button,
-[role='reset'],
-[role='submit'],
-[role='button'] {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  font-size: 1rem;
-  overflow: hidden;
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.disabled,
-:disabled,
-:disabled:link,
-:disabled:visited,
-:disabled:hover,
-:disabled:active {
-  box-shadow: inherit;
-  cursor: default;
-  cursor: not-allowed;
-  pointer-events: none;
-  text-shadow: inherit;
-}
-
-/*
-// @NOTE
-// a:hover DOIT venir après a:link et a:visited
-// a:active DOIT venir après un a:hover
-a:not(.is-underline),
-a:link:not(.is-underline),
-a:visited:not(.is-underline),
-a:hover:not(.is-underline),
-a:active:not(.is-underline) {
-  text-decoration: none;
-}
-*/

package/lib/customs/scrollbar.scss

@@ -1,40 +0,0 @@
-::-webkit-scrollbar {
-  background: transparent;
-  overflow: visible;
-  width: 17px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(--nappr-white);
-}
-
-::-webkit-scrollbar-track-piece {
-  background-color: var(--nappr-white);
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  background-color: var(--nappr-g400);
-  border: solid var(--nappr-white);
-  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.8);
-  background-color: var(--nappr-g700);
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  border-width: 4px 6px;
-  min-width: 40px;
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  border-width: 6px 4px;
-  min-height: 40px;
-}

package/lib/funcs/_.scss

@@ -1,5 +0,0 @@
-@use 'rem';
-@use 'get-color';
-@use 'strings';
-@use 'merge-palette';
-@use 'math';

package/lib/funcs/_get-color.scss

@@ -1,3 +0,0 @@
-@function get-color($palette, $name) {
-  @return map-get($palette, $name);
-}

package/lib/funcs/_math.scss

@@ -1,5 +0,0 @@
-// permet de convertir un chiffre sans unité en pixel
-// voir les helpers, margin-padding
-@function number-to-pixel($size: 0) {
-  @return ($size * 1px);
-}

package/lib/funcs/_merge-palette.scss

@@ -1,12 +0,0 @@
-@use '../globals' as globals;
-
-@function merge-palettes($palettes...) {
-  // hack immutable default palette
-  $merged: map-merge((), globals.$PALETTE);
-
-  @each $palette in $palettes {
-    $merged: map-merge($merged, $palette);
-  }
-
-  @return $merged;
-}

package/lib/funcs/_rem.scss

@@ -1,104 +0,0 @@
-@use 'sass:math';
-@use 'sass:meta' as meta;
-@use 'sass:list' as list;
-
-$rem-px-only: true !default;
-$rem-fallback: true !default;
-
-/* ------------------------------------
-
-SOURCE: https://github.com/pierreburel/sass-rem
-
------------------------------------- */
-@function rem-separator($list, $separator: false) {
-  @if $separator == 'comma' or $separator == 'space' {
-    @return list.append($list, null, $separator);
-  }
-
-  @if meta.function-exists('list-separator') == true {
-    @return list.separator($list);
-  }
-
-  // list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
-  $test-list: ();
-
-  @each $item in $list {
-    $test-list: list.append($test-list, $item, space);
-  }
-
-  @return if($test-list == $list, space, comma);
-}
-
-@mixin rem-baseline($zoom: 100%) {
-  $div: math.div($zoom, $body-font-size);
-
-  font-size: $div * $rem-baseline;
-}
-
-@function rem-convert($to, $values...) {
-  $result: ();
-  $separator: rem-separator($values);
-
-  @each $value in $values {
-    @if meta.type-of($value) == 'number' and math.unit($value) == 'rem' and $to == 'px' {
-      $div: math.div($value, 1rem);
-      $result: list.append($result, $div * $rem-baseline, $separator);
-    }
-
-    @else if
-      meta.type-of($value) ==
-      'number' and
-      math.unit($value) ==
-      'px' and
-      $to ==
-      'rem' {
-      $div: math.div($value, $rem-baseline);
-      $result: list.append($result, $div * 1rem, $separator);
-    }
-
-    @else if meta.type-of($value) == 'list' {
-      $value-separator: rem-separator($value);
-      $value: rem-convert($to, $value...);
-      $value: rem-separator($value, $value-separator);
-      $result: list.append($result, $value, $separator);
-    }
-
-    @else {
-      $result: list.append($result, $value, $separator);
-    }
-  }
-
-  @return if(list.length($result) == 1, list.nth($result, 1), $result);
-}
-
-@function convert($values...) {
-  @if $rem-px-only {
-    @return rem-convert(px, $values...);
-  }
-
-  @else {
-    @return rem-convert(rem, $values...);
-  }
-}
-
-
-
-@mixin rem($properties, $values...) {
-  @if type-of($properties) == 'map' {
-    @each $property in map-keys($properties) {
-      @include rem.convert($property, map-get($properties, $property));
-    }
-  }
-
-  @else {
-    @each $property in $properties {
-      @if $rem-fallback or $rem-px-only {
-        #{$property}: rem-convert(px, $values...);
-      }
-
-      @if not $rem-px-only {
-        #{$property}: rem-convert(rem, $values...);
-      }
-    }
-  }
-}

package/lib/funcs/_strings.scss

@@ -1,35 +0,0 @@
-@use "sass:string";
-
-@function contain($list, $value) {
-  @return not not index($list, $value);
-}
-
-@function capitalize($string) {
-  @return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
-}
-
-@function uncapitalize($string) {
-  @return to-lower-case(string.slice($string, 1, 1)) + string.slice($string, 2);
-}
-
-@function camelize($string) {
-  $progress: $string;
-  $result: '';
-  $exclude: ' ', '-', '–', '—', '_', ',', ';', ':', '.';
-
-  @while str-length($progress) > 0 {
-    $char: string.slice($progress, 1, 1);
-
-    @if contain($exclude, $char) {
-      $progress: capitalize(string.slice($progress, 2, 2)) +
-        string.slice($progress, 3);
-    }
-
-    @else {
-      $result: $result + $char;
-      $progress: string.slice($progress, 2);
-    }
-  }
-
-  @return $result;
-}

package/lib/grid/_.scss

@@ -1,4 +0,0 @@
-@use 'col';
-@use 'row';
-@use 'wrap';
-@use 'square';