nsw-design-system 3.0.4 → 3.2.0

package/src/components/filters/_filters.scss

@@ -31,6 +31,10 @@
       display: flex;
       align-items: center;
       text-decoration: none;
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-white);
+      }
 
       span {
         text-decoration: underline;
@@ -44,12 +48,21 @@
       padding: rem(1px);
       border: 2px solid var(--nsw-brand-dark);
       text-decoration: none;
+      
+      .nsw-section--invert & {    
+        border-color: var(--nsw-white);
+      }
     }
 
     &.active {
       .nsw-material-icons {
         background-color: var(--nsw-brand-dark);
         color: var(--nsw-text-light);
+      
+        .nsw-section--invert & {    
+          background-color: var(--nsw-white);
+          color: var(--nsw-brand-dark);
+        }
       }
     }
   }
@@ -67,6 +80,10 @@
     @include breakpoint('lg') {
       display: none;
     }
+
+    .nsw-section--invert & {
+      background-color: var(--nsw-brand-dark);
+    }
   }
 
   &__wrapper {
@@ -81,6 +98,10 @@
       overflow-y: auto;
       background-color: var(--nsw-white);
       padding: rem(73px) rem(16px) rem(101px) rem(16px);
+      
+      .nsw-section--invert & {    
+        background-color: var(--nsw-brand-dark);
+      }
 
       @include breakpoint('lg') {
         display: block;
@@ -88,6 +109,10 @@
         background-color: transparent;
         padding: 0;
         overflow-y: visible;
+        
+        .nsw-section--invert & {    
+          background-color: transparent;
+        }
       }
     }
 
@@ -122,9 +147,18 @@
       background-color: var(--nsw-white);
       padding: rem(24px) rem(16px);
 
+      .nsw-section--invert & {
+        background-color: var(--nsw-brand-dark);
+      }
+
       @include breakpoint('lg') {
         position: static;
         padding: rem(32px) 0;
+        background-color: transparent;
+
+        .nsw-section--invert & {
+          background-color: transparent;
+        }
       }
     }
   }
@@ -139,6 +173,7 @@
       @include breakpoint('lg') {
         padding-top: 0;
         border: 0;
+        background-color: transparent;
       }
     }
 
@@ -149,6 +184,10 @@
 
     button {
       @include link-button;
+
+      .nsw-section--invert & {
+        @include link-light;
+      }
     }
   }
 
@@ -156,6 +195,10 @@
   &__less {
     @include link-button;
     margin-top: rem(24px);
+
+    .nsw-section--invert & {
+      @include link-light;
+    }
   }
 
   .hidden {

package/src/components/header/_header.scss

@@ -102,12 +102,20 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      margin: rem(12px) rem(72px) rem(12px) 0;
+      margin: rem(20px) rem(72px) rem(20px) 0;
 
       &:focus-within {
         @include nsw-focus;
       }
     }
+
+    .nsw-header__rectangular-logo {
+      @include breakpoint('lg') {
+        height: rem(60px);
+        margin-top: rem(8px);
+        margin-bottom: rem(8px);
+      }
+    }
   }
 
   &__waratah {
@@ -163,7 +171,7 @@
         margin-left: rem(24px);
 
         @include breakpoint($nsw-desktop-breakpoint) {
-          margin-left: rem(48px);
+          margin-left: rem(40px);
         }
       }      
     }
@@ -191,7 +199,7 @@
 
     @include breakpoint($nsw-desktop-breakpoint) {
       padding: 0;
-      margin-left: rem(32px);
+      margin-left: rem(40px);
     }
   }
 
@@ -202,6 +210,10 @@
     display: flex;
     align-items: center;
 
+    @include breakpoint('lg') {
+      line-height: rem(28px);
+    }
+
     .nsw-tag {
       margin-left: rem(24px);
     }
@@ -217,7 +229,6 @@
     justify-content: center;
 
     @include breakpoint($nsw-desktop-breakpoint) {
-      padding-left: rem(16px);
       justify-content: flex-start;
     }
 

package/src/components/hero-banner/_hero-banner.scss

@@ -145,34 +145,33 @@
     object-position: center;
   }
 
-  &__graphic {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
+  &__lines {
+    display: none;
+    background-color: var(--nsw-brand-light);
+    position: relative;
 
-    &--transparent {
-      opacity: 0.2;
+    @include breakpoint('md') {
+      display: block;
+      width: 100%;
     }
-  }
 
-  &__bg {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: var(--nsw-brand-dark);
-    opacity: 0.2;
-    /*
-    background-image: url("data:image/svg+xml,%3Csvg width='206' height='220' viewBox='0 0 206 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M206 220V36.232L32.136 220H206zm-189.5 0H0L206 2.143v17.46L16.5 220z'/%3E%3C/svg%3E");
-    background-size: rem(206px);
-    background-position: right bottom;
-    background-repeat: no-repeat;
-    */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: rem(-16px);
+      width: rem(32px);
+      background-color: var(--nsw-brand-supplementary);
+    }
   }
 
   &--light {
     background-color: var(--nsw-brand-light);
+
+    .nsw-hero-banner__lines {
+      background-color: var(--nsw-brand-dark);
+    }
   }
 
   &--dark {
@@ -190,10 +189,45 @@
       }
     }
 
