@nappr/nappr-styles 0.3.3 → 0.3.5

package/sass/elements/_links.scss

@@ -1,4 +1,9 @@
-a {
+[href] {
+  color: var(--nappr-theme-text-primary);
+  font-size: 1rem;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+
   &:link,
   &:visited,
   &:active {
@@ -10,7 +15,113 @@ a {
   }
 }
 
+// font-weight: 700;
+// height: 100%;
+// justify-content: space-between;
+// line-height: 1.5rem;
+// margin: 0;
+// padding: 0.75rem 1rem;
+// width: 100%;
+// text-align: left;
+
 /*
+[href] {
+  background-image: var(--underline-img), var(--underline-img);
+  background-position:
+    var(--underline-x) 100%,
+    var(--underline-x) calc(100% - var(--underline-thickness));
+  background-repeat: no-repeat, no-repeat;
+  background-size:
+    var(--underline-hover-width) calc(var(--underline-thickness) * 2),
+    var(--underline-idle-width) var(--underline-thickness);
+  transition: background-size 0s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a[href]:active,
+  button:not(:disabled):active,
+  input[type='button']:not(:disabled):active,
+  input[type='image']:not(:disabled):active,
+  input[type='reset']:not(:disabled):active,
+  input[type='submit']:not(:disabled):active {
+    background-color: var(--active-tint);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a[href]:hover,
+  button:not(:disabled):hover,
+  input[type='button']:not(:disabled):hover,
+  input[type='image']:not(:disabled):hover,
+  input[type='reset']:not(:disabled):hover,
+  input[type='submit']:not(:disabled):hover {
+    background-color: var(--hover-tint);
+  }
+}
+
+[tabindex]:focus-visible,
+a:focus-visible,
+audio:focus-visible[controls],
+button:focus-visible,
+details:focus-visible,
+details > summary:first-of-type:focus-visible,
+input:focus-visible,
+input[type='button']:focus-visible,
+input[type='checkbox']:focus-visible + label:before,
+input[type='image']:focus-visible,
+input[type='radio']:focus-visible + label:before,
+input[type='reset']:focus-visible,
+input[type='submit']:focus-visible,
+select:focus-visible,
+video:focus-visible[controls] {
+  outline-style: solid;
+}
+
+[tabindex]:focus:not(:focus-visible),
+a:focus:not(:focus-visible),
+audio:focus:not(:focus-visible)[controls],
+button:focus:not(:focus-visible),
+details:focus:not(:focus-visible),
+details > summary:first-of-type:focus:not(:focus-visible),
+input:focus:not(:focus-visible),
+input[type='button']:focus:not(:focus-visible),
+input[type='checkbox']:focus:not(:focus-visible) + label:before,
+input[type='image']:focus:not(:focus-visible),
+input[type='radio']:focus:not(:focus-visible) + label:before,
+input[type='reset']:focus:not(:focus-visible),
+input[type='submit']:focus:not(:focus-visible),
+select:focus:not(:focus-visible),
+video:focus:not(:focus-visible)[controls] {
+  outline-style: none;
+}
+[tabindex]:focus,
+a:focus,
+audio:focus[controls],
+button:focus,
+details:focus,
+details > summary:first-of-type:focus,
+input:focus,
+input[type='button']:focus,
+input[type='checkbox']:focus + label:before,
+input[type='image']:focus,
+input[type='radio']:focus + label:before,
+input[type='reset']:focus,
+input[type='submit']:focus,
+select:focus,
+video:focus[controls] {
+  outline-color: #0a76f6;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a[href]:active,
+  a[href]:hover {
+    --underline-hover-width: var(--underline-max-width);
+  }
+}
+
 a:not(.is-underline),
 a:link:not(.is-underline),
 a:visited:not(.is-underline),

package/sass/layout/grid/_columns.scss

@@ -5,7 +5,7 @@
 // Mixin pour générer les classes de colonnes
 @mixin generate-grid-columns($prefix: '') {
   @for $i from 1 through map.get(configs.$NAPPR_GRID, 'columns') {
-    .grid#{$prefix}--col-#{$i} {
+    .grid#{$prefix}-col-#{$i} {
       grid-column: span #{$i};
     }
   }
@@ -14,7 +14,7 @@
 // Mixin pour générer les classes de template columns
 @mixin generate-grid-template-columns($prefix: '') {
   @for $i from 1 through map.get(configs.$NAPPR_GRID, 'columns') {
-    .grid#{$prefix}--cols-#{$i} {
+    .grid#{$prefix}-cols-#{$i} {
       grid-template-columns: repeat(#{$i}, 1fr);
     }
   }

package/sass/layout/grid/_gaps.scss

@@ -3,7 +3,7 @@
 @use '../../configs/' as configs;
 
 // --- Utilisation de variables CSS pour les gaps ---
-.grid--gap {
+.grid-gap {
   $value: map.get(configs.$NAPPR_GRID, 'gutter-gap-md');
 
   gap: var(--nappr-grid-gutter-gap-md, #{$value});
@@ -32,9 +32,9 @@
 }
 
 @include mixins.media-query-min('lg') {
-  .grid--gap,
-  .grid-md--gap,
-  .grid-sm--gap {
+  .grid-gap,
+  .grid-md-gap,
+  .grid-sm-gap {
     $value: map.get(configs.$NAPPR_GRID, 'gutter-gap-lg');
 
     gap: var(--nappr-grid-gutter-gap-lg, #{$value});

package/sass/layout/grid/_grid.scss

@@ -1,24 +1,52 @@
 @use '../../core/funcs/map' as map;
+@use '../../core/mixins/' as mixins;
 @use '../../configs/' as configs;
 
+%grid-base {
+  display: grid;
+  gap: map.get(configs.$NAPPR_GRID, 'gutter-gap-sm');
+  width: 100%;
+}
+
+%grid-fluid-base {
+  @extend %grid-base;
+
+  max-width: none;
+}
+
 // ==========================================================
 // 1. BASE GRID DEFINITION
 // ==========================================================
 
+.grid,
+.grid-sm {
+  @extend %grid-base;
+}
+
+.grid--fluid,
+.grid-sm--fluid {
+  @extend %grid-fluid-base;
+}
+
 .grid,
 .grid--fluid {
-  display: grid;
-  gap: map.get(configs.$NAPPR_GRID, 'gutter-gap-sm');
   grid-template-columns: repeat(map.get(configs.$NAPPR_GRID, 'columns'), 1fr);
-  width: 100%;
+}
+
+.grid-sm,
+.grid-sm--fluid {
+  grid-template-columns: repeat(
+    map.get(configs.$NAPPR_GRID, 'columns-sm'),
+    1fr
+  );
 }
 
 .grid {
   max-width: map.get(configs.$NAPPR_GRID, 'max-width');
 }
 
-.grid--fluid {
-  max-width: none;
+.grid-sm {
+  max-width: map.get(configs.$NAPPR_GRID, 'max-width-sm');
 }
 
 // ==========================================================

package/sass/layout/grid/_offsets.scss

@@ -3,7 +3,7 @@
 @use '../../core/funcs/map' as map;
 
 @for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
-  .grid--col-offset-#{$i} {
+  .grid-col-offset-#{$i} {
     grid-column-start: #{$i + 1};
   }
 }
@@ -11,7 +11,7 @@
 @each $key, $value in configs.$NAPPR_BREAKPOINTS {
   @include mixins.media-query-min($key) {
     @for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
-      .grid-#{$key}--col-offset-#{$i} {
+      .grid-#{$key}-col--offset-#{$i} {
         grid-column-start: #{$i + 1};
       }
     }
@@ -19,7 +19,7 @@
 }
 
 @for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
-  .grid--col-offset-#{$i}__right {
+  .grid-col--offset-#{$i}__right {
     grid-column-end: #{$i + 1};
   }
 }
@@ -27,7 +27,7 @@
 @each $key, $value in configs.$NAPPR_BREAKPOINTS {
   @include mixins.media-query-min($key) {
     @for $i from 0 through map.get(configs.$NAPPR_GRID, 'columns') {
-      .grid-#{$key}--col-offset-#{$i}__right {
+      .grid-#{$key}-col--offset-#{$i}__right {
         grid-column-end: #{$i + 1};
       }
     }

package/sass/main.scss

@@ -39,9 +39,9 @@
 
 /* 7. 🧩 COMPONENTS (UI Components)
 /* ========================================================== */
-// @use './components/badge/elements' as *;
+@use './components/' as *;
 
-// @use './components/button/' as *;
+// @use './components/badge/elements' as *;
 // @use './components/scrollbar/' as *;
 
 /* ========================================================== */

package/sass/resets/_nappr.scss

@@ -3,6 +3,7 @@ html {
 }
 
 body {
+  background-color: var(--nappr-theme-background);
   color: var(--nappr-theme-text-secondary);
   font-family: var(--nappr-text-font-family);
   font-size: var(--nappr-text-font-size);

package/sass/utilities/_displays.scss

@@ -95,17 +95,33 @@
 }
 
 // ==========================================================
-// SIZES
+// Layout
 // ==========================================================
 
-.is-full-width {
+.is-layout-width {
   @extend %is-full-width;
 }
 
-.is-full-height {
+.is-layout-height {
   @extend %is-full-height;
 }
 
-.is-full-layout {
+.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

@@ -1,5 +1,6 @@
 @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} {
@@ -79,3 +80,23 @@
     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/sass/utilities/_floats.scss

@@ -2,8 +2,6 @@
 // Utility Classes
 // ==========================================================
 .clearfix {
-  *zoom: 1;
-
   &::after,
   &::before {
     content: '.';

package/sass/utilities/_scrolls.scss

@@ -3,9 +3,15 @@
 // ==========================================================
 // 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;
 }
@@ -13,15 +19,20 @@
 %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;
 }