@festo-ui/web-essentials 8.2.0-dev.630 → 8.2.0-dev.637

package/scss/_badge.scss

@@ -1,49 +1,49 @@
-@use "variables";
-
-.fwe-badge {
-  display: inline-block;
-  border-radius: 2px;
-  font-size: variables.$font-size-md;
-  padding-left: 6px;
-  padding-right: 6px;
-  color: variables.$white;
-  max-height: 19px;
-  height: 19px;
-  line-height: 17px;
-  background-color: variables.$hero;
-  font-weight: variables.$font-weight-bold;
-
-  &.fwe-badge-sm {
-    font-size: variables.$font-size-small;
-    max-height: 17px;
-    height: 17px;
-    line-height: 16px;
-  }
-
-  &.fwe-badge-md {
-    font-size: variables.$font-size-base;
-    max-height: 22px;
-    height: 22px;
-    line-height: 20px;
-  }
-
-  &.fwe-badge-lg {
-    font-size: variables.$font-size-xl;
-    max-height: 32px;
-    height: 32px;
-    line-height: 30px;
-  }
-
-  &.fwe-badge-xl {
-    font-size: variables.$font-size-xxl;
-    max-height: 44px;
-    height: 44px;
-    line-height: 42px;
-  }
-}
-
-@each $key, $value in variables.$badge-colors {
-  .fwe-badge-#{$key} {
-    background-color: $value !important;
-  }
-}
+@use "variables";
+
+.fwe-badge {
+  display: inline-block;
+  border-radius: 2px;
+  font-size: variables.$font-size-md;
+  padding-left: 6px;
+  padding-right: 6px;
+  color: variables.$white;
+  max-height: 19px;
+  height: 19px;
+  line-height: 17px;
+  background-color: variables.$hero;
+  font-weight: variables.$font-weight-bold;
+
+  &.fwe-badge-sm {
+    font-size: variables.$font-size-small;
+    max-height: 17px;
+    height: 17px;
+    line-height: 16px;
+  }
+
+  &.fwe-badge-md {
+    font-size: variables.$font-size-base;
+    max-height: 22px;
+    height: 22px;
+    line-height: 20px;
+  }
+
+  &.fwe-badge-lg {
+    font-size: variables.$font-size-xl;
+    max-height: 32px;
+    height: 32px;
+    line-height: 30px;
+  }
+
+  &.fwe-badge-xl {
+    font-size: variables.$font-size-xxl;
+    max-height: 44px;
+    height: 44px;
+    line-height: 42px;
+  }
+}
+
+@each $key, $value in variables.$badge-colors {
+  .fwe-badge-#{$key} {
+    background-color: $value !important;
+  }
+}

package/scss/_border.scss

