@nappr/nappr-styles 0.3.2 → 0.3.5

package/sass/utilities/_displays.scss

@@ -0,0 +1,127 @@
+@use '../core/placeholders/' as *;
+
+// ==========================================================
+// VERTICAL ALIGNMENT
+// ==========================================================
+
+@each $key in (top, middle, bottom, baseline, sub, super) {
+  .valign-#{$key} {
+    vertical-align: $key;
+  }
+}
+
+// ==========================================================
+// DISPLAY TYPES
+// ==========================================================
+
+@each $key in (flex, grid, block, inline, inline-block, table, table-cell) {
+  .is-#{$key} {
+    display: $key;
+  }
+}
+
+// ==========================================================
+// STRETCHING
+// ==========================================================
+
+.stretch-y {
+  bottom: 0;
+  top: 0;
+}
+
+.stretch-x {
+  left: 0;
+  right: 0;
+}
+
+// ==========================================================
+// PLACEMENTS
+// ==========================================================
+
+@each $token,
+  $values
+    in (
+      'tl': (
+          top,
+          left,
+        ),
+      'br': (
+          bottom,
+          right,
+        ),
+      'bl': (
+          bottom,
+          left,
+        ),
+      'tr': (
+          top,
+          right,
+        )
+    )
+{
+  .placement-#{$token} {
+    @each $value in $values {
+      #{$value}: 0;
+    }
+  }
+}
+
+// ==========================================================
+// POSITIONING
+// ==========================================================
+
+@each $key in (relative, absolute, fixed, sticky) {
+  .is-#{$key} {
+    position: $key;
+  }
+}
+
+// ==========================================================
+// COVERING and OVERLAYING
+// ==========================================================
+
+.is-cover {
+  @extend %is-all-edges;
+}
+
+.is-overlay {
+  @extend %is-all-edges;
+  @extend %position-absolute;
+}
+
+.is-overlay--fixed {
+  @extend %is-all-edges;
+  @extend %position-fixed;
+}
+
+// ==========================================================
+// Layout
+// ==========================================================
+
+.is-layout-width {
+  @extend %is-full-width;
+}
+
+.is-layout-height {
+  @extend %is-full-height;
+}
+
+.is-layout {
+  @extend %is-full-layout;
+}
+
+// ==========================================================
+// Viewport
+// ==========================================================
+
+.is-viewport-width {
+  @extend %is-viewport-width;
+}
+
+.is-viewport-height {
+  @extend %is-viewport-height;
+}
+
+.is-viewport {
+  @extend %is-viewport-layout;
+}

package/sass/utilities/_flexbox.scss

@@ -0,0 +1,102 @@
+@use '../core/placeholders/' as *;
+@use '../core/funcs/list' as list;
+@use '../core/funcs/map' as map;
+
+@each $value in list.steps(1, 12) {
+  .flex-#{$value} {
+    flex: #{$value};
+  }
+}
+
+@each $key, $direction in ('columns': row, 'rows': column) {
+  .flex-#{$key} {
+    @extend %flex-base;
+
+    flex-direction: $direction;
+  }
+
+  .flex-#{$key}-reverse {
+    flex-direction: #{$direction}-reverse;
+  }
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-inverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-wrapper {
+  @extend %flex-wrapper;
+}
+
+// ==========================================================
+// Flexbox Layouts (Distribution)
+// ==========================================================
+
+@each $key,
+  $value
+    in (
+      'start': flex-start,
+      'center': center,
+      'end': flex-end,
+      'between': space-between,
+      'around': space-around,
+      'evenly': space-evenly,
+      'stretch': stretch
+    )
+{
+  .flex-#{$key} {
+    justify-content: $value;
+  }
+}
+
+// fait grandir les éléments eux-mêmes pour occuper l'espace disponible sur l'axe principal
+.flex-justify > * {
+  flex: 1 1 auto;
+}
+
+// ==========================================================
+// Items Spacers
+// ==========================================================
+
+@each $key,
+  $value
+    in (
+      'start': flex-start,
+      'center': center,
+      'end': flex-end,
+      'stretch': stretch,
+      'baseline': baseline
+    )
+{
+  .items-#{$key} {
+    align-items: $value;
+  }
+
+  .self-#{$key} {
+    align-self: $value;
+  }
+}
+
+$gaps-map: list.steps(1, 6);
+$gaps-map: map.mirror($gaps-map);
+$gaps-map: map.merge(
+  $gaps-map,
+  (
+    '0': 0,
+    '0-75': 0.75,
+    '1': 1,
+    '1-5': 1.5,
+    '2': 2,
+    '2-5': 2.5,
+  )
+);
+
+@each $key, $value in $gaps-map {
+  .gap-#{$key}v {
+    gap: #{$value}rem;
+  }
+}

