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

package/scss/light/festo-web-essentials-light.scss

@@ -1,59 +1,59 @@
-/*!
- * Festo UI - Web Essentials light (https://storybook.festo.design/)
- * Copyright 2025 Festo SE & Co. KG
- * Licensed under Apache-2.0
- */
-
-@use "../rfs";
-@use "../variables";
-@use "../mixins";
-@use "../fonts";
-@use "../colors";
-
-@use "../type";
-@use "../root";
-@use "../normalize";
-@use "../utils";
-
-@use "../misc";
-@use "../display";
-@use "spacing-light";
-@use "border-light";
-@use "flex-light";
-
-@use "../layout";
-@use "../toolbar";
-@use "../table";
-@use "../list";
-@use "../navbar";
-@use "../mobile-flyout";
-@use "../breadcrumb";
-@use "../text-link";
-@use "../text-input";
-@use "../chips";
-@use "../radio";
-@use "../checkbox";
-@use "../switch";
-@use "../button";
-@use "../slider";
-@use "../loading-indicator";
-@use "../select";
-@use "../badge";
-@use "../cards";
-@use "../progressbar";
-@use "../pagination";
-@use "../snackbar";
-@use "../modal";
-@use "../segment";
-@use "../popover";
-@use "../timepicker";
-@use "../navbar-menu";
-@use "../scroll";
-@use "../search-input";
-@use "../stepper-horizontal";
-@use "../stepper-vertical";
-@use "../bottom-navigation";
-@use "../accordion";
-@use "../tree";
-@use "../sidebar-overlay";
-@use "../bottom-sheet";
+/*!
+ * Festo UI - Web Essentials light (https://storybook.festo.design/)
+ * Copyright 2025 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
+
+@use "../rfs";
+@use "../variables";
+@use "../mixins";
+@use "../fonts";
+@use "../colors";
+
+@use "../type";
+@use "../root";
+@use "../normalize";
+@use "../utils";
+
+@use "../misc";
+@use "../display";
+@use "spacing-light";
+@use "border-light";
+@use "flex-light";
+
+@use "../layout";
+@use "../toolbar";
+@use "../table";
+@use "../list";
+@use "../navbar";
+@use "../mobile-flyout";
+@use "../breadcrumb";
+@use "../text-link";
+@use "../text-input";
+@use "../chips";
+@use "../radio";
+@use "../checkbox";
+@use "../switch";
+@use "../button";
+@use "../slider";
+@use "../loading-indicator";
+@use "../select";
+@use "../badge";
+@use "../cards";
+@use "../progressbar";
+@use "../pagination";
+@use "../snackbar";
+@use "../modal";
+@use "../segment";
+@use "../popover";
+@use "../timepicker";
+@use "../navbar-menu";
+@use "../scroll";
+@use "../search-input";
+@use "../stepper-horizontal";
+@use "../stepper-vertical";
+@use "../bottom-navigation";
+@use "../accordion";
+@use "../tree";
+@use "../sidebar-overlay";
+@use "../bottom-sheet";

package/scss/organisms/_header-modul.scss

@@ -1,111 +1,111 @@
-@use "../variables";
-
-@use "sass:math";
-
-.fwe-header-modul-container {
-  display: flex;
-  flex-direction: column;
-  padding-top: variables.$spacer-l;
-  padding-bottom: variables.$spacer-l;
-
-  .fwe-header-modul-content {
-    order: 2;
-    position: relative;
-
-    h1,
-    .fwe-h1 {
-      margin-bottom: 0;
-    }
-
-    h3,
-    .fwe-h3 {
-      margin-top: 0;
-      margin-bottom: 16px;
-    }
-
-    p {
-      font-size: variables.$font-size-xl;
-      line-height: 32px;
-      color: variables.$text-light;
-      margin: 0;
-      padding-bottom: 34px;
-    }
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      content: "";
-      width: 28px;
-      height: 10px;
-      background-color: variables.$gray-400;
-    }
-  }
-
-  .fwe-header-modul-media {
-    min-height: 111px;
-    background-color: variables.$hero;
-    order: 1;
-  }
-}
-
-@media only screen and (min-width: variables.$grid-breakpoint-xs) {
-  .fwe-header-modul-container {
-    .fwe-header-modul-media {
-      min-height: 132px;
-    }
-  }
-}
-
-@media only screen and (min-width: variables.$grid-breakpoint-sm) {
-  .fwe-header-modul-container {
-    .fwe-header-modul-content {
-      h1,
-      .fwe-h1 {
-        margin-bottom: 6px;
-      }
-    }
-    .fwe-header-modul-media {
-      min-height: 268px;
-    }
-  }
-}
-
-@media only screen and (min-width: variables.$grid-breakpoint-md) {
-  .fwe-header-modul-container {
-    .fwe-header-modul-media {
-      min-height: 352px;
-    }
-  }
-}
-
-@media only screen and (min-width: variables.$grid-breakpoint-lg) {
-  .fwe-header-modul-container {
-    flex-direction: row;
-
-    .fwe-header-modul-content {
-      order: 1;
-      width: math.div(100%, 2.4);
-      margin-right: variables.$spacer-m;
-
-      h1,
-      .fwe-h1 {
-        margin-top: 0;
-      }
-    }
-
-    .fwe-header-modul-media {
-      order: 2;
-      min-height: 293px;
-      flex: 1;
-    }
-  }
-}
-
-@media only screen and (min-width: variables.$grid-breakpoint-xl) {
-  .fwe-header-modul-container {
-    .fwe-header-modul-media {
-      min-height: 400px;
-    }
-  }
-}
+@use "../variables";
+
+@use "sass:math";
+
+.fwe-header-modul-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: variables.$spacer-l;
+  padding-bottom: variables.$spacer-l;
+
+  .fwe-header-modul-content {
+    order: 2;
+    position: relative;
+
+    h1,
+    .fwe-h1 {
+      margin-bottom: 0;
+    }
+
+    h3,
+    .fwe-h3 {
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+
+    p {
+      font-size: variables.$font-size-xl;
+      line-height: 32px;
+      color: variables.$text-light;
+      margin: 0;
+      padding-bottom: 34px;
+    }
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      content: "";
+      width: 28px;
+      height: 10px;
+      background-color: variables.$gray-400;
+    }
+  }
+
+  .fwe-header-modul-media {
+    min-height: 111px;
+    background-color: variables.$hero;
+    order: 1;
+  }
+}
+
+@media only screen and (min-width: variables.$grid-breakpoint-xs) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-media {
+      min-height: 132px;
+    }
+  }
+}
+
+@media only screen and (min-width: variables.$grid-breakpoint-sm) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-content {
+      h1,
+      .fwe-h1 {
+        margin-bottom: 6px;
+      }
+    }
+    .fwe-header-modul-media {
+      min-height: 268px;
+    }
+  }
+}
+
+@media only screen and (min-width: variables.$grid-breakpoint-md) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-media {
+      min-height: 352px;
+    }
+  }
+}
+
+@media only screen and (min-width: variables.$grid-breakpoint-lg) {
+  .fwe-header-modul-container {
+    flex-direction: row;
+
+    .fwe-header-modul-content {
+      order: 1;
+      width: math.div(100%, 2.4);
+      margin-right: variables.$spacer-m;
+
+      h1,
+      .fwe-h1 {
+        margin-top: 0;
+      }
+    }
+
+    .fwe-header-modul-media {
+      order: 2;
+      min-height: 293px;
+      flex: 1;
+    }
+  }
+}
+
+@media only screen and (min-width: variables.$grid-breakpoint-xl) {
+  .fwe-header-modul-container {
+    .fwe-header-modul-media {
+      min-height: 400px;
+    }
+  }
+}

package/scss/organisms/_teaser.scss

@@ -1,96 +1,96 @@
-@use "../variables";
-
-.fwe-teaser-horbox {
-  display: flex;
-  background-color: var(--fwe-sucanul);
-}
-
-.fwe-teaser-horbox .fwe-teaser-horbox-img {
-  background-color: var(--fwe-hero);
-  flex: 1;
-}
-
-.fwe-teaser-horbox .fwe-teaser-horbox-content {
-  flex: 1;
-  display: inline-flex;
-  flex-direction: column;
-  padding: 24px;
-}
-
-.fwe-teaser-horbox .fwe-teaser-horbox-content .fwe-teaser-more {
-  align-self: flex-end;
-}
-
-.fwe-teaser-verbox {
-  display: inline-flex;
-  flex-direction: column;
-  background-color: var(--fwe-sucanul);
-  width: 100%;
-  height: 100%;
-}
-
-.fwe-teaser-verbox .fwe-teaser-verbox-img {
-  background-color: var(--fwe-hero);
-  height: calc(50% - 12px);
-  min-height: 186px;
-  width: 100%;
-}
-
-.fwe-teaser-verbox h2 {
-  padding-top: 24px;
-  padding-left: 24px;
-  padding-right: 24px;
-}
-
-.fwe-teaser-verbox p {
-  padding-left: 24px;
-  padding-right: 24px;
-}
-
-.fwe-teaser-verbox .fwe-teaser-more {
-  align-self: flex-end;
-  margin-bottom: 24px;
-  margin-right: 24px;
-}
-
-.fwe-teaser-c12-container {
-  display: flex;
-  flex-direction: column;
-
-  .fwe-teaser-c12-content {
-    order: 2;
-    background-color: variables.$sucanul;
-    padding-top: 16px;
-    padding-bottom: 13px;
-    padding-left: 20px;
-    padding-right: 20px;
-
-    h3,
-    .fwe-h3 {
-      font-size: 12px;
-      line-height: 14px;
-      margin-bottom: 4px;
-      font-weight: variables.$font-weight-normal;
-    }
-
-    h2,
-    .fwe-h2 {
-      font-size: 16px;
-      line-height: 24px;
-      font-weight: variables.$font-weight-bold;
-      margin-top: 0;
-    }
-  }
-
-  .fwe-teaser-c12-img {
-    order: 1;
-    background-color: variables.$hero;
-    min-height: 114px;
-  }
-}
-
-@media only screen and (min-width: variables.$grid-breakpoint-md) {
-  .fwe-teaser-verbox h2 {
-    padding-top: 48px;
-  }
-}
+@use "../variables";
+
+.fwe-teaser-horbox {
+  display: flex;
+  background-color: var(--fwe-sucanul);
+}
+
+.fwe-teaser-horbox .fwe-teaser-horbox-img {
+  background-color: var(--fwe-hero);
+  flex: 1;
+}
+
+.fwe-teaser-horbox .fwe-teaser-horbox-content {
+  flex: 1;
+  display: inline-flex;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.fwe-teaser-horbox .fwe-teaser-horbox-content .fwe-teaser-more {
+  align-self: flex-end;
+}
+
+.fwe-teaser-verbox {
+  display: inline-flex;
+  flex-direction: column;
+  background-color: var(--fwe-sucanul);
+  width: 100%;
+  height: 100%;
+}
+
+.fwe-teaser-verbox .fwe-teaser-verbox-img {
+  background-color: var(--fwe-hero);
+  height: calc(50% - 12px);
+  min-height: 186px;
+  width: 100%;
+}
+
+.fwe-teaser-verbox h2 {
+  padding-top: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.fwe-teaser-verbox p {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.fwe-teaser-verbox .fwe-teaser-more {
+  align-self: flex-end;
+  margin-bottom: 24px;
+  margin-right: 24px;
+}
+
+.fwe-teaser-c12-container {
+  display: flex;
+  flex-direction: column;
+
+  .fwe-teaser-c12-content {
+    order: 2;
+    background-color: variables.$sucanul;
+    padding-top: 16px;
+    padding-bottom: 13px;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    h3,
+    .fwe-h3 {
+      font-size: 12px;
+      line-height: 14px;
+      margin-bottom: 4px;
+      font-weight: variables.$font-weight-normal;
+    }
+
+    h2,
+    .fwe-h2 {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: variables.$font-weight-bold;
+      margin-top: 0;
+    }
+  }
+
+  .fwe-teaser-c12-img {
+    order: 1;
+    background-color: variables.$hero;
+    min-height: 114px;
+  }
+}
+
+@media only screen and (min-width: variables.$grid-breakpoint-md) {
+  .fwe-teaser-verbox h2 {
+    padding-top: 48px;
+  }
+}