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

package/scss/_spacing.scss

@@ -1,51 +1,51 @@
-@use "sass:map";
-@use "utils";
-@use "variables";
-
-@mixin spacings($spacers, $infix: "") {
-  @each $spacing, $space in $spacers {
-    @each $property, $abrev in (margin: "fwe-m", padding: "fwe-p") {
-      .#{$abrev}#{$infix}-#{$spacing} {
-        #{$property}: $space !important;
-      }
-
-      .#{$abrev}t#{$infix}-#{$spacing} {
-        #{$property}-top: $space !important;
-      }
-
-      .#{$abrev}b#{$infix}-#{$spacing} {
-        #{$property}-bottom: $space !important;
-      }
-
-      .#{$abrev}l#{$infix}-#{$spacing} {
-        #{$property}-left: $space !important;
-      }
-
-      .#{$abrev}r#{$infix}-#{$spacing} {
-        #{$property}-right: $space !important;
-      }
-
-      .#{$abrev}x#{$infix}-#{$spacing} {
-        #{$property}-right: $space !important;
-        #{$property}-left: $space !important;
-      }
-      .#{$abrev}y#{$infix}-#{$spacing} {
-        #{$property}-top: $space !important;
-        #{$property}-bottom: $space !important;
-      }
-    }
-  }
-}
-
-@each $breakpoint in map.keys(variables.$grid-breakpoints) {
-  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
-  $size: map.get(variables.$grid-breakpoints, $breakpoint);
-
-  @if $size == 0 {
-    @include spacings(variables.$spacers);
-  } @else {
-    @media (min-width: $size) {
-      @include spacings(variables.$spacers, $infix);
-    }
-  }
-}
+@use "sass:map";
+@use "utils";
+@use "variables";
+
+@mixin spacings($spacers, $infix: "") {
+  @each $spacing, $space in $spacers {
+    @each $property, $abrev in (margin: "fwe-m", padding: "fwe-p") {
+      .#{$abrev}#{$infix}-#{$spacing} {
+        #{$property}: $space !important;
+      }
+
+      .#{$abrev}t#{$infix}-#{$spacing} {
+        #{$property}-top: $space !important;
+      }
+
+      .#{$abrev}b#{$infix}-#{$spacing} {
+        #{$property}-bottom: $space !important;
+      }
+
+      .#{$abrev}l#{$infix}-#{$spacing} {
+        #{$property}-left: $space !important;
+      }
+
+      .#{$abrev}r#{$infix}-#{$spacing} {
+        #{$property}-right: $space !important;
+      }
+
+      .#{$abrev}x#{$infix}-#{$spacing} {
+        #{$property}-right: $space !important;
+        #{$property}-left: $space !important;
+      }
+      .#{$abrev}y#{$infix}-#{$spacing} {
+        #{$property}-top: $space !important;
+        #{$property}-bottom: $space !important;
+      }
+    }
+  }
+}
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
+
+  @if $size == 0 {
+    @include spacings(variables.$spacers);
+  } @else {
+    @media (min-width: $size) {
+      @include spacings(variables.$spacers, $infix);
+    }
+  }
+}

package/scss/_switch.scss

