@festo-ui/web-essentials 3.1.0 → 3.2.1

package/scss/_stepper-vertical.scss

@@ -0,0 +1,120 @@
+$vertical-step-height: 300px;
+
+.fwe-stepper-vertical {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .fwe-step-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    text-align: right;
+    position: relative;
+    .fwe-step {
+      padding-top: -1px;
+      padding-bottom: 1px;
+      position: relative;
+      border-radius: 50%;
+      border: 2px solid $text-disabled;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+
+      .fwe-step-no {
+        color: $text-disabled;
+        font-size: $font-size-md;
+        font-weight: $font-weight-bold;
+      }
+
+      .fwe-step-name {
+        font-size: $font-size-md;
+        position: absolute;
+        left: 36px;
+        color: $text-disabled;
+        white-space: pre;
+        transition: color 0.3s;
+      }
+    }
+
+    .fwe-step-content-container {
+      .fwe-step-content {
+        padding-top: 12px;
+        padding-bottom: 32px;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      height: 20px;
+      transition: height 0.3s;
+      margin-top: 4px;
+      margin-bottom: 4px;
+      border-left: 2px solid $text-disabled;
+      padding-left: 26px;
+      margin-left: 11px;
+      text-align: left;
+      position: relative;
+      overflow: hidden;
+    }
+
+    &.fwe-step-active,
+    &.fwe-step-done {
+      .fwe-step-content-container {
+        border-color: $hero;
+      }
+      .fwe-step {
+        background: $hero;
+        border-color: $hero;
+        .fwe-step-no {
+          color: $white;
+        }
+        .fwe-step-name {
+          color: $hero;
+        }
+      }
+    }
+
+    &.fwe-step-active {
+      .fwe-step-content-container {
+        height: $vertical-step-height;
+        .fwe-step-content {
+          opacity: 1;
+        }
+      }
+      .fwe-step {
+        .fwe-step-name {
+          font-weight: $font-weight-bold;
+        }
+      }
+    }
+
+    &.fwe-step-done {
+      .fwe-step {
+        cursor: pointer;
+        &:hover {
+          background: $hero-darker;
+          border-color: $hero-darker;
+        }
+        .fwe-step-no {
+          display: none;
+        }
+        @extend .fwe-icon;
+        @extend .fwe-icon-menu-check;
+        &:before {
+          position: absolute;
+          left: 2px;
+          top: 2px;
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .fwe-step-container.fwe-last-element {
+    .fwe-step-content-container {
+      border-color: transparent;
+    }
+  }
+}

package/scss/_text-input.scss

@@ -47,7 +47,9 @@ label.fwe-input-text {
     border: none;
     border-radius: 0;
     background: none;
-    border-bottom: 1px solid $control-border;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: $control-border;
     width: 100%;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -61,7 +63,7 @@ label.fwe-input-text {
     }
 
     &:hover:valid:not(:disabled) {
-      border-bottom: 1px solid $hero;
+      border-color: $hero;
     }
 
     &:hover:not(:disabled) {
@@ -70,12 +72,12 @@ label.fwe-input-text {
 
     &:focus {
       outline: none;
-      border-bottom: 1px solid $hero;
+      border-color: $hero;
       color: $text !important;
     }
 
     &:invalid {
-      border-bottom: 1px solid $red;
+      border-color: $red;
       & ~ .fwe-input-text-info {
         display: none;
       }
@@ -87,7 +89,7 @@ label.fwe-input-text {
     &:disabled {
       background: none;
       color: $text-disabled;
-      border-bottom: 1px solid $control-disabled;
+      border-color: $control-disabled;
 
       & ~ .fwe-input-text-label,
       & ~ .fwe-input-text-invalid,
@@ -139,13 +141,16 @@ label.fwe-input-text {
 
   textarea {
     resize: none;
-    padding-left: 0px;
-    padding-right: 0px;
+    margin-top: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-width: 1px;
+    border-style: solid;
 
     @for $i from 2 through 10 {
       &.fwe-row-#{$i} {
         // height = rowcount * rowheight + margin-top + margin-bottom + 1px-line
-        height: $i * $font-size-base * $line-height-base + 4px + 4px + 1px;
+        height: calc(#{$i} * #{$textarea-row-const});
       }
     }
 

package/scss/_timepicker.scss

@@ -26,11 +26,11 @@
         transform: translateY(-50%);
         left: 38px;
         padding-bottom: 4px;
-        font-weight: bold;
+        font-weight: $font-weight-bold;
       }
 
       input[type="number"] {
-        font-weight: bold;
+        font-weight: $font-weight-bold;
         color: $hero;
         outline: 0;
         border: none;

package/scss/_variables.scss

@@ -25,6 +25,23 @@ $yellow-dark: var(--fwe-yellow-dark) !default;
 $orange-dark: var(--fwe-orange-dark) !default;
 $red-dark: var(--fwe-red-dark) !default;
 
+// button vars
+$btn: var(--fwe-btn) !default;
+$btn-hover: var(--fwe-btn-hover) !default;
+$btn-active: var(--fwe-btn-active) !default;
+$btn-disabled: var(--fwe-btn-disabled) !default;
+$btn-text: var(--fwe-btn-text) !default;
+$btn-text-hover: var(--fwe-btn-text-hover) !default;
+$btn-text-disabled: var(--fwe-btn-text-disabled) !default;
+
+$btn-hero: var(--fwe-btn-hero) !default;
+$btn-hero-hover: var(--fwe-btn-hero-hover) !default;
+$btn-hero-active: var(--fwe-btn-hero-active) !default;
+$btn-hero-disabled: var(--fwe-btn-hero-disabled) !default;
+$btn-hero-text: var(--fwe-btn-hero-text) !default;
+$btn-hero-text-hover: var(--fwe-btn-hero-text-hover) !default;
+$btn-hero-text-disabled: var(--fwe-btn-hero-text-disabled) !default;
+
 // control colors
 $text: var(--fwe-text) !default;
 $text-light: var(--fwe-text-light) !default;
@@ -47,6 +64,7 @@ $control-border-darker: var(--fwe-control-border-darker) !default;
 
 $background: var(--fwe-background) !default;
 $background-modal: rgba(black, 0.7) !default;
+$background-image-gallery: var(--fwe-background-image-gallery) !default;
 
 $border: var(--fwe-border) !default;
 $border-disabled: var(--fwe-border-disabled) !default;
@@ -122,26 +140,27 @@ $badge-colors: map-merge(
   $badge-colors
 );
 
-$font-family-sans-serif: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-icons-16: "festo_icons-16" !default;
-$font-family-icons-24: "festo_icons-24" !default;
-$font-family-icons-32: "festo_icons-32" !default;
+$font-family-sans-serif: var(--fwe-font-family-sans-serif) !default;
+$font-family-monospace: var(--fwe-font-family-monospace) !default;
+$font-family-icons-16: var(--fwe-font-family-icons-16) !default;
+$font-family-icons-24: var(--fwe-font-family-icons-24) !default;
+$font-family-icons-32: var(--fwe-font-family-icons-32) !default;
 
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-small: 12px !default;
-$font-size-md: 14px !default;
-$font-size-base: 16px !default;
-$font-size-xl: 24px !default;
-$font-size-xxl: 32px !default;
+$font-size-small: var(--fwe-font-size-small) !default;
+$font-size-md: var(--fwe-font-size-md) !default;
+$font-size-base: var(--fwe-font-size-base) !default;
+$font-size-xl: var(--fwe-font-size-xl) !default;
+$font-size-xxl: var(--fwe-font-size-xxl) !default;
 
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
+$font-weight-normal: var(--fwe-font-weight-normal) !default;
+$font-weight-bold: var(--fwe-font-weight-bold) !default;
 
 $font-weight-base: $font-weight-normal !default;
-$line-height-base: 1.5 !default;
+$line-height-base: var(--fwe-line-height-base) !default;
+$font-feature-settings: var(--fwe-font-feature-settings) !default;
+$font-variant-numeric: var(--fwe-font-variant-numeric) !default;
 
 $container-padding: 0 8px 0 8px;
 $container-paddings: (
@@ -153,6 +172,7 @@ $container-paddings: (
 
 $grid-columns: 12 !default;
 $grid-gap: 24px !default;
+$grid-breakpoint-xxs: 375px;
 $grid-breakpoint-xs: 600px;
 $grid-breakpoint-sm: 769px;
 $grid-breakpoint-md: 1025px;
@@ -161,6 +181,7 @@ $grid-breakpoint-xl: 1441px;
 $grid-breakpoint-xxl: 1921px;
 $grid-breakpoints: (
   unset: 0,
+  xxs: $grid-breakpoint-xxs,
   xs: $grid-breakpoint-xs,
   sm: $grid-breakpoint-sm,
   md: $grid-breakpoint-md,
@@ -222,3 +243,5 @@ $zindex-modal-backdrop: var(--fwe-z-index-modal-backdrop) !default;
 $zindex-modal: var(--fwe-z-index-modal) !default;
 $zindex-popover: var(--fwe-z-index-popover) !default;
 $zindex-tooltip: var(--fwe-z-index-tooltip) !default;
+
+$textarea-row-const: var(--fwe-textarea-row-const) !default;

package/scss/festo-web-essentials.scss

@@ -1,3 +1,9 @@
+/*!
+ * Festo UI - Web Essentials v3.1.0 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
+
 @import "rfs";
 @import "variables";
 @import "mixins";
@@ -21,6 +27,7 @@
 @import "table";
 @import "list";
 @import "navbar";
+@import "mobile-flyout";
 @import "breadcrumb";
 @import "text-link";
 @import "text-input";
@@ -44,3 +51,7 @@
 @import "navbar-menu";
 @import "scroll";
 @import "search-input";
+@import "stepper-horizontal";
+@import "stepper-vertical";
+@import "bottom-navigation";
+@import "accordion";

package/scss/organisms/_footer.scss

@@ -32,7 +32,7 @@ footer.fwe-footer {
     h4 {
       font-size: 16px;
       line-height: 24px;
-      font-weight: 700;
+      font-weight: $font-weight-bold;
       list-style-type: none;
       position: relative;
       margin-top: 0px;
@@ -55,8 +55,8 @@ footer.fwe-footer {
     }
   }
   .fwe-bottomline {
-    font-size: 12px;
-    padding-top: 70px;
+    font-size: $font-size-small;
+    padding-top: 24px;
     text-align: center;
 
     .fwe-sitelinks {
@@ -110,8 +110,8 @@ footer.fwe-footer {
       }
     }
     .fwe-bottomline {
-      font-size: 12px;
-      padding-top: 70px;
+      font-size: $font-size-small;
+      padding-top: 24px;
       text-align: left;
       display: flex;
       .fwe-sitelinks {

package/scss/organisms/_header-modul.scss

@@ -0,0 +1,109 @@
+@use "sass:math";
+
+.fwe-header-modul-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: $spacer-l;
+  padding-bottom: $spacer-l;
+
+  .fwe-header-modul-content {
+    order: 2;
+    position: relative;
+
+    h1,
+    .fwe-h1 {
+      margin-bottom: 0;
+    }
+
+    h3,
+    .fwe-h3 {
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+
+    p {
+      font-size: $font-size-xl;
+      line-height: 32px;
+      color: $text-light;
+      margin: 0;
+      padding-bottom: 34px;
+    }
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      content: "";
+      width: 28px;
+      height: 10px;
+      background-color: $gray-400;
+    }
+  }
+
+  .fwe-header-modul-media {
+    min-height: 111px;
+    background-color: $hero;
+    order: 1;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-xs) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-media {
+      min-height: 132px;
+    }
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-sm) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-content {
+      h1,
+      .fwe-h1 {
+        margin-bottom: 6px;
+      }
+    }
+    .fwe-header-modul-media {
+      min-height: 268px;
+    }
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-md) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-media {
+      min-height: 352px;
+    }
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-lg) {
+  .fwe-header-modul-container {
+    flex-direction: row;
+
+    .fwe-header-modul-content {
+      order: 1;
+      width: math.div(100%, 2.4);
+      margin-right: $spacer-m;
+
+      h1,
+      .fwe-h1 {
+        margin-top: 0;
+      }
+    }
+
+    .fwe-header-modul-media {
+      order: 2;
+      min-height: 293px;
+      flex: 1;
+    }
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-xl) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-media {
+      min-height: 400px;
+    }
+  }
+}

package/scss/organisms/_image-gallery.scss

@@ -0,0 +1,196 @@
+/* stylelint-disable selector-class-pattern -- Doing swiper overrides here */
+.fwe-modal-image-gallery {
+  background: transparent;
+  box-shadow: none;
+  padding: 0px;
+  position: fixed;
+  width: 288px;
+  max-width: unset;
+  max-height: unset;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
+    padding-right: 0px;
+    padding-top: 4px;
+  }
+
+  .fwe-image-gallery {
+    // pagination height (37px + 24px) + 12px (extra padding on top and bottom)
+    max-height: calc(100vh - 73px);
+  }
+
+  &--with-thumbnails {
+    .fwe-image-gallery {
+      // pagination height (37px + 24px) + thumbs height (64 + 24) + 12px (extra padding on top and bottom)
+      max-height: calc(100vh - 161px);
+    }
+  }
+}
+
+.fwe-image-gallery-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacer-m;
+}
+
+.fwe-image-gallery {
+  width: 100%;
+  height: 288px;
+  background-color: $background-image-gallery;
+  user-select: none;
+
+  svg,
+  img,
+  .swiper-zoom-container img,
+  .swiper-zoom-container svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.fwe-image-gallery-thumbs {
+  margin-top: 24px;
+  user-select: none;
+
+  &.swiper {
+    width: 100%;
+    height: 64px;
+    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
+
+    .swiper-slide {
+      position: relative;
+      background-size: cover;
+      background-position: center;
+      width: 88px;
+      margin-right: 8px;
+      height: 64px;
+      opacity: 0.33;
+      transition: opacity 0.3s;
+
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      &::after {
+        position: absolute;
+        content: "";
+        height: 4px;
+        width: 100%;
+        background-color: $hero;
+        bottom: 0px;
+        opacity: 0;
+        transition: opacity 0.3s;
+      }
+
+      img {
+        display: block;
+        object-fit: cover;
+        width: 88px;
+        height: 56px;
+        background-color: $background-image-gallery;
+      }
+
+      &.swiper-slide-thumb-active,
+      &:hover {
+        opacity: 1;
+
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &:not(.swiper) {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  &-nail {
+    position: relative;
+    height: 64px;
+    width: 88px;
+    min-width: 88px;
+    margin-right: 8px;
+    opacity: 0.33;
+    transition: opacity 0.3s;
+
+    img {
+      position: absolute;
+      height: 56px;
+      width: 88px;
+      min-width: 88px;
+      background: $background-image-gallery;
+      object-fit: cover;
+    }
+
+    &:last-child {
+      margin-right: 0px;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      height: 4px;
+      width: 100%;
+      background-color: $hero;
+      bottom: 0px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &.fwe-active,
+    &:hover {
+      opacity: 1;
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-xxs) {
+  .fwe-modal-image-gallery {
+    width: 342px;
+  }
+
+  .fwe-image-gallery {
+    height: 342px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-sm) {
+  .fwe-modal-image-gallery {
+    width: 696px;
+  }
+
+  .fwe-image-gallery {
+    height: 465px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-md) {
+  .fwe-modal-image-gallery {
+    width: 696px;
+  }
+
+  .fwe-image-gallery {
+    height: 465px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-xl) {
+  .fwe-modal-image-gallery {
+    width: 960px;
+  }
+
+  .fwe-image-gallery {
+    height: 640px;
+  }
+}

package/scss/organisms/_teaser.scss

@@ -50,3 +50,45 @@
   margin-bottom: 24px;
   margin-right: 24px;
 }
+
+.fwe-teaser-c12-container {
+  display: flex;
+  flex-direction: column;
+
+  .fwe-teaser-c12-content {
+    order: 2;
+    background-color: $sucanul;
+    padding-top: 16px;
+    padding-bottom: 13px;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    h3,
+    .fwe-h3 {
+      font-size: 12px;
+      line-height: 14px;
+      margin-bottom: 4px;
+      font-weight: $font-weight-normal;
+    }
+
+    h2,
+    .fwe-h2 {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: $font-weight-bold;
+      margin-top: 0;
+    }
+  }
+
+  .fwe-teaser-c12-img {
+    order: 1;
+    background-color: $hero;
+    min-height: 114px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-md) {
+  .fwe-teaser-verbox h2 {
+    padding-top: 48px;
+  }
+}

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

@@ -1,5 +1,13 @@
+/*!
+ * Festo UI - Web Essentials v3.1.0 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
+
 @import "../variables";
 
 @import "footer";
 @import "teaser";
 @import "header-slider";
+@import "header-modul";
+@import "image-gallery";