@festo-ui/web-essentials 3.2.1 → 4.0.0-pre-20220920.2

package/dist/scss/_loading-indicator.scss

@@ -1,87 +1,176 @@
+$spinner-duration: 3s;
+
+.fwe-waiting-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .fwe-waiting-content-container {
+    margin-top: 12px;
+    color: $hero;
+  }
+}
+
+.fwe-waiting-container-sm {
+  flex-direction: row;
+  .fwe-waiting-content-container {
+    margin-top: unset;
+    margin-left: 8px;
+  }
+}
+
 .fwe-waiting-indicator {
+  display: inline-block;
   position: relative;
   width: 96px;
   height: 96px;
-  .fwe-circle {
+
+  div {
+    box-sizing: border-box;
+    display: block;
     position: absolute;
-    background: $hero;
+    width: 96px;
+    height: 96px;
+    border: 8px solid $hero;
     border-radius: 50%;
-    animation: 1s scaleAnimation 0s ease-in-out alternate infinite;
+    border-color: $hero transparent transparent transparent;
   }
   .fwe-waiting-circle-1 {
-    @extend .fwe-circle;
-    opacity: 0.15;
-    animation-delay: 0s;
-    width: 96px;
-    height: 96px;
+    animation: fwe-wi-animation-1 $spinner-duration linear infinite;
   }
   .fwe-waiting-circle-2 {
-    @extend .fwe-circle;
-    opacity: 0.3;
-    animation-delay: 0.25s;
-    width: 64px;
-    height: 64px;
-    left: (96px - 64px) * 0.5;
-    top: (96px - 64px) * 0.5;
+    animation: fwe-wi-animation-2 $spinner-duration linear infinite;
   }
   .fwe-waiting-circle-3 {
-    @extend .fwe-circle;
-    opacity: 1;
-    animation-delay: 0.1s;
-    width: 32px;
-    height: 32px;
-    left: (96px - 32px) * 0.5;
-    top: (96px - 32px) * 0.5;
+    animation: fwe-wi-animation-3 $spinner-duration linear infinite;
+  }
+  .fwe-waiting-circle-4 {
+    animation: fwe-wi-animation-4 $spinner-duration linear infinite;
   }
 
   &.fwe-waiting-indicator-md {
-    height: 64px;
-    width: 64px;
-    .fwe-waiting-circle-1 {
-      width: 64px;
-      height: 64px;
-    }
-    .fwe-waiting-circle-2 {
-      width: 42px;
-      height: 42px;
-      left: 11px;
-      top: 11px;
-    }
-    .fwe-waiting-circle-3 {
-      width: 22px;
-      height: 22px;
-      left: 21px;
-      top: 21px;
+    height: 48px;
+    width: 48px;
+    div {
+      height: 48px;
+      width: 48px;
+      border-width: 4px;
     }
   }
 
   &.fwe-waiting-indicator-sm {
-    height: 32px;
-    width: 32px;
-    .fwe-waiting-circle-1 {
-      width: 32px;
-      height: 32px;
-    }
-    .fwe-waiting-circle-2 {
-      width: 22px;
-      height: 22px;
-      left: 5px;
-      top: 5px;
-    }
-    .fwe-waiting-circle-3 {
-      width: 10px;
-      height: 10px;
-      left: 11px;
-      top: 11px;
+    height: 16px;
+    width: 16px;
+    div {
+      height: 16px;
+      width: 16px;
+      border-width: 2px;
     }
   }
-}
 
-@keyframes scaleAnimation {
-  from {
-    transform: scale(1);
+  @keyframes fwe-wi-animation-1 {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    20% {
+      transform: rotate(315deg);
+    }
+
+    40% {
+      transform: rotate(500deg);
+    }
+
+    60% {
+      transform: rotate(900deg);
+    }
+
+    80% {
+      transform: rotate(1170deg);
+    }
+
+    100% {
+      transform: rotate(1440deg);
+    }
   }
-  to {
-    transform: scale(0.5);
+
+  @keyframes fwe-wi-animation-2 {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    20% {
+      transform: rotate(270deg);
+    }
+
+    40% {
+      transform: rotate(500deg);
+    }
+
+    60% {
+      transform: rotate(900deg);
+    }
+
+    80% {
+      transform: rotate(1120deg);
+    }
+
+    100% {
+      transform: rotate(1440deg);
+    }
+  }
+
+  @keyframes fwe-wi-animation-3 {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    20% {
+      transform: rotate(180deg);
+    }
+
+    40% {
+      transform: rotate(500deg);
+    }
+
+    60% {
+      transform: rotate(900deg);
+    }
+
+    80% {
+      transform: rotate(1070deg);
+    }
+
+    100% {
+      transform: rotate(1440deg);
+    }
+  }
+
+  @keyframes fwe-wi-animation-4 {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    20% {
+      transform: rotate(90deg);
+    }
+
+    40% {
+      transform: rotate(500deg);
+    }
+
+    60% {
+      transform: rotate(900deg);
+    }
+
+    80% {
+      transform: rotate(1040deg);
+    }
+
+    100% {
+      transform: rotate(1440deg);
+    }
   }
 }

package/dist/scss/_navbar-menu.scss

@@ -317,6 +317,7 @@
         margin-top: 11px;
       }
       @extend .fwe-icon;
+      font-family: $font-family-base;
       &::before {
         position: absolute;
         left: -32px;

package/dist/scss/_progressbar.scss

@@ -2,7 +2,7 @@
   display: flex;
   height: 8px;
   background-color: $control;
-  border-radius: 8px;
+  border-radius: $border-radius-m;
   overflow: hidden;
 
   .fwe-progress-bar {
@@ -12,7 +12,7 @@
     overflow: hidden;
     transition: width 0.6s ease;
     background-color: $hero;
-    border-radius: 8px;
+    border-radius: $border-radius-m;
     box-shadow: 4px 0px 0px 0px $white;
 
     &.fwe-progress-bar-black {

package/dist/scss/_radio.scss

@@ -65,7 +65,6 @@ label.fwe-radio {
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 50%;
-    margin-top: 2px;
 
     &:after {
       content: "";

package/dist/scss/_search-input.scss

@@ -35,7 +35,7 @@
     border-radius: 0px;
     border-bottom: 1px solid $control-border;
     background: transparent;
-    padding: 0px 24px 5px 32px;
+    padding: 1px 24px 4px 32px;
     &::placeholder {
       color: $text;
     }

package/dist/scss/_select.scss

@@ -8,6 +8,7 @@
 }
 
 .fwe-select-wrapper {
+  font-family: $font-size-base;
   position: relative;
   display: flex;
   flex-direction: column;

package/dist/scss/_stepper-horizontal.scss

@@ -44,6 +44,7 @@
       }
 
       .fwe-step-name {
+        font-family: $font-family-base;
         @media (max-width: 900px) {
           display: none;
         }

package/dist/scss/_stepper-vertical.scss

@@ -31,6 +31,7 @@ $vertical-step-height: 300px;
       }
 
       .fwe-step-name {
+        font-family: $font-family-base;
         font-size: $font-size-md;
         position: absolute;
         left: 36px;

package/dist/scss/_table.scss

@@ -27,6 +27,7 @@ table.fwe-table {
         direction: rtl;
         @extend .fwe-icon;
         @extend .fwe-icon-arrows-expand;
+        font-family: $font-family-base;
         display: table-cell;
         font-size: $font-size-md;
         &::before {
@@ -35,7 +36,7 @@ table.fwe-table {
           position: relative;
           top: 3px;
           left: 8px;
-          transform-origin: center center;
+          transform-origin: 8px 7px;
           transition: transform 0.3s;
         }
 

package/dist/scss/_timepicker.scss

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   background: $white;
-  border-radius: 8px;
+  border-radius: $border-radius-s;
   box-shadow: $control-box-shadow;
   max-width: 276px;
   padding: $spacer-m;

package/dist/scss/_tree.scss

@@ -0,0 +1,211 @@
+.fwe-tree {
+  @include custom-scrollbar();
+  position: relative;
+
+  &-node {
+    position: relative;
+    display: flex;
+    flex-basis: 100%;
+    min-width: 0;
+    height: $spacer * 2.5;
+
+    &-indicator {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: $spacer * 2.5;
+
+      &::before {
+        position: absolute;
+        content: "";
+        width: 1px;
+        height: $spacer * 2.5;
+        left: 0;
+        background-color: $caerul;
+        transform-origin: left top;
+        transform: scaleX(0);
+        transition: none;
+      }
+    }
+
+    &-container {
+      position: relative;
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      &--selected {
+        > .fwe-tree-node-indicator {
+          background-color: $background;
+
+          &::before {
+            transform: scaleX(4);
+            transition: transform 0.2s;
+          }
+        }
+
+        > .fwe-tree-node {
+          .fwe-btn--tree-node-toggle {
+            .fwe-icon {
+              color: $caerul;
+            }
+          }
+
+          .fwe-btn--tree-node-select {
+            .fwe-icon {
+              color: $caerul;
+            }
+          }
+
+          .fwe-tree-node-text {
+            color: $caerul;
+            font-weight: $font-weight-bold;
+          }
+        }
+      }
+
+      &--disabled {
+        pointer-events: none;
+        > .fwe-tree-node {
+          .fwe-tree-node-alert {
+            .fwe-icon {
+              color: $btn-text-disabled !important;
+            }
+          }
+        }
+      }
+
+      $levels: 10;
+      @for $i from 1 through $levels {
+        &[aria-level="#{$i}"] {
+          padding-left: $spacer * ($i - 1);
+        }
+      }
+
+      &[aria-expanded="false"] {
+        > .fwe-tree-node {
+          .fwe-icon-arrows-right-2 {
+            &::before {
+              transform: rotate(0deg);
+              transition: transform 0.2s;
+            }
+          }
+        }
+      }
+
+      &[aria-expanded="true"] {
+        > .fwe-tree-node {
+          .fwe-tree-node-text {
+            font-weight: $font-weight-bold;
+          }
+
+          .fwe-icon-arrows-right-2 {
+            &::before {
+              transform: rotate(90deg);
+              transition: transform 0.2s;
+            }
+          }
+        }
+      }
+
+      &:not([aria-expanded]) {
+        > .fwe-tree-node {
+          margin-left: $spacer * 2.5;
+        }
+      }
+    }
+
+    &-text {
+      font-size: $font-size-md;
+      height: $spacer-l;
+      line-height: $spacer-l;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0 $spacer-s 0 $spacer-xxs;
+    }
+
+    &-alert {
+      width: $spacer * 2.5;
+      max-width: $spacer * 2.5;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &--nested {
+    .fwe-tree-node-container {
+      display: block;
+      position: static;
+      min-width: 0;
+      width: inherit;
+
+      .fwe-tree-node-container {
+        margin-left: $spacer;
+      }
+    }
+  }
+}
+
+.fwe-btn.fwe-btn-link {
+  &.fwe-btn--tree-node-toggle {
+    color: $text;
+    padding: 0 $spacer-xxs 0 $spacer-s;
+    justify-content: flex-start;
+  }
+
+  &.fwe-btn--tree-node-select {
+    color: $text;
+    justify-content: flex-start;
+    min-width: 0;
+    flex-basis: 100%;
+  }
+}
+
+.fwe-btn--tree-node-select {
+  .fwe-icon {
+    padding-right: 0;
+  }
+}
+
+.fwe-tree-node {
+  &:hover {
+    .fwe-tree-node-text {
+      color: $btn-hero-hover;
+    }
+
+    .fwe-btn--tree-node-select {
+      .fwe-icon {
+        color: $btn-hero-hover;
+      }
+    }
+
+    .fwe-btn--tree-node-toggle {
+      .fwe-icon {
+        color: $btn-hero-hover;
+      }
+    }
+  }
+}
+
+.fwe-tree-node {
+  &:active {
+    .fwe-tree-node-text {
+      color: $btn-hero-active;
+    }
+
+    .fwe-btn--tree-node-select {
+      .fwe-icon {
+        color: $btn-hero-active;
+      }
+    }
+
+    .fwe-btn--tree-node-toggle {
+      .fwe-icon {
+        color: $btn-hero-active;
+      }
+    }
+  }
+}

package/dist/scss/_variables.scss

@@ -195,12 +195,17 @@ $navbar-bottom-box-height: 48px;
 
 $toolbar-width: 60px;
 
-$control-border-radius: 4px;
 $borders: (
   0: $border,
   disabled: $border-disabled
 ) !default;
 
+$border-radius-s: 4px;
+$border-radius-m: 8px;
+$border-radius-l: 12px;
+$border-radius-xl: 16px;
+$control-border-radius: 4px;
+
 $spacer: 16px !default;
 $spacer-0: 0px;
 $spacer-1: $spacer * 0.25;

package/dist/scss/festo-web-essentials.scss

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v3.2.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v4.0.0-pre-20220920.2 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -55,3 +55,4 @@
 @import "stepper-vertical";
 @import "bottom-navigation";
 @import "accordion";
+@import "tree";

package/dist/scss/organisms/_footer.scss

@@ -11,7 +11,7 @@ footer.fwe-footer {
       display: block;
       width: 32px;
       height: 32px;
-      border-radius: 4px;
+      border-radius: $border-radius-s;
       margin-right: 24px;
       opacity: 0.3;
       transition: opacity 0.3s;

package/dist/scss/organisms/_header-slider.scss

@@ -16,7 +16,7 @@
   flex-direction: column;
   padding: 24px 28px;
   background-color: $white;
-  border-radius: 4px;
+  border-radius: $border-radius-s;
   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
 
   .fwe-header-slider-content {

package/dist/scss/organisms/_login.scss

@@ -0,0 +1,59 @@
+.fwe-login-layout {
+  position: fixed;
+  background: $white;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  .fwe-login-background {
+    top: $navbar-height;
+    position: absolute;
+    height: calc(100vh - #{$navbar-height});
+    width: 100vw;
+    object-fit: cover;
+    object-position: center;
+  }
+  .fwe-login-container {
+    height: calc(100vh - #{$navbar-height});
+    overflow: scroll;
+    display: flex;
+    align-items: center;
+    .fwe-login-form {
+      z-index: 1;
+      margin-left: 20%;
+      width: 430px;
+      background: $white;
+      padding: $spacer-xl;
+      h1 {
+        margin: 0px;
+        @media (max-height: 600px) {
+          display: none;
+        }
+      }
+      .fwe-login-link-container {
+        margin-top: $spacer-m;
+        text-align: right;
+      }
+      @media (max-height: 600px) {
+        padding: $spacer-m;
+      }
+    }
+  }
+  @media (max-width: 600px), (max-height: 600px) {
+    .fwe-login-container {
+      background-color: $white;
+      position: unset;
+      left: unset;
+      top: unset;
+      width: 100vw;
+      align-items: stretch;
+      .fwe-login-form {
+        margin-left: 0px;
+        width: 100%;
+      }
+    }
+    .fwe-login-background {
+      display: none;
+    }
+  }
+}

package/dist/scss/organisms/festo-web-essentials-organisms.scss

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v3.2.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v4.0.0-pre-20220920.2 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -11,3 +11,4 @@
 @import "header-slider";
 @import "header-modul";
 @import "image-gallery";
+@import "login";