@festo-ui/web-essentials 4.0.3-pre-20221124.8 → 5.0.0-dev.102

package/scss/_popover.scss

@@ -1,201 +1,201 @@
-%triangle-base {
-  width: 17px;
-  height: 17px;
-  position: absolute;
-  overflow: hidden;
-  &::after {
-    content: "";
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    background: $white;
-    transform: rotate(45deg);
-    box-shadow: 0px 1px 4px #33333333;
-  }
-}
-
-@mixin triangle-bottom {
-  @extend %triangle-base;
-  left: 50%;
-  top: 100%;
-  transform: translateX(-8px);
-  &::after {
-    top: -6px;
-    left: 3px;
-  }
-}
-
-@mixin triangle-top {
-  @extend %triangle-base;
-  left: 50%;
-  top: -17px;
-  transform: translateX(-8px);
-  &::after {
-    top: 11px;
-    left: 3px;
-  }
-}
-
-@mixin triangle-left {
-  @extend %triangle-base;
-  left: -17px;
-  top: 50%;
-  transform: translateY(-8px);
-  &::after {
-    top: 2px;
-    left: 11px;
-  }
-}
-
-@mixin triangle-left-top {
-  @extend %triangle-base;
-  left: -17px;
-  top: 32px;
-  transform: translateY(-8px);
-  &::after {
-    top: 2px;
-    left: 11px;
-  }
-}
-
-@mixin triangle-right {
-  @extend %triangle-base;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-8px);
-  &::after {
-    top: 2px;
-    left: -6px;
-  }
-}
-
-@mixin triangle-right-top {
-  @extend %triangle-base;
-  left: 100%;
-  top: 32px;
-  transform: translateY(-8px);
-  &::after {
-    top: 2px;
-    left: -6px;
-  }
-}
-
-%popover-base {
-  background-color: $white;
-  box-shadow: 0px 1px 4px #33333333;
-  border-radius: $control-border-radius;
-}
-
-.fwe-popover {
-  @extend %popover-base;
-  padding: $spacer * 0.5;
-  font-size: $font-size-md;
-  line-height: 1rem;
-}
-
-.fwe-popover-container {
-  position: relative;
-  display: inline-block;
-}
-
-@mixin popover-menu {
-  @extend %popover-base;
-  font-size: $font-size-base;
-  line-height: 1.5rem;
-  padding: $spacer;
-  .fwe-list-group {
-    .fwe-list-group-item {
-      border-bottom: none;
-      min-height: $spacer * 2.25;
-      padding: 0;
-      button {
-        width: 100%;
-        margin-left: inherit;
-        padding: 0 ($spacer * 0.5) 0 0;
-        text-align: left;
-        height: $spacer * 2;
-        max-height: $spacer * 2;
-        display: inline-flex;
-        justify-content: unset;
-        &:hover {
-          color: $black;
-        }
-        i {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          flex-wrap: nowrap;
-          height: $spacer * 1.5;
-          width: $spacer * 2;
-          &::before {
-            display: inline-flex;
-          }
-        }
-        span {
-          display: inline-flex;
-          height: $spacer * 1.5;
-        }
-        [class*=" fwe-icon-"] {
-          margin-left: inherit;
-        }
-      }
-      &:hover {
-        color: $black;
-        background-color: #3333331a;
-      }
-      &:active {
-        background-color: #33333333;
-      }
-    }
-  }
-}
-
-@mixin popover-legend {
-  display: table;
-  margin: $spacer;
-  line-height: $spacer * 1.5;
-}
-
-@mixin popover-legend-content {
-  display: table-row;
-  dt {
-    display: table-cell;
-    margin: 0;
-    padding-right: $spacer * 0.5;
-  }
-  dd {
-    display: table-cell;
-    margin: 0;
-  }
-}
-
-.fwe-triangle {
-  &.fwe-triangle-top {
-    @include triangle-top();
-  }
-
-  &.fwe-triangle-bottom {
-    @include triangle-bottom();
-  }
-
-  &.fwe-triangle-left {
-    @include triangle-left();
-  }
-
-  &.fwe-triangle-right {
-    @include triangle-right();
-  }
-}
-
-.fwe-popover {
-  &.fwe-popover-menu {
-    @include popover-menu();
-  }
-
-  .fwe-popover-legend {
-    @include popover-legend();
-    .fwe-popover-legend-content {
-      @include popover-legend-content();
-    }
-  }
-}
+%triangle-base {
+  width: 17px;
+  height: 17px;
+  position: absolute;
+  overflow: hidden;
+  &::after {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: $white;
+    transform: rotate(45deg);
+    box-shadow: 0px 1px 4px #33333333;
+  }
+}
+
+@mixin triangle-bottom {
+  @extend %triangle-base;
+  left: 50%;
+  top: 100%;
+  transform: translateX(-8px);
+  &::after {
+    top: -6px;
+    left: 3px;
+  }
+}
+
+@mixin triangle-top {
+  @extend %triangle-base;
+  left: 50%;
+  top: -17px;
+  transform: translateX(-8px);
+  &::after {
+    top: 11px;
+    left: 3px;
+  }
+}
+
+@mixin triangle-left {
+  @extend %triangle-base;
+  left: -17px;
+  top: 50%;
+  transform: translateY(-8px);
+  &::after {
+    top: 2px;
+    left: 11px;
+  }
+}
+
+@mixin triangle-left-top {
+  @extend %triangle-base;
+  left: -17px;
+  top: 32px;
+  transform: translateY(-8px);
+  &::after {
+    top: 2px;
+    left: 11px;
+  }
+}
+
+@mixin triangle-right {
+  @extend %triangle-base;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-8px);
+  &::after {
+    top: 2px;
+    left: -6px;
+  }
+}
+
+@mixin triangle-right-top {
+  @extend %triangle-base;
+  left: 100%;
+  top: 32px;
+  transform: translateY(-8px);
+  &::after {
+    top: 2px;
+    left: -6px;
+  }
+}
+
+%popover-base {
+  background-color: $white;
+  box-shadow: 0px 1px 4px #33333333;
+  border-radius: $control-border-radius;
+}
+
+.fwe-popover {
+  @extend %popover-base;
+  padding: $spacer * 0.5;
+  font-size: $font-size-md;
+  line-height: 1rem;
+}
+
+.fwe-popover-container {
+  position: relative;
+  display: inline-block;
+}
+
+@mixin popover-menu {
+  @extend %popover-base;
+  font-size: $font-size-base;
+  line-height: 1.5rem;
+  padding: $spacer;
+  .fwe-list-group {
+    .fwe-list-group-item {
+      border-bottom: none;
+      min-height: $spacer * 2.25;
+      padding: 0;
+      button {
+        width: 100%;
+        margin-left: inherit;
+        padding: 0 ($spacer * 0.5) 0 0;
+        text-align: left;
+        height: $spacer * 2;
+        max-height: $spacer * 2;
+        display: inline-flex;
+        justify-content: unset;
+        &:hover {
+          color: $black;
+        }
+        i {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex-wrap: nowrap;
+          height: $spacer * 1.5;
+          width: $spacer * 2;
+          &::before {
+            display: inline-flex;
+          }
+        }
+        span {
+          display: inline-flex;
+          height: $spacer * 1.5;
+        }
+        [class*=" fwe-icon-"] {
+          margin-left: inherit;
+        }
+      }
+      &:hover {
+        color: $black;
+        background-color: #3333331a;
+      }
+      &:active {
+        background-color: #33333333;
+      }
+    }
+  }
+}
+
+@mixin popover-legend {
+  display: table;
+  margin: $spacer;
+  line-height: $spacer * 1.5;
+}
+
+@mixin popover-legend-content {
+  display: table-row;
+  dt {
+    display: table-cell;
+    margin: 0;
+    padding-right: $spacer * 0.5;
+  }
+  dd {
+    display: table-cell;
+    margin: 0;
+  }
+}
+
+.fwe-triangle {
+  &.fwe-triangle-top {
+    @include triangle-top();
+  }
+
+  &.fwe-triangle-bottom {
+    @include triangle-bottom();
+  }
+
+  &.fwe-triangle-left {
+    @include triangle-left();
+  }
+
+  &.fwe-triangle-right {
+    @include triangle-right();
+  }
+}
+
+.fwe-popover {
+  &.fwe-popover-menu {
+    @include popover-menu();
+  }
+
+  .fwe-popover-legend {
+    @include popover-legend();
+    .fwe-popover-legend-content {
+      @include popover-legend-content();
+    }
+  }
+}

