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

package/scss/_grid.scss

@@ -1,44 +1,44 @@
-@use "sass:map";
-@use "utils";
-@use "variables";
-
-@each $breakpoint in map.keys(variables.$grid-breakpoints) {
-  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
-  $size: map.get(variables.$grid-breakpoints, $breakpoint);
-
-  @media (min-width: $size) {
-    @for $i from 1 through variables.$grid-columns {
-      .fwe-col#{$infix}-#{$i} {
-        grid-column-end: span $i;
-      }
-
-      .fwe-grid-line-break#{$infix} {
-        grid-column-start: 1;
-      }
-
-      @if $i < variables.$grid-columns {
-        .fwe-offset#{$infix}-#{$i} {
-          grid-column-start: $i + 1;
-        }
-      }
-    }
-  }
-}
-
-.fwe-grid {
-  display: grid;
-  grid-template-columns: repeat(variables.$grid-columns, 1fr);
-  gap: variables.$grid-gap;
-
-  &.fwe-no-gap {
-    gap: 0px;
-  }
-
-  &.fwe-no-row-gap {
-    row-gap: 0px;
-  }
-
-  &.fwe-no-col-gap {
-    column-gap: 0px;
-  }
-}
+@use "sass:map";
+@use "utils";
+@use "variables";
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
+
+  @media (min-width: $size) {
+    @for $i from 1 through variables.$grid-columns {
+      .fwe-col#{$infix}-#{$i} {
+        grid-column-end: span $i;
+      }
+
+      .fwe-grid-line-break#{$infix} {
+        grid-column-start: 1;
+      }
+
+      @if $i < variables.$grid-columns {
+        .fwe-offset#{$infix}-#{$i} {
+          grid-column-start: $i + 1;
+        }
+      }
+    }
+  }
+}
+
+.fwe-grid {
+  display: grid;
+  grid-template-columns: repeat(variables.$grid-columns, 1fr);
+  gap: variables.$grid-gap;
+
+  &.fwe-no-gap {
+    gap: 0px;
+  }
+
+  &.fwe-no-row-gap {
+    row-gap: 0px;
+  }
+
+  &.fwe-no-col-gap {
+    column-gap: 0px;
+  }
+}

package/scss/_layout.scss

