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

package/scss/_radio.scss

@@ -1,152 +1,152 @@
-$defaultHeight: 16px;
-$defaultWidth: 16px;
-$lgHeight: 24px;
-$lgWidth: 24px;
-
-%label-before {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-
-  .fwe-radio-label-content {
-    margin-left: 0px;
-    margin-right: 8px;
-  }
-}
-
-%label-below {
-  flex-direction: column;
-
-  .fwe-radio-label-content {
-    margin: 8px 0px 0px 0px;
-  }
-}
-
-.fwe-radio-group {
-  &.fwe-radio-lg {
-    label.fwe-radio {
-      .fwe-radio-checkmark {
-        height: $lgHeight;
-        width: $lgWidth;
-
-        &:after {
-          height: $lgHeight;
-          width: $lgWidth;
-        }
-      }
-    }
-  }
-
-  &.fwe-radio-label-before {
-    label.fwe-radio {
-      @extend %label-before;
-    }
-  }
-
-  &.fwe-radio-label-below {
-    label.fwe-radio {
-      @extend %label-below;
-    }
-  }
-}
-
-label.fwe-radio {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-
-  .fwe-radio-checkmark {
-    box-sizing: border-box;
-    position: relative;
-    height: $defaultHeight;
-    width: $defaultWidth;
-    border: 1px solid $control-border;
-    background-color: $white;
-    border-radius: 50%;
-
-    &:after {
-      content: "";
-      position: absolute;
-      box-sizing: border-box;
-      border-radius: 50%;
-      background-color: $white;
-      position: absolute;
-      left: -1px;
-      top: -1px;
-      height: $defaultHeight;
-      width: $defaultWidth;
-      transition: transform ease-out 0.3s, background-color ease-out 0.3s;
-      transform: scale(0.001);
-    }
-  }
-
-  &.fwe-radio-lg {
-    .fwe-radio-checkmark {
-      height: $lgHeight;
-      width: $lgWidth;
-
-      &:after {
-        height: $lgHeight;
-        width: $lgWidth;
-      }
-    }
-  }
-
-  .fwe-radio-label-content {
-    line-height: 24px;
-    margin-left: 8px;
-  }
-
-  &.fwe-radio-label-before {
-    @extend %label-before;
-  }
-
-  &.fwe-radio-label-below {
-    @extend %label-below;
-  }
-
-  input[type="radio"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-
-    &:hover ~ .fwe-radio-checkmark {
-      background-color: $control;
-    }
-
-    &:active ~ .fwe-radio-checkmark {
-      background-color: $control-dark;
-    }
-
-    &:checked ~ .fwe-radio-checkmark {
-      background-color: $hero;
-      border-color: $hero;
-    }
-
-    &:hover:checked ~ .fwe-radio-checkmark {
-      background-color: $hero-dark;
-      border-color: $hero-dark;
-    }
-
-    &:checked ~ .fwe-radio-checkmark:after {
-      transform: scale(0.4);
-    }
-
-    &:disabled ~ .fwe-radio-checkmark {
-      background-color: $control-disabled;
-      border-color: $control-disabled;
-      cursor: not-allowed;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &:disabled ~ .fwe-radio-label-content {
-      color: $text-disabled;
-      cursor: not-allowed;
-    }
-  }
-}
+$defaultHeight: 16px;
+$defaultWidth: 16px;
+$lgHeight: 24px;
+$lgWidth: 24px;
+
+%label-before {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+
+  .fwe-radio-label-content {
+    margin-left: 0px;
+    margin-right: 8px;
+  }
+}
+
+%label-below {
+  flex-direction: column;
+
+  .fwe-radio-label-content {
+    margin: 8px 0px 0px 0px;
+  }
+}
+
+.fwe-radio-group {
+  &.fwe-radio-lg {
+    label.fwe-radio {
+      .fwe-radio-checkmark {
+        height: $lgHeight;
+        width: $lgWidth;
+
+        &:after {
+          height: $lgHeight;
+          width: $lgWidth;
+        }
+      }
+    }
+  }
+
+  &.fwe-radio-label-before {
+    label.fwe-radio {
+      @extend %label-before;
+    }
+  }
+
+  &.fwe-radio-label-below {
+    label.fwe-radio {
+      @extend %label-below;
+    }
+  }
+}
+
+label.fwe-radio {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+
+  .fwe-radio-checkmark {
+    box-sizing: border-box;
+    position: relative;
+    height: $defaultHeight;
+    width: $defaultWidth;
+    border: 1px solid $control-border;
+    background-color: $white;
+    border-radius: 50%;
+
+    &:after {
+      content: "";
+      position: absolute;
+      box-sizing: border-box;
+      border-radius: 50%;
+      background-color: $white;
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      height: $defaultHeight;
+      width: $defaultWidth;
+      transition: transform ease-out 0.3s, background-color ease-out 0.3s;
+      transform: scale(0.001);
+    }
+  }
+
+  &.fwe-radio-lg {
+    .fwe-radio-checkmark {
+      height: $lgHeight;
+      width: $lgWidth;
+
+      &:after {
+        height: $lgHeight;
+        width: $lgWidth;
+      }
+    }
+  }
+
+  .fwe-radio-label-content {
+    line-height: 24px;
+    margin-left: 8px;
+  }
+
+  &.fwe-radio-label-before {
+    @extend %label-before;
+  }
+
+  &.fwe-radio-label-below {
+    @extend %label-below;
+  }
+
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+
+    &:hover ~ .fwe-radio-checkmark {
+      background-color: $control;
+    }
+
+    &:active ~ .fwe-radio-checkmark {
+      background-color: $control-dark;
+    }
+
+    &:checked ~ .fwe-radio-checkmark {
+      background-color: $hero;
+      border-color: $hero;
+    }
+
+    &:hover:checked ~ .fwe-radio-checkmark {
+      background-color: $hero-dark;
+      border-color: $hero-dark;
+    }
+
+    &:checked ~ .fwe-radio-checkmark:after {
+      transform: scale(0.4);
+    }
+
+    &:disabled ~ .fwe-radio-checkmark {
+      background-color: $control-disabled;
+      border-color: $control-disabled;
+      cursor: not-allowed;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .fwe-radio-label-content {
+      color: $text-disabled;
+      cursor: not-allowed;
+    }
+  }
+}

package/scss/_root.scss

@@ -1,111 +1,111 @@
-:root {
-  --fwe-black: #000000;
-  --fwe-white: #ffffff;
-  --fwe-white-dark: #ededed;
-  --fwe-caerul: #0091dc;
-  --fwe-sucaerul: #dcebf6;
-  --fwe-sucanul: #f2f3f5;
-
-  --fwe-gray-100: #f2f3f5;
-  --fwe-gray-200: #e5e8eb;
-  --fwe-gray-300: #d8dce1;
-  --fwe-gray-400: #b6bec6;
-
-  --fwe-icon-black: #333333;
-  --fwe-icon-white: #ffffff;
-  --fwe-icon-gray: #a3b2bc;
-  --fwe-icon-hero: #0091dc;
-  --fwe-icon-hero-light: #c8e6fa;
-
-  --fwe-green: #80ca3d;
-  --fwe-yellow: #ffd600;
-  --fwe-orange: #ff9600;
-  --fwe-red: #d50000;
-  --fwe-green-dark: #73b637;
-  --fwe-yellow-dark: #e6c100;
-  --fwe-orange-dark: #e68700;
-  --fwe-red-dark: #c00000;
-
-  // button vars
-  --fwe-btn: #d8dce1;
-  --fwe-btn-hover: #c7cbcf;
-  --fwe-btn-active: #b7babe;
-  --fwe-btn-disabled: #e6e9ec;
-  --fwe-btn-text: #333333;
-  --fwe-btn-text-hover: #333333;
-  --fwe-btn-text-disabled: #b9babb;
-
-  --fwe-btn-hero: #0091dc;
-  --fwe-btn-hero-hover: #0587cb;
-  --fwe-btn-hero-active: #0a7eba;
-  --fwe-btn-hero-disabled: #e6e9ec;
-  --fwe-btn-hero-text: #ffffff;
-  --fwe-btn-hero-text-hover: #ffffff;
-  --fwe-btn-hero-text-disabled: #b9babb;
-
-  // control colors
-  --fwe-text: #333333;
-  --fwe-text-light: #b6bec6;
-  --fwe-text-disabled: #b9babb;
-
-  --fwe-hero: #0091dc;
-  --fwe-hero-dark: #0587cb;
-  --fwe-hero-darker: #0a7eba;
-
-  --fwe-control: #d8dce1;
-  --fwe-control-dark: #c7cbcf; // 90% * --fwe-gray-300 + 10% * #333333
-  --fwe-control-darker: #b7babe; // 80% * --fwe-gray-300 + 20% * #333333
-  --fwe-control-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF
-
-  --fwe-control-border: #b6bec6;
-  --fwe-control-border-dark: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
-  --fwe-control-border-darker: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
-  --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-dark + 20% * #FFFFFF
-
-  --fwe-background: #f2f3f5;
-  --fwe-background-image-gallery: #707070;
-
-  --fwe-border: #d8dce1;
-  --fwe-border-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF
-
-  --fwe-snackbar-info-bg: #c8e6fa;
-  --fwe-snackbar-warning-bg: #fbf0e1;
-  --fwe-snackbar-error-bg: #f7e1e1;
-
-  @each $name, $size in $grid-breakpoints {
-    --fwe-breakpoint-#{$name}: #{$size};
-  }
-
-  @each $spacing, $space in $spacers {
-    --fwe-spacer-#{$spacing}: #{$space};
-  }
-
-  --fwe-font-family-sans-serif: "Festo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --fwe-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --fwe-font-family-icons-16: "festo_icons-16";
-  --fwe-font-family-icons-24: "festo_icons-24";
-  --fwe-font-family-icons-32: "festo_icons-32";
-
-  --fwe-font-weight-normal: 400;
-  --fwe-font-weight-bold: 700;
-  --fwe-line-height-base: 1.5;
-  --fwe-font-feature-settings: "tnum", "lnum";
-  --fwe-font-variant-numeric: lining-nums tabular-nums diagonal-fractions ordinal;
-
-  --fwe-font-size-small: 12px;
-  --fwe-font-size-md: 14px;
-  --fwe-font-size-base: 16px;
-  --fwe-font-size-xl: 24px;
-  --fwe-font-size-xxl: 32px;
-
-  --fwe-z-index-dropdown: 1000;
-  --fwe-z-index-sticky: 1020;
-  --fwe-z-index-fixed: 1030;
-  --fwe-z-index-modal-backdrop: 1040;
-  --fwe-z-index-modal: 1050;
-  --fwe-z-index-popover: 1060;
-  --fwe-z-index-tooltip: 1070;
-
-  --fwe-textarea-row-const: 33px; // rowheight + margin-top + margin-bottom + 1px-line
-}
+:root {
+  --fwe-black: #000000;
+  --fwe-white: #ffffff;
+  --fwe-white-dark: #ededed;
+  --fwe-caerul: #0091dc;
+  --fwe-sucaerul: #dcebf6;
+  --fwe-sucanul: #f2f3f5;
+
+  --fwe-gray-100: #f2f3f5;
+  --fwe-gray-200: #e5e8eb;
+  --fwe-gray-300: #d8dce1;
+  --fwe-gray-400: #b6bec6;
+
+  --fwe-icon-black: #333333;
+  --fwe-icon-white: #ffffff;
+  --fwe-icon-gray: #a3b2bc;
+  --fwe-icon-hero: #0091dc;
+  --fwe-icon-hero-light: #c8e6fa;
+
+  --fwe-green: #80ca3d;
+  --fwe-yellow: #ffd600;
+  --fwe-orange: #ff9600;
+  --fwe-red: #d50000;
+  --fwe-green-dark: #73b637;
+  --fwe-yellow-dark: #e6c100;
+  --fwe-orange-dark: #e68700;
+  --fwe-red-dark: #c00000;
+
+  // button vars
+  --fwe-btn: #d8dce1;
+  --fwe-btn-hover: #c7cbcf;
+  --fwe-btn-active: #b7babe;
+  --fwe-btn-disabled: #e6e9ec;
+  --fwe-btn-text: #333333;
+  --fwe-btn-text-hover: #333333;
+  --fwe-btn-text-disabled: #b9babb;
+
+  --fwe-btn-hero: #0091dc;
+  --fwe-btn-hero-hover: #0587cb;
+  --fwe-btn-hero-active: #0a7eba;
+  --fwe-btn-hero-disabled: #e6e9ec;
+  --fwe-btn-hero-text: #ffffff;
+  --fwe-btn-hero-text-hover: #ffffff;
+  --fwe-btn-hero-text-disabled: #b9babb;
+
+  // control colors
+  --fwe-text: #333333;
+  --fwe-text-light: #b6bec6;
+  --fwe-text-disabled: #b9babb;
+
+  --fwe-hero: #0091dc;
+  --fwe-hero-dark: #0587cb;
+  --fwe-hero-darker: #0a7eba;
+
+  --fwe-control: #d8dce1;
+  --fwe-control-dark: #c7cbcf; // 90% * --fwe-gray-300 + 10% * #333333
+  --fwe-control-darker: #b7babe; // 80% * --fwe-gray-300 + 20% * #333333
+  --fwe-control-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF
+
+  --fwe-control-border: #b6bec6;
+  --fwe-control-border-dark: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
+  --fwe-control-border-darker: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
+  --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-dark + 20% * #FFFFFF
+
+  --fwe-background: #f2f3f5;
+  --fwe-background-image-gallery: #707070;
+
+  --fwe-border: #d8dce1;
+  --fwe-border-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF
+
+  --fwe-snackbar-info-bg: #c8e6fa;
+  --fwe-snackbar-warning-bg: #fbf0e1;
+  --fwe-snackbar-error-bg: #f7e1e1;
+
+  @each $name, $size in $grid-breakpoints {
+    --fwe-breakpoint-#{$name}: #{$size};
+  }
+
+  @each $spacing, $space in $spacers {
+    --fwe-spacer-#{$spacing}: #{$space};
+  }
+
+  --fwe-font-family-sans-serif: "Festo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --fwe-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --fwe-font-family-icons-16: "festo_icons-16";
+  --fwe-font-family-icons-24: "festo_icons-24";
+  --fwe-font-family-icons-32: "festo_icons-32";
+
+  --fwe-font-weight-normal: 400;
+  --fwe-font-weight-bold: 700;
+  --fwe-line-height-base: 1.5;
+  --fwe-font-feature-settings: "tnum", "lnum";
+  --fwe-font-variant-numeric: lining-nums tabular-nums diagonal-fractions ordinal;
+
+  --fwe-font-size-small: 12px;
+  --fwe-font-size-md: 14px;
+  --fwe-font-size-base: 16px;
+  --fwe-font-size-xl: 24px;
+  --fwe-font-size-xxl: 32px;
+
+  --fwe-z-index-dropdown: 1000;
+  --fwe-z-index-sticky: 1020;
+  --fwe-z-index-fixed: 1030;
+  --fwe-z-index-modal-backdrop: 1040;
+  --fwe-z-index-modal: 1050;
+  --fwe-z-index-popover: 1060;
+  --fwe-z-index-tooltip: 1070;
+
+  --fwe-textarea-row-const: 33px; // rowheight + margin-top + margin-bottom + 1px-line
+}