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

package/scss/_search-input.scss

@@ -1,92 +1,92 @@
-.fwe-search-input {
-  display: inline-block;
-  position: relative;
-  .fwe-search-icon {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
-    @extend .fwe-icon-file-search;
-    position: absolute;
-    line-height: 1;
-    left: 0px;
-    bottom: 2px;
-  }
-  .fwe-clear-icon {
-    @extend .fwe-icon;
-    @extend .fwe-icon-close-small;
-    cursor: pointer;
-    position: absolute;
-    right: 0px;
-    bottom: 9px;
-    line-height: 1;
-    background: $control;
-    border-radius: 50%;
-    &:hover {
-      background: $control-dark;
-    }
-    &:active {
-      background: $control-darker;
-    }
-  }
-
-  input {
-    border-left: none;
-    border-top: none;
-    border-right: none;
-    border-radius: 0px;
-    border-bottom: 1px solid $control-border;
-    background: transparent;
-    padding: 1px 24px 4px 32px;
-    &::placeholder {
-      color: $text;
-    }
-    &:hover:not(:disabled) {
-      &::placeholder {
-        color: $hero;
-      }
-      border-bottom: 1px solid $hero;
-    }
-    &:focus {
-      outline: none;
-      border-bottom: 1px solid $hero;
-      &::placeholder {
-        color: transparent !important;
-      }
-    }
-    &:placeholder-shown ~ .fwe-clear-icon {
-      display: none;
-    }
-    &:disabled {
-      opacity: 0.5;
-      & ~ .fwe-clear-icon,
-      & ~ .fwe-search-icon {
-        opacity: 0.5;
-      }
-    }
-  }
-}
-
-input[type="search"]::-webkit-search-cancel-button {
-  /* Remove default */
-  -webkit-appearance: none;
-}
-
-.fwe-search-suggestions {
-  position: absolute;
-  top: 38px;
-  left: 0px;
-  right: 0px;
-  padding: 8px;
-  background: $white;
-  border-radius: $control-border-radius;
-  box-shadow: $control-box-shadow;
-  .fwe-search-suggestion {
-    cursor: pointer;
-    padding: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:hover,
-    &.fwe-selected {
-      background: $background;
-    }
-  }
-}
+.fwe-search-input {
+  display: inline-block;
+  position: relative;
+  .fwe-search-icon {
+    @extend .fwe-icon;
+    @extend .fwe-icon-lg;
+    @extend .fwe-icon-file-search;
+    position: absolute;
+    line-height: 1;
+    left: 0px;
+    bottom: 2px;
+  }
+  .fwe-clear-icon {
+    @extend .fwe-icon;
+    @extend .fwe-icon-close-small;
+    cursor: pointer;
+    position: absolute;
+    right: 0px;
+    bottom: 9px;
+    line-height: 1;
+    background: $control;
+    border-radius: 50%;
+    &:hover {
+      background: $control-dark;
+    }
+    &:active {
+      background: $control-darker;
+    }
+  }
+
+  input {
+    border-left: none;
+    border-top: none;
+    border-right: none;
+    border-radius: 0px;
+    border-bottom: 1px solid $control-border;
+    background: transparent;
+    padding: 1px 24px 4px 32px;
+    &::placeholder {
+      color: $text;
+    }
+    &:hover:not(:disabled) {
+      &::placeholder {
+        color: $hero;
+      }
+      border-bottom: 1px solid $hero;
+    }
+    &:focus {
+      outline: none;
+      border-bottom: 1px solid $hero;
+      &::placeholder {
+        color: transparent !important;
+      }
+    }
+    &:placeholder-shown ~ .fwe-clear-icon {
+      display: none;
+    }
+    &:disabled {
+      opacity: 0.5;
+      & ~ .fwe-clear-icon,
+      & ~ .fwe-search-icon {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+input[type="search"]::-webkit-search-cancel-button {
+  /* Remove default */
+  -webkit-appearance: none;
+}
+
+.fwe-search-suggestions {
+  position: absolute;
+  top: 38px;
+  left: 0px;
+  right: 0px;
+  padding: 8px;
+  background: $white;
+  border-radius: $control-border-radius;
+  box-shadow: $control-box-shadow;
+  .fwe-search-suggestion {
+    cursor: pointer;
+    padding: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:hover,
+    &.fwe-selected {
+      background: $background;
+    }
+  }
+}

package/scss/_select.scss

@@ -1,95 +1,95 @@
-%select-description {
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-  font-size: $font-size-small;
-  line-height: $line-height-base;
-  color: $text-disabled;
-}
-
-.fwe-select-wrapper {
-  font-family: $font-size-base;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 18px;
-  @extend .fwe-icon;
-  @extend .fwe-icon-lg;
-  @extend .fwe-icon-arrows-collapse;
-  &::before {
-    pointer-events: none;
-    position: absolute;
-    bottom: 22px;
-    left: calc(100% - 24px);
-  }
-
-  .fwe-select-label {
-    order: 1;
-    color: $text;
-    font-size: $font-size-small;
-    line-height: $line-height-base;
-    font-weight: $font-weight-bold;
-  }
-
-  .fwe-select {
-    cursor: pointer;
-    order: 2;
-    height: 33px;
-    padding-bottom: 4px;
-    padding-top: 4px;
-    width: 100%;
-    font-size: $font-size-base;
-    appearance: none;
-    display: block;
-    outline: 0;
-    background: none;
-    border: none;
-    border-bottom: 1px solid $control-border;
-
-    &:hover {
-      &:not(:disabled) {
-        color: $hero;
-        option {
-          color: $text;
-        }
-        border-color: $hero;
-      }
-      &:invalid {
-        border-color: $red;
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-      ~ .fwe-select-label {
-        color: $text-disabled;
-      }
-      border-color: $control-disabled;
-    }
-
-    &::-ms-expand {
-      display: none;
-    }
-
-    &:invalid {
-      box-shadow: none;
-
-      ~ .fwe-select-invalid {
-        display: block;
-      }
-      ~ .fwe-select-description {
-        display: none;
-      }
-    }
-  }
-
-  .fwe-select-description {
-    @extend %select-description;
-  }
-
-  .fwe-select-invalid {
-    @extend %select-description;
-    display: none;
-    color: $red;
-  }
-}
+%select-description {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  font-size: $font-size-small;
+  line-height: $line-height-base;
+  color: $text-disabled;
+}
+
+.fwe-select-wrapper {
+  font-family: $font-size-base;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 18px;
+  @extend .fwe-icon;
+  @extend .fwe-icon-lg;
+  @extend .fwe-icon-arrows-collapse;
+  &::before {
+    pointer-events: none;
+    position: absolute;
+    bottom: 22px;
+    left: calc(100% - 24px);
+  }
+
+  .fwe-select-label {
+    order: 1;
+    color: $text;
+    font-size: $font-size-small;
+    line-height: $line-height-base;
+    font-weight: $font-weight-bold;
+  }
+
+  .fwe-select {
+    cursor: pointer;
+    order: 2;
+    height: 33px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+    width: 100%;
+    font-size: $font-size-base;
+    appearance: none;
+    display: block;
+    outline: 0;
+    background: none;
+    border: none;
+    border-bottom: 1px solid $control-border;
+
+    &:hover {
+      &:not(:disabled) {
+        color: $hero;
+        option {
+          color: $text;
+        }
+        border-color: $hero;
+      }
+      &:invalid {
+        border-color: $red;
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+      ~ .fwe-select-label {
+        color: $text-disabled;
+      }
+      border-color: $control-disabled;
+    }
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:invalid {
+      box-shadow: none;
+
+      ~ .fwe-select-invalid {
+        display: block;
+      }
+      ~ .fwe-select-description {
+        display: none;
+      }
+    }
+  }
+
+  .fwe-select-description {
+    @extend %select-description;
+  }
+
+  .fwe-select-invalid {
+    @extend %select-description;
+    display: none;
+    color: $red;
+  }
+}

package/scss/_stepper-horizontal.scss

@@ -1,127 +1,127 @@
-.fwe-stepper-horizontal {
-  width: 100%;
-  height: 54px;
-  display: flex;
-  justify-content: center;
-
-  .fwe-step-container {
-    display: flex;
-    justify-content: flex-end;
-    text-align: right;
-    flex-direction: row;
-    flex-grow: 1;
-    position: relative;
-    &::after {
-      // this is the connector
-      position: absolute;
-      content: "";
-      height: 2px;
-      left: 4px;
-      right: 28px;
-      top: 11px;
-      background: $text-disabled;
-      transition: background-color 0.3s, color 0.3s;
-    }
-    .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;
-      font-feature-settings: $font-feature-settings;
-      font-variant-numeric: $font-variant-numeric;
-      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;
-        @media (max-width: 900px) {
-          display: none;
-        }
-        font-size: $font-size-md;
-        position: absolute;
-        top: 30px;
-        left: 50%;
-        transform: translateX(-50%);
-        color: $text-disabled;
-        white-space: pre;
-        transition: color 0.3s;
-      }
-    }
-
-    &.fwe-step-active,
-    &.fwe-step-done {
-      &::after {
-        background: $hero;
-      }
-      .fwe-step {
-        background: $hero;
-        border-color: $hero;
-        .fwe-step-no {
-          color: #ffffff;
-        }
-        .fwe-step-name {
-          color: $hero;
-        }
-      }
-    }
-
-    &.fwe-step-active {
-      .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:last-child {
-    .fwe-step {
-      .fwe-step-name {
-        right: 0px;
-        left: unset;
-        transform: unset;
-      }
-    }
-  }
-  .fwe-step-container:first-child {
-    flex-grow: 0;
-    .fwe-step {
-      .fwe-step-name {
-        left: 0px;
-        transform: unset;
-      }
-    }
-  }
-}
+.fwe-stepper-horizontal {
+  width: 100%;
+  height: 54px;
+  display: flex;
+  justify-content: center;
+
+  .fwe-step-container {
+    display: flex;
+    justify-content: flex-end;
+    text-align: right;
+    flex-direction: row;
+    flex-grow: 1;
+    position: relative;
+    &::after {
+      // this is the connector
+      position: absolute;
+      content: "";
+      height: 2px;
+      left: 4px;
+      right: 28px;
+      top: 11px;
+      background: $text-disabled;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    .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;
+      font-feature-settings: $font-feature-settings;
+      font-variant-numeric: $font-variant-numeric;
+      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;
+        @media (max-width: 900px) {
+          display: none;
+        }
+        font-size: $font-size-md;
+        position: absolute;
+        top: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: $text-disabled;
+        white-space: pre;
+        transition: color 0.3s;
+      }
+    }
+
+    &.fwe-step-active,
+    &.fwe-step-done {
+      &::after {
+        background: $hero;
+      }
+      .fwe-step {
+        background: $hero;
+        border-color: $hero;
+        .fwe-step-no {
+          color: #ffffff;
+        }
+        .fwe-step-name {
+          color: $hero;
+        }
+      }
+    }
+
+    &.fwe-step-active {
+      .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:last-child {
+    .fwe-step {
+      .fwe-step-name {
+        right: 0px;
+        left: unset;
+        transform: unset;
+      }
+    }
+  }
+  .fwe-step-container:first-child {
+    flex-grow: 0;
+    .fwe-step {
+      .fwe-step-name {
+        left: 0px;
+        transform: unset;
+      }
+    }
+  }
+}