-    /*
-    .nsw-hero-banner__bg {
-      background-image: url("data:image/svg+xml,%3Csvg width='206' height='220' viewBox='0 0 206 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M206 220V36.232L32.136 220H206zm-189.5 0H0L206 2.143v17.46L16.5 220z'/%3E%3C/svg%3E");
+    .nsw-hero-banner__list {
+      border-color: var(--nsw-brand-light);
+    }
+  }
+
+  &--lines {
+    border-bottom: rem(32px) solid var(--nsw-brand-light);
+
+    @include breakpoint('md') {
+      border: 0;
+    }
+
+    &.nsw-hero-banner--light {
+      border-color: var(--nsw-brand-dark);
+    }
+
+    &::after {
+      visibility: hidden;
+
+      @include breakpoint('md') {
+        visibility: visible;
+      }
+    }
+
+    .nsw-hero-banner__container {
+      border-bottom: rem(16px) solid var(--nsw-brand-supplementary);
+
+      @include breakpoint('md') {
+        border: 0;
+      }
+    }
+
+    .nsw-hero-banner__box {
+      width: 25%;
+
+      @include breakpoint('xl') {
+        width: 50%;
+        padding-left: calc(var(--nsw-container-width)/4+#{rem($grid-gutters)}*2);
+      }
     }
-    */
   }
 }

package/src/components/in-page-alert/_in-page-alert.scss

@@ -35,6 +35,14 @@ $nsw-in-page-alerts: (
   @include breakpoint('md') {
     padding: rem(24px) rem(24px) rem(24px) rem(16px);
   }
+      
+  .nsw-section--invert & {    
+    color: var(--nsw-text-dark);
+
+    a {
+      @include link-dark;
+    }
+  }
 
   &__icon {
     font-size: rem(map-get($nsw-icon-sizes, 30));

package/src/components/link-list/_link-list.scss

@@ -50,6 +50,10 @@
     .nsw-material-icons {
       text-decoration: none;
     }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-text-light);
+    }
   }
 
   .nsw-material-icons {

package/src/components/media/_media.scss

@@ -2,6 +2,10 @@
   width: 100%;
   margin: rem(16px) auto;
 
+  .nsw-section--invert & {    
+    color: var(--nsw-text-dark);
+  }
+
   @include breakpoint('md') {
     margin-top: rem(32px);
     margin-bottom: rem(32px);
@@ -107,6 +111,10 @@
       padding-left: 0;
       padding-right: 0;
       padding-bottom: 0;
+
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+      }
     }
   }
 }

package/src/components/pagination/_pagination.scss

@@ -51,6 +51,10 @@
         height: 2px;
         background-color: var(--nsw-brand-accent);        
       }
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+      }
     }    
   }
 }

package/src/components/side-nav/_side-nav.scss

