@festo-ui/web-essentials 7.3.0-dev.461 → 7.3.0-dev.464

package/scss/_navbar.scss

@@ -1,35 +1,37 @@
+@use "variables";
+
 header.fwe-fixed-header {
   position: fixed;
   left: 0px;
   right: 0px;
   top: 0px;
-  z-index: $zindex-fixed;
+  z-index: variables.$zindex-fixed;
 }
 
 .fwe-navbar-spacer {
-  height: $navbar-height;
-  min-height: $navbar-height;
+  height: variables.$navbar-height;
+  min-height: variables.$navbar-height;
   &.fwe-bottom-box-spacer {
-    height: $navbar-height + $navbar-bottom-box-height;
-    min-height: $navbar-height + $navbar-bottom-box-height;
+    height: variables.$navbar-height + variables.$navbar-bottom-box-height;
+    min-height: variables.$navbar-height + variables.$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;
+  height: variables.$navbar-height;
+  max-height: variables.$navbar-height;
+  background: variables.$white;
+  border-bottom: 1px solid variables.$border;
   position: relative;
   overflow: visible;
 
-  @media (max-width: $breakpoint-lg-min) {
+  @media (max-width: variables.$breakpoint-lg-min) {
     padding-left: 36px;
   }
 
-  @media (max-width: $breakpoint-md-min) {
+  @media (max-width: variables.$breakpoint-md-min) {
     padding-left: 0px;
   }
 
@@ -52,7 +54,7 @@ header.fwe-fixed-header {
       height: 24px;
       width: 24px;
     }
-    @media (min-width: $grid-breakpoint-md) {
+    @media (min-width: variables.$grid-breakpoint-md) {
       display: block;
     }
   }
@@ -66,7 +68,7 @@ header.fwe-fixed-header {
     display: none;
     margin-bottom: 17px;
     margin-right: 48px;
-    @media (min-width: $grid-breakpoint-md) {
+    @media (min-width: variables.$grid-breakpoint-md) {
       display: block;
     }
   }
@@ -74,8 +76,8 @@ header.fwe-fixed-header {
   .fwe-container {
     display: flex;
     align-items: flex-end;
-    height: $navbar-height;
-    max-height: $navbar-height;
+    height: variables.$navbar-height;
+    max-height: variables.$navbar-height;
 
     img.fwe-logo {
       position: relative;
@@ -85,26 +87,6 @@ header.fwe-fixed-header {
     }
   }
 
-  // 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;
@@ -160,7 +142,7 @@ header.fwe-fixed-header {
   .fwe-mobile-navlist-container {
     display: none;
     align-items: stretch;
-    background: $background-modal;
+    background: variables.$background-modal;
     position: fixed;
     left: 0px;
     right: 0px;
@@ -170,7 +152,7 @@ header.fwe-fixed-header {
 
     nav.fwe-mobile-navlist {
       width: 300px;
-      background: $white;
+      background: variables.$white;
       &:first-child {
         padding-top: 48px;
       }
@@ -181,10 +163,10 @@ header.fwe-fixed-header {
         padding: 16px 32px 16px 48px;
         list-style-type: none;
         display: block;
-        color: $text;
+        color: variables.$text;
 
         &.fwe-active {
-          color: $hero;
+          color: variables.$hero;
         }
       }
     }
@@ -212,7 +194,7 @@ header.fwe-fixed-header {
     a {
       display: block;
       white-space: nowrap;
-      color: $text;
+      color: variables.$text;
       padding-bottom: 17px;
       position: relative;
       margin-right: 24px;
@@ -226,11 +208,11 @@ header.fwe-fixed-header {
         bottom: 0px;
         height: 0px;
         content: "";
-        background: $hero;
+        background: variables.$hero;
         transition: height 0.2s;
       }
       &.fwe-active {
-        color: $hero;
+        color: variables.$hero;
         &::after {
           height: 4px;
         }
@@ -240,7 +222,7 @@ header.fwe-fixed-header {
 
   .fwe-button-container {
     display: grid;
-    grid-column-gap: $spacer-m;
+    grid-column-gap: variables.$spacer-m;
     grid-auto-flow: column;
     margin-bottom: 13px;
     align-items: center;
@@ -254,21 +236,21 @@ header.fwe-fixed-header {
       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: $breakpoint-xs-min) {
+      @media (max-width: variables.$breakpoint-xs-min) {
         margin-right: 8px;
       }
     }
-    @media (max-width: $grid-breakpoint-sm) {
+    @media (max-width: variables.$grid-breakpoint-sm) {
       margin-left: 32px !important;
     }
   }
 }
 
 .fwe-navbar-bottom-box {
-  background-color: $control;
+  background-color: variables.$control;
   .fwe-container {
     overflow: hidden;
-    height: $navbar-bottom-box-height;
+    height: variables.$navbar-bottom-box-height;
     display: flex;
     align-items: center;
   }
@@ -276,5 +258,5 @@ header.fwe-fixed-header {
 
 // Margin for fixed overlay elements used with fixed navbar
 .fwe-navbar-margin {
-  margin-top: $navbar-height;
+  margin-top: variables.$navbar-height;
 }

package/scss/_normalize.scss

@@ -1,3 +1,6 @@
+@use "rfs";
+@use "variables";
+
 // Normalization of HTML elements, manually forked from Normalize.css to remove
 // styles targeting irrelevant browsers while applying new styles.
 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
@@ -16,7 +19,7 @@
  */
 
 html {
-  line-height: $line-height-base; /* 1.5 */
+  line-height: variables.$line-height-base; /* 1.5 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
@@ -29,12 +32,12 @@ html {
 
 body {
   margin: 0;
-  font-family: $font-family-base;
-  font-feature-settings: $font-feature-settings;
-  font-size: $font-size-base;
-  font-weight: $font-weight-base;
-  color: $text;
-  background: $background;
+  font-family: variables.$font-family-base;
+  font-feature-settings: variables.$font-feature-settings;
+  font-size: variables.$font-size-base;
+  font-weight: variables.$font-weight-base;
+  color: variables.$text;
+  background: variables.$background;
 }
 
 /**
@@ -68,7 +71,7 @@ hr {
   height: 0; /* 1 */
   overflow: visible; /* 2 */
   border: none;
-  border-bottom: 1px solid $border;
+  border-bottom: 1px solid variables.$border;
 }
 
 /**
@@ -77,7 +80,7 @@ hr {
  */
 
 pre {
-  font-family: $font-family-monospace; /* 1 */
+  font-family: variables.$font-family-monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -109,7 +112,7 @@ abbr[title] {
 
 b,
 strong {
-  font-weight: $font-weight-bold;
+  font-weight: variables.$font-weight-bold;
 }
 
 /**
@@ -120,8 +123,8 @@ strong {
 code,
 kbd,
 samp {
-  font-family: $font-family-monospace;
-  @include font-size(1em); /* 2 */
+  font-family: variables.$font-family-monospace;
+  @include rfs.font-size(1em); /* 2 */
 }
 
 /**
@@ -179,7 +182,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
-  line-height: $line-height-base; /* 1.5 */
+  line-height: variables.$line-height-base; /* 1.5 */
   margin: 0; /* 2 */
 }
 

package/scss/_pagination.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .fwe-pagination {
   display: flex;
 
@@ -6,7 +8,7 @@
       content: "";
       height: 24px;
       width: 24px;
-      background-color: $text;
+      background-color: variables.$text;
     }
 
     line-height: normal;
@@ -14,7 +16,7 @@
     display: inline-flex;
     align-items: center;
     text-align: center;
-    font-family: $font-family-base;
+    font-family: variables.$font-family-base;
     padding: 0px;
     height: 24px;
     width: 24px;
@@ -24,13 +26,13 @@
 
     &:hover {
       &::before {
-        background-color: $hero;
+        background-color: variables.$hero;
       }
     }
 
     &:active {
       &::before {
-        background-color: $hero-hover;
+        background-color: variables.$hero-hover;
       }
     }
 
@@ -43,7 +45,7 @@
       cursor: default;
 
       &::before {
-        background-color: $text-disabled;
+        background-color: variables.$text-disabled;
       }
     }
   }
@@ -70,33 +72,33 @@
     width: 6px;
     height: 6px;
     margin: 9px 4px;
-    background: $control-border;
+    background: variables.$control-border;
     border-radius: 50%;
 
     &:hover {
-      background: $control-border-hover;
+      background: variables.$control-border-hover;
     }
 
     &.fwe-selected {
-      background: $hero;
+      background: variables.$hero;
       cursor: default;
     }
   }
 
   .fwe-page-current {
-    font-feature-settings: $font-feature-settings;
-    font-size: $font-size-base;
-    font-weight: $font-weight-bold;
-    border-right: 1px solid $text;
+    font-feature-settings: variables.$font-feature-settings;
+    font-size: variables.$font-size-base;
+    font-weight: variables.$font-weight-bold;
+    border-right: 1px solid variables.$text;
     padding: 0px 12px 0px 4px;
   }
 
   .fwe-page-max {
-    font-feature-settings: $font-feature-settings;
-    font-size: $font-size-small;
+    font-feature-settings: variables.$font-feature-settings;
+    font-size: variables.$font-size-small;
     line-height: 24px;
     padding: 0px 4px 0px 12px;
-    font-weight: $font-weight-normal;
+    font-weight: variables.$font-weight-normal;
   }
 
   &--lining-tabular-numbers {
@@ -106,7 +108,7 @@
 
     .fwe-page-max {
       font-feature-settings: inherit;
-      font-size: $font-size-base;
+      font-size: variables.$font-size-base;
     }
   }
 }
@@ -114,22 +116,22 @@
 .fwe-pagination.fwe-pagination--on-dark-bg {
   .fwe-navigate-btn-down {
     &::before {
-      background-color: $white;
+      background-color: variables.$white;
     }
   }
 
   .fwe-navigate-btn-up {
     &::before {
-      background-color: $white;
+      background-color: variables.$white;
     }
   }
 
   .fwe-page-current {
-    color: $white;
-    border-right: 1px solid $white;
+    color: variables.$white;
+    border-right: 1px solid variables.$white;
   }
 
   .fwe-page-max {
-    color: $white;
+    color: variables.$white;
   }
 }

package/scss/_popover.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 %triangle-base {
   width: 17px;
   height: 17px;
@@ -8,7 +10,7 @@
     position: absolute;
     width: 12px;
     height: 12px;
-    background: $white;
+    background: variables.$white;
     transform: rotate(45deg);
     box-shadow: 0px 1px 4px #33333333;
   }
@@ -81,15 +83,15 @@
 }
 
 %popover-base {
-  background-color: $white;
+  background-color: variables.$white;
   box-shadow: 0px 1px 4px #33333333;
-  border-radius: $control-border-radius;
+  border-radius: variables.$control-border-radius;
 }
 
 .fwe-popover {
   @extend %popover-base;
-  padding: $spacer * 0.5;
-  font-size: $font-size-md;
+  padding: variables.$spacer * 0.5;
+  font-size: variables.$font-size-md;
   line-height: 1rem;
 }
 
@@ -100,33 +102,33 @@
 
 @mixin popover-menu {
   @extend %popover-base;
-  font-size: $font-size-base;
+  font-size: variables.$font-size-base;
   line-height: 1.5rem;
-  padding: $spacer;
+  padding: variables.$spacer;
   .fwe-list-group {
     .fwe-list-group-item {
       border-bottom: none;
-      min-height: $spacer * 2.25;
+      min-height: variables.$spacer * 2.25;
       padding: 0;
       button {
         width: 100%;
         margin-left: inherit;
-        padding: 0 ($spacer * 0.5) 0 0;
+        padding: 0 (variables.$spacer * 0.5) 0 0;
         text-align: left;
-        height: $spacer * 2;
-        max-height: $spacer * 2;
+        height: variables.$spacer * 2;
+        max-height: variables.$spacer * 2;
         display: inline-flex;
         justify-content: unset;
         &:hover {
-          color: $black;
+          color: variables.$black;
         }
         i {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           flex-wrap: nowrap;
-          height: $spacer * 1.5;
-          width: $spacer * 2;
+          height: variables.$spacer * 1.5;
+          width: variables.$spacer * 2;
           margin-right: 0px;
           &::before {
             display: inline-flex;
@@ -138,14 +140,14 @@
         }
         span {
           display: inline-flex;
-          height: $spacer * 1.5;
+          height: variables.$spacer * 1.5;
         }
         [class*=" fwe-icon-"] {
           margin-left: inherit;
         }
       }
       &:hover {
-        color: $black;
+        color: variables.$black;
         background-color: #3333331a;
       }
       &:active {
@@ -157,8 +159,8 @@
 
 @mixin popover-legend {
   display: table;
-  margin: $spacer;
-  line-height: $spacer * 1.5;
+  margin: variables.$spacer;
+  line-height: variables.$spacer * 1.5;
 }
 
 @mixin popover-legend-content {
@@ -166,7 +168,7 @@
   dt {
     display: table-cell;
     margin: 0;
-    padding-right: $spacer * 0.5;
+    padding-right: variables.$spacer * 0.5;
   }
   dd {
     display: table-cell;

package/scss/_progressbar.scss

@@ -1,8 +1,10 @@
+@use "variables";
+
 .fwe-progress {
   display: flex;
   height: 8px;
-  background-color: $control;
-  border-radius: $border-radius-m;
+  background-color: variables.$control;
+  border-radius: variables.$border-radius-m;
   overflow: hidden;
 
   .fwe-progress-bar {
@@ -11,16 +13,16 @@
     justify-content: center;
     overflow: hidden;
     transition: width 0.6s ease;
-    background-color: $hero;
-    border-radius: $border-radius-m;
-    box-shadow: 4px 0px 0px 0px $white;
+    background-color: variables.$hero;
+    border-radius: variables.$border-radius-m;
+    box-shadow: 4px 0px 0px 0px variables.$white;
 
     &.fwe-progress-bar-black {
-      box-shadow: 4px 0px 0px 0px $black;
+      box-shadow: 4px 0px 0px 0px variables.$black;
     }
 
     &.fwe-progress-bar-background {
-      box-shadow: 4px 0px 0px 0px $background;
+      box-shadow: 4px 0px 0px 0px variables.$background;
     }
   }
 }
@@ -40,8 +42,8 @@ fieldset.fwe-progress-container {
     padding-right: 0px;
     height: 18px;
     line-height: 18px;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    font-size: variables.$font-size-small;
+    font-weight: variables.$font-weight-bold;
   }
 
   p {
@@ -60,8 +62,8 @@ fieldset.fwe-progress-container {
     padding-left: 4px;
     height: 18px;
     line-height: 18px;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    color: $hero;
+    font-size: variables.$font-size-small;
+    font-weight: variables.$font-weight-bold;
+    color: variables.$hero;
   }
 }

package/scss/_radio.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 $defaultHeight: 16px;
 $defaultWidth: 16px;
 $lgHeight: 24px;
@@ -78,8 +80,8 @@ label.fwe-radio {
       border-width: 1px;
       border-style: solid;
       border-radius: 50%;
-      border-color: $control-border;
-      background-color: $white;
+      border-color: variables.$control-border;
+      background-color: variables.$white;
     }
 
     &::after {
@@ -94,8 +96,8 @@ label.fwe-radio {
       border-width: 5px;
       border-style: solid;
       border-radius: 50%;
-      border-color: $white;
-      background-color: $white;
+      border-color: variables.$white;
+      background-color: variables.$white;
       transition: none;
     }
   }
@@ -134,42 +136,42 @@ label.fwe-radio {
     cursor: pointer;
 
     &:hover:not(:disabled) ~ .fwe-radio-checkmark::before {
-      background-color: $control;
+      background-color: variables.$control;
     }
 
     &:hover:invalid ~ .fwe-radio-checkmark::before {
-      background-color: $white;
+      background-color: variables.$white;
     }
 
     &:hover:checked:not(:disabled) ~ .fwe-radio-checkmark::after {
-      border-color: $hero-hover;
+      border-color: variables.$hero-hover;
     }
 
     &:active ~ .fwe-radio-checkmark::before {
-      border-color: $control-hover;
-      background-color: $white;
+      border-color: variables.$control-hover;
+      background-color: variables.$white;
     }
 
     &:checked ~ .fwe-radio-checkmark::before {
-      border-color: $border;
-      background-color: $hero;
+      border-color: variables.$border;
+      background-color: variables.$hero;
     }
 
     &:checked ~ .fwe-radio-checkmark::after {
-      border-color: $hero;
+      border-color: variables.$hero;
       transition: transform ease-out 0.15s;
       transform: scale(1, 1);
     }
 
     &:disabled ~ .fwe-radio-checkmark::before {
-      background-color: $control-disabled;
-      border-color: $control-disabled;
+      background-color: variables.$control-disabled;
+      border-color: variables.$control-disabled;
       cursor: not-allowed;
     }
 
     &:disabled ~ .fwe-radio-checkmark::after {
-      background-color: $white;
-      border-color: $control-disabled;
+      background-color: variables.$white;
+      border-color: variables.$control-disabled;
       cursor: not-allowed;
     }
 
@@ -178,12 +180,12 @@ label.fwe-radio {
     }
 
     &:disabled ~ .fwe-radio-label-content {
-      color: $text-disabled;
+      color: variables.$text-disabled;
       cursor: not-allowed;
     }
 
     &:invalid ~ .fwe-radio-checkmark::before {
-      border-color: $red;
+      border-color: variables.$red;
     }
   }
 }