@aotearoan/neon 22.3.0 → 22.4.1

package/src/sass/components/_swiper.scss

@@ -6,18 +6,14 @@
     flex-direction: row;
     max-width: 100%;
     width: 100%;
-    overflow-x: hidden;
 
     .neon-swiper__container {
       position: relative;
       top: 0;
       left: 0;
-      overflow-x: auto;
       overscroll-behavior: contain;
       width: 100%;
       height: 100%;
-
-      @include scrollbars.hide-scrollbars();
     }
 
     .neon-swiper__fade-out {
@@ -29,40 +25,108 @@
       z-index: var(--neon-z-index-above);
       width: 100%;
       height: 100%;
+    }
+
+    &--horizontal {
+      overflow-x: hidden;
+
+      .neon-swiper__container {
+        overflow-x: auto;
+        flex-direction: row;
+        @include scrollbars.hide-scrollbars();
+      }
+
+      .neon-swiper__fade-out {
+        &:before {
+          content: '';
+          position: absolute;
+          left: 0;
+          background: linear-gradient(to left, transparent, var(--neon-background-color-swiper));
+          height: 100%;
+          width: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fast);
+        }
 
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        background: linear-gradient(to left, transparent, var(--neon-background-color-swiper));
-        height: 100%;
-        width: 0;
-        transition: width ease-in-out var(--neon-animation-speed-fast);
+        &:after {
+          content: '';
+          position: absolute;
+          right: 0;
+          background: linear-gradient(to right, transparent, var(--neon-background-color-swiper));
+          height: 100%;
+          width: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
+        }
       }
 
-      &:after {
-        content: '';
-        position: absolute;
-        right: 0;
-        background: linear-gradient(to right, transparent, var(--neon-background-color-swiper));
-        height: 100%;
-        width: 0;
-        transition: width ease-in-out var(--neon-animation-speed-fastest);
+      &.neon-swiper--overflowing.neon-swiper--fade {
+        &:not(.neon-swiper--start) {
+          .neon-swiper__fade-out:before {
+            width: var(--neon-space-24);
+          }
+        }
+
+        &:not(.neon-swiper--end) {
+          .neon-swiper__fade-out:after {
+            width: var(--neon-space-24);
+          }
+        }
       }
     }
 