@@ -53,12 +53,24 @@
 
     &.current {
       background-color: var(--nsw-off-white);
+      
+      .nsw-section--invert & {    
+        background-color: var(--nsw-text-hover-light);
+      }
+    }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-text-light);
     }
   }
 
   &__header {
     border-bottom: solid 2px var(--nsw-brand-dark);
 
+    .nsw-section--invert & {    
+      border-color: var(--nsw-brand-light);
+    }
+
     a {
       font-weight: var(--nsw-font-bold);
       padding: rem(8px) 0;

package/src/components/steps/_steps.scss

@@ -0,0 +1,315 @@
+.nsw-steps {
+  @include component-spacing();
+  counter-reset: step;
+
+  &__item {
+    position: relative;
+
+    &:last-child {
+      .nsw-steps__content {
+        padding-bottom: 0;
+
+        &::before {
+          bottom: 0;
+        }
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: rem(1px);
+      left: 0;
+      width: rem(32px);
+      height: rem(32px);
+      border: rem(4px) solid var(--nsw-brand-accent);
+      border-radius: 100%;
+
+      @include breakpoint('lg') { 
+        width: rem(48px);
+        height: rem(48px);
+        top: rem(-4px);
+      }
+    }
+
+    &::after {
+      @include font-size('md');
+      counter-increment: step;
+      content: counter(step);
+      position: absolute;
+      top: rem(1px);
+      left: 0;
+      width: rem(32px);
+      height: rem(32px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--nsw-brand-accent);
+      font-weight: var(--nsw-font-bold);
+      visibility: hidden;
+
+      @include breakpoint('lg') { 
+        width: rem(48px);
+        height: rem(48px);
+        top: rem(-4px);
+      }    
+    }
+
+    &--fill {
+      &::before {
+        background-color: var(--nsw-brand-accent);
+      }
+      
+      &::after {
+        color: var(--nsw-text-light);
+      }
+
+      .nsw-steps--dark & {
+        &::before {
+          background-color: var(--nsw-brand-dark);
+        }   
+      }
+
+      .nsw-steps--light & {
+        &::before {
+          background-color: var(--nsw-brand-light);
+        }
+      }
+
+      .nsw-steps--supplementary & {
+        &::before {
+          background-color: var(--nsw-brand-supplementary);
+        }
+      }
+    }
+  }
+
+  &__content {
+    position: relative;
+    padding: 0 0 rem(24px) rem(48px);
+
+    @include breakpoint('lg') { 
+      padding: 0 0 rem(32px) rem(72px);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: rem(33px);
+      bottom: rem(-1px);
+      left: rem(14px);
+      width: rem(4px);
+      background-color: var(--nsw-brand-accent);
+
+      @include breakpoint('lg') { 
+        top: rem(44px);
+        left: rem(22px);
+        bottom: rem(4px);
+      }
+    }
+  }
+
+  &--dark {
+    .nsw-steps__item {
+      &::before {
+        border-color: var(--nsw-brand-dark);
+      }
+
+      &::after {
+        color: var(--nsw-brand-dark);
+      }
+
+      &--fill {
+        &::after {
+          color: var(--nsw-text-light);
+        }
+      }
+    }
+
+    .nsw-steps__content {
+      &::before {
+        background-color: var(--nsw-brand-dark);
+      }
+    }
+  }
+
+  &--light {
+    .nsw-steps__item {
+      &::before {
+        border-color: var(--nsw-brand-light);
+      }
+
+      &::after {
+        color: var(--nsw-brand-light);
+      }
+
+      &--fill {
+        &::after {
+          color: var(--nsw-text-dark);
+        }
+      }
+    }
+
+    .nsw-steps__content {
+      &::before {
+        background-color: var(--nsw-brand-light);
+      }
+    }
+  }
+
+  &--supplementary {
+    .nsw-steps__item {
+      &::before {
+        border-color: var(--nsw-brand-supplementary);
+      }
+
+      &::after {
+        color: var(--nsw-brand-supplementary);
+      }
+
+      &--fill {
+        &::after {
+          color: var(--nsw-text-light);
+        }
+      }
+    }
+
+    .nsw-steps__content {
+      &::before {
+        background-color: var(--nsw-brand-supplementary);
+      }
+    }
+  }
+
+  &--counters {
+    .nsw-steps__item {
+      &::after {
+        visibility: visible;
+      }
+    }
+  }
+
+  &--fill {
+    .nsw-steps__item {
+      &::before {
+        background-color: var(--nsw-brand-accent);
+      }
+      
+      &::after {
+        color: var(--nsw-text-light);
+      }
+    }
+
+    &.nsw-steps--dark {
+      .nsw-steps__item {
+        &::before {
+          background-color: var(--nsw-brand-dark);
+        }
+      }      
+    }
+
+    &.nsw-steps--light {
+      .nsw-steps__item {
+        &::before {
+          background-color: var(--nsw-brand-light);
+        }
+      
+        &::after {
+          color: var(--nsw-text-dark);
+        }
+      }      
+    }
+
+    &.nsw-steps--supplementary {
+      .nsw-steps__item {
+        &::before {
+          background-color: var(--nsw-brand-supplementary);
+        }
+      }      
+    }
+  }
+
+  &--medium {
+    .nsw-steps__item {
+      &::before {
+        top: rem(-2px);
+
+        @include breakpoint('lg') { 
+          width: rem(40px);
+          height: rem(40px);
+          top: rem(-4px);
+        }
+      }
+
+      &::after {
+        top: rem(-2px);
+
+        @include breakpoint('lg') { 
+          font-size: var(--nsw-font-size-md-mobile);
+          width: rem(40px);
+          height: rem(40px);
+          top: rem(-4px);
+        }    
+      }
+    }
+
+    .nsw-steps__content {
+      @include breakpoint('lg') { 
+        padding-left: rem(64px);
+      }
+
+      &::before {
+        top: rem(30px);
+        bottom: rem(2px);
+
+        @include breakpoint('lg') { 
+          top: rem(36px);
+          bottom: rem(4px);
+          left: rem(18px);
+        }
+      }
+    }
+  }
+
+  &--small {
+    .nsw-steps__item {
+      &::before {
+        top: rem(-4px);
+
+        @include breakpoint('lg') { 
+          width: rem(32px);
+          height: rem(32px);
+          top: rem(-2px);
+        }
+      }
+
+      &::after {
+        top: rem(-4px);
+
+        @include breakpoint('lg') { 
+          font-size: var(--nsw-font-size-md-mobile);
+          width: rem(32px);
+          height: rem(32px);
+          top: rem(-2px);
+        }    
+      }
+    }
+
+    .nsw-steps__content {
+      @include breakpoint('lg') { 
+        padding-left: rem(56px);
+      }
+
+      &::before {
+        top: rem(28px);
+        bottom: rem(4px);
+
+        @include breakpoint('lg') { 
+          top: rem(30px);
+          bottom: rem(2px);
+          left: rem(14px);
+        }
+      }
+    }
+  }
+}

package/src/components/table/_table.scss

@@ -35,6 +35,10 @@ $nsw-vertical-align: (
 
     tbody tr:nth-of-type(even) {
       background-color: var(--nsw-off-white);
+      
+      .nsw-section--invert & {    
+        background-color: var(--nsw-text-hover-light);
+      }
     }
   }