package/{lib/helpers → sass/utilities}/_floats.scss

@@ -1,6 +1,7 @@
+// ==========================================================
+// Utility Classes
+// ==========================================================
 .clearfix {
-  *zoom: 1;
-
   &::after,
   &::before {
     content: '.';
@@ -22,18 +23,12 @@
   clear: both;
 }
 
-.clear-right {
-  clear: right;
-}
-
-.clear-left {
-  clear: left;
-}
-
-.float-left {
-  float: left;
-}
+@each $name in (right, left) {
+  .clear-#{$name} {
+    clear: $name;
+  }
 
-.float-right {
-  float: right;
+  .float-#{$name} {
+    float: $name;
+  }
 }

package/sass/utilities/_lists.scss

@@ -0,0 +1,86 @@
+@use '../core/placeholders/' as *;
+
+// =================================================================
+// 1. Lists
+// =================================================================
+
+// --- 1.1. Unordered Lists ---
+
+ul.list--styled,
+ul.list--unstyled {
+  > li::marker {
+    font-size: calc(var(--xl-size) * 0.9);
+  }
+}
+
+ul.list--unstyled {
+  @extend %list-type--unstyled;
+}
+
+ul.list--styled {
+  @extend %list-type--styled;
+
+  list-style-type: disc;
+}
+
+// --- 1.2. Ordered Lists ---
+
+ol.list--styled,
+ol.list--unstyled {
+  counter-reset: li-counter;
+
+  > li {
+    counter-increment: li-counter;
+  }
+
+  > li::marker {
+    font-size: var(--xl-size);
+    font-weight: 700;
+  }
+}
+
+ol.list--unstyled {
+  @extend %list-type--unstyled;
+
+  > li::marker {
+    content: none;
+  }
+}
+
+ol.list--styled {
+  @extend %list-type--styled;
+
+  list-style-type: decimal;
+
+  > li::marker {
+    content: counters(li-counter, '.') '.  ';
+  }
+}
+
+// --- 1.3. Definition Lists ---
+
+dl.list--styled,
+dl.list--unstyled {
+  dd,
+  dl {
+    margin: 0;
+  }
+}
+
+dl.list--unstyled {
+  @extend %list-type--unstyled;
+
+  dd,
+  dl {
+    padding-inline-start: 0;
+  }
+}
+
+dl.list--styled {
+  @extend %list-type--styled;
+
+  dd,
+  dl {
+    padding-inline-start: 1rem;
+  }
+}

package/sass/utilities/_negates.scss