@@ -1,64 +1,64 @@
-@use "sass:map";
-@use "variables";
-
-.fwe-container {
-  padding: variables.$container-padding;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-@each $breakpoint in map.keys(variables.$grid-breakpoints) {
-  $padding: map.get(variables.$container-paddings, $breakpoint);
-  $size: map.get(variables.$grid-breakpoints, $breakpoint);
-
-  @if $size != 0 {
-    @media (min-width: $size) {
-      .fwe-container {
-        padding: $padding;
-      }
-    }
-  }
-}
-
-.fwe-layout-1920 {
-  display: flex;
-  justify-content: center;
-  padding: 0px !important;
-  .fwe-container {
-    padding: 0px !important;
-    max-width: 1920px - 128;
-    margin-right: 64px;
-    margin-left: 64px;
-    @media (max-width: variables.$grid-breakpoint-lg) {
-      margin-right: 32px;
-      margin-left: 32px;
-    }
-    @media (max-width: variables.$grid-breakpoint-sm) {
-      margin-right: 16px;
-      margin-left: 16px;
-    }
-    @media (max-width: variables.$grid-breakpoint-xs) {
-      margin-right: 8px;
-      margin-left: 8px;
-    }
-    .fwe-app-logo-container {
-      position: unset;
-      margin-bottom: 17px;
-      margin-right: 24px;
-    }
-  }
-}
-
-.fwe-layout-1440 {
-  @extend .fwe-layout-1920;
-  .fwe-container {
-    max-width: 1440px - 128px;
-  }
-}
-
-.fwe-layout-1024 {
-  @extend .fwe-layout-1920;
-  .fwe-container {
-    max-width: 1024px - 64px;
-  }
-}
+@use "sass:map";
+@use "variables";
+
+.fwe-container {
+  padding: variables.$container-padding;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $padding: map.get(variables.$container-paddings, $breakpoint);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
+
+  @if $size != 0 {
+    @media (min-width: $size) {
+      .fwe-container {
+        padding: $padding;
+      }
+    }
+  }
+}
+
+.fwe-layout-1920 {
+  display: flex;
+  justify-content: center;
+  padding: 0px !important;
+  .fwe-container {
+    padding: 0px !important;
+    max-width: 1920px - 128;
+    margin-right: 64px;
+    margin-left: 64px;
+    @media (max-width: variables.$grid-breakpoint-lg) {
+      margin-right: 32px;
+      margin-left: 32px;
+    }
+    @media (max-width: variables.$grid-breakpoint-sm) {
+      margin-right: 16px;
+      margin-left: 16px;
+    }
+    @media (max-width: variables.$grid-breakpoint-xs) {
+      margin-right: 8px;
+      margin-left: 8px;
+    }
+    .fwe-app-logo-container {
+      position: unset;
+      margin-bottom: 17px;
+      margin-right: 24px;
+    }
+  }
+}
+
+.fwe-layout-1440 {
+  @extend .fwe-layout-1920;
+  .fwe-container {
+    max-width: 1440px - 128px;
+  }
+}
+
+.fwe-layout-1024 {
+  @extend .fwe-layout-1920;
+  .fwe-container {
+    max-width: 1024px - 64px;
+  }
+}

package/scss/_list.scss

@@ -1,211 +1,211 @@
-@use "variables";
-
-ul.fwe-list-group {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-.fwe-list-group {
-  display: flex;
-  flex-direction: column;
-
-  .fwe-list-group-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    min-height: 48px;
-    padding-left: 16px;
-    padding-right: 16px;
-    line-height: 24px;
-    position: relative;
-    flex-wrap: wrap;
-
-    &.fwe-list-group-item-custom {
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-    }
-
-    .fwe-list-group-item-head .fwe-badge,
-    .fwe-badge {
-      display: inline-block;
-      margin-left: auto;
-    }
-
-    [class^="fwe-icon-"],
-    [class*=" fwe-icon-"],
-    .fwe-svg-icon,
-    a,
-    button {
-      display: inline-block;
-      margin-left: auto;
-    }
-
-    .fwe-list-group-item-head {
-      display: flex;
-      flex-grow: 1;
-      width: 100%;
-      font-weight: variables.$font-weight-bold;
-      margin-bottom: 24px;
-      margin-top: 16px;
-    }
-
-    .fwe-list-group-item-body {
-      width: 100%;
-      margin-bottom: 24px;
-    }
-
-    .fwe-list-group-item-footer {
-      width: 100%;
-      font-size: variables.$font-size-small;
-      margin-bottom: 16px;
-    }
-
-    &::before {
-      position: absolute;
-      content: "";
-      top: 0;
-      bottom: 0;
-      width: 1px;
-      left: 0;
-      background-color: variables.$hero;
-      transform-origin: left top;
-      transform: scaleX(0);
-      transition: transform 0.3s;
-    }
-
-    &.fwe-active {
-      color: variables.$hero;
-      &::before {
-        transform: scaleX(4);
-      }
-
-      .fwe-list-group-item-body,
-      .fwe-list-group-item-footer {
-        color: variables.$text;
-      }
-    }
-
-    &.fwe-disabled {
-      color: variables.$text-disabled;
-      &::before {
-        background-color: variables.$control-hover;
-      }
-    }
-  }
-
-  a.fwe-list-group-item {
-    cursor: pointer;
-    color: variables.$text;
-
-    &:not(.fwe-disabled):hover {
-      background-color: variables.$sucanul;
-      .fwe-list-group-item-body,
-      .fwe-list-group-item-footer {
-        color: variables.$text;
-      }
-    }
-  }
-
-  button.fwe-list-group-item {
-    outline: none;
-    background-color: inherit;
-    text-align: left;
-    border: none;
-    width: 100%;
-    cursor: pointer;
-
-    &:not(.fwe-disabled):hover {
-      color: variables.$hero;
-      background-color: variables.$sucanul;
-    }
-  }
-
-  &.fwe-list-group-border {
-    .fwe-list-group-item,
-    button.fwe-list-group-item {
-      border-bottom: 1px solid variables.$border;
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.fwe-list-group-horizontal {
-    flex-direction: row;
-    padding: 0px;
-
-    .fwe-list-group-item {
-      padding-left: 12px;
-      padding-right: 12px;
-      border-bottom: none;
-
-      &:first-child {
-        padding-left: 16px;
-      }
-      &:last-child {
-        border-bottom: none;
-        padding-right: 16px;
-      }
-
-      &::before {
-        position: absolute;
-        content: "";
-        top: unset;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 1px;
-        background-color: variables.$hero;
-        transform-origin: center bottom;
-        transform: scaleY(0);
-        transition: transform 0.3s;
-      }
-
-      &.fwe-active {
-        color: variables.$hero;
-        &::before {
-          transform: scaleY(4);
-        }
-      }
-
-      &.fwe-disabled {
-        color: variables.$text-disabled;
-        &::before {
-          background-color: variables.$control-hover;
-        }
-      }
-    }
-
-    &.fwe-bb {
-      .fwe-list-group-item {
-        &::before {
-          bottom: -1px;
-        }
-      }
-    }
-
-    a.fwe-list-group-item,
-    button.fwe-list-group-item {
-      width: auto;
-
-      &:not(.fwe-disabled):hover {
-        color: variables.$hero;
-        background-color: unset;
-      }
-    }
-  }
-}
-
-.fwe-list-group-header {
-  display: flex;
-  align-items: center;
-  padding: 14px 24px;
-  border-bottom: 1px solid variables.$border;
-
-  button {
-    margin-left: auto;
-  }
-}
+@use "variables";
+
+ul.fwe-list-group {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.fwe-list-group {
+  display: flex;
+  flex-direction: column;
+
+  .fwe-list-group-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 48px;
+    padding-left: 16px;
+    padding-right: 16px;
+    line-height: 24px;
+    position: relative;
+    flex-wrap: wrap;
+
+    &.fwe-list-group-item-custom {
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+    }
+
+    .fwe-list-group-item-head .fwe-badge,
+    .fwe-badge {
+      display: inline-block;
+      margin-left: auto;
+    }
+
+    [class^="fwe-icon-"],
+    [class*=" fwe-icon-"],
+    .fwe-svg-icon,
+    a,
+    button {
+      display: inline-block;
+      margin-left: auto;
+    }
+
+    .fwe-list-group-item-head {
+      display: flex;
+      flex-grow: 1;
+      width: 100%;
+      font-weight: variables.$font-weight-bold;
+      margin-bottom: 24px;
+      margin-top: 16px;
+    }
+
+    .fwe-list-group-item-body {
+      width: 100%;
+      margin-bottom: 24px;
+    }
+
+    .fwe-list-group-item-footer {
+      width: 100%;
+      font-size: variables.$font-size-small;
+      margin-bottom: 16px;
+    }
+
+    &::before {
+      position: absolute;
+      content: "";
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      left: 0;
+      background-color: variables.$hero;
+      transform-origin: left top;
+      transform: scaleX(0);
+      transition: transform 0.3s;
+    }
+
+    &.fwe-active {
+      color: variables.$hero;
+      &::before {
+        transform: scaleX(4);
+      }
+
+      .fwe-list-group-item-body,
+      .fwe-list-group-item-footer {
+        color: variables.$text;
+      }
+    }
+
+    &.fwe-disabled {
+      color: variables.$text-disabled;
+      &::before {
+        background-color: variables.$control-hover;
+      }
+    }
+  }
+
+  a.fwe-list-group-item {
+    cursor: pointer;
+    color: variables.$text;
+
+    &:not(.fwe-disabled):hover {
+      background-color: variables.$sucanul;
+      .fwe-list-group-item-body,
+      .fwe-list-group-item-footer {
+        color: variables.$text;
+      }
+    }
+  }
+
+  button.fwe-list-group-item {
+    outline: none;
+    background-color: inherit;
+    text-align: left;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+
+    &:not(.fwe-disabled):hover {
+      color: variables.$hero;
+      background-color: variables.$sucanul;
+    }
+  }
+
+  &.fwe-list-group-border {
+    .fwe-list-group-item,
+    button.fwe-list-group-item {
+      border-bottom: 1px solid variables.$border;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &.fwe-list-group-horizontal {
+    flex-direction: row;
+    padding: 0px;
+
+    .fwe-list-group-item {
+      padding-left: 12px;
+      padding-right: 12px;
+      border-bottom: none;
+
+      &:first-child {
+        padding-left: 16px;
+      }
+      &:last-child {
+        border-bottom: none;
+        padding-right: 16px;
+      }
+
+      &::before {
+        position: absolute;
+        content: "";
+        top: unset;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 1px;
+        background-color: variables.$hero;
+        transform-origin: center bottom;
+        transform: scaleY(0);
+        transition: transform 0.3s;
+      }
+
+      &.fwe-active {
+        color: variables.$hero;
+        &::before {
+          transform: scaleY(4);
+        }
+      }
+
+      &.fwe-disabled {
+        color: variables.$text-disabled;
+        &::before {
+          background-color: variables.$control-hover;
+        }
+      }
+    }
+
+    &.fwe-bb {
+      .fwe-list-group-item {
+        &::before {
+          bottom: -1px;
+        }
+      }
+    }
+
+    a.fwe-list-group-item,
+    button.fwe-list-group-item {
+      width: auto;
+
+      &:not(.fwe-disabled):hover {
+        color: variables.$hero;
+        background-color: unset;
+      }
+    }
+  }
+}
+
+.fwe-list-group-header {
+  display: flex;
+  align-items: center;
+  padding: 14px 24px;
+  border-bottom: 1px solid variables.$border;
+
+  button {
+    margin-left: auto;
+  }
+}