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

package/scss/_slider.scss

@@ -1,150 +1,150 @@
-@use "mixins";
-@use "variables";
-
-label.fwe-slider {
-  span {
-    margin-bottom: 4px;
-    display: inline-block;
-    font-size: variables.$font-size-md;
-    color: variables.$text-light;
-  }
-}
-
-input[type="range"].fwe-slider-input {
-  appearance: none;
-  width: 100%;
-  background: transparent;
-  padding: 0px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-
-  cursor: pointer;
-
-  @include mixins.firefox-only {
-    height: 32px;
-  }
-  &:focus {
-    outline: none;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 8px;
-    height: 8px;
-    background: variables.$hero;
-    cursor: pointer;
-    border-radius: 50%;
-    margin-top: -3px;
-  }
-
-  &::-moz-range-thumb {
-    width: 8px;
-    height: 8px;
-    background: variables.$hero;
-    cursor: pointer;
-    border-radius: 50%;
-    border: none;
-  }
-
-  &::-ms-thumb {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: variables.$hero;
-    cursor: pointer;
-    border: 1px solid variables.$hero;
-  }
-
-  &::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 2px;
-    cursor: pointer;
-    background: variables.$control;
-    border: none;
-  }
-  &::-moz-range-track {
-    width: 100%;
-    height: 2px;
-    cursor: pointer;
-    background: variables.$control;
-    border: none;
-  }
-  &::-moz-range-progress {
-    height: 2px;
-    cursor: pointer;
-    background: variables.$hero;
-    border: none;
-  }
-  &::-ms-track {
-    width: 100%;
-    height: 2px;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    border-width: 16px 0;
-    color: transparent;
-  }
-  &::-ms-fill-lower {
-    background: variables.$hero;
-  }
-  &::-ms-fill-upper {
-    background: variables.$control;
-  }
-
-  &:hover:not(:disabled) {
-    &::-webkit-slider-thumb {
-      margin-top: -7px;
-      height: 16px;
-      width: 16px;
-    }
-    &::-moz-range-thumb {
-      height: 16px;
-      width: 16px;
-    }
-    &::-ms-thumb {
-      box-shadow: 0px 0px 0px 4px variables.$hero;
-    }
-  }
-
-  &:active:not(:disabled) {
-    &::-webkit-slider-thumb {
-      box-shadow: 0px 0px 0px 8px rgba(0, 145, 220, 0.3);
-    }
-    &::-moz-range-thumb {
-      box-shadow: 0px 0px 0px 8px rgba(0, 145, 220, 0.3);
-    }
-    &::-ms-thumb {
-      box-shadow: 0px 0px 0px 4px variables.$hero, 0px 0px 0px 12px rgba(0, 145, 220, 0.3) !important;
-    }
-  }
-
-  &:disabled {
-    &::-webkit-slider-runnable-track {
-      background: variables.$control-disabled;
-    }
-    &::-moz-range-track {
-      background: variables.$control-disabled;
-    }
-    &::-moz-range-progress {
-      background: variables.$control;
-    }
-    &::-ms-fill-lower {
-      background: variables.$control;
-    }
-    &::-ms-fill-upper {
-      background: variables.$control-disabled;
-    }
-
-    &::-webkit-slider-thumb {
-      cursor: auto;
-      background: variables.$control;
-    }
-    &::-moz-range-thumb {
-      background: variables.$control;
-    }
-    &::-ms-thumb {
-      background: variables.$control;
-      border: 1px solid variables.$control;
-    }
-  }
-}
+@use "mixins";
+@use "variables";
+
+label.fwe-slider {
+  span {
+    margin-bottom: 4px;
+    display: inline-block;
+    font-size: variables.$font-size-md;
+    color: variables.$text-light;
+  }
+}
+
+input[type="range"].fwe-slider-input {
+  appearance: none;
+  width: 100%;
+  background: transparent;
+  padding: 0px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  cursor: pointer;
+
+  @include mixins.firefox-only {
+    height: 32px;
+  }
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 8px;
+    height: 8px;
+    background: variables.$hero;
+    cursor: pointer;
+    border-radius: 50%;
+    margin-top: -3px;
+  }
+
+  &::-moz-range-thumb {
+    width: 8px;
+    height: 8px;
+    background: variables.$hero;
+    cursor: pointer;
+    border-radius: 50%;
+    border: none;
+  }
+
+  &::-ms-thumb {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: variables.$hero;
+    cursor: pointer;
+    border: 1px solid variables.$hero;
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: variables.$control;
+    border: none;
+  }
+  &::-moz-range-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: variables.$control;
+    border: none;
+  }
+  &::-moz-range-progress {
+    height: 2px;
+    cursor: pointer;
+    background: variables.$hero;
+    border: none;
+  }
+  &::-ms-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    border-width: 16px 0;
+    color: transparent;
+  }
+  &::-ms-fill-lower {
+    background: variables.$hero;
+  }
+  &::-ms-fill-upper {
+    background: variables.$control;
+  }
+
+  &:hover:not(:disabled) {
+    &::-webkit-slider-thumb {
+      margin-top: -7px;
+      height: 16px;
+      width: 16px;
+    }
+    &::-moz-range-thumb {
+      height: 16px;
+      width: 16px;
+    }
+    &::-ms-thumb {
+      box-shadow: 0px 0px 0px 4px variables.$hero;
+    }
+  }
+
+  &:active:not(:disabled) {
+    &::-webkit-slider-thumb {
+      box-shadow: 0px 0px 0px 8px rgba(0, 145, 220, 0.3);
+    }
+    &::-moz-range-thumb {
+      box-shadow: 0px 0px 0px 8px rgba(0, 145, 220, 0.3);
+    }
+    &::-ms-thumb {
+      box-shadow: 0px 0px 0px 4px variables.$hero, 0px 0px 0px 12px rgba(0, 145, 220, 0.3) !important;
+    }
+  }
+
+  &:disabled {
+    &::-webkit-slider-runnable-track {
+      background: variables.$control-disabled;
+    }
+    &::-moz-range-track {
+      background: variables.$control-disabled;
+    }
+    &::-moz-range-progress {
+      background: variables.$control;
+    }
+    &::-ms-fill-lower {
+      background: variables.$control;
+    }
+    &::-ms-fill-upper {
+      background: variables.$control-disabled;
+    }
+
+    &::-webkit-slider-thumb {
+      cursor: auto;
+      background: variables.$control;
+    }
+    &::-moz-range-thumb {
+      background: variables.$control;
+    }
+    &::-ms-thumb {
+      background: variables.$control;
+      border: 1px solid variables.$control;
+    }
+  }
+}

