@festo-ui/web-essentials 3.1.0 → 3.2.0

package/dist/scss/_accordion.scss

@@ -0,0 +1,107 @@
+.fwe-accordion {
+  background-color: $white;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    height: $spacer-xl;
+    padding: 0 $spacer-s 0 $spacer-m;
+    font-size: $font-size-md;
+    font-weight: $font-weight-bold;
+    color: $text;
+    border-bottom: 1px solid $gray-100;
+  }
+
+  &-item {
+    position: relative;
+    padding: 0 $spacer-s 0 $spacer-m;
+    border-top: 1px solid $gray-100;
+    border-bottom: 1px solid $gray-100;
+
+    &-header {
+      outline: none;
+      display: flex;
+      align-items: center;
+      padding: $spacer-m $spacer-xxl $spacer-m 0;
+      min-height: $spacer-xl;
+      cursor: pointer;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      content: "";
+      width: $spacer-xxxs;
+      height: 0px;
+      background-color: $caerul;
+    }
+
+    &::after {
+      position: absolute;
+      top: 21px;
+      right: $spacer-s;
+      display: block;
+      font-family: $font-family-icons-32;
+      font-size: $font-size-xxl;
+      content: "\e900";
+      height: $spacer-l;
+      line-height: $spacer-l;
+      transition: transform 0.2s ease;
+      pointer-events: none;
+    }
+
+    &[open] {
+      .fwe-accordion-item-header {
+        font-weight: $font-weight-bold;
+      }
+
+      &::after {
+        transform: rotate(-180deg);
+      }
+
+      &::before {
+        height: 100%;
+      }
+    }
+
+    &:not([open]) .fwe-accordion-item-header {
+      font-weight: $font-weight-normal;
+    }
+
+    &-body {
+      overflow: hidden;
+      margin-right: 0;
+      margin-bottom: $spacer-m;
+
+      > :first-child {
+        margin-top: 0 !important;
+        padding-top: 0 !important;
+      }
+
+      > :last-child {
+        margin-bottom: 0 !important;
+        padding-bottom: 0 !important;
+      }
+
+      > :not(.fwe-accordion) {
+        margin-right: 0px;
+      }
+    }
+  }
+}
+
+@media (min-width: $grid-breakpoint-xs) {
+  .fwe-accordion {
+    &-item {
+      &-body {
+        margin-right: $spacer-xxl;
+      }
+    }
+  }
+}

package/dist/scss/_badge.scss