@@ -1,86 +1,86 @@
-@use "sass:map";
-@use "utils";
-@use "variables";
-
-@function border-name($borderKey) {
-  @return if($borderKey != 0, "-#{$borderKey}", null);
-}
-
-@mixin borders($borders, $infix: "") {
-  @each $borderKey, $borderColor in $borders {
-    $borderColorName: border-name($borderKey);
-
-    .fwe-b#{$infix}#{$borderColorName} {
-      border: 1px solid $borderColor !important;
-    }
-
-    .fwe-bt#{$infix}#{$borderColorName} {
-      border-top: 1px solid $borderColor !important;
-    }
-
-    .fwe-bb#{$infix}#{$borderColorName} {
-      border-bottom: 1px solid $borderColor !important;
-    }
-
-    .fwe-bl#{$infix}#{$borderColorName} {
-      border-left: 1px solid $borderColor !important;
-    }
-
-    .fwe-br#{$infix}#{$borderColorName} {
-      border-right: 1px solid $borderColor !important;
-    }
-
-    .fwe-bx#{$infix}#{$borderColorName} {
-      border-left: 1px solid $borderColor !important;
-      border-right: 1px solid $borderColor !important;
-    }
-
-    .fwe-by#{$infix}#{$borderColorName} {
-      border-top: 1px solid $borderColor !important;
-      border-bottom: 1px solid $borderColor !important;
-    }
-
-    .fwe-b#{$infix}-none {
-      border: none !important;
-    }
-
-    .fwe-bt#{$infix}-none {
-      border-top: none !important;
-    }
-
-    .fwe-bb#{$infix}-none {
-      border-bottom: none !important;
-    }
-
-    .fwe-bl#{$infix}-none {
-      border-left: none !important;
-    }
-
-    .fwe-br#{$infix}-none {
-      border-right: none !important;
-    }
-
-    .fwe-bx#{$infix}-none {
-      border-left: none !important;
-      border-right: none !important;
-    }
-
-    .fwe-by#{$infix}-none {
-      border-top: none !important;
-      border-bottom: none !important;
-    }
-  }
-}
-
-@each $breakpoint in map.keys(variables.$grid-breakpoints) {
-  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
-  $size: map.get(variables.$grid-breakpoints, $breakpoint);
-
-  @if $size == 0 {
-    @include borders(variables.$borders);
-  } @else {
-    @media (min-width: $size) {
-      @include borders(variables.$borders, $infix);
-    }
-  }
-}
+@use "sass:map";
+@use "utils";
+@use "variables";
+
+@function border-name($borderKey) {
+  @return if($borderKey != 0, "-#{$borderKey}", null);
+}
+
+@mixin borders($borders, $infix: "") {
+  @each $borderKey, $borderColor in $borders {
+    $borderColorName: border-name($borderKey);
+
+    .fwe-b#{$infix}#{$borderColorName} {
+      border: 1px solid $borderColor !important;
+    }
+
+    .fwe-bt#{$infix}#{$borderColorName} {
+      border-top: 1px solid $borderColor !important;
+    }
+
+    .fwe-bb#{$infix}#{$borderColorName} {
+      border-bottom: 1px solid $borderColor !important;
+    }
+
+    .fwe-bl#{$infix}#{$borderColorName} {
+      border-left: 1px solid $borderColor !important;
+    }
+
+    .fwe-br#{$infix}#{$borderColorName} {
+      border-right: 1px solid $borderColor !important;
+    }
+
+    .fwe-bx#{$infix}#{$borderColorName} {
+      border-left: 1px solid $borderColor !important;
+      border-right: 1px solid $borderColor !important;
+    }
+
+    .fwe-by#{$infix}#{$borderColorName} {
+      border-top: 1px solid $borderColor !important;
+      border-bottom: 1px solid $borderColor !important;
+    }
+
+    .fwe-b#{$infix}-none {
+      border: none !important;
+    }
+
+    .fwe-bt#{$infix}-none {
+      border-top: none !important;
+    }
+
+    .fwe-bb#{$infix}-none {
+      border-bottom: none !important;
+    }
+
+    .fwe-bl#{$infix}-none {
+      border-left: none !important;
+    }
+
+    .fwe-br#{$infix}-none {
+      border-right: none !important;
+    }
+
+    .fwe-bx#{$infix}-none {
+      border-left: none !important;
+      border-right: none !important;
+    }
+
+    .fwe-by#{$infix}-none {
+      border-top: none !important;
+      border-bottom: none !important;
+    }
+  }
+}
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
+
+  @if $size == 0 {
+    @include borders(variables.$borders);
+  } @else {
+    @media (min-width: $size) {
+      @include borders(variables.$borders, $infix);
+    }
+  }
+}

package/scss/_bottom-navigation.scss

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

package/scss/_bottom-sheet.scss