package/scss/_snackbar.scss

@@ -1,159 +1,159 @@
-@use "sass:map";
-@use "variables";
-
-.fwe-snackbar {
-  padding: variables.$spacer-xs;
-  background-color: variables.$hero-bg;
-  border: 1px solid variables.$hero;
-  border-radius: variables.$control-border-radius;
-  margin: auto;
-  margin-bottom: variables.$spacer-m;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-height: 48px;
-
-  span {
-    display: block;
-    margin-right: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &.fwe-snackbar-shadow {
-    box-shadow: variables.$control-box-shadow;
-  }
-
-  .fwe-snackbar-close-btn {
-    border: none;
-    padding: 0;
-    height: 24px;
-    width: 24px;
-    min-width: 24px;
-    cursor: pointer;
-    background: variables.$text;
-    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2Ljk1IDguNDY0IDE1LjUzNiA3LjA1IDEyIDEwLjU4NiA4LjQ2NCA3LjA1IDcuMDUgOC40NjQgMTAuNTg2IDEyIDcuMDUgMTUuNTM2bDEuNDE0IDEuNDE0TDEyIDEzLjQxNGwzLjUzNiAzLjUzNiAxLjQxNC0xLjQxNEwxMy40MTQgMTJsMy41MzYtMy41MzZ6Ii8+PC9zdmc+");
-  }
-
-  .fwe-snackbar-link-btn {
-    background: none;
-    color: variables.$text;
-    border: none;
-    padding: 0px 12px;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  &.fwe-snackbar-info,
-  &.fwe-snackbar-warning,
-  &.fwe-snackbar-error {
-    span {
-      position: relative;
-      padding-left: 36px;
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 24px;
-        width: 24px;
-      }
-    }
-  }
-
-  &.fwe-snackbar-info {
-    span::before {
-      background-color: variables.$hero;
-      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIvPjwvZz48L3N2Zz4=");
-    }
-  }
-
-  &.fwe-snackbar-warning {
-    border-color: variables.$orange;
-    background-color: variables.$orange-bg;
-    span::before {
-      background-color: variables.$orange;
-      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
-    }
-    .fwe-snackbar-separator {
-      background-color: variables.$orange;
-    }
-  }
-
-  &.fwe-snackbar-error {
-    border-color: variables.$red;
-    background-color: variables.$red-bg;
-    span::before {
-      background-color: variables.$red;
-      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
-    }
-    .fwe-snackbar-separator {
-      background-color: variables.$red;
-    }
-  }
-
-  .fwe-snackbar-separator {
-    height: 24px;
-    width: 1px;
-    margin: 0px 12px;
-    background: variables.$hero;
-  }
-
-  &.fwe-snackbar-b {
-    border: none;
-    background-color: variables.$white;
-
-    span::before {
-      background-color: variables.$text;
-    }
-
-    .fwe-snackbar-separator {
-      background-color: variables.$text-light;
-    }
-  }
-
-  &.fwe-snackbar-c {
-    border: none;
-    color: variables.$white;
-    background-color: variables.$hero;
-
-    &.fwe-snackbar-warning {
-      background-color: variables.$orange;
-    }
-
-    &.fwe-snackbar-error {
-      background-color: variables.$red;
-    }
-
-    span::before {
-      background-color: variables.$white;
-    }
-
-    .fwe-snackbar-close-btn {
-      background-color: variables.$white;
-    }
-    .fwe-snackbar-separator {
-      background-color: variables.$white-hover;
-    }
-    .fwe-snackbar-link-btn {
-      color: variables.$white;
-    }
-  }
-}
-
-.fwe-snackbar-container {
-  padding-left: variables.$spacer-m;
-  padding-right: variables.$spacer-m;
-  max-width: 1000px;
-  position: fixed;
-  z-index: variables.$zindex-snackbar;
-  bottom: 0;
-  left: 50%;
-  width: 100%;
-  transform: translateX(-50%);
-  @media (max-width: map.get(variables.$grid-breakpoints,sm)) {
-    padding-left: variables.$spacer-xxs;
-    padding-right: variables.$spacer-xxs;
-  }
-}
+@use "sass:map";
+@use "variables";
+
+.fwe-snackbar {
+  padding: variables.$spacer-xs;
+  background-color: variables.$hero-bg;
+  border: 1px solid variables.$hero;
+  border-radius: variables.$control-border-radius;
+  margin: auto;
+  margin-bottom: variables.$spacer-m;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 48px;
+
+  span {
+    display: block;
+    margin-right: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.fwe-snackbar-shadow {
+    box-shadow: variables.$control-box-shadow;
+  }
+
+  .fwe-snackbar-close-btn {
+    border: none;
+    padding: 0;
+    height: 24px;
+    width: 24px;
+    min-width: 24px;
+    cursor: pointer;
+    background: variables.$text;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2Ljk1IDguNDY0IDE1LjUzNiA3LjA1IDEyIDEwLjU4NiA4LjQ2NCA3LjA1IDcuMDUgOC40NjQgMTAuNTg2IDEyIDcuMDUgMTUuNTM2bDEuNDE0IDEuNDE0TDEyIDEzLjQxNGwzLjUzNiAzLjUzNiAxLjQxNC0xLjQxNEwxMy40MTQgMTJsMy41MzYtMy41MzZ6Ii8+PC9zdmc+");
+  }
+
+  .fwe-snackbar-link-btn {
+    background: none;
+    color: variables.$text;
+    border: none;
+    padding: 0px 12px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  &.fwe-snackbar-info,
+  &.fwe-snackbar-warning,
+  &.fwe-snackbar-error {
+    span {
+      position: relative;
+      padding-left: 36px;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 24px;
+        width: 24px;
+      }
+    }
+  }
+
+  &.fwe-snackbar-info {
+    span::before {
+      background-color: variables.$hero;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIvPjwvZz48L3N2Zz4=");
+    }
+  }
+
+  &.fwe-snackbar-warning {
+    border-color: variables.$orange;
+    background-color: variables.$orange-bg;
+    span::before {
+      background-color: variables.$orange;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
+    }
+    .fwe-snackbar-separator {
+      background-color: variables.$orange;
+    }
+  }
+
+  &.fwe-snackbar-error {
+    border-color: variables.$red;
+    background-color: variables.$red-bg;
+    span::before {
+      background-color: variables.$red;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
+    }
+    .fwe-snackbar-separator {
+      background-color: variables.$red;
+    }
+  }
+
+  .fwe-snackbar-separator {
+    height: 24px;
+    width: 1px;
+    margin: 0px 12px;
+    background: variables.$hero;
+  }
+
+  &.fwe-snackbar-b {
+    border: none;
+    background-color: variables.$white;
+
+    span::before {
+      background-color: variables.$text;
+    }
+
+    .fwe-snackbar-separator {
+      background-color: variables.$text-light;
+    }
+  }
+
+  &.fwe-snackbar-c {
+    border: none;
+    color: variables.$white;
+    background-color: variables.$hero;
+
+    &.fwe-snackbar-warning {
+      background-color: variables.$orange;
+    }
+
+    &.fwe-snackbar-error {
+      background-color: variables.$red;
+    }
+
+    span::before {
+      background-color: variables.$white;
+    }
+
+    .fwe-snackbar-close-btn {
+      background-color: variables.$white;
+    }
+    .fwe-snackbar-separator {
+      background-color: variables.$white-hover;
+    }
+    .fwe-snackbar-link-btn {
+      color: variables.$white;
+    }
+  }
+}
+
+.fwe-snackbar-container {
+  padding-left: variables.$spacer-m;
+  padding-right: variables.$spacer-m;
+  max-width: 1000px;
+  position: fixed;
+  z-index: variables.$zindex-snackbar;
+  bottom: 0;
+  left: 50%;
+  width: 100%;
+  transform: translateX(-50%);
+  @media (max-width: map.get(variables.$grid-breakpoints,sm)) {
+    padding-left: variables.$spacer-xxs;
+    padding-right: variables.$spacer-xxs;
+  }
+}