@festo-ui/web-essentials 4.0.3-pre-20221213.1 → 5.0.0-dev.19

package/dist/scss/_cards.scss

@@ -1,98 +1,98 @@
-.fwe-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid $border;
-  background-color: $white;
-  border-radius: $border-radius-m;
-
-  .fwe-card-img {
-    width: 100%;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-  }
-
-  .fwe-card-img-169 {
-    @extend .fwe-card-img;
-    height: 188px;
-    max-height: 188px;
-    object-fit: cover;
-    object-position: center center;
-  }
-
-  .fwe-card-img-32 {
-    @extend .fwe-card-img;
-    height: 284px;
-    max-height: 284px;
-    object-fit: cover;
-    object-position: center center;
-  }
-
-  .fwe-card-header {
-    padding: 24px;
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .fwe-card-title {
-      h5 {
-        line-height: $font-size-xl;
-        font-size: $font-size-xl;
-        margin: 0;
-        padding: 0;
-      }
-
-      p {
-        padding: 0;
-        margin: 0;
-        color: $text-light;
-        font-size: $font-size-md;
-      }
-    }
-  }
-
-  .fwe-card-body {
-    flex-grow: 1;
-    padding: 24px;
-    padding-bottom: 48px;
-
-    .fwe-card-text {
-      margin: 0;
-      padding: 0;
-    }
-
-    > *:not(:last-child) {
-      margin-bottom: 24px;
-    }
-  }
-
-  .fwe-card-notification {
-    height: 64px;
-    min-height: 64px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 24px;
-    padding-right: 24px;
-
-    .fwe-card-title {
-      padding-left: 16px;
-
-      h6 {
-        line-height: $font-size-base;
-        font-size: $font-size-base;
-        font-weight: $font-weight-bold;
-        margin: 0;
-        padding: 0;
-      }
-
-      p {
-        padding: 0;
-        margin: 0;
-        color: $text;
-      }
-    }
-  }
-}
+.fwe-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $border;
+  background-color: $white;
+  border-radius: $border-radius-m;
+
+  .fwe-card-img {
+    width: 100%;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  .fwe-card-img-169 {
+    @extend .fwe-card-img;
+    height: 188px;
+    max-height: 188px;
+    object-fit: cover;
+    object-position: center center;
+  }
+
+  .fwe-card-img-32 {
+    @extend .fwe-card-img;
+    height: 284px;
+    max-height: 284px;
+    object-fit: cover;
+    object-position: center center;
+  }
+
+  .fwe-card-header {
+    padding: 24px;
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+
+    .fwe-card-title {
+      h5 {
+        line-height: $font-size-xl;
+        font-size: $font-size-xl;
+        margin: 0;
+        padding: 0;
+      }
+
+      p {
+        padding: 0;
+        margin: 0;
+        color: $text-light;
+        font-size: $font-size-md;
+      }
+    }
+  }
+
+  .fwe-card-body {
+    flex-grow: 1;
+    padding: 24px;
+    padding-bottom: 48px;
+
+    .fwe-card-text {
+      margin: 0;
+      padding: 0;
+    }
+
+    > *:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+
+  .fwe-card-notification {
+    height: 64px;
+    min-height: 64px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 24px;
+    padding-right: 24px;
+
+    .fwe-card-title {
+      padding-left: 16px;
+
+      h6 {
+        line-height: $font-size-base;
+        font-size: $font-size-base;
+        font-weight: $font-weight-bold;
+        margin: 0;
+        padding: 0;
+      }
+
+      p {
+        padding: 0;
+        margin: 0;
+        color: $text;
+      }
+    }
+  }
+}

package/dist/scss/_checkbox.scss

@@ -1,153 +1,153 @@
-$defaultHeight: 16px;
-$defaultWidth: 16px;
-$lgHeight: 24px;
-$lgWidth: 24px;
-
-%label-before {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-
-  .fwe-checkbox-label-content {
-    margin-left: 0px;
-    margin-right: 8px;
-  }
-}
-
-%label-below {
-  flex-direction: column;
-
-  .fwe-checkbox-label-content {
-    margin: 8px 0px 0px 0px;
-  }
-}
-
-%checkmark-lg {
-  height: $lgHeight;
-  width: $lgWidth;
-  border-radius: $border-radius-s;
-  @extend .fwe-icon-lg;
-  &:before {
-    left: -1px;
-  }
-}
-
-.fwe-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-
-  &.fwe-checkbox-lg {
-    label.fwe-checkbox {
-      .fwe-checkbox-checkmark {
-        @extend %checkmark-lg;
-      }
-    }
-  }
-
-  &.fwe-checkbox-label-before {
-    label.fwe-checkbox {
-      @extend %label-before;
-    }
-  }
-
-  &.fwe-checkbox-label-below {
-    label.fwe-checkbox {
-      @extend %label-below;
-    }
-  }
-}
-
-label.fwe-checkbox {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  width: 100%;
-  user-select: none;
-
-  .fwe-checkbox-checkmark {
-    box-sizing: border-box;
-    position: relative;
-    height: $defaultHeight;
-    width: $defaultWidth;
-    border: 1px solid $control-border;
-    background-color: $white;
-    border-radius: 2px;
-    font-size: $font-size-md;
-    @extend .fwe-icon;
-    @extend .fwe-icon-menu-check;
-    &:before {
-      display: none;
-      position: absolute;
-      color: $white;
-    }
-  }
-
-  &.fwe-checkbox-lg {
-    .fwe-checkbox-checkmark {
-      @extend %checkmark-lg;
-    }
-  }
-
-  .fwe-checkbox-label-content {
-    line-height: 24px;
-    margin-left: 8px;
-  }
-
-  &.fwe-checkbox-label-before {
-    @extend %label-before;
-  }
-
-  &.fwe-checkbox-label-below {
-    @extend %label-below;
-  }
-
-  input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-
-    &:hover ~ .fwe-checkbox-checkmark {
-      background-color: $control;
-    }
-
-    &:active ~ .fwe-checkbox-checkmark {
-      background-color: $control-dark;
-    }
-
-    &:checked ~ .fwe-checkbox-checkmark {
-      background-color: $hero;
-      border-color: $hero;
-    }
-
-    &:hover:checked:not(:disabled) ~ .fwe-checkbox-checkmark {
-      background-color: $hero-dark;
-      border-color: $hero-dark;
-    }
-
-    &:active:checked ~ .fwe-checkbox-checkmark {
-      background-color: $hero-darker;
-      border-color: $hero-darker;
-    }
-
-    &:checked ~ .fwe-checkbox-checkmark:before {
-      display: block;
-    }
-
-    &:disabled ~ .fwe-checkbox-checkmark {
-      background-color: $control-disabled;
-      border-color: $control-disabled;
-      cursor: not-allowed;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &:disabled ~ .fwe-checkbox-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-checkbox-label-content {
+    margin-left: 0px;
+    margin-right: 8px;
+  }
+}
+
+%label-below {
+  flex-direction: column;
+
+  .fwe-checkbox-label-content {
+    margin: 8px 0px 0px 0px;
+  }
+}
+
+%checkmark-lg {
+  height: $lgHeight;
+  width: $lgWidth;
+  border-radius: $border-radius-s;
+  @extend .fwe-icon-lg;
+  &:before {
+    left: -1px;
+  }
+}
+
+.fwe-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+
+  &.fwe-checkbox-lg {
+    label.fwe-checkbox {
+      .fwe-checkbox-checkmark {
+        @extend %checkmark-lg;
+      }
+    }
+  }
+
+  &.fwe-checkbox-label-before {
+    label.fwe-checkbox {
+      @extend %label-before;
+    }
+  }
+
+  &.fwe-checkbox-label-below {
+    label.fwe-checkbox {
+      @extend %label-below;
+    }
+  }
+}
+
+label.fwe-checkbox {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  width: 100%;
+  user-select: none;
+
+  .fwe-checkbox-checkmark {
+    box-sizing: border-box;
+    position: relative;
+    height: $defaultHeight;
+    width: $defaultWidth;
+    border: 1px solid $control-border;
+    background-color: $white;
+    border-radius: 2px;
+    font-size: $font-size-md;
+    @extend .fwe-icon;
+    @extend .fwe-icon-menu-check;
+    &:before {
+      display: none;
+      position: absolute;
+      color: $white;
+    }
+  }
+
+  &.fwe-checkbox-lg {
+    .fwe-checkbox-checkmark {
+      @extend %checkmark-lg;
+    }
+  }
+
+  .fwe-checkbox-label-content {
+    line-height: 24px;
+    margin-left: 8px;
+  }
+
+  &.fwe-checkbox-label-before {
+    @extend %label-before;
+  }
+
+  &.fwe-checkbox-label-below {
+    @extend %label-below;
+  }
+
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+
+    &:hover ~ .fwe-checkbox-checkmark {
+      background-color: $control;
+    }
+
+    &:active ~ .fwe-checkbox-checkmark {
+      background-color: $control-dark;
+    }
+
+    &:checked ~ .fwe-checkbox-checkmark {
+      background-color: $hero;
+      border-color: $hero;
+    }
+
+    &:hover:checked:not(:disabled) ~ .fwe-checkbox-checkmark {
+      background-color: $hero-dark;
+      border-color: $hero-dark;
+    }
+
+    &:active:checked ~ .fwe-checkbox-checkmark {
+      background-color: $hero-darker;
+      border-color: $hero-darker;
+    }
+
+    &:checked ~ .fwe-checkbox-checkmark:before {
+      display: block;
+    }
+
+    &:disabled ~ .fwe-checkbox-checkmark {
+      background-color: $control-disabled;
+      border-color: $control-disabled;
+      cursor: not-allowed;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .fwe-checkbox-label-content {
+      color: $text-disabled;
+      cursor: not-allowed;
+    }
+  }
+}