@@ -1,116 +1,116 @@
-@use "mixins";
-@use "variables";
-
-.fwe-bottom-sheet {
-  &-header {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &-drag-handle-container {
-    width: 100%;
-    height: 36px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  &-drag-handle {
-    width: variables.$spacer-l;
-    height: variables.$spacer-xxxs;
-    background-color: variables.$hero-gray;
-    border-radius: 3px;
-    margin: variables.$spacer 0;
-  }
-
-  &-toggle-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: variables.$spacer-s;
-  }
-
-  &-close-btn {
-    width: variables.$spacer-m;
-    height: variables.$spacer-m;
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    padding: 0;
-    border: none;
-    min-width: variables.$spacer-m;
-    cursor: pointer;
-    background: variables.$text;
-    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
-  }
-
-  &-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    background: rgba(0, 0, 0, 0.5);
-    z-index: variables.$zindex-modal-backdrop;
-    opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-
-    &--visible {
-      opacity: 1;
-      right: 0;
-      bottom: 0;
-    }
-  }
-
-  &-container {
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    right: 50%;
-    background: variables.$white;
-    box-shadow: 0px 1px 8px #33333333;
-    z-index: variables.$zindex-modal;
-    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
-    overflow: hidden;
-    opacity: 0;
-    max-width: 768px;
-    width: 100%;
-    transform: translateX(-50%) translateY(100%);
-    transition: height 0.3s ease-in-out, transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
-
-    &--open {
-      height: 12.5vh;
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-
-      &.fwe-bottom-sheet-container--expand-from-center {
-        height: 55vh;
-
-        &.fwe-bottom-sheet-container--expanded {
-          height: calc(100vh - 64px);
-        }
-      }
-
-      &.fwe-bottom-sheet-container--closing {
-        transform: translateX(-50%) translateY(100%);
-      }
-    }
-
-    &--expanded {
-      height: calc(100vh - 64px);
-    }
-
-    &--with-backdrop {
-      box-shadow: none;
-    }
-  }
-
-  &-content {
-    padding: variables.$spacer variables.$spacer-l;
-    height: calc(100% - variables.$spacer-l);
-    overflow-y: auto;
-    @include mixins.custom-scrollbar;
-  }
-}
+@use "mixins";
+@use "variables";
+
+.fwe-bottom-sheet {
+  &-header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-drag-handle-container {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &-drag-handle {
+    width: variables.$spacer-l;
+    height: variables.$spacer-xxxs;
+    background-color: variables.$hero-gray;
+    border-radius: 3px;
+    margin: variables.$spacer 0;
+  }
+
+  &-toggle-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: variables.$spacer-s;
+  }
+
+  &-close-btn {
+    width: variables.$spacer-m;
+    height: variables.$spacer-m;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    padding: 0;
+    border: none;
+    min-width: variables.$spacer-m;
+    cursor: pointer;
+    background: variables.$text;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
+  }
+
+  &-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    background: rgba(0, 0, 0, 0.5);
+    z-index: variables.$zindex-modal-backdrop;
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+    &--visible {
+      opacity: 1;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &-container {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    right: 50%;
+    background: variables.$white;
+    box-shadow: 0px 1px 8px #33333333;
+    z-index: variables.$zindex-modal;
+    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
+    overflow: hidden;
+    opacity: 0;
+    max-width: 768px;
+    width: 100%;
+    transform: translateX(-50%) translateY(100%);
+    transition: height 0.3s ease-in-out, transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
+
+    &--open {
+      height: 12.5vh;
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+
+      &.fwe-bottom-sheet-container--expand-from-center {
+        height: 55vh;
+
+        &.fwe-bottom-sheet-container--expanded {
+          height: calc(100vh - 64px);
+        }
+      }
+
+      &.fwe-bottom-sheet-container--closing {
+        transform: translateX(-50%) translateY(100%);
+      }
+    }
+
+    &--expanded {
+      height: calc(100vh - 64px);
+    }
+
+    &--with-backdrop {
+      box-shadow: none;
+    }
+  }
+
+  &-content {
+    padding: variables.$spacer variables.$spacer-l;
+    height: calc(100% - variables.$spacer-l);
+    overflow-y: auto;
+    @include mixins.custom-scrollbar;
+  }
+}

package/scss/_colors.scss

@@ -1,11 +1,11 @@
-@use "variables";
-
-@each $key, $value in variables.$colors {
-  .fwe-color-#{$key} {
-    color: $value !important;
-  }
-
-  .fwe-bg-#{$key} {
-    background-color: $value !important;
-  }
-}
+@use "variables";
+
+@each $key, $value in variables.$colors {
+  .fwe-color-#{$key} {
+    color: $value !important;
+  }
+
+  .fwe-bg-#{$key} {
+    background-color: $value !important;
+  }
+}