-    &--overflowing.neon-swiper--fade {
-      &:not(.neon-swiper--start) {
-        .neon-swiper__fade-out:before {
-          width: var(--neon-space-24);
+    &--vertical {
+      overflow-y: hidden;
+
+      .neon-swiper__container {
+        overflow-y: auto;
+      }
+
+      .neon-swiper__fade-out {
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          background: linear-gradient(to top, transparent, var(--neon-background-color-swiper));
+          width: 100%;
+          height: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          background: linear-gradient(to bottom, transparent, var(--neon-background-color-swiper));
+          width: 100%;
+          height: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
         }
       }
 
-      &:not(.neon-swiper--end) {
-        .neon-swiper__fade-out:after {
-          width: var(--neon-space-24);
+      &.neon-swiper--overflowing.neon-swiper--fade {
+        &:not(.neon-swiper--start) {
+          .neon-swiper__fade-out:before {
+            height: var(--neon-space-24);
+          }
+        }
+
+        &:not(.neon-swiper--end) {
+          .neon-swiper__fade-out:after {
+            height: var(--neon-space-24);
+          }
         }
       }
     }
+
+    &.neon-swiper--hide-fade-start {
+      .neon-swiper__fade-out:before {
+        display: none;
+      }
+    }
+
+    &.neon-swiper--hide-fade-end {
+      .neon-swiper__fade-out:after {
+        display: none;
+      }
+    }
   }
 }

package/src/sass/components/_tabs.scss

@@ -11,7 +11,7 @@
         $tab-hover-color: var(--neon-color-tab-hover-#{$color});
 
         .neon-tabs__menu-item {
-          &--selected {
+          &.neon-tabs__menu-item {
             .neon-tabs__menu-item-container:before {
               background-color: $tab-selected-color;
             }
@@ -24,13 +24,17 @@
             }
           }
 
+          .neon-tabs__menu-item-container:focus {
+            background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-tab-focus));
+          }
+
           &-container:focus:before {
             background-color: $tab-hover-color;
           }
         }
 
         .neon-tab {
-          &:focus:before {
+          &:focus-visible:before {
             background-color: $tab-hover-color;
           }
         }
@@ -38,13 +42,17 @@
     }
 
     .neon-tabs__menu-items {
+      height: var(--neon-height-tabs);
       display: flex;
       flex-direction: row;
       align-items: center;
-      font-weight: var(--neon-font-weight-medium);
     }
 
     .neon-tabs__menu-item {
+      --neon-border-width-link: 0rem;
+      --neon-border-width-link-hover: 0rem;
+
+      text-decoration: none;
       position: relative;
       display: flex;
       flex-direction: row;
@@ -56,6 +64,12 @@
       transition: color ease-in-out var(--neon-animation-speed-fast);
       @include svg.color-with-svg(var(--neon-color-low-contrast));
 
+      font-weight: var(--neon-font-weight-tabs);
+
+      &--selected {
+        font-weight: var(--neon-font-weight-tabs-selected);
+      }
+
       &:focus {
         outline: none;
       }
@@ -84,6 +98,7 @@
           position: absolute;
           height: var(--neon-border-width-tabs);
           bottom: 0;
+          left: 0;
           border-radius: var(--neon-border-radius-tabs);
           transition: all ease-in-out var(--neon-animation-speed-fast);
         }
@@ -92,7 +107,6 @@
 
     &.neon-tabs--s {
       .neon-tabs__menu-items {
-        height: var(--neon-size-s);
         font-size: var(--neon-font-size-m);
 
         svg {
@@ -105,7 +119,6 @@
 
     &.neon-tabs--m {
       .neon-tabs__menu-items {
-        height: var(--neon-size-m);
         font-size: var(--neon-font-size-l);
 
         svg {
@@ -118,7 +131,6 @@
 
     &.neon-tabs--l {
       .neon-tabs__menu-items {
-        height: var(--neon-size-l);
         font-size: var(--neon-font-size-l);
 
         svg {
@@ -129,29 +141,48 @@
       }
     }
 
+    .neon-tabs__menu-items--full-width-mobile {
+      @include responsive.responsive(mobile-large) {
+        margin: 0 calc(-1 * var(--neon-gutter-mobile));
+        max-width: calc(100% + 2 * var(--neon-gutter-mobile));
+        width: calc(100% + 2 * var(--neon-gutter-mobile));
+      }
+    }
+
     .neon-tabs__menu-items--underlined {
-      border-bottom: var(--neon-border-width-tabs) var(--neon-border-style) var(--neon-border-color-tabs-underline);
+      .neon-swiper__container {
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          display: flex;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: var(--neon-border-width-tabs);
+          background-color: var(--neon-border-color-tabs-underline);
+        }
+
+        .neon-tabs__menu-item-container:before {
+          background-color: var(--neon-border-color-tabs-underline);
+        }
+      }
 
       .neon-tabs__menu-item-container:before {
-        bottom: calc(-1 * var(--neon-border-width-tabs));
+        bottom: 0;
+        z-index: var(--neon-z-index-above);
       }
     }
 
     .neon-tabs__menu-item {
-      & + .neon-tabs__menu-item {
-        margin-left: calc(6 * var(--neon-base-space));
-      }
-
       &-container {
+        padding: 0 calc(8 * var(--neon-base-space));
         flex-direction: row;
       }
 
-      .neon-tabs__menu-item-container:focus {
-        &:before {
-          margin-left: var(--neon-base-space);
-          margin-right: var(--neon-base-space);
-          width: calc(100% - 2 * var(--neon-base-space));
-        }
+      .neon-tabs__menu-label {
+        white-space: nowrap;
       }
     }
   }
@@ -178,7 +209,7 @@
       transition: all var(--neon-animation-speed-fast) ease-in-out;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
 
       &:before {
@@ -187,17 +218,6 @@
     }
   }
 
-  @include responsive.responsive(mobile-large) {
-    .neon-tabs__menu-items {
-      display: none;
-    }
-
-    .neon-tab {
-      display: flex;
-      padding-bottom: 0;
-    }
-  }
-
   .neon-card-body--full-width {
     .neon-tabs__menu-items {
       @include layout.padding-horizontal;

package/src/sass/includes/_dependencies.scss

@@ -112,7 +112,7 @@
           NeonSplashLoader: [NeonIcon],
           NeonSwitch: [NeonIcon],
           NeonTab: [],
-          NeonTabs: [NeonIcon],
+          NeonTabs: [NeonIcon, NeonSwiper, NeonLink],
           NeonToastContainer: [NeonIcon],
           NeonToggle: [NeonIcon],
           NeonToggleChip: [NeonIcon],

package/src/sass/variables.scss

@@ -245,8 +245,12 @@
   --neon-letter-spacing-button: var(--neon-letter-spacing-m);
 
   /* tabs */
-  --neon-border-width-tabs: 4rem;
+  --neon-height-tabs: 48rem;
+  --neon-border-width-tabs: 2rem;
   --neon-border-radius-tabs: 0;
+  --neon-font-weight-tabs: var(--neon-font-weight-normal);
+  --neon-font-weight-tabs-selected: var(--neon-font-weight-bold);
+  --neon-opacity-tab-focus: 0.125;
 
   /* chips */
   --neon-border-radius-chip: var(--neon-border-radius);
@@ -592,7 +596,7 @@
     --neon-box-shadow-tooltip: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) var(--neon-color-neutral-d5);
 
     /* tabs */
-    --neon-border-color-tabs-underline: transparent;
+    --neon-border-color-tabs-underline: var(--neon-border-color);
     --neon-color-tab-selected-low-contrast: var(--neon-color-low-contrast-l1);
     --neon-color-tab-selected-neutral: var(--neon-color-neutral-l1);
     --neon-color-tab-selected-high-contrast: var(--neon-color-high-contrast-l1);
@@ -902,7 +906,7 @@
     --neon-box-shadow-tooltip: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) rgba(var(--neon-rgb-neutral-d1), 0.5);
 
     /* tabs */
-    --neon-border-color-tabs-underline: transparent;
+    --neon-border-color-tabs-underline: var(--neon-border-color);
     --neon-color-tab-selected-low-contrast: var(--neon-color-low-contrast-d2);
     --neon-color-tab-selected-neutral: var(--neon-color-neutral-d2);
     --neon-color-tab-selected-high-contrast: var(--neon-color-high-contrast-d2);