@@ -0,0 +1,121 @@
+@use '../core/funcs/map' as map;
+
+// ==========================================================
+// NEGATES
+// ==========================================================
+
+// --- TEXT DECORATION NEGATES (with link states) ---
+@each $state in ('', ':hover', ':active', ':visited') {
+  .no-underline,
+  a.no-underline#{$state} {
+    text-decoration: none;
+  }
+
+  .no-no-underline,
+  a.no-no-underline#{$state} {
+    text-decoration: none !important;
+  }
+}
+
+// --- NEGATES ---
+@each $name,
+  $config
+    in (
+      'background': (
+          'property': 'background',
+          'value': none,
+        ),
+      'events': (
+          'property': 'pointer-events',
+          'value': none,
+        ),
+      'flex-grow': (
+          'property': 'flex',
+          'value': 0 1,
+        ),
+      'flex-shrink': (
+          'property': 'flex',
+          'value': 1 0,
+        ),
+      'float': (
+          'property': 'float',
+          'value': none,
+        ),
+      'flex': (
+          'property': 'flex',
+          'value': none,
+        ),
+      'margin': (
+          'property': 'margin',
+          'value': 0,
+        ),
+      'padding': (
+          'property': 'padding',
+          'value': 0,
+        ),
+      'border': (
+          'property': 'border',
+          'value': 0,
+        ),
+      'radius': (
+          'property': 'border-radius',
+          'value': 0,
+        ),
+      'outline': (
+          'property': 'outline',
+          'value': none,
+        ),
+      'pointer': (
+          'property': 'cursor',
+          'value': default,
+        ),
+      'select': (
+          'property': 'user-select',
+          'value': none,
+        ),
+      'wrap': (
+          'property': 'white-space',
+          'value': nowrap,
+        )
+    )
+{
+  $property: map.get($config, 'property');
+  $value: map.get($config, 'value');
+
+  .no-#{$name} {
+    #{$property}: #{$value};
+  }
+
+  .no-no-#{$name} {
+    #{$property}: #{$value} !important;
+  }
+}
+
+// --- UTILITY CLASSES ---
+.no-click-allowed {
+  cursor: not-allowed;
+}
+
+.no-overflow {
+  overflow: hidden;
+}
+
+.no-no-overflow {
+  overflow: hidden !important;
+}
+
+.no-overflow-x {
+  overflow-x: hidden;
+}
+
+.no-no-overflow-x {
+  overflow-x: hidden !important;
+}
+
+.no-overflow-y {
+  overflow-y: hidden;
+}
+
+.no-no-overflow-y {
+  overflow-y: hidden !important;
+}

package/sass/utilities/_palette.scss

@@ -0,0 +1,11 @@
+// Applique la variable CSS locale --nappr-data-color à la couleur du texte.
+// @example <div data-color="black" class="text-data-color">Texte noir</div>
+.text-data-color {
+  color: var(--nappr-data-color);
+}
+
+// Applique la variable CSS locale --nappr-data-color au fond.
+// @example <div data-color="black" class="bg-data-color">Fond noir</div>
+.bg-data-color {
+  background-color: var(--nappr-data-color);
+}

package/sass/utilities/_scrolls.scss

@@ -0,0 +1,78 @@
+@use '../core/placeholders/' as *;
+
+// ==========================================================
+// Placeholders
+// ==========================================================
+%scroll-smooth-mobile {
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling sur iOS */
+  overscroll-behavior: contain; /* Empêche le scroll bounce sur iOS */
+}
+
+%is-scrollbox {
+  @extend %is-full-layout;
+  @extend %position-absolute;
+  @extend %scroll-smooth-mobile;
+
+  overflow: auto;
+}
+
+%is-scrollbox-y {
+  @extend %is-full-layout;
+  @extend %position-absolute;
+  @extend %scroll-smooth-mobile;
+
+  overflow: hidden auto;
+}
+
+%scroll-x-auto {
+  @extend %scroll-smooth-mobile;
+
+  overflow: auto hidden;
+}
+
+%scroll-y-auto {
+  @extend %scroll-smooth-mobile;
+
+  overflow: hidden auto;
+}
+
+// ==========================================================
+// Utility Classes
+// ==========================================================
+.scroll-x-only {
+  overflow: scroll hidden;
+}
+
+.scroll-y-only {
+  overflow: hidden scroll;
+}
+
+.scroll-x-auto {
+  @extend %scroll-x-auto;
+}
+
+.scroll-y-auto {
+  @extend %scroll-y-auto;
+}
+
+.scrollbox-wrapper {
+  @extend %position-relative;
+}
+
+.scrollbox {
+  @extend %is-scrollbox;
+}
+
+.scrollbox-y {
+  @extend %is-scrollbox;
+  @extend %scroll-y-auto;
+
+  height: auto;
+}
+
+.scrollbox-x {
+  @extend %is-scrollbox;
+  @extend %scroll-x-auto;
+
+  height: auto;
+}

package/sass/utilities/_spacers.scss

