@aotearoan/neon 23.0.0 → 23.0.2

package/src/sass/components/_dropdown.scss

@@ -158,6 +158,7 @@
     &__button {
       flex: 1 0 auto;
       width: inherit;
+      gap: var(--neon-space-8);
     }
 
     &__badge {

package/src/sass/components/_field-group.scss

@@ -144,10 +144,21 @@
         }
       }
     }
-  }
 
-  .neon-button {
-    margin-left: calc(-1 * var(--neon-border-width));
-    z-index: var(--neon-z-index-above);
+    .neon-button {
+      margin-left: calc(-1 * var(--neon-border-width));
+      z-index: var(--neon-z-index-above);
+    }
+
+    .neon-number {
+      width: 100%;
+
+      input.neon-number__input.neon-input__textfield {
+        &,
+        &:focus {
+          border: none;
+        }
+      }
+    }
   }
 }

package/src/sass/components/_number.scss

@@ -111,6 +111,12 @@
       .neon-input__textfield:focus {
         max-width: calc(100% + var(--neon-border-width));
       }
+
+      .neon-input {
+        .neon-icon {
+          display: none;
+        }
+      }
     }
 
     .neon-input .neon-input__textfield {
@@ -130,11 +136,5 @@
         margin: 0;
       }
     }
-
-    .neon-input {
-      .neon-icon {
-        display: none;
-      }
-    }
   }
 }

package/src/sass/components/_page-container.scss

@@ -0,0 +1,55 @@
+@use '../includes/layout';
+@use '../includes/responsive';
+@use '../includes/svg';
+
+@mixin page-container {
+  .neon-page-container {
+    padding-bottom: calc(var(--neon-space-20) + var(--neon-height-mobile-menu) + var(--neon-border-width));
+    gap: var(--neon-gutter);
+
+    @include layout.min-height(
+                    100,
+                    'var(--neon-top-nav-height-desktop) + var(--neon-border-width-top-nav) + var(--neon-footer-height-desktop) + var(--neon-border-width-footer)'
+    );
+
+    @include responsive.responsive(tablet) {
+      @include layout.min-height(
+                      100,
+                      'var(--neon-top-nav-height-tablet) + var(--neon-border-width-top-nav) + var(--neon-footer-height-tablet) + var(--neon-border-width-footer)'
+      );
+    }
+
+    @include responsive.responsive(mobile-large) {
+      @include layout.min-height(100);
+    }
+
+    &.neon-page-container--hide-nav {
+      @include layout.min-height(100, 'var(--neon-footer-height-desktop) + var(--neon-border-width-footer)');
+
+      @include responsive.responsive(tablet) {
+        @include layout.min-height(100, 'var(--neon-footer-height-tablet) + var(--neon-border-width-footer)');
+      }
+
+      @include responsive.responsive(mobile-large) {
+        @include layout.min-height(100);
+      }
+    }
+
+    &.neon-page-container--with-sticky-buttons {
+      padding-bottom: calc(
+              var(--neon-height-page-container-sticky-buttons) + var(--neon-space-20) + var(--neon-height-mobile-menu) +
+              var(--neon-height-mobile-menu-indicator)
+      );
+    }
+
+    h1,
+    .neon-page-container__title {
+      padding-top: var(--neon-gutter);
+      margin-bottom: 0;
+    }
+
+    @include responsive.responsive(larger-than-mobile-large) {
+      padding-bottom: var(--neon-space-96);
+    }
+  }
+}

package/src/sass/components/_toggle-chip.scss

@@ -1,9 +1,9 @@
 @use '../includes/palettes';
 @use '../includes/svg';
 
-@mixin neon-toggle-chip-size($neon-toggle-chip-size, $neon-toggle-chip-padding) {
+@mixin neon-toggle-chip-size($neon-toggle-chip-size, $neon-toggle-chip-font-size, $neon-toggle-chip-padding) {
   height: var(--neon-size-#{$neon-toggle-chip-size});
-  font-size: var(--neon-font-size-#{$neon-toggle-chip-size});
+  font-size: var(--neon-font-size-#{$neon-toggle-chip-font-size});
   padding-left: calc(#{$neon-toggle-chip-padding} * var(--neon-space-4));
   padding-right: calc(#{$neon-toggle-chip-padding} * var(--neon-space-4));
 
@@ -61,6 +61,7 @@
       user-select: none;
       display: flex;
       align-items: center;
+      white-space: nowrap;
     }
 
     &__input {
@@ -81,19 +82,19 @@
     }
 
     &--xs {
-      @include neon-toggle-chip-size('xs', 2);
+      @include neon-toggle-chip-size('xs', 's', 2);
     }
 
     &--s {
-      @include neon-toggle-chip-size('s', 2.5);
+      @include neon-toggle-chip-size('s', 'm', 2.5);
     }
 
     &--m {
-      @include neon-toggle-chip-size('m', 3.5);
+      @include neon-toggle-chip-size('m', 'm', 3.5);
     }
 
     &--l {
-      @include neon-toggle-chip-size('l', 5);
+      @include neon-toggle-chip-size('l', 'l', 5);
     }
 
     &:active:not(.neon-toggle-chip--disabled):not(.neon-toggle-chip--show-check) {

package/src/sass/components/components.scss

@@ -55,4 +55,5 @@
 @forward './card-list';
 @forward './image-carousel';
 @forward './swiper';
-@forward './mobile-menu';
+@forward './mobile-menu';
+@forward './page-container';

package/src/sass/includes/_dependencies.scss

@@ -129,6 +129,7 @@
           NeonImageCarousel: [NeonButton, NeonLink],
           NeonSwiper: [],
           NeonMobileMenu: [NeonIcon, NeonLink],
+          NeonPageContainer: [NeonIcon],
   );
 
   $neon-flattened-components: [];

package/src/sass/theme.scss

@@ -266,4 +266,8 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonMobileMenu) {
     @include components.mobile-menu;
   }
+
+  @if index($neon-flattened-components, NeonPageContainer) {
+    @include components.page-container;
+  }
 }

package/src/sass/variables.scss

@@ -311,6 +311,8 @@
   /* drawer */
   --neon-border-width-drawer: 0;
   --neon-border-radius-drawer: 16rem;
+  --neon-height-drawer: auto;
+  --neon-width-drawer: --neon-side-nav-width;
 
   /* radio buttons */
   --neon-border-radius-radio-button: 50%;
@@ -419,6 +421,9 @@
   /* image carousel */
   --neon-blur-radius-image-carousel: 5px;
 
+  /* page container */
+  --neon-height-page-container-sticky-buttons: 72rem;
+
   /**********************
   * DARK THEME VARIABLES
   **********************/