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

package/scss/_stepper-vertical.scss

@@ -1,121 +1,121 @@
-$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-family: $font-family-base;
-        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;
-    }
-  }
-}
+$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-family: $font-family-base;
+        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/_table.scss

@@ -1,150 +1,150 @@
-.fwe-table-responsive {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-}
-
-table.fwe-table {
-  border-collapse: collapse;
-  width: 100%;
-
-  tr {
-    th {
-      background-color: $white;
-      border-bottom: 2px solid $background;
-      padding-top: 18px;
-      padding-bottom: 9px;
-      padding-left: 16px;
-      padding-right: 16px;
-      font-size: $font-size-md;
-      text-align: left;
-      vertical-align: text-bottom;
-
-      &.fwe-table-order {
-        cursor: pointer;
-        user-select: none;
-        white-space: nowrap;
-        direction: rtl;
-        @extend .fwe-icon;
-        @extend .fwe-icon-arrows-expand;
-        font-family: $font-family-base;
-        display: table-cell;
-        font-size: $font-size-md;
-        &::before {
-          font-size: $font-size-base;
-          display: none;
-          position: relative;
-          top: 3px;
-          left: 8px;
-          transform-origin: 8px 7px;
-          transition: transform 0.3s;
-        }
-
-        &.fwe-active {
-          &::before {
-            display: inline-block;
-          }
-          color: $hero;
-        }
-
-        &.fwe-table-order-descending {
-          &::before {
-            transform: rotate(180deg);
-          }
-        }
-      }
-    }
-
-    td {
-      &.fwe-v-align-middle {
-        vertical-align: middle;
-      }
-
-      &.fwe-t-align-center {
-        text-align: center;
-      }
-
-      &.fwe-t-no-wrap {
-        white-space: nowrap;
-      }
-
-      background-color: $white;
-      border-bottom: 2px solid $background;
-      padding-top: 11px;
-      padding-bottom: 13px;
-      padding-left: 16px;
-      padding-right: 16px;
-      vertical-align: top;
-
-      img.fwe-td-img {
-        display: block;
-        float: left;
-        align-self: center;
-        object-fit: contain;
-        height: 23px;
-        margin-right: 16px;
-      }
-    }
-
-    &.fwe-tr-sm {
-      height: 48px;
-      max-height: 48px;
-
-      td img.fwe-td-img {
-        height: 23px;
-        width: 23px;
-      }
-    }
-
-    &.fwe-tr-md {
-      height: 64px;
-      max-height: 64px;
-
-      td img.fwe-td-img {
-        height: 39px;
-        width: 39px;
-      }
-    }
-
-    &.fwe-tr-lg {
-      height: 96px;
-      max-height: 96px;
-
-      td img.fwe-td-img {
-        height: 71px;
-        width: 71px;
-      }
-    }
-
-    &.fwe-tr-xl {
-      height: 128px;
-      max-height: 128px;
-
-      td img.fwe-td-img {
-        height: 103px;
-        width: 103px;
-      }
-    }
-  }
-
-  &.fwe-table-md {
-    tr td {
-      height: 39px;
-      max-height: 39px;
-    }
-  }
-
-  &.fwe-table-lg {
-    tr td {
-      height: 71px;
-      max-height: 71px;
-    }
-  }
-
-  &.fwe-table-xl {
-    tr td {
-      height: 103px;
-      max-height: 103px;
-    }
-  }
-}
+.fwe-table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+}
+
+table.fwe-table {
+  border-collapse: collapse;
+  width: 100%;
+
+  tr {
+    th {
+      background-color: $white;
+      border-bottom: 2px solid $background;
+      padding-top: 18px;
+      padding-bottom: 9px;
+      padding-left: 16px;
+      padding-right: 16px;
+      font-size: $font-size-md;
+      text-align: left;
+      vertical-align: text-bottom;
+
+      &.fwe-table-order {
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        direction: rtl;
+        @extend .fwe-icon;
+        @extend .fwe-icon-arrows-expand;
+        font-family: $font-family-base;
+        display: table-cell;
+        font-size: $font-size-md;
+        &::before {
+          font-size: $font-size-base;
+          display: none;
+          position: relative;
+          top: 3px;
+          left: 8px;
+          transform-origin: 8px 7px;
+          transition: transform 0.3s;
+        }
+
+        &.fwe-active {
+          &::before {
+            display: inline-block;
+          }
+          color: $hero;
+        }
+
+        &.fwe-table-order-descending {
+          &::before {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+
+    td {
+      &.fwe-v-align-middle {
+        vertical-align: middle;
+      }
+
+      &.fwe-t-align-center {
+        text-align: center;
+      }
+
+      &.fwe-t-no-wrap {
+        white-space: nowrap;
+      }
+
+      background-color: $white;
+      border-bottom: 2px solid $background;
+      padding-top: 12px;
+      padding-bottom: 12px;
+      padding-left: 16px;
+      padding-right: 16px;
+      vertical-align: top;
+
+      img.fwe-td-img {
+        display: block;
+        float: left;
+        align-self: center;
+        object-fit: contain;
+        height: 23px;
+        margin-right: 16px;
+      }
+    }
+
+    &.fwe-tr-sm {
+      height: 48px;
+      max-height: 48px;
+
+      td img.fwe-td-img {
+        height: 23px;
+        width: 23px;
+      }
+    }
+
+    &.fwe-tr-md {
+      height: 64px;
+      max-height: 64px;
+
+      td img.fwe-td-img {
+        height: 39px;
+        width: 39px;
+      }
+    }
+
+    &.fwe-tr-lg {
+      height: 96px;
+      max-height: 96px;
+
+      td img.fwe-td-img {
+        height: 71px;
+        width: 71px;
+      }
+    }
+
+    &.fwe-tr-xl {
+      height: 128px;
+      max-height: 128px;
+
+      td img.fwe-td-img {
+        height: 103px;
+        width: 103px;
+      }
+    }
+  }
+
+  &.fwe-table-md {
+    tr td {
+      height: 39px;
+      max-height: 39px;
+    }
+  }
+
+  &.fwe-table-lg {
+    tr td {
+      height: 71px;
+      max-height: 71px;
+    }
+  }
+
+  &.fwe-table-xl {
+    tr td {
+      height: 103px;
+      max-height: 103px;
+    }
+  }
+}

package/scss/_timepicker.scss

@@ -1,68 +1,68 @@
-.fwe-timepicker {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: $white;
-  border-radius: $border-radius-s;
-  box-shadow: $control-box-shadow;
-  max-width: 276px;
-  padding: $spacer-m;
-
-  &-spinners {
-    display: flex;
-
-    &-hours,
-    &-minutes,
-    &-seconds {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: center;
-
-      &:not(:last-child)::after {
-        content: ":";
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 38px;
-        padding-bottom: 4px;
-        font-weight: $font-weight-bold;
-      }
-
-      input[type="number"] {
-        font-weight: $font-weight-bold;
-        color: $hero;
-        outline: 0;
-        border: none;
-        text-align: center;
-        transform: translateX(-2px); // align with the arrow buttons
-        width: 43px;
-        background: transparent;
-
-        &:focus {
-          outline: 0;
-        }
-
-        &.fwe-timepicker-hide-spinners {
-          -moz-appearance: textfield;
-          appearance: textfield;
-          margin: 0;
-
-          &::-webkit-inner-spin-button,
-          &::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
-
-  &.fwe-timepicker-am-pm {
-    padding-left: $spacer-xl;
-
-    .fwe-timepicker-spinners {
-      justify-content: flex-start;
-    }
-  }
-}
+.fwe-timepicker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $white;
+  border-radius: $border-radius-s;
+  box-shadow: $control-box-shadow;
+  max-width: 276px;
+  padding: $spacer-m;
+
+  &-spinners {
+    display: flex;
+
+    &-hours,
+    &-minutes,
+    &-seconds {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      align-items: center;
+
+      &:not(:last-child)::after {
+        content: ":";
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 38px;
+        padding-bottom: 4px;
+        font-weight: $font-weight-bold;
+      }
+
+      input[type="number"] {
+        font-weight: $font-weight-bold;
+        color: $hero;
+        outline: 0;
+        border: none;
+        text-align: center;
+        transform: translateX(-2px); // align with the arrow buttons
+        width: 43px;
+        background: transparent;
+
+        &:focus {
+          outline: 0;
+        }
+
+        &.fwe-timepicker-hide-spinners {
+          -moz-appearance: textfield;
+          appearance: textfield;
+          margin: 0;
+
+          &::-webkit-inner-spin-button,
+          &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &.fwe-timepicker-am-pm {
+    padding-left: $spacer-xl;
+
+    .fwe-timepicker-spinners {
+      justify-content: flex-start;
+    }
+  }
+}