@linzjs/lui 15.1.6 → 15.1.9

package/dist/scss/Components/LuiHeaderGlobal/LuiHeaderGlobal.scss

@@ -32,6 +32,10 @@
   @include breakpoint(540px) {
     display: block;
   }
+
+  &--isPublic {
+    display: block;
+  }
 }
 
 .LuiHeaderGlobal-firmDetails {
@@ -57,7 +61,7 @@
   transition: fill 0.3s ease-in-out;
 
   .LuiHeaderGlobal-trigger:hover & {
-    fill: colors.$snow;
+    // fill: colors.$snow;
   }
 }
 
@@ -67,12 +71,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: spacing.$unit-sm;
+  padding: spacing.$unit-xs;
   border-radius: spacing.$unit-xxs;
-  transition: background 0.3s ease-in-out;
+  transition-property: opacity, filter, background;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
 
   &:hover {
+    filter: opacity(80%);
+  }
+
+  &--active {
     background-color: colors.$teal;
+    opacity: 1;
   }
 
   &--logo {

package/dist/scss/Components/LuiIcon/LuiIcons.scss

@@ -2,8 +2,8 @@
 
 // Component starts
 
-$icon-xl: 64px;
-$icon-lg: 48px;
+$icon-xl: 48px;
+$icon-lg: 32px;
 $icon-md: 24px;
 $icon-sm: 16px;
 $icon-xs: 12px;

package/dist/scss/Components/LuiMenuTrigger/LuiMenuTrigger.scss

@@ -0,0 +1,128 @@
+@use "../../Foundation/Variables/ColorVars.scss" as colors;
+
+// Settings
+// ==================================================
+$LuiMenuTrigger-padding-x: 16px !default;
+$LuiMenuTrigger-padding-y: 16px !default;
+$LuiMenuTrigger-layer-width: 24px !default;
+$LuiMenuTrigger-layer-height: 3px !default;
+$LuiMenuTrigger-layer-spacing: 4px !default;
+$LuiMenuTrigger-layer-color: colors.$snow !default;
+$LuiMenuTrigger-layer-border-radius: 8px !default;
+$LuiMenuTrigger-hover-opacity: 0.7 !default;
+$LuiMenuTrigger-active-layer-color: $LuiMenuTrigger-layer-color !default;
+$LuiMenuTrigger-active-hover-opacity: $LuiMenuTrigger-hover-opacity !default;
+
+// To use CSS filters as the hover effect instead of opacity,
+// set $LuiMenuTrigger-hover-use-filter as true and
+// change the value of $LuiMenuTrigger-hover-filter accordingly.
+$LuiMenuTrigger-hover-use-filter: true !default;
+$LuiMenuTrigger-hover-filter: opacity(80%) !default;
+$LuiMenuTrigger-active-hover-filter: $LuiMenuTrigger-hover-filter !default;
+
+.LuiMenuTrigger {
+  padding: $LuiMenuTrigger-padding-y $LuiMenuTrigger-padding-x;
+  display: inline-block;
+  cursor: pointer;
+
+  transition-property: opacity, filter;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
+
+  // Normalize (<button>)
+  font: inherit;
+  color: inherit;
+  text-transform: none;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  overflow: visible;
+
+  &:hover {
+    @if $LuiMenuTrigger-hover-use-filter == true {
+      filter: $LuiMenuTrigger-hover-filter;
+    } @else {
+      opacity: $LuiMenuTrigger-hover-opacity;
+    }
+  }
+
+  &--active {
+    &:hover {
+      @if $LuiMenuTrigger-hover-use-filter == true {
+        filter: $LuiMenuTrigger-active-hover-filter;
+      } @else {
+        opacity: $LuiMenuTrigger-active-hover-opacity;
+      }
+    }
+  }
+}
+
+.LuiMenuTrigger-wrapper {
+  width: $LuiMenuTrigger-layer-width;
+  height: $LuiMenuTrigger-layer-height * 3 + $LuiMenuTrigger-layer-spacing * 2;
+  display: flex;
+  position: relative;
+}
+
+.LuiMenuTrigger-inner {
+  display: block;
+  top: 50%;
+  margin-top: $LuiMenuTrigger-layer-height / -2;
+  transition-duration: 0.075s;
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+  &,
+  &::before,
+  &::after {
+    width: $LuiMenuTrigger-layer-width;
+    height: $LuiMenuTrigger-layer-height;
+    background-color: $LuiMenuTrigger-layer-color;
+    border-radius: $LuiMenuTrigger-layer-border-radius;
+    position: absolute;
+    transition-property: transform;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+  }
+
+  &::before {
+    top: ($LuiMenuTrigger-layer-spacing + $LuiMenuTrigger-layer-height) * -1;
+    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
+  }
+
+  &::after {
+    bottom: ($LuiMenuTrigger-layer-spacing + $LuiMenuTrigger-layer-height) * -1;
+    transition: bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .LuiMenuTrigger--active & {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    background-color: $LuiMenuTrigger-active-layer-color;
+
+    &::before,
+    &::after {
+      background-color: $LuiMenuTrigger-active-layer-color;
+    }
+
+    &::before {
+      top: 0;
+      opacity: 0;
+      transition: top 0.075s ease, opacity 0.075s 0.12s ease;
+    }
+
+    &::after {
+      bottom: 0;
+      transform: rotate(-90deg);
+      transition: bottom 0.075s ease,
+        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+  }
+}

package/dist/scss/Elements/LuiButtons/LuiButton.scss

@@ -0,0 +1,9 @@
+@use "sass:math";
+
+@use "../../Foundation/Variables/ColorVars.scss" as colors;
+@use "../../Foundation/Variables/FontVars.scss" as fonts;
+@use "../../Foundation/Variables/MiscVars.scss" as misc;
+@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
+@use "../../Foundation/Utilities" as *;
+
+

package/dist/scss/base.scss

@@ -79,3 +79,6 @@
 
 // LuiIcon
 @forward "./Components/LuiIcon/LuiIcons.scss";
+
+// LuiMenuTrigger
+@forward "./Components/LuiMenuTrigger/LuiMenuTrigger.scss";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "15.1.6",
+  "version": "15.1.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -125,7 +125,7 @@
     "rollup": "^2.56.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.31.2",
     "sass": "^1.43.4",