@@ -0,0 +1,120 @@
+@use '../configs/' as configs;
+@use '../core/mixins/' as mixins;
+@use '../core/funcs/map' as map;
+@use '../core/funcs/string' as string;
+
+// @use '../core/funcs/list' as list;
+// @use '../core/funcs/math' as math;
+
+// ==========================================================
+// Functions
+// ==========================================================
+// @function generate-spacers-map(
+//   $min,
+//   $max,
+//   $base: 4,
+//   $suffix: 'v',
+//   $unit: 'rem'
+// ) {
+//   $map: ();
+//   $range: list.iterate($min, $max);
+
+//   @each $i in $range {
+//     $value: math.div($i, $base);
+//     $key: if($i < 0, 'n#{math.abs($i)}#{$suffix}', '#{$i}#{$suffix}');
+//     $token: if($i == 0, '0', $key);
+//     $map: map.set($map, $token, #{$value}#{$unit});
+//   }
+
+//   $map: map.merge(
+//     (
+//       'auto': auto,
+//       'n1-5#{$suffix}': -0.375#{$unit},
+//       'n0-5#{$suffix}': -0.125#{$unit},
+//       '0-5#{$suffix}': 0.125#{$unit},
+//       '1-5#{$suffix}': 0.375#{$unit},
+//     ),
+//     $map
+//   );
+
+//   @return $map;
+// }
+
+// ==========================================================
+// Mixins
+// ==========================================================
+@function get-classname-prefix($prop, $suffix: '') {
+  $first-letter: string.slice('#{$prop}', 0, 1);
+  $classname: '.#{$first-letter}#{$suffix}';
+
+  @return $classname;
+}
+
+@function get-classname-suffix($side, $token, $bpt: null) {
+  $abbr-map: (
+    'all': '',
+    'topbottom': 'y',
+    'leftright': 'x',
+  );
+  $bpt-prefix: if($bpt != null, '-#{$bpt}', '');
+  $side-abbr: if(
+    map.has-key($abbr-map, $side),
+    map.get($abbr-map, $side),
+    string.slice($side, 0, 1)
+  );
+  $classname-suffix: '#{$side-abbr}#{$bpt-prefix}-#{$token}';
+
+  @return $classname-suffix;
+}
+
+@mixin generate-spacers($token-map, $bpt: null) {
+  @each $token, $value in $token-map {
+    @each $side in (all, topbottom, leftright, top, left, right, bottom) {
+      $is-auto: $token == 'auto';
+      $classname-suffix: get-classname-suffix($side, $token, $bpt);
+      $current-props: if($is-auto, (margin), (margin, padding));
+
+      @each $prop in $current-props {
+        $classname-prefix: get-classname-prefix($prop);
+        $classname: string.concat($classname-prefix, $classname-suffix);
+        $css-value: if(
+          $is-auto,
+          auto,
+          var(--nappr-spacing-#{$token}, #{$value})
+        );
+
+        @if $side == 'all' {
+          #{$classname} {
+            #{$prop}: $css-value;
+          }
+        } @else if $side == 'topbottom' {
+          #{$classname} {
+            #{$prop}-top: $css-value;
+            #{$prop}-bottom: $css-value;
+          }
+        } @else if $side == 'leftright' {
+          #{$classname} {
+            #{$prop}-left: $css-value;
+            #{$prop}-right: $css-value;
+          }
+        } @else {
+          #{$classname} {
+            #{$prop}-#{$side}: $css-value;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ==========================================================
+// UTILITY CLASSES
+// ---
+// generate spacers classes
+// Exemple: .m-0-5v, .p-2v, .mx-3v-md
+// ==========================================================
+@include generate-spacers(configs.$NAPPR_SPACING);
+
+@include mixins.media-query-min('md') {
+  @include generate-spacers(configs.$NAPPR_SPACING, 'md');
+}

package/sass/utilities/_square-grid.scss

@@ -0,0 +1,33 @@
+@use '../core/funcs/math' as math;
+
+// ==========================================================
+// Mixins
+// ==========================================================
+
+/**
+ * Generate square grid classes
+ * @param {Number} $gutters - Number of gutters
+ * @return {Void}
+ */
+@mixin generate-square-grid($gutters) {
+  @for $i from 1 through $gutters {
+    $gap: $i - 1;
+    $percent: math.div((100 - $gap), $i);
+    .square-grid-#{$i} > * {
+      width: math.number-to-percent($percent);
+    }
+  }
+}
+
+// ==========================================================
+// UTILITY CLASSES
+// ==========================================================
+
+.square-grid {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1%;
+  justify-content: flex-start;
+}
+
+@include generate-square-grid(6);