@linzjs/lui 22.4.0 → 22.4.2

package/dist/scss/Components/ContextMenu/context-menu.scss

@@ -34,6 +34,8 @@
 }
 
 .lui-select-menu.szh-menu {
+  @include fonts.font-light;
+  color: colors.$base-type-color;
   z-index: 900;
   width: 92vw;
   overflow-y: scroll;
@@ -43,9 +45,6 @@
     height: auto;
     width: 240px;
   }
-
-  color: colors.$base-type-color;
-  @include fonts.font-light;
 }
 
 li.lui-select-menuItem {

package/dist/scss/Components/Footer/footer.scss

@@ -12,6 +12,8 @@
 }
 
 .lui-footer {
+  background-color: lui.$sherpa;
+
   padding-top: lui.$unit-lg;
   padding-bottom: lui.$unit-lg;
 
@@ -24,22 +26,20 @@
   }
 
   .lui-footer-app-title {
+    @include footer-column-md-breakpoint;
     @include breakpoint(md) {
       display: flex;
       justify-content: space-between;
     }
-
-    @include footer-column-md-breakpoint;
   }
 
   .lui-footer-columns {
+    @include footer-column-md-breakpoint;
     @include breakpoint(md) {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
-
-    @include footer-column-md-breakpoint;
   }
 
   .lui-footer-container-right {
@@ -58,8 +58,6 @@
     color: lui.$iceberg;
   }
 
-  background-color: lui.$sherpa;
-
   h1,
   h2,
   h3,

package/dist/scss/Components/HeaderV2/header-v2.scss

@@ -109,11 +109,11 @@ $headerElementPadding: spacing.$unit-xs;
 }
 
 .LuiHeaderV2-linz-logo {
+  vertical-align: middle;
   width: 170px;
   @include breakpoint(sm) {
     width: 200px;
   }
-  vertical-align: middle;
 }
 
 .LuiHeaderV2-small {
@@ -205,6 +205,7 @@ $headerElementPadding: spacing.$unit-xs;
     .menu-tooltip {
       display: none;
       background-color: black;
+      border-radius: misc.$borderRadius;
       text-align: center;
       border-radius: 4px;
       padding: 6px 6px;
@@ -217,7 +218,6 @@ $headerElementPadding: spacing.$unit-xs;
       z-index: 10;
 
       @include drop-shadow(sm);
-      border-radius: misc.$borderRadius;
 
       &.dark {
         color: colors.$hint;

package/dist/scss/Components/LuiErrorPage/LuiErrorPage.scss

@@ -17,12 +17,12 @@ $MaxImgWidth: toRem(280px);
 .LuiErrorPage-wrapper {
   display: grid;
   grid-template-columns: 1fr;
+  margin: lui.$unit-xl auto;
+  max-width: $MaxContentWidth;
 
   @include lui.breakpoint(md) {
     grid-template-columns: 1fr $MaxImgWidth;
   }
-  max-width: $MaxContentWidth;
-  margin: lui.$unit-xl auto;
   .ErrorPageHeading {
     margin-top: 0;
   }

package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss

@@ -27,20 +27,23 @@
       breakpoints.$breakpoint-xl
     );
     @include forms.formPlaceholder;
-    border: solid 1px colors.$silver;
-    border-radius: misc.$borderRadius;
-    background: colors.$white;
-    padding: {
-      top: spacing.$unit-sm;
-      right: spacing.$unit-lg;
-      bottom: spacing.$unit-sm;
-      left: spacing.$unit-xs * 2;
+
+    & {
+      border: solid 1px colors.$silver;
+      border-radius: misc.$borderRadius;
+      background: colors.$white;
+      padding: {
+        top: spacing.$unit-sm;
+        right: spacing.$unit-lg;
+        bottom: spacing.$unit-sm;
+        left: spacing.$unit-xs * 2;
+      }
+      box-sizing: border-box;
+      width: 100%;
+      resize: vertical;
+      min-height: 100px;
+      position: relative;
     }
-    box-sizing: border-box;
-    width: 100%;
-    resize: vertical;
-    min-height: 100px;
-    position: relative;
 
     &:focus {
       outline: none;

package/dist/scss/Components/LuiSplitButton/LuiSplitButton.scss

@@ -29,11 +29,14 @@
       colors.$primary-active-btn,
       colors.$primary-active-btn
     );
-    align-items: center;
-    border-radius: 0 misc.$borderRadius 0 0;
-    display: flex;
-    justify-content: center;
-    padding: 0;
+
+    & {
+      align-items: center;
+      border-radius: 0 misc.$borderRadius 0 0;
+      display: flex;
+      justify-content: center;
+      padding: 0;
+    }
 
     .lui-expand-icon {
       color: colors.$white;
@@ -57,7 +60,10 @@
       .lui-expand-icon {
         color: colors.$sea;
       }
-      border-left:0;
+
+      & {
+        border-left:0;
+      }
     }
     &-secondary:hover {
       border-left:0;
@@ -77,8 +83,10 @@
     height: auto;
   }
 
-  color: colors.$base-type-color;
-  @include fonts.font-light;
+  & {
+    @include fonts.font-light;
+    color: colors.$base-type-color;
+  }
 }
 
 li.lui-split-button-menuItem {

package/dist/scss/Components/Menu/menu.scss

@@ -35,17 +35,17 @@ body.lui-menu-drawer-open {
 
   .lui-header & {
     top: header.$headerHeightMd;
-    height: calc(100% - #{header.$headerHeightMd});
+    height: calc(100% - header.$headerHeightMd);
 
     @include breakpoint(md) {
       top: header.$headerHeightLg;
-      height: calc(100% - #{header.$headerHeightLg});
+      height: calc(100% - header.$headerHeightLg);
     }
   }
 
   .lui-header-small & {
     top: header.$headerHeightSm;
-    height: calc(100% - #{header.$headerHeightSm});
+    height: calc(100% - header.$headerHeightSm);
   }
 
   &-closed {
@@ -97,12 +97,11 @@ body.lui-menu-drawer-open {
   border-radius: misc.$borderRadius;
   right: 0;
   top: toRem(32px); // same as menu item font size
+  z-index: 900; // primary menu
 
   &-closed {
     display: none;
   }
-
-  z-index: 900; // primary menu
 }
 
 .LuiDrawerMenuSection-header {

package/dist/scss/Components/Notifications/notifications.scss

@@ -11,6 +11,7 @@
     rgba(0, 161, 161, 1) 0%,
     rgba(191, 237, 246, 1) 100%
   );
+  position: relative;
 
   @include breakpoint(sm) {
     max-width: 800px;
@@ -20,7 +21,6 @@
   @include breakpoint(md) {
     max-width: 900px;
   }
-  position: relative;
 }
 
 .lui-feature-header {

package/dist/scss/Elements/Buttons/buttons.scss

@@ -215,10 +215,12 @@ a.lui-button {
       colors.$tertiary-active-btn,
       #fff
     );
-    @include fonts.font-regular();
 
-    border: none;
-    margin: 2px; //account for the slightly smaller button size;
+    & {
+      @include fonts.font-regular();
+      border: none;
+      margin: 2px; //account for the slightly smaller button size;
+    }
 
     &:hover {
       border: none;
@@ -324,12 +326,14 @@ a.lui-button {
     );
     // border bottom mimics what we have for text link styling
     //border-bottom: 1px solid;
-    text-decoration: underline;
-    @include fonts.font-regular();
-    // remove the padding and margin off the buttons - used for text only buttons
-    padding: 0;
-    margin: 0;
-    border-radius: 0; // remove border radius so the text underline via border bottom doesn't turn up at the ends
+    & {
+      text-decoration: underline;
+      @include fonts.font-regular();
+      // remove the padding and margin off the buttons - used for text only buttons
+      padding: 0;
+      margin: 0;
+      border-radius: 0; // remove border radius so the text underline via border bottom doesn't turn up at the ends
+    }
     //&:hover {
     //  border-bottom: 1px solid;
     //}
@@ -370,14 +374,17 @@ a.lui-button {
   &-plain-text {
     // var $btnTxtCol, $btnBgCol, $borderCol
     @include button-builder(inherit, transparent, #fff, 0);
-    // remove the padding and margin off the buttons - used for text only buttons
-    padding: 0;
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    font-weight: inherit;
+
+    & {
+      // remove the padding and margin off the buttons - used for text only buttons
+      padding: 0;
+      margin: 0;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+      font-weight: inherit;
+    }
 
     i,
     svg * {
@@ -431,11 +438,14 @@ a.lui-button {
       transparent,
       transparent
     );
-    // OK, for some reason setting the line height to 44px sets the icon in the centre of the 36 X 36 box. Tested fine on Chrome, FF & Safari
-    line-height: 44px;
-    padding: 0;
-    width: 36px;
-    height: 36px;
+
+    & {
+      // OK, for some reason setting the line height to 44px sets the icon in the centre of the 36 X 36 box. Tested fine on Chrome, FF & Safari
+      line-height: 44px;
+      padding: 0;
+      width: 36px;
+      height: 36px;
+    }
 
     &:disabled {
       background-color: transparent;

package/dist/scss/Foundation/Utilities/DLColumns.scss

@@ -33,9 +33,9 @@
   dd {
     margin-left: 0;
     padding-left: $dl-gutter-width;
-    width: calc(100% - #{$dt-width});
+    width: calc(100% - $dt-width);
     @media #{$desktop} {
-      width: calc(100% - #{$dt-width-desktop});
+      width: calc(100% - $dt-width-desktop);
     }
   }
 

package/dist/scss/Foundation/Utilities/FluidType.scss

@@ -26,22 +26,17 @@
   $min-breakpoint: 1px,
   $max-breakpoint
 ) {
-  $u1: unit($min-breakpoint);
-  $u2: unit($max-breakpoint);
-  $u3: unit($min-size);
-  $u4: unit($max-size);
+  $u1: math.unit($min-breakpoint);
+  $u2: math.unit($max-breakpoint);
+  $u3: math.unit($min-size);
+  $u4: math.unit($max-size);
 
   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
     & {
       font-size: $min-size;
       @media screen and (min-width: $min-breakpoint) {
         font-size: calc(
-          #{$min-size} + #{strip-unit($max-size - $min-size)} *
-            (
-              (100vw - #{$min-breakpoint}) / #{strip-unit(
-                  $max-breakpoint - $min-breakpoint
-                )}
-            )
+          $min-size + (strip-unit($max-size - $min-size)) * ((100vw - $min-breakpoint) / (strip-unit($max-breakpoint - $min-breakpoint)))
         );
       }
 
@@ -58,22 +53,17 @@
   $min-breakpoint: 1px,
   $max-breakpoint
 ) {
-  $u1: unit($min-size);
-  $u2: unit($max-size);
-  $u3: unit($min-breakpoint);
-  $u4: unit($max-breakpoint);
+  $u1: math.unit($min-size);
+  $u2: math.unit($max-size);
+  $u3: math.unit($min-breakpoint);
+  $u4: math.unit($max-breakpoint);
 
   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
     & {
       line-height: $min-size;
       @media screen and (min-width: $min-breakpoint) {
         line-height: calc(
-          #{$min-size} + #{strip-unit($max-size - $min-size)} *
-            (
-              (100vw - #{$min-breakpoint}) / #{strip-unit(
-                  $max-breakpoint - $min-breakpoint
-                )}
-            )
+          $min-size + (strip-unit($max-size - $min-size)) * ((100vw - $min-breakpoint) / (strip-unit($max-breakpoint - $min-breakpoint)))
         );
       }
 

package/dist/scss/Foundation/Variables/ColorVars.scss

@@ -117,7 +117,7 @@ $brand-secondary: $surfie;
 // System colours
 
 $visited: $teal;
-$selection: lighten($spray, 20%);
+$selection: color.adjust($spray, $lightness: 20%);
 
 // restricted colours for btn hover states
 $primary-hover-btn: #005678;

package/dist/scss/Global/GenericElements/Todo.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use '../../Foundation/Variables/ColorVars.scss' as colors;
 
 // ============
@@ -26,7 +27,7 @@ $todo-throb-speed: 1.2s;
 // ============
 @keyframes border-throb {
   100% {
-    box-shadow: 0 0 4px 3px transparentize($todo-color, 0.7);
+    box-shadow: 0 0 4px 3px color.adjust($todo-color, $alpha: -0.7);
   }
 }
 @keyframes throb-fade {

package/dist/scss/Global/GenericElements/Typography.scss

@@ -51,8 +51,8 @@ b {
 
 sub,
 sup {
-  @extend %small !optional;
   line-height: 0;
+  @extend %small !optional;
 }
 
 hr {
@@ -208,7 +208,10 @@ p.lui-small {
     @include fonts.font-regular();
     @include fluidType--size(28px, 32px, $breakpoint-sm, $breakpoint-xl);
     @include fluidType--lineHeight(36px, 40px, $breakpoint-sm, $breakpoint-xl);
-    margin-top: spacing.$unit-xl; // 96px
+
+    & {
+      margin-top: spacing.$unit-xl; // 96px
+    }
 
     & + p {
       margin-top: spacing.$unit-sm; // 32px
@@ -220,8 +223,11 @@ p.lui-small {
     @include fonts.font-regular();
     @include fluidType--size(24px, 24px, $breakpoint-sm, $breakpoint-xl);
     @include fluidType--lineHeight(32px, 32px, $breakpoint-sm, $breakpoint-xl);
-    letter-spacing: 0.2px;
-    margin-top: spacing.$unit-lg; // 64px
+
+    & {
+      letter-spacing: 0.2px;
+      margin-top: spacing.$unit-lg; // 64px
+    }
 
     & + p {
       margin-top: spacing.$unit-sm; // 32px
@@ -233,8 +239,11 @@ p.lui-small {
     @include fonts.font-regular();
     @include fluidType--size(20px, 20px, $breakpoint-sm, $breakpoint-xl);
     @include fluidType--lineHeight(24px, 24px, $breakpoint-sm, $breakpoint-xl);
-    letter-spacing: 0.2px;
-    margin-top: spacing.$unit-lg; // 64px
+
+    & {
+      letter-spacing: 0.2px;
+      margin-top: spacing.$unit-lg; // 64px
+    }
 
     & + p {
       margin-top: spacing.$unit-sm; // 32px
@@ -253,7 +262,10 @@ p.lui-small {
     @include fonts.font-semibold();
     @include fluidType--size(14px, 14px, $breakpoint-sm, $breakpoint-xl);
     @include fluidType--lineHeight(18px, 18px, $breakpoint-sm, $breakpoint-xl);
-    letter-spacing: 0.2px;
+
+    & {
+      letter-spacing: 0.2px;
+    }
   }
 
   // =====================

package/dist/scss/Global/Layout/Container.scss

@@ -38,18 +38,18 @@ $container-padding: 2.5%;
 
 %Container--padding {
   padding: 0 $container-padding;
-  max-width: calc(#{breakpoints.$breakpoint1} + (#{$container-padding} * 2));
+  max-width: calc(breakpoints.$breakpoint1 + ($container-padding * 2));
 
   @include breakpoint(sm) {
-    max-width: calc(#{breakpoints.$breakpoint2} + (#{$container-padding} * 2));
+    max-width: calc(breakpoints.$breakpoint2 + ($container-padding * 2));
   }
 
   @include breakpoint(md) {
-    max-width: calc(#{breakpoints.$breakpoint3} + (#{$container-padding} * 2));
+    max-width: calc(breakpoints.$breakpoint3 + ($container-padding * 2));
   }
 
   @include breakpoint(lg) {
-    max-width: calc(#{breakpoints.$breakpoint4} + (#{$container-padding} * 2));
+    max-width: calc(breakpoints.$breakpoint4 + ($container-padding * 2));
   }
 }
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "22.4.0",
+  "version": "22.4.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -129,7 +129,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.31.2",
-    "sass": "^1.67.0",
+    "sass": "^1.83.4",
     "sass-loader": "^8.0.2",
     "semantic-release": "^22.0.10",
     "size-limit": "^7.0.8",