package/scss/_progressbar.scss

@@ -1,67 +1,67 @@
-.fwe-progress {
-  display: flex;
-  height: 8px;
-  background-color: $control;
-  border-radius: $border-radius-m;
-  overflow: hidden;
-
-  .fwe-progress-bar {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: hidden;
-    transition: width 0.6s ease;
-    background-color: $hero;
-    border-radius: $border-radius-m;
-    box-shadow: 4px 0px 0px 0px $white;
-
-    &.fwe-progress-bar-black {
-      box-shadow: 4px 0px 0px 0px $black;
-    }
-
-    &.fwe-progress-bar-background {
-      box-shadow: 4px 0px 0px 0px $background;
-    }
-  }
-}
-
-fieldset.fwe-progress-container {
-  padding: 0;
-  margin: 0;
-  border: none;
-  padding-left: 20px;
-  padding-right: 20px;
-
-  legend {
-    padding: 0;
-    padding-top: 16px;
-    padding-bottom: 8px;
-    padding-left: 4px;
-    padding-right: 0px;
-    height: 18px;
-    line-height: 18px;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-  }
-
-  p {
-    padding: 0;
-    margin: 0;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 4px;
-  }
-
-  label {
-    padding: 0;
-    margin: 0;
-    padding-top: 8px;
-    padding-bottom: 16px;
-    padding-left: 4px;
-    height: 18px;
-    line-height: 18px;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    color: $hero;
-  }
-}
+.fwe-progress {
+  display: flex;
+  height: 8px;
+  background-color: $control;
+  border-radius: $border-radius-m;
+  overflow: hidden;
+
+  .fwe-progress-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    transition: width 0.6s ease;
+    background-color: $hero;
+    border-radius: $border-radius-m;
+    box-shadow: 4px 0px 0px 0px $white;
+
+    &.fwe-progress-bar-black {
+      box-shadow: 4px 0px 0px 0px $black;
+    }
+
+    &.fwe-progress-bar-background {
+      box-shadow: 4px 0px 0px 0px $background;
+    }
+  }
+}
+
+fieldset.fwe-progress-container {
+  padding: 0;
+  margin: 0;
+  border: none;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  legend {
+    padding: 0;
+    padding-top: 16px;
+    padding-bottom: 8px;
+    padding-left: 4px;
+    padding-right: 0px;
+    height: 18px;
+    line-height: 18px;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+  }
+
+  p {
+    padding: 0;
+    margin: 0;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 4px;
+  }
+
+  label {
+    padding: 0;
+    margin: 0;
+    padding-top: 8px;
+    padding-bottom: 16px;
+    padding-left: 4px;
+    height: 18px;
+    line-height: 18px;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: $hero;
+  }
+}