@festo-ui/web-essentials 4.0.3-pre-20221124.8 → 5.0.0-dev.17

package/scss/_navbar.scss

@@ -1,258 +1,258 @@
-header.fwe-fixed-header {
-  position: fixed;
-  left: 0px;
-  right: 0px;
-  top: 0px;
-  z-index: 1;
-}
-
-.fwe-navbar-spacer {
-  height: $navbar-height;
-  min-height: $navbar-height;
-  &.fwe-bottom-box-spacer {
-    height: $navbar-height + $navbar-bottom-box-height;
-    min-height: $navbar-height + $navbar-bottom-box-height;
-  }
-}
-
-.fwe-navbar {
-  display: flex;
-  align-items: center;
-  height: $navbar-height;
-  max-height: $navbar-height;
-  background: $white;
-  border-bottom: 1px solid $border;
-  position: relative;
-  overflow: visible;
-
-  @media (max-width: $grid-breakpoint-lg - 1px) {
-    padding-left: 36px;
-  }
-
-  @media (max-width: $grid-breakpoint-md - 1px) {
-    padding-left: 0px;
-  }
-
-  &.fwe-navbar-toolbar-left {
-    padding-left: 60px;
-  }
-
-  &.fwe-navbar-toolbar-right {
-    padding-right: 60px;
-  }
-
-  .fwe-app-logo-container {
-    display: none;
-    position: absolute;
-    top: 24px;
-    left: 18px;
-    height: 24px;
-    width: 24px;
-    img {
-      height: 24px;
-      width: 24px;
-    }
-    @media (min-width: $grid-breakpoint-md) {
-      display: block;
-    }
-  }
-
-  .fwe-container {
-    display: flex;
-    align-items: flex-end;
-    height: $navbar-height;
-    max-height: $navbar-height;
-
-    img.fwe-logo {
-      position: relative;
-      top: 4px;
-      left: 0px;
-      margin-right: 24px;
-    }
-  }
-
-  // this exists for reasons of compatibility
-  // it was replaced with a newer style (see _mobile.menu.scss)
-  .fwe-navbar-burger-menu {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
-    @extend .fwe-icon-menu-menu;
-    padding: 0px;
-    line-height: 1;
-    height: 24px;
-    border: none;
-    background: none;
-    outline: none;
-    margin-bottom: 16px;
-    margin-right: auto;
-    cursor: pointer;
-    &:hover {
-      color: $hero;
-    }
-  }
-
-  @keyframes fadeInAnimation {
-    0% {
-      visibility: hidden;
-      opacity: 0;
-    }
-
-    1% {
-      visibility: visible;
-      opacity: 0;
-    }
-
-    100% {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadeOutAnimation {
-    0% {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    99% {
-      visibility: visible;
-      opacity: 0;
-    }
-
-    100% {
-      visibility: hidden;
-      opacity: 0;
-    }
-  }
-
-  @keyframes translateInAnimation {
-    0% {
-      transform: translate(-300px);
-    }
-    100% {
-      transform: translate(0px);
-    }
-  }
-
-  @keyframes translateOutAnimation {
-    0% {
-      transform: translate(0px);
-    }
-    100% {
-      transform: translate(-300px);
-    }
-  }
-
-  .fwe-mobile-navlist-container {
-    display: none;
-    align-items: stretch;
-    background: $background-modal;
-    position: fixed;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    top: 0px;
-    z-index: 100;
-
-    nav.fwe-mobile-navlist {
-      width: 300px;
-      background: $white;
-      &:first-child {
-        padding-top: 48px;
-      }
-      &:last-child {
-        padding-bottom: 48px;
-      }
-      a {
-        padding: 16px 32px 16px 48px;
-        list-style-type: none;
-        display: block;
-        color: $text;
-
-        &.fwe-active {
-          color: $hero;
-        }
-      }
-    }
-
-    &.fwe-opened {
-      display: flex;
-      animation: fadeInAnimation 0.4s ease-out forwards;
-      .fwe-mobile-navlist {
-        animation: translateInAnimation 0.4s ease-out forwards;
-      }
-    }
-    &.fwe-closed {
-      display: flex;
-      animation: fadeOutAnimation 0.4s ease-in forwards;
-      .fwe-mobile-navlist {
-        animation: translateOutAnimation 0.4s ease-in forwards;
-      }
-    }
-  }
-
-  .fwe-navlist {
-    user-select: none;
-    margin-right: auto;
-    align-items: flex-end;
-    a {
-      display: block;
-      white-space: nowrap;
-      color: $text;
-      padding-bottom: 17px;
-      position: relative;
-      margin-right: 24px;
-      &:last-child {
-        margin-right: 0;
-      }
-      &::after {
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        height: 0px;
-        content: "";
-        background: $hero;
-        transition: height 0.2s;
-      }
-      &.fwe-active {
-        color: $hero;
-        &::after {
-          height: 4px;
-        }
-      }
-    }
-  }
-
-  .fwe-button-container {
-    display: grid;
-    grid-column-gap: $spacer-m;
-    grid-auto-flow: column;
-    margin-bottom: 13px;
-    align-items: center;
-  }
-
-  .fwe-logo-container {
-    margin-bottom: 20px;
-    margin-left: 113px;
-    .fwe-festo-logo {
-      height: 20px;
-      width: 113px;
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113.15' height='20'%3E%3Cg fill='%230091dc'%3E%3Cpath d='M82.06 20h-4.14a.25.25 0 01-.2-.06c-.06-.07-.05-.2-.02-.33a1.92 1.92 0 00.02-.29V4.45c0-.43-1.06-.44-1.19-.44h-6.88a1.25 1.25 0 01-1.01-.9V0h21.68c.38 0 .53 0 .53.39v2.7c0 .37-.14.92-.53.92h-6.9c-.39 0-.65.07-.65.44v14.86a.71.71 0 01-.71.68zm-18.6 0H49.62a4.19 4.19 0 01-2.93-1.18 4.1 4.1 0 01-1.26-2.88v-.68c0-.24.18-.27.37-.27H46l.2.01h4.13c.25 0 .69.07.69.5 0 .41.37.5.68.5h8.97c.79 0 .9-.72.9-1.42v-1.35c0-.75-.15-1.22-.9-1.22H49.64a4.3 4.3 0 01-2.96-1.25 4.21 4.21 0 01-1.26-2.93V3.77a3.91 3.91 0 011.3-2.76 3.96 3.96 0 012.65-1H63.7a3.94 3.94 0 012.64 1 3.9 3.9 0 011.29 2.76v.68c0 .39-.39.56-.75.56h-4.14c-.25 0-.68-.06-.68-.5 0-.32-.25-.5-.7-.5H52.4c-.77 0-.92.4-.92 1.11v1.36c0 1.01.31 1.53.92 1.53h11.2a4.05 4.05 0 012.75 1.08 4 4 0 011.28 2.8v4.05a4.08 4.08 0 01-1.24 2.88A4.17 4.17 0 0163.46 20zM43.4 20H22.75c-.34 0-.54-.25-.54-.68V.39c0-.36.15-.38.54-.38H43.4c.38 0 1.01 0 1.01.38v2.72a1.21 1.21 0 01-1.01.9H28.26c-.37 0-1 .06-1 .45v2.7c0 .37.63.85 1 .85h13.8c.16 0 .24.02.29.07s.05.15.05.3v2.83c0 .37 0 .8-.34.8h-13.8c-.35 0-1 .16-1 .56v2.7c0 .38.62.74 1 .74H43.4c.4 0 1.01.24 1.01.62v2.7c0 .38-.61.67-1.01.67zM4.6 20H.68a.68.68 0 01-.69-.68V.4C0 .01.32.01.69.01H20c.15 0 .21 0 .23.03s0 .04 0 .09a1 1 0 00-.04.26v2.72a2.7 2.7 0 00.02.3c.03.21.06.44-.04.54a.22.22 0 01-.17.06H6.2c-.26 0-1.15.03-1.15.44v2.71c0 .37.78.85 1.16.85h12.41a.63.63 0 01.07 0 .62.62 0 01.4.15.61.61 0 01.22.44v2.72a.7.7 0 01-.7.69H6.22c-.4 0-1.16.2-1.16.56v6.75c0 .35-.06.68-.46.68z' /%3E%3Cpath d='M109.55 20H96.3a3.24 3.24 0 01-2.58-1.2 4.5 4.5 0 01-.93-2.87V3.76a3.52 3.52 0 01.92-2.7A3.33 3.33 0 0196.13 0h13.61a3.38 3.38 0 012.43 1.05 3.58 3.58 0 01.98 2.71v12.17a3.84 3.84 0 01-.95 2.84 3.61 3.61 0 01-2.65 1.22zM98.95 4c-.81 0-1.32.43-1.32 1.11v9.46A1.38 1.38 0 0098.95 16h7.95a1.46 1.46 0 001.4-1.42l-.01-9.46c0-.5-.37-1.1-1.4-1.1z' /%3E%3C/g%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      @media (max-width: $grid-breakpoint-xs - 1px) {
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.fwe-navbar-bottom-box {
-  background-color: $control;
-  .fwe-container {
-    overflow: hidden;
-    height: $navbar-bottom-box-height;
-    display: flex;
-    align-items: center;
-  }
-}
+header.fwe-fixed-header {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  z-index: 1;
+}
+
+.fwe-navbar-spacer {
+  height: $navbar-height;
+  min-height: $navbar-height;
+  &.fwe-bottom-box-spacer {
+    height: $navbar-height + $navbar-bottom-box-height;
+    min-height: $navbar-height + $navbar-bottom-box-height;
+  }
+}
+
+.fwe-navbar {
+  display: flex;
+  align-items: center;
+  height: $navbar-height;
+  max-height: $navbar-height;
+  background: $white;
+  border-bottom: 1px solid $border;
+  position: relative;
+  overflow: visible;
+
+  @media (max-width: $grid-breakpoint-lg - 1px) {
+    padding-left: 36px;
+  }
+
+  @media (max-width: $grid-breakpoint-md - 1px) {
+    padding-left: 0px;
+  }
+
+  &.fwe-navbar-toolbar-left {
+    padding-left: 60px;
+  }
+
+  &.fwe-navbar-toolbar-right {
+    padding-right: 60px;
+  }
+
+  .fwe-app-logo-container {
+    display: none;
+    position: absolute;
+    top: 24px;
+    left: 18px;
+    height: 24px;
+    width: 24px;
+    img {
+      height: 24px;
+      width: 24px;
+    }
+    @media (min-width: $grid-breakpoint-md) {
+      display: block;
+    }
+  }
+
+  .fwe-container {
+    display: flex;
+    align-items: flex-end;
+    height: $navbar-height;
+    max-height: $navbar-height;
+
+    img.fwe-logo {
+      position: relative;
+      top: 4px;
+      left: 0px;
+      margin-right: 24px;
+    }
+  }
+
+  // this exists for reasons of compatibility
+  // it was replaced with a newer style (see _mobile.menu.scss)
+  .fwe-navbar-burger-menu {
+    @extend .fwe-icon;
+    @extend .fwe-icon-lg;
+    @extend .fwe-icon-menu-menu;
+    padding: 0px;
+    line-height: 1;
+    height: 24px;
+    border: none;
+    background: none;
+    outline: none;
+    margin-bottom: 16px;
+    margin-right: auto;
+    cursor: pointer;
+    &:hover {
+      color: $hero;
+    }
+  }
+
+  @keyframes fadeInAnimation {
+    0% {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    1% {
+      visibility: visible;
+      opacity: 0;
+    }
+
+    100% {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOutAnimation {
+    0% {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    99% {
+      visibility: visible;
+      opacity: 0;
+    }
+
+    100% {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+
+  @keyframes translateInAnimation {
+    0% {
+      transform: translate(-300px);
+    }
+    100% {
+      transform: translate(0px);
+    }
+  }
+
+  @keyframes translateOutAnimation {
+    0% {
+      transform: translate(0px);
+    }
+    100% {
+      transform: translate(-300px);
+    }
+  }
+
+  .fwe-mobile-navlist-container {
+    display: none;
+    align-items: stretch;
+    background: $background-modal;
+    position: fixed;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    top: 0px;
+    z-index: 100;
+
+    nav.fwe-mobile-navlist {
+      width: 300px;
+      background: $white;
+      &:first-child {
+        padding-top: 48px;
+      }
+      &:last-child {
+        padding-bottom: 48px;
+      }
+      a {
+        padding: 16px 32px 16px 48px;
+        list-style-type: none;
+        display: block;
+        color: $text;
+
+        &.fwe-active {
+          color: $hero;
+        }
+      }
+    }
+
+    &.fwe-opened {
+      display: flex;
+      animation: fadeInAnimation 0.4s ease-out forwards;
+      .fwe-mobile-navlist {
+        animation: translateInAnimation 0.4s ease-out forwards;
+      }
+    }
+    &.fwe-closed {
+      display: flex;
+      animation: fadeOutAnimation 0.4s ease-in forwards;
+      .fwe-mobile-navlist {
+        animation: translateOutAnimation 0.4s ease-in forwards;
+      }
+    }
+  }
+
+  .fwe-navlist {
+    user-select: none;
+    margin-right: auto;
+    align-items: flex-end;
+    a {
+      display: block;
+      white-space: nowrap;
+      color: $text;
+      padding-bottom: 17px;
+      position: relative;
+      margin-right: 24px;
+      &:last-child {
+        margin-right: 0;
+      }
+      &::after {
+        position: absolute;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        height: 0px;
+        content: "";
+        background: $hero;
+        transition: height 0.2s;
+      }
+      &.fwe-active {
+        color: $hero;
+        &::after {
+          height: 4px;
+        }
+      }
+    }
+  }
+
+  .fwe-button-container {
+    display: grid;
+    grid-column-gap: $spacer-m;
+    grid-auto-flow: column;
+    margin-bottom: 13px;
+    align-items: center;
+  }
+
+  .fwe-logo-container {
+    margin-bottom: 20px;
+    margin-left: 113px;
+    .fwe-festo-logo {
+      height: 20px;
+      width: 113px;
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113.15' height='20'%3E%3Cg fill='%230091dc'%3E%3Cpath d='M82.06 20h-4.14a.25.25 0 01-.2-.06c-.06-.07-.05-.2-.02-.33a1.92 1.92 0 00.02-.29V4.45c0-.43-1.06-.44-1.19-.44h-6.88a1.25 1.25 0 01-1.01-.9V0h21.68c.38 0 .53 0 .53.39v2.7c0 .37-.14.92-.53.92h-6.9c-.39 0-.65.07-.65.44v14.86a.71.71 0 01-.71.68zm-18.6 0H49.62a4.19 4.19 0 01-2.93-1.18 4.1 4.1 0 01-1.26-2.88v-.68c0-.24.18-.27.37-.27H46l.2.01h4.13c.25 0 .69.07.69.5 0 .41.37.5.68.5h8.97c.79 0 .9-.72.9-1.42v-1.35c0-.75-.15-1.22-.9-1.22H49.64a4.3 4.3 0 01-2.96-1.25 4.21 4.21 0 01-1.26-2.93V3.77a3.91 3.91 0 011.3-2.76 3.96 3.96 0 012.65-1H63.7a3.94 3.94 0 012.64 1 3.9 3.9 0 011.29 2.76v.68c0 .39-.39.56-.75.56h-4.14c-.25 0-.68-.06-.68-.5 0-.32-.25-.5-.7-.5H52.4c-.77 0-.92.4-.92 1.11v1.36c0 1.01.31 1.53.92 1.53h11.2a4.05 4.05 0 012.75 1.08 4 4 0 011.28 2.8v4.05a4.08 4.08 0 01-1.24 2.88A4.17 4.17 0 0163.46 20zM43.4 20H22.75c-.34 0-.54-.25-.54-.68V.39c0-.36.15-.38.54-.38H43.4c.38 0 1.01 0 1.01.38v2.72a1.21 1.21 0 01-1.01.9H28.26c-.37 0-1 .06-1 .45v2.7c0 .37.63.85 1 .85h13.8c.16 0 .24.02.29.07s.05.15.05.3v2.83c0 .37 0 .8-.34.8h-13.8c-.35 0-1 .16-1 .56v2.7c0 .38.62.74 1 .74H43.4c.4 0 1.01.24 1.01.62v2.7c0 .38-.61.67-1.01.67zM4.6 20H.68a.68.68 0 01-.69-.68V.4C0 .01.32.01.69.01H20c.15 0 .21 0 .23.03s0 .04 0 .09a1 1 0 00-.04.26v2.72a2.7 2.7 0 00.02.3c.03.21.06.44-.04.54a.22.22 0 01-.17.06H6.2c-.26 0-1.15.03-1.15.44v2.71c0 .37.78.85 1.16.85h12.41a.63.63 0 01.07 0 .62.62 0 01.4.15.61.61 0 01.22.44v2.72a.7.7 0 01-.7.69H6.22c-.4 0-1.16.2-1.16.56v6.75c0 .35-.06.68-.46.68z' /%3E%3Cpath d='M109.55 20H96.3a3.24 3.24 0 01-2.58-1.2 4.5 4.5 0 01-.93-2.87V3.76a3.52 3.52 0 01.92-2.7A3.33 3.33 0 0196.13 0h13.61a3.38 3.38 0 012.43 1.05 3.58 3.58 0 01.98 2.71v12.17a3.84 3.84 0 01-.95 2.84 3.61 3.61 0 01-2.65 1.22zM98.95 4c-.81 0-1.32.43-1.32 1.11v9.46A1.38 1.38 0 0098.95 16h7.95a1.46 1.46 0 001.4-1.42l-.01-9.46c0-.5-.37-1.1-1.4-1.1z' /%3E%3C/g%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      @media (max-width: $grid-breakpoint-xs - 1px) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.fwe-navbar-bottom-box {
+  background-color: $control;
+  .fwe-container {
+    overflow: hidden;
+    height: $navbar-bottom-box-height;
+    display: flex;
+    align-items: center;
+  }
+}