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

package/scss/_text-input.scss

@@ -1,191 +1,191 @@
-@use "variables";
-
-label.fwe-input-text {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  line-height: 0px;
-  padding-bottom: 18px;
-  cursor: text;
-
-  .fwe-input-text-label {
-    height: 18px;
-    order: 1;
-    color: variables.$text;
-    font-size: variables.$font-size-small;
-    line-height: variables.$line-height-base;
-    font-weight: variables.$font-weight-bold;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .fwe-input-text-info {
-    display: block;
-    position: absolute;
-    top: 51px;
-    width: 100%;
-    font-size: variables.$font-size-small;
-    line-height: variables.$line-height-base;
-    color: variables.$text-disabled;
-  }
-
-  .fwe-input-text-invalid {
-    @extend .fwe-input-text-info;
-    display: none;
-    color: variables.$red;
-  }
-
-  input[type="text"],
-  input[type="email"],
-  input[type="password"],
-  input[type="number"],
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  textarea {
-    text-overflow: ellipsis;
-    order: 2;
-    outline: none;
-    border: none;
-    border-radius: 0;
-    background: none;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-color: variables.$control-border;
-    width: 100%;
-    padding-top: 4px;
-    padding-bottom: 4px;
-
-    &:disabled {
-      pointer-events: none;
-    }
-
-    &::placeholder {
-      color: variables.$text-disabled;
-    }
-
-    &:hover:valid:not(:disabled) {
-      border-color: variables.$hero;
-    }
-
-    &:hover:not(:disabled) {
-      color: variables.$hero;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: variables.$hero;
-      color: variables.$text !important;
-    }
-
-    &:user-invalid {
-      border-color: variables.$red;
-      & ~ .fwe-input-text-info {
-        display: none;
-      }
-      & ~ .fwe-input-text-invalid {
-        display: block;
-      }
-    }
-
-    &:disabled {
-      background: none;
-      color: variables.$text-disabled;
-      border-color: variables.$control-disabled;
-
-      & ~ .fwe-input-text-label,
-      & ~ .fwe-input-text-invalid,
-      & ~ .fwe-input-text-info {
-        color: variables.$text-disabled;
-
-        &::before {
-          color: variables.$text-disabled;
-        }
-      }
-    }
-  }
-
-  // replace the calendar icon for webkit
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"] {
-    height: 33px;
-    position: relative;
-    &:before {
-      color: transparent;
-      background: none;
-      display: block;
-      font-family: variables.$font-family-icons-16;
-      width: 16px;
-      height: 16px;
-      position: absolute;
-      top: 6px;
-      right: 0px;
-      color: variables.$text;
-    }
-    &::-webkit-calendar-picker-indicator {
-      color: transparent;
-      background: none;
-      z-index: 1;
-    }
-  }
-  input[type="date"],
-  input[type="datetime-local"] {
-    &:before {
-      content: "\ea0d";
-    }
-  }
-  input[type="time"] {
-    &:before {
-      content: "\ea11";
-    }
-  }
-
-  textarea {
-    resize: none;
-    margin-top: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border-width: 1px;
-    border-style: solid;
-
-    @for $i from 2 through 10 {
-      &.fwe-row-#{$i} {
-        // height = rowcount * rowheight + margin-top + margin-bottom + 1px-line
-        height: calc(#{$i} * #{variables.$textarea-row-const});
-      }
-    }
-
-    ~ .fwe-input-text-info,
-    ~ .fwe-input-text-invalid {
-      top: unset;
-      bottom: 0px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &.fwe-input-text-icon {
-    .fwe-svg-icon,
-    i {
-      line-height: 1;
-      position: absolute;
-      bottom: 27px;
-      right: 0px;
-      height: 16px;
-      width: 16px;
-    }
-
-    input[type="text"],
-    input[type="password"],
-    input[type="number"],
-    input[type="date"],
-    input[type="time"],
-    input[type="datetime-local"],
-    textarea {
-      padding-right: 24px;
-    }
-  }
-}
+@use "variables";
+
+label.fwe-input-text {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  line-height: 0px;
+  padding-bottom: 18px;
+  cursor: text;
+
+  .fwe-input-text-label {
+    height: 18px;
+    order: 1;
+    color: variables.$text;
+    font-size: variables.$font-size-small;
+    line-height: variables.$line-height-base;
+    font-weight: variables.$font-weight-bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fwe-input-text-info {
+    display: block;
+    position: absolute;
+    top: 51px;
+    width: 100%;
+    font-size: variables.$font-size-small;
+    line-height: variables.$line-height-base;
+    color: variables.$text-disabled;
+  }
+
+  .fwe-input-text-invalid {
+    @extend .fwe-input-text-info;
+    display: none;
+    color: variables.$red;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  textarea {
+    text-overflow: ellipsis;
+    order: 2;
+    outline: none;
+    border: none;
+    border-radius: 0;
+    background: none;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: variables.$control-border;
+    width: 100%;
+    padding-top: 4px;
+    padding-bottom: 4px;
+
+    &:disabled {
+      pointer-events: none;
+    }
+
+    &::placeholder {
+      color: variables.$text-disabled;
+    }
+
+    &:hover:valid:not(:disabled) {
+      border-color: variables.$hero;
+    }
+
+    &:hover:not(:disabled) {
+      color: variables.$hero;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: variables.$hero;
+      color: variables.$text !important;
+    }
+
+    &:user-invalid {
+      border-color: variables.$red;
+      & ~ .fwe-input-text-info {
+        display: none;
+      }
+      & ~ .fwe-input-text-invalid {
+        display: block;
+      }
+    }
+
+    &:disabled {
+      background: none;
+      color: variables.$text-disabled;
+      border-color: variables.$control-disabled;
+
+      & ~ .fwe-input-text-label,
+      & ~ .fwe-input-text-invalid,
+      & ~ .fwe-input-text-info {
+        color: variables.$text-disabled;
+
+        &::before {
+          color: variables.$text-disabled;
+        }
+      }
+    }
+  }
+
+  // replace the calendar icon for webkit
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"] {
+    height: 33px;
+    position: relative;
+    &:before {
+      color: transparent;
+      background: none;
+      display: block;
+      font-family: variables.$font-family-icons-16;
+      width: 16px;
+      height: 16px;
+      position: absolute;
+      top: 6px;
+      right: 0px;
+      color: variables.$text;
+    }
+    &::-webkit-calendar-picker-indicator {
+      color: transparent;
+      background: none;
+      z-index: 1;
+    }
+  }
+  input[type="date"],
+  input[type="datetime-local"] {
+    &:before {
+      content: "\ea0d";
+    }
+  }
+  input[type="time"] {
+    &:before {
+      content: "\ea11";
+    }
+  }
+
+  textarea {
+    resize: none;
+    margin-top: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-width: 1px;
+    border-style: solid;
+
+    @for $i from 2 through 10 {
+      &.fwe-row-#{$i} {
+        // height = rowcount * rowheight + margin-top + margin-bottom + 1px-line
+        height: calc(#{$i} * #{variables.$textarea-row-const});
+      }
+    }
+
+    ~ .fwe-input-text-info,
+    ~ .fwe-input-text-invalid {
+      top: unset;
+      bottom: 0px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.fwe-input-text-icon {
+    .fwe-svg-icon,
+    i {
+      line-height: 1;
+      position: absolute;
+      bottom: 27px;
+      right: 0px;
+      height: 16px;
+      width: 16px;
+    }
+
+    input[type="text"],
+    input[type="password"],
+    input[type="number"],
+    input[type="date"],
+    input[type="time"],
+    input[type="datetime-local"],
+    textarea {
+      padding-right: 24px;
+    }
+  }
+}

package/scss/_text-link.scss

@@ -1,52 +1,52 @@
-@use "variables";
-
-// This is still needed for compatibility reasons
-a {
-  color: variables.$hero;
-  text-decoration: none;
-
-  i.fwe-icon {
-    vertical-align: text-top;
-  }
-
-  &.fwe-dark {
-    color: variables.$text;
-  }
-
-  &.fwe-disabled {
-    pointer-events: none;
-    color: variables.$text-light;
-    cursor: default;
-  }
-
-  &:hover:not(.fwe-disabled) {
-    color: variables.$hero-hover;
-    text-decoration: none;
-  }
-}
-
-.fwe-text-link {
-  color: variables.$hero;
-  text-decoration: underline;
-  text-decoration-thickness: auto;
-
-  i.fwe-icon {
-    vertical-align: text-top;
-  }
-
-  &.fwe-dark {
-    color: variables.$text;
-  }
-
-  &.fwe-disabled {
-    pointer-events: none;
-    color: variables.$text-light;
-    cursor: default;
-  }
-
-  &:hover:not(.fwe-disabled) {
-    color: variables.$hero-hover;
-    text-decoration: underline;
-    text-decoration-thickness: auto;
-  }
-}
+@use "variables";
+
+// This is still needed for compatibility reasons
+a {
+  color: variables.$hero;
+  text-decoration: none;
+
+  i.fwe-icon {
+    vertical-align: text-top;
+  }
+
+  &.fwe-dark {
+    color: variables.$text;
+  }
+
+  &.fwe-disabled {
+    pointer-events: none;
+    color: variables.$text-light;
+    cursor: default;
+  }
+
+  &:hover:not(.fwe-disabled) {
+    color: variables.$hero-hover;
+    text-decoration: none;
+  }
+}
+
+.fwe-text-link {
+  color: variables.$hero;
+  text-decoration: underline;
+  text-decoration-thickness: auto;
+
+  i.fwe-icon {
+    vertical-align: text-top;
+  }
+
+  &.fwe-dark {
+    color: variables.$text;
+  }
+
+  &.fwe-disabled {
+    pointer-events: none;
+    color: variables.$text-light;
+    cursor: default;
+  }
+
+  &:hover:not(.fwe-disabled) {
+    color: variables.$hero-hover;
+    text-decoration: underline;
+    text-decoration-thickness: auto;
+  }
+}

package/scss/_toolbar.scss

@@ -1,83 +1,83 @@
-@use "variables";
-
-.fwe-toolbar {
-  width: variables.$toolbar-width;
-  padding: 0;
-  background-color: variables.$white;
-  border-right: 1px solid variables.$border;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .fwe-toolbar-actions {
-    padding-top: 24px;
-
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    button {
-      display: block;
-    }
-
-    a,
-    button {
-      height: 60px;
-      width: 60px;
-      line-height: 60px;
-      text-align: center;
-      cursor: pointer;
-      border-radius: 0;
-      position: relative;
-
-      &::after {
-        position: absolute;
-        content: "";
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 4px;
-        background-color: variables.$hero;
-        transform: scaleX(0);
-        transition: transform 0.3s;
-      }
-
-      &.fwe-active {
-        color: variables.$hero !important;
-
-        &::after {
-          transform: scaleX(1);
-        }
-      }
-    }
-  }
-
-  &.fwe-toolbar-right {
-    border-right: none;
-    border-left: 1px solid variables.$border;
-    padding-right: 1px;
-
-    .fwe-toolbar-actions {
-      a,
-      button {
-        &::after {
-          left: unset;
-          right: 0;
-          width: 4px;
-          transform: scaleX(0);
-          transition: transform 0.3s;
-        }
-
-        &.fwe-active {
-          color: variables.$hero !important;
-
-          &::after {
-            transform: scaleX(1);
-          }
-        }
-      }
-    }
-  }
-}
+@use "variables";
+
+.fwe-toolbar {
+  width: variables.$toolbar-width;
+  padding: 0;
+  background-color: variables.$white;
+  border-right: 1px solid variables.$border;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .fwe-toolbar-actions {
+    padding-top: 24px;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    button {
+      display: block;
+    }
+
+    a,
+    button {
+      height: 60px;
+      width: 60px;
+      line-height: 60px;
+      text-align: center;
+      cursor: pointer;
+      border-radius: 0;
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 4px;
+        background-color: variables.$hero;
+        transform: scaleX(0);
+        transition: transform 0.3s;
+      }
+
+      &.fwe-active {
+        color: variables.$hero !important;
+
+        &::after {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  &.fwe-toolbar-right {
+    border-right: none;
+    border-left: 1px solid variables.$border;
+    padding-right: 1px;
+
+    .fwe-toolbar-actions {
+      a,
+      button {
+        &::after {
+          left: unset;
+          right: 0;
+          width: 4px;
+          transform: scaleX(0);
+          transition: transform 0.3s;
+        }
+
+        &.fwe-active {
+          color: variables.$hero !important;
+
+          &::after {
+            transform: scaleX(1);
+          }
+        }
+      }
+    }
+  }
+}