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

package/scss/_pagination.scss

@@ -1,124 +1,124 @@
-@use "variables";
-
-.fwe-pagination {
-  display: flex;
-
-  .fwe-navigate-btn {
-    &::before {
-      content: "";
-      height: 24px;
-      width: 24px;
-      background-color: variables.$text;
-    }
-
-    line-height: normal;
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    text-align: center;
-    font-family: variables.$font-family-base;
-    padding: 0px;
-    height: 24px;
-    width: 24px;
-    background: transparent;
-    cursor: pointer;
-    border: none;
-
-    &:hover {
-      &::before {
-        background-color: variables.$hero;
-      }
-    }
-
-    &:active {
-      &::before {
-        background-color: variables.$hero-hover;
-      }
-    }
-
-    &:focus {
-      outline: 0;
-    }
-
-    &:disabled,
-    &.fwe-disabled {
-      cursor: default;
-
-      &::before {
-        background-color: variables.$text-disabled;
-      }
-    }
-  }
-
-  .fwe-navigate-btn-up {
-    @extend .fwe-navigate-btn;
-
-    &::before {
-      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik05LjE3MiAxOC4zNjQgMTUuNTM2IDEyIDkuMTcyIDUuNjM2bC0uNzA4LjcwN0wxNC4xMjEgMTJsLTUuNjU3IDUuNjU3LjcwOC43MDd6Ii8+PC9zdmc+");
-    }
-  }
-
-  .fwe-navigate-btn-down {
-    @extend .fwe-navigate-btn;
-
-    &::before {
-      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik0xNC44MjggNS42MzYgOC40NjQgMTJsNi4zNjQgNi4zNjQuNzA4LS43MDdMOS44NzkgMTJsNS42NTctNS42NTctLjcwOC0uNzA3eiIvPjwvc3ZnPg==");
-    }
-  }
-
-  .fwe-page-dot {
-    cursor: pointer;
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    margin: 9px 4px;
-    background: variables.$control-border;
-    border-radius: 50%;
-
-    &:hover {
-      background: variables.$control-border-hover;
-    }
-
-    &.fwe-selected {
-      background: variables.$hero;
-      cursor: default;
-    }
-  }
-
-  .fwe-page-current {
-    font-feature-settings: variables.$font-feature-settings;
-    font-weight: variables.$font-weight-bold;
-    border-right: 1px solid variables.$text;
-    padding: 0px 12px 0px 4px;
-  }
-
-  .fwe-page-max {
-    font-feature-settings: variables.$font-feature-settings;
-    line-height: 24px;
-    padding: 0px 4px 0px 12px;
-    font-weight: variables.$font-weight-normal;
-  }
-}
-
-.fwe-pagination.fwe-pagination--on-dark-bg {
-  .fwe-navigate-btn-down {
-    &::before {
-      background-color: variables.$white;
-    }
-  }
-
-  .fwe-navigate-btn-up {
-    &::before {
-      background-color: variables.$white;
-    }
-  }
-
-  .fwe-page-current {
-    color: variables.$white;
-    border-right: 1px solid variables.$white;
-  }
-
-  .fwe-page-max {
-    color: variables.$white;
-  }
-}
+@use "variables";
+
+.fwe-pagination {
+  display: flex;
+
+  .fwe-navigate-btn {
+    &::before {
+      content: "";
+      height: 24px;
+      width: 24px;
+      background-color: variables.$text;
+    }
+
+    line-height: normal;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    text-align: center;
+    font-family: variables.$font-family-base;
+    padding: 0px;
+    height: 24px;
+    width: 24px;
+    background: transparent;
+    cursor: pointer;
+    border: none;
+
+    &:hover {
+      &::before {
+        background-color: variables.$hero;
+      }
+    }
+
+    &:active {
+      &::before {
+        background-color: variables.$hero-hover;
+      }
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    &:disabled,
+    &.fwe-disabled {
+      cursor: default;
+
+      &::before {
+        background-color: variables.$text-disabled;
+      }
+    }
+  }
+
+  .fwe-navigate-btn-up {
+    @extend .fwe-navigate-btn;
+
+    &::before {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik05LjE3MiAxOC4zNjQgMTUuNTM2IDEyIDkuMTcyIDUuNjM2bC0uNzA4LjcwN0wxNC4xMjEgMTJsLTUuNjU3IDUuNjU3LjcwOC43MDd6Ii8+PC9zdmc+");
+    }
+  }
+
+  .fwe-navigate-btn-down {
+    @extend .fwe-navigate-btn;
+
+    &::before {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik0xNC44MjggNS42MzYgOC40NjQgMTJsNi4zNjQgNi4zNjQuNzA4LS43MDdMOS44NzkgMTJsNS42NTctNS42NTctLjcwOC0uNzA3eiIvPjwvc3ZnPg==");
+    }
+  }
+
+  .fwe-page-dot {
+    cursor: pointer;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin: 9px 4px;
+    background: variables.$control-border;
+    border-radius: 50%;
+
+    &:hover {
+      background: variables.$control-border-hover;
+    }
+
+    &.fwe-selected {
+      background: variables.$hero;
+      cursor: default;
+    }
+  }
+
+  .fwe-page-current {
+    font-feature-settings: variables.$font-feature-settings;
+    font-weight: variables.$font-weight-bold;
+    border-right: 1px solid variables.$text;
+    padding: 0px 12px 0px 4px;
+  }
+
+  .fwe-page-max {
+    font-feature-settings: variables.$font-feature-settings;
+    line-height: 24px;
+    padding: 0px 4px 0px 12px;
+    font-weight: variables.$font-weight-normal;
+  }
+}
+
+.fwe-pagination.fwe-pagination--on-dark-bg {
+  .fwe-navigate-btn-down {
+    &::before {
+      background-color: variables.$white;
+    }
+  }
+
+  .fwe-navigate-btn-up {
+    &::before {
+      background-color: variables.$white;
+    }
+  }
+
+  .fwe-page-current {
+    color: variables.$white;
+    border-right: 1px solid variables.$white;
+  }
+
+  .fwe-page-max {
+    color: variables.$white;
+  }
+}

package/scss/_rfs.scss

@@ -1,177 +1,177 @@
-@use "sass:meta";
-// SCSS RFS mixin
-// Automated responsive font sizes
-// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
-
-// Configuration
-
-// Base font size
-@use "sass:math";
-
-$rfs-base-font-size: 1.25rem !default;
-$rfs-font-size-unit: rem !default;
-
-@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
-  @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
-}
-
-// Breakpoint at where font-size starts decreasing if screen width is smaller
-$rfs-breakpoint: 1200px !default;
-$rfs-breakpoint-unit: px !default;
-
-@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
-  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
-}
-
-// Resize font size based on screen height and width
-$rfs-two-dimensional: false !default;
-
-// Factor of decrease
-$rfs-factor: 10 !default;
-
-@if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
-  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
-}
-
-// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
-$rfs-class: false !default;
-
-// 1 rem = $rfs-rem-value px
-$rfs-rem-value: 16 !default;
-
-// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
-$rfs-safari-iframe-resize-bug-fix: false !default;
-
-// Disable RFS by setting $enable-responsive-font-sizes to false
-$enable-responsive-font-sizes: true !default;
-
-// Cache $rfs-base-font-size unit
-$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
-
-// Remove px-unit from $rfs-base-font-size for calculations
-@if $rfs-base-font-size-unit == "px" {
-  $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
-} @else if $rfs-base-font-size-unit == "rem" {
-  $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value));
-}
-
-// Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
-
-// Remove unit from $rfs-breakpoint for calculations
-@if $rfs-breakpoint-unit-cache == "px" {
-  $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
-} @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
-  $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
-}
-
-// Internal mixin that adds disable classes to the selector if needed.
-@mixin _rfs-disable-class {
-  @if $rfs-class == "disable" {
-    // Adding an extra class increases specificity, which prevents the media query to override the font size
-    &,
-    .disable-responsive-font-size &,
-    &.disable-responsive-font-size {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Internal mixin that adds enable classes to the selector if needed.
-@mixin _rfs-enable-class {
-  @if $rfs-class == "enable" {
-    .enable-responsive-font-size &,
-    &.enable-responsive-font-size {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Internal mixin used to determine which media query needs to be used
-@mixin _rfs-media-query($mq-value) {
-  @if $rfs-two-dimensional {
-    @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
-      @content;
-    }
-  } @else {
-    @media (max-width: #{$mq-value}) {
-      @content;
-    }
-  }
-}
-
-// Responsive font size mixin
-@mixin rfs($fs, $important: false) {
-  // Cache $fs unit
-  $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
-
-  // Add !important suffix if needed
-  $rfs-suffix: if($important, " !important", "");
-
-  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-  @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
-    font-size: #{$fs}#{$rfs-suffix};
-  } @else {
-    // Remove unit from $fs for calculations
-    @if $fs-unit == "px" {
-      $fs: math.div($fs, $fs * 0 + 1);
-    } @else if $fs-unit == "rem" {
-      $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
-    }
-
-    // Set default font size
-    $rfs-static: if($rfs-font-size-unit == rem, #{math.div($fs, $rfs-rem-value)}rem, #{$fs}px);
-
-    // Only add the media query if the font size is bigger than the minimum font size
-    @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
-      font-size: #{$rfs-static}#{$rfs-suffix};
-    } @else {
-      // Calculate the minimum font size for $fs
-      $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
-
-      // Calculate difference between $fs and the minimum font size
-      $fs-diff: $fs - $fs-min;
-
-      // Base font-size formatting
-      $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
-
-      // Use `vmin` if two-dimensional is enabled
-      $variable-unit: if($rfs-two-dimensional, vmin, vw);
-
-      // Calculate the variable width between 0 and $rfs-breakpoint
-      $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
-
-      // Set the calculated font-size
-      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
-
-      // Breakpoint formatting
-      $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
-
-      @include _rfs-disable-class {
-        font-size: #{$rfs-static}#{$rfs-suffix};
-      }
-
-      @include _rfs-media-query($mq-value) {
-        @include _rfs-enable-class {
-          font-size: $rfs-fluid;
-        }
-
-        // Include safari iframe resize fix if needed
-        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
-      }
-    }
-  }
-}
-
-// The font-size & responsive-font-size mixins use RFS to rescale the font size
-@mixin font-size($fs, $important: false) {
-  @include rfs($fs, $important);
-}
-
-@mixin responsive-font-size($fs, $important: false) {
-  @include rfs($fs, $important);
-}
+@use "sass:meta";
+// SCSS RFS mixin
+// Automated responsive font sizes
+// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
+
+// Configuration
+
+// Base font size
+@use "sass:math";
+
+$rfs-base-font-size: 1.25rem !default;
+$rfs-font-size-unit: rem !default;
+
+@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
+  @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+}
+
+// Breakpoint at where font-size starts decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+}
+
+// Resize font size based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
+}
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-responsive-font-sizes to false
+$enable-responsive-font-sizes: true !default;
+
+// Cache $rfs-base-font-size unit
+$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
+
+// Remove px-unit from $rfs-base-font-size for calculations
+@if $rfs-base-font-size-unit == "px" {
+  $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
+} @else if $rfs-base-font-size-unit == "rem" {
+  $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value));
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == "px" {
+  $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
+} @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
+  $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
+}
+
+// Internal mixin that adds disable classes to the selector if needed.
+@mixin _rfs-disable-class {
+  @if $rfs-class == "disable" {
+    // Adding an extra class increases specificity, which prevents the media query to override the font size
+    &,
+    .disable-responsive-font-size &,
+    &.disable-responsive-font-size {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Internal mixin that adds enable classes to the selector if needed.
+@mixin _rfs-enable-class {
+  @if $rfs-class == "enable" {
+    .enable-responsive-font-size &,
+    &.enable-responsive-font-size {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Internal mixin used to determine which media query needs to be used
+@mixin _rfs-media-query($mq-value) {
+  @if $rfs-two-dimensional {
+    @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+      @content;
+    }
+  } @else {
+    @media (max-width: #{$mq-value}) {
+      @content;
+    }
+  }
+}
+
+// Responsive font size mixin
+@mixin rfs($fs, $important: false) {
+  // Cache $fs unit
+  $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
+
+  // Add !important suffix if needed
+  $rfs-suffix: if($important, " !important", "");
+
+  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+  @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
+    font-size: #{$fs}#{$rfs-suffix};
+  } @else {
+    // Remove unit from $fs for calculations
+    @if $fs-unit == "px" {
+      $fs: math.div($fs, $fs * 0 + 1);
+    } @else if $fs-unit == "rem" {
+      $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
+    }
+
+    // Set default font size
+    $rfs-static: if($rfs-font-size-unit == rem, #{math.div($fs, $rfs-rem-value)}rem, #{$fs}px);
+
+    // Only add the media query if the font size is bigger than the minimum font size
+    @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
+      font-size: #{$rfs-static}#{$rfs-suffix};
+    } @else {
+      // Calculate the minimum font size for $fs
+      $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
+
+      // Calculate difference between $fs and the minimum font size
+      $fs-diff: $fs - $fs-min;
+
+      // Base font-size formatting
+      $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
+
+      // Use `vmin` if two-dimensional is enabled
+      $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+      // Calculate the variable width between 0 and $rfs-breakpoint
+      $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+
+      // Set the calculated font-size
+      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
+
+      // Breakpoint formatting
+      $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+
+      @include _rfs-disable-class {
+        font-size: #{$rfs-static}#{$rfs-suffix};
+      }
+
+      @include _rfs-media-query($mq-value) {
+        @include _rfs-enable-class {
+          font-size: $rfs-fluid;
+        }
+
+        // Include safari iframe resize fix if needed
+        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
+      }
+    }
+  }
+}
+
+// The font-size & responsive-font-size mixins use RFS to rescale the font size
+@mixin font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+
+@mixin responsive-font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}