@@ -1,145 +1,145 @@
-@use "variables";
-
-$defaultHeight: 16px;
-$lgHeight: 24px;
-
-%switch-label-before {
-  flex-direction: row-reverse;
-  justify-content: space-between;
-
-  .fwe-switch-label-content {
-    margin-left: 0px;
-    margin-right: 8px;
-  }
-}
-
-%switch-label-below {
-  flex-direction: column;
-
-  .fwe-switch-label-content {
-    margin: 8px 0px 0px 0px;
-  }
-
-  .fwe-switch-track {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-}
-
-label.fwe-switch {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  user-select: none;
-
-  .fwe-switch-track {
-    box-sizing: border-box;
-    position: relative;
-    height: $defaultHeight;
-    width: $defaultHeight * 2;
-    border: none;
-    background-color: variables.$control-border;
-    border-radius: $defaultHeight * 0.5;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    &:after {
-      content: "";
-      position: absolute;
-      top: 3px;
-      left: 3px;
-      height: $defaultHeight - 6px;
-      width: $defaultHeight - 6px;
-      background: variables.$white;
-      border-radius: 50%;
-      transition: left 0.2s;
-    }
-  }
-
-  &.fwe-switch-lg {
-    .fwe-switch-track {
-      height: $lgHeight;
-      width: $lgHeight * 2;
-      border-radius: $lgHeight * 0.5;
-      margin-top: 0px;
-      margin-bottom: 0px;
-
-      &:after {
-        top: 5px;
-        left: 5px;
-        height: $lgHeight - 10px;
-        width: $lgHeight - 10px;
-      }
-    }
-    input[type="checkbox"] {
-      &:checked ~ .fwe-switch-track {
-        &:after {
-          left: $lgHeight + 5px;
-        }
-      }
-    }
-  }
-
-  .fwe-switch-label-content {
-    line-height: 24px;
-    margin-left: 8px;
-  }
-
-  &.fwe-switch-label-before {
-    @extend %switch-label-before;
-  }
-
-  &.fwe-switch-label-below {
-    @extend %switch-label-below;
-  }
-
-  input[type="checkbox"] {
-    height: 0px;
-    width: 0px;
-    position: absolute;
-
-    &:hover ~ .fwe-switch-track {
-      background-color: variables.$control-border-hover;
-    }
-
-    &:active ~ .fwe-switch-track {
-      background-color: variables.$control-border-active;
-    }
-
-    &:checked ~ .fwe-switch-track {
-      background-color: variables.$caerul;
-      &:after {
-        left: $defaultHeight + 3px;
-      }
-    }
-
-    &:hover:checked ~ .fwe-switch-track {
-      background-color: variables.$hero-hover;
-    }
-
-    &:active:checked ~ .fwe-switch-track {
-      background-color: variables.$hero-active;
-    }
-
-    &:disabled ~ .fwe-switch-track {
-      background-color: variables.$control-disabled;
-      cursor: not-allowed;
-    }
-
-    &:disabled:checked ~ .fwe-switch-track {
-      background-color: variables.$hero-bg;
-      cursor: not-allowed;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &:disabled ~ .fwe-switch-label-content {
-      color: variables.$text-disabled;
-      cursor: not-allowed;
-    }
-  }
-}
+@use "variables";
+
+$defaultHeight: 16px;
+$lgHeight: 24px;
+
+%switch-label-before {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+
+  .fwe-switch-label-content {
+    margin-left: 0px;
+    margin-right: 8px;
+  }
+}
+
+%switch-label-below {
+  flex-direction: column;
+
+  .fwe-switch-label-content {
+    margin: 8px 0px 0px 0px;
+  }
+
+  .fwe-switch-track {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+}
+
+label.fwe-switch {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  user-select: none;
+
+  .fwe-switch-track {
+    box-sizing: border-box;
+    position: relative;
+    height: $defaultHeight;
+    width: $defaultHeight * 2;
+    border: none;
+    background-color: variables.$control-border;
+    border-radius: $defaultHeight * 0.5;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    &:after {
+      content: "";
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      height: $defaultHeight - 6px;
+      width: $defaultHeight - 6px;
+      background: variables.$white;
+      border-radius: 50%;
+      transition: left 0.2s;
+    }
+  }
+
+  &.fwe-switch-lg {
+    .fwe-switch-track {
+      height: $lgHeight;
+      width: $lgHeight * 2;
+      border-radius: $lgHeight * 0.5;
+      margin-top: 0px;
+      margin-bottom: 0px;
+
+      &:after {
+        top: 5px;
+        left: 5px;
+        height: $lgHeight - 10px;
+        width: $lgHeight - 10px;
+      }
+    }
+    input[type="checkbox"] {
+      &:checked ~ .fwe-switch-track {
+        &:after {
+          left: $lgHeight + 5px;
+        }
+      }
+    }
+  }
+
+  .fwe-switch-label-content {
+    line-height: 24px;
+    margin-left: 8px;
+  }
+
+  &.fwe-switch-label-before {
+    @extend %switch-label-before;
+  }
+
+  &.fwe-switch-label-below {
+    @extend %switch-label-below;
+  }
+
+  input[type="checkbox"] {
+    height: 0px;
+    width: 0px;
+    position: absolute;
+
+    &:hover ~ .fwe-switch-track {
+      background-color: variables.$control-border-hover;
+    }
+
+    &:active ~ .fwe-switch-track {
+      background-color: variables.$control-border-active;
+    }
+
+    &:checked ~ .fwe-switch-track {
+      background-color: variables.$caerul;
+      &:after {
+        left: $defaultHeight + 3px;
+      }
+    }
+
+    &:hover:checked ~ .fwe-switch-track {
+      background-color: variables.$hero-hover;
+    }
+
+    &:active:checked ~ .fwe-switch-track {
+      background-color: variables.$hero-active;
+    }
+
+    &:disabled ~ .fwe-switch-track {
+      background-color: variables.$control-disabled;
+      cursor: not-allowed;
+    }
+
+    &:disabled:checked ~ .fwe-switch-track {
+      background-color: variables.$hero-bg;
+      cursor: not-allowed;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .fwe-switch-label-content {
+      color: variables.$text-disabled;
+      cursor: not-allowed;
+    }
+  }
+}