@@ -9,7 +9,7 @@
   height: 19px;
   line-height: 17px;
   background-color: $hero;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 
   &.fwe-badge-sm {
     font-size: $font-size-small;

package/dist/scss/_bottom-navigation.scss

@@ -0,0 +1,44 @@
+.fwe-bottom-navigation {
+  width: 100%;
+  display: flex;
+  background: $white;
+  align-items: flex-start;
+  justify-content: space-between;
+  border-top: 1px solid $border;
+  height: 84px;
+  padding: 22px 16px;
+  .fwe-bottom-navigation-button {
+    cursor: pointer;
+    user-select: none;
+    .fwe-icon {
+      line-height: 0px;
+    }
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    outline: none;
+    color: $icon-gray;
+    position: relative;
+    :after {
+      content: "";
+      position: absolute;
+      top: -23px;
+      left: 0px;
+      right: 0px;
+      height: 0px;
+      background: $hero;
+      transition: height 0.3s ease;
+    }
+    &.fwe-selected {
+      color: $hero;
+      cursor: default;
+      :after {
+        height: 4px;
+      }
+    }
+    &:active {
+      color: $hero-darker;
+    }
+  }
+}

package/dist/scss/_breadcrumb.scss

@@ -1,4 +1,5 @@
 .fwe-breadcrumb {
+  white-space: nowrap;
   display: flex;
   justify-items: center;
   align-items: center;
@@ -15,8 +16,8 @@
     color: $text-light;
     text-decoration: none;
     user-select: none;
-    font-size: 14px;
-    line-height: 16px;
+    font-size: $font-size-md;
+    line-height: calc(#{$font-size-md} + 2px);
     &:focus {
       outline: none;
     }

package/dist/scss/_button.scss

@@ -5,12 +5,13 @@ button.fwe-btn {
   display: inline-flex;
   align-items: center;
   text-align: center;
+  justify-content: center;
   font-family: $font-family-base;
   font-size: $font-size-base;
   padding: 4px 16px;
   min-height: 32px;
-  color: $text;
-  background: $control;
+  color: $btn-text;
+  background: $btn;
   border-radius: $control-border-radius;
   cursor: pointer;
   border: none;
@@ -25,12 +26,12 @@ button.fwe-btn {
   }
 
   &:hover {
-    color: $text;
-    background: $control-dark;
+    color: $btn-text-hover;
+    background: $btn-hover;
   }
 
   &:active {
-    background: $control-darker;
+    background: $btn-active;
   }
 
   &:focus {
@@ -40,33 +41,32 @@ button.fwe-btn {
   &:disabled,
   &.fwe-disabled {
     cursor: default;
-    background: $control-disabled;
-    color: $text-disabled;
+    background: $btn-disabled;
+    color: $btn-text-disabled;
   }
 
   &.fwe-btn-hero {
-    color: $white;
-    background: $hero;
+    color: $btn-hero-text;
+    background: $btn-hero;
 
     &:hover {
-      color: $white;
-      background: $hero-dark;
+      color: $btn-hero-text-hover;
+      background: $btn-hero-hover;
     }
 
     &:active {
-      background: $hero-darker;
+      background: $btn-hero-active;
     }
 
     &:disabled,
     &.fwe-disabled {
-      background: $control-disabled;
-      color: $text-disabled;
+      background: $btn-hero-disabled;
+      color: $btn-hero-text-disabled;
     }
   }
 
   &.fwe-btn-block {
     width: 100%;
-    justify-content: center;
   }
 
   &.fwe-btn-link {

package/dist/scss/_cards.scss

@@ -83,7 +83,7 @@
       h6 {
         line-height: $font-size-base;
         font-size: $font-size-base;
-        font-weight: bold;
+        font-weight: $font-weight-bold;
         margin: 0;
         padding: 0;
       }

package/dist/scss/_checkbox.scss

@@ -75,7 +75,7 @@ label.fwe-checkbox {
     background-color: $white;
     border-radius: 2px;
     margin-top: 2px;
-    font-size: 14px;
+    font-size: $font-size-md;
     @extend .fwe-icon;
     @extend .fwe-icon-menu-check;
     &:before {

package/dist/scss/_chips.scss

@@ -1,5 +1,5 @@
 %chip-lg {
-  font-size: 16px;
+  font-size: $font-size-base;
   line-height: 22px;
   border-radius: 16px;
   padding: 3px 16px 5px 16px;
@@ -14,8 +14,8 @@
       &::after {
         top: 4px;
         font-family: $font-family-icons-24;
-        font-size: 24px;
-        line-height: 24px;
+        font-size: $font-size-xl;
+        line-height: $font-size-xl;
       }
     }
     &.fwe-filter {
@@ -45,8 +45,8 @@
   position: relative;
   display: flex;
   align-items: flex-end;
-  font-size: 14px;
-  line-height: 21px;
+  font-size: $font-size-md;
+  line-height: calc(#{$font-size-md} + 7px);
   text-align: center;
   border-radius: 12px;
   cursor: pointer;

package/dist/scss/_fonts.scss

@@ -12,7 +12,7 @@
 }
 
 @font-face {
-  font-family: $font-family-icons-16;
+  font-family: "festo_icons-16";
   src: url("../fonts/festo_icons-16.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
@@ -20,7 +20,7 @@
 }
 
 @font-face {
-  font-family: $font-family-icons-24;
+  font-family: "festo_icons-24";
   src: url("../fonts/festo_icons-24.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
@@ -28,7 +28,7 @@
 }
 
 @font-face {
-  font-family: $font-family-icons-32;
+  font-family: "festo_icons-32";
   src: url("../fonts/festo_icons-32.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;

package/dist/scss/_icons.scss

@@ -11,7 +11,7 @@
     text-transform: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: "#{$font-family-icons-16}";
+    font-family: $font-family-icons-16;
   }
 }
 
@@ -20,30 +20,30 @@
 }
 
 .fwe-icon-lg {
-  font-size: $font-size-xl;
+  font-size: 24px;
   &:before {
-    font-family: "#{$font-family-icons-24}" !important;
+    font-family: $font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-2x {
-  font-size: $font-size-xxl;
+  font-size: 32px;
   &:before {
-    font-family: "#{$font-family-icons-32}" !important;
+    font-family: $font-family-icons-32 !important;
   }
 }
 
 .fwe-icon-3x {
   font-size: 48px;
   &:before {
-    font-family: "#{$font-family-icons-24}" !important;
+    font-family: $font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-4x {
   font-size: 64px;
   &:before {
-    font-family: "#{$font-family-icons-32}" !important;
+    font-family: $font-family-icons-32 !important;
   }
 }
 
@@ -1311,3 +1311,30 @@
 .fwe-icon-simulation:before {
   content: "\ea9d";
 }
+.fwe-icon-control-valve:before {
+  content: "\ea9e";
+}
+.fwe-icon-country-selector:before {
+  content: "\ea9f";
+}
+.fwe-icon-dosing-heads:before {
+  content: "\eaa0";
+}
+.fwe-icon-single-valve:before {
+  content: "\eaa1";
+}
+.fwe-icon-show-course:before {
+  content: "\eaa2";
+}
+.fwe-icon-show-equipment:before {
+  content: "\eaa3";
+}
+.fwe-icon-show-group:before {
+  content: "\eaa4";
+}
+.fwe-icon-show-results:before {
+  content: "\eaa5";
+}
+.fwe-icon-show-user:before {
+  content: "\eaa6";
+}

package/dist/scss/_layout.scss

@@ -16,3 +16,46 @@
     }
   }
 }
+
+.fwe-layout-1920 {
+  display: flex;
+  justify-content: center;
+  padding: 0px !important;
+  .fwe-container {
+    padding: 0px !important;
+    max-width: 1920px - 128;
+    margin-right: 64px;
+    margin-left: 64px;
+    @media (max-width: $grid-breakpoint-lg) {
+      margin-right: 32px;
+      margin-left: 32px;
+    }
+    @media (max-width: $grid-breakpoint-sm) {
+      margin-right: 16px;
+      margin-left: 16px;
+    }
+    @media (max-width: $grid-breakpoint-xs) {
+      margin-right: 8px;
+      margin-left: 8px;
+    }
+    .fwe-app-logo-container {
+      position: unset;
+      margin-bottom: 17px;
+      margin-right: 24px;
+    }
+  }
+}
+
+.fwe-layout-1440 {
+  @extend .fwe-layout-1920;
+  .fwe-container {
+    max-width: 1440px - 128px;
+  }
+}
+
+.fwe-layout-1024 {
+  @extend .fwe-layout-1920;
+  .fwe-container {
+    max-width: 1024px - 64px;
+  }
+}

package/dist/scss/_mobile-flyout.scss

@@ -0,0 +1,104 @@
+.fwe-mobile-flyout {
+  position: relative;
+
+  .fwe-mobile-flyout-button {
+    @extend .fwe-icon;
+    @extend .fwe-icon-lg;
+    padding: 0px;
+    border: none;
+    background: none;
+    outline: none;
+    margin-bottom: 8px;
+    margin-right: auto;
+    cursor: pointer;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        color: $hero;
+      }
+    }
+  }
+
+  .fwe-burger-button {
+    @extend .fwe-mobile-flyout-button;
+    @extend .fwe-icon-menu-menu;
+  }
+  .fwe-close-button {
+    @extend .fwe-mobile-flyout-button;
+    @extend .fwe-icon-menu-close;
+  }
+
+  .fwe-mobile-flyout-container {
+    position: fixed;
+    display: flex;
+    top: $navbar-height;
+    left: 0px;
+    width: 384px;
+    height: calc(100vh - #{$navbar-height});
+    background-color: $white;
+    flex-direction: column;
+    box-shadow: 0px 1px 4px #00000029;
+    overflow: hidden;
+    transform: translateX(-105%);
+
+    @media (max-width: $grid-breakpoint-xs) {
+      width: 100% !important;
+    }
+    transition: transform 0.3s ease;
+    &.fwe-opened {
+      transform: translateX(0%);
+    }
+  }
+}
+
+.fwe-mobile-flyout-page {
+  background: $white;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  &.fwe-opened {
+    transform: translateX(0%);
+  }
+
+  .fwe-page-back {
+    cursor: pointer;
+    height: 53px;
+    display: flex;
+    align-items: center;
+    background: $background;
+    &:hover {
+      background: $control;
+    }
+    i {
+      @extend .fwe-icon;
+      @extend .fwe-icon-arrows-left-2;
+      margin-left: 16px;
+      margin-right: 8px;
+    }
+    div {
+      margin-top: -1px;
+      margin-bottom: 1px;
+    }
+  }
+
+  .fwe-mobile-flyout-item-container {
+    padding: 24px;
+    @media (max-width: $grid-breakpoint-xs) {
+      padding: 16px;
+    }
+  }
+}
+
+.fwe-mobile-flyout-item {
+  color: $text;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  &.fwe-active {
+    color: $hero;
+  }
+}