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

package/dist/scss/themes/flatpickr/festo.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
  */
@@ -32,7 +32,7 @@
   width: 324px;
   background: $white;
   box-shadow: $control-box-shadow;
-  border-radius: 8px;
+  border-radius: $border-radius-m;
   padding: $spacer-xs;
   padding-bottom: $spacer-xl;
   display: inline-block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "3.2.1",
+  "version": "4.0.0-pre-20220920.2",
   "description": "CSS framework and utils to build FESTO web applications",
   "main": "jest.config.js",
   "style": "dist/css/festo-web-essentials.css",

package/scss/_breadcrumb.scss

@@ -6,8 +6,6 @@
   color: $text-light;
 
   .fwe-icon-arrows-right-2 {
-    margin-top: 1px;
-    margin-bottom: -1px;
     margin-left: 4px;
     margin-right: 4px;
   }

package/scss/_button.scss

@@ -21,10 +21,6 @@ button.fwe-btn {
     padding-right: 8px;
   }
 
-  span {
-    margin: -1px 0px 1px 0px;
-  }
-
   &:hover {
     color: $btn-text-hover;
     background: $btn-hover;
@@ -95,7 +91,7 @@ button.fwe-btn {
 
     &:disabled,
     &.fwe-disabled {
-      color: $text-light;
+      color: $btn-text-disabled;
     }
   }
 

package/scss/_cards.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   border: 1px solid $border;
   background-color: $white;
-  border-radius: 8px;
+  border-radius: $border-radius-m;
 
   .fwe-card-img {
     width: 100%;

package/scss/_checkbox.scss

@@ -24,7 +24,7 @@ $lgWidth: 24px;
 %checkmark-lg {
   height: $lgHeight;
   width: $lgWidth;
-  border-radius: 4px;
+  border-radius: $border-radius-s;
   @extend .fwe-icon-lg;
   &:before {
     left: -1px;
@@ -74,7 +74,6 @@ label.fwe-checkbox {
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 2px;
-    margin-top: 2px;
     font-size: $font-size-md;
     @extend .fwe-icon;
     @extend .fwe-icon-menu-check;

package/scss/_chips.scss

@@ -1,7 +1,7 @@
 %chip-lg {
   font-size: $font-size-base;
   line-height: 22px;
-  border-radius: 16px;
+  border-radius: $border-radius-xl;
   padding: 3px 16px 5px 16px;
   i[class^="fwe-icon-"],
   i[class*=" fwe-icon-"] {
@@ -48,7 +48,7 @@
   font-size: $font-size-md;
   line-height: calc(#{$font-size-md} + 7px);
   text-align: center;
-  border-radius: 12px;
+  border-radius: $border-radius-l;
   cursor: pointer;
   background: $control;
   color: $text;

package/scss/_fonts.scss

@@ -1,16 +1,17 @@
+/* MetaPro regular */
 @font-face {
   font-family: "MetaPro";
-  src: url("../fonts/MetaPro-Regular.woff2") format("woff2"), url("../fonts/MetaPro-Regular.woff") format("woff"),
-    url("../fonts/MetaPro-Regular.otf") format("truetype");
+  src: url("../fonts/FestoW05-Regular.woff2") format("woff2"), url("../fonts/FestoW05-Regular.woff") format("woff");
 }
 
+/* MetaPro bold */
 @font-face {
   font-family: "MetaPro";
   font-weight: bold;
-  src: url("../fonts/MetaPro-Bold.woff2") format("woff2"), url("../fonts/MetaPro-Bold.woff") format("woff"),
-    url("../fonts/MetaPro-Bold.otf") format("truetype");
+  src: url("../fonts/FestoW05-Bold.woff2") format("woff2"), url("../fonts/FestoW05-Bold.woff") format("woff");
 }
 
+/* Festo Icon Font */
 @font-face {
   font-family: "festo_icons-16";
   src: url("../fonts/festo_icons-16.woff2") format("woff2");

package/scss/_icons.scss

@@ -1,4 +1,5 @@
 @mixin icon-base {
+  font-family: $font-family-icons-16; // this is needed to center the icons vertically
   font-size: $font-size-base;
   display: inline-block;
   &:before {
@@ -1398,9 +1399,6 @@
 .fwe-icon-iot:before {
   content: "\eaba";
 }
-.fwe-icon-learning-path1:before {
-  content: "\eabb";
-}
 .fwe-icon-mobotic:before {
   content: "\eabc";
 }

package/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/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/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/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/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/scss/_select.scss

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

package/scss/_stepper-horizontal.scss

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

package/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/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/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/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;
+      }
+    }
+  }
+}