@festo-ui/angular 4.0.3-pre-20221124.8 → 5.0.0-dev.70

package/scss/base/forms/text-editor/text-editor.component.scss

@@ -1,294 +0,0 @@
-@import "../../../../../../node_modules/quill/dist/quill.core";
-@import "../../../../../../node_modules/quill/dist/quill.snow";
-@import "../../../../../web-essentials/scss/variables";
-@import "../../../../../web-essentials/scss/mixins";
-
-fng-text-editor {
-  .fng-divider-y {
-    display: inline-flex;
-    flex: 0 0 1px;
-    height: $spacer-m;
-    width: 1px;
-    background-color: $gray-400;
-  }
-
-  .fng-editor {
-    min-height: 100%;
-
-    &-container {
-      order: 2;
-      height: $spacer * 10;
-      min-height: 100%;
-      overflow-y: auto;
-      @include custom-scrollbar();
-      padding-top: $spacer-xxxs;
-      padding-bottom: $spacer-xxxs;
-      padding-left: $spacer-xxs;
-      border: $control-border solid 1px;
-      &:hover {
-        border-color: $hero;
-      }
-      &[contenteditable="true"] {
-        outline: none;
-        &:focus {
-          border-color: $hero;
-        }
-      }
-    }
-  }
-
-  label.fwe-input-text {
-    line-height: $spacer-m;
-
-    .fwe-input-text-count {
-      display: inline-block;
-      line-height: $line-height-base;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      color: $text-disabled;
-      font-size: $font-size-small;
-    }
-
-    .fwe-input-text-label {
-      order: -1;
-    }
-
-    .fng-text-editor-info {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      line-height: $line-height-base;
-      position: absolute;
-      left: 0;
-      top: unset;
-      bottom: 0;
-      z-index: 2;
-      color: $text-disabled;
-      font-size: $font-size-small;
-    }
-
-    &.fwe-disabled {
-      color: $text-disabled;
-
-      .fwe-input-text-label {
-        color: $text-disabled;
-      }
-
-      .fng-editor-container {
-        border-color: $control-disabled !important;
-        &:hover {
-          border-color: $control-disabled !important;
-        }
-      }
-      .fng-divider-y {
-        background-color: $text-disabled;
-      }
-    }
-  }
-
-  .fng-text-editor-invalid {
-    display: none;
-    line-height: 1.5;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    z-index: 2;
-    color: $red;
-    font-size: $font-size-small;
-  }
-
-  &.ng-dirty.ng-invalid {
-    label.fwe-input-text {
-      .fng-editor {
-        box-shadow: none;
-        outline: none;
-
-        &:disabled {
-          border-bottom: 1px solid $control-disabled !important;
-
-          & ~ .fwe-input-text-label,
-          & ~ .fng-text-editor-invalid,
-          & ~ .fng-text-editor-info {
-            color: $text-disabled;
-
-            &::after {
-              color: $text-disabled;
-            }
-          }
-        }
-
-        &-container {
-          border-color: $red;
-        }
-      }
-    }
-
-    .fng-text-editor-info {
-      display: none !important;
-    }
-
-    .fng-text-editor-invalid {
-      display: block !important;
-    }
-  }
-
-  .fng-text-bold {
-    font-weight: $font-weight-bold;
-  }
-
-  .fng-text-italic {
-    font-style: italic;
-  }
-
-  .fng-text-underline {
-    text-decoration: underline;
-  }
-
-  .fng-icon-text-align-center {
-    width: 12px;
-    height: 10px;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="rgb(51, 51, 51)" viewBox="0 0 12 10"><path d="M2,3H14V5H2Z" transform="translate(-2 -3)"/><path d="M5,7h6V9H5Z" transform="translate(-2 -3)"/><path d="M2,11H14v2H2Z" transform="translate(-2 -3)"/></svg>');
-    &.fng-gray {
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="rgb(185, 186, 187)" viewBox="0 0 12 10"><path d="M2,3H14V5H2Z" transform="translate(-2 -3)"/><path d="M5,7h6V9H5Z" transform="translate(-2 -3)"/><path d="M2,11H14v2H2Z" transform="translate(-2 -3)"/></svg>');
-    }
-  }
-
-  .fng-icon-text-align-right {
-    width: 12px;
-    height: 10px;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="rgb(51, 51, 51)" viewBox="0 0 12 10"><path d="M2,3H14V5H2Z" transform="translate(-2 -3)"/><path d="M8,7h6V9H8Z" transform="translate(-2 -3)"/><path d="M2,11H14v2H2Z" transform="translate(-2 -3)"/></svg>');
-    &.fng-gray {
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="rgb(185, 186, 187)" viewBox="0 0 12 10"><path d="M2,3H14V5H2Z" transform="translate(-2 -3)"/><path d="M8,7h6V9H8Z" transform="translate(-2 -3)"/><path d="M2,11H14v2H2Z" transform="translate(-2 -3)"/></svg>');
-    }
-  }
-
-  // customize quill dependent styles below this line ...
-  .ql-tooltip {
-    z-index: $zindex-tooltip;
-  }
-
-  .ql-editor {
-    font-family: $font-family-base;
-    font-size: $font-size-base;
-    padding: 0;
-    min-height: $spacer-m * 3;
-    overflow-x: hidden;
-    p,
-    strong,
-    em,
-    u,
-    ul,
-    ol,
-    li,
-    a {
-      &::selection {
-        background: $icon-hero-light;
-      }
-    }
-  }
-
-  .ql-container {
-    &.ql-snow {
-      border: 0;
-      background-color: $white;
-      .ql-tooltip {
-        transform: translate($spacer * 10, $spacer-xs);
-        color: $black;
-        box-shadow: -1px 1px 4px -1px #33333333;
-        border: 1px solid $gray-200;
-        input {
-          border: 1px solid $gray-200;
-          &::selection {
-            background: $icon-hero-light;
-          }
-        }
-      }
-
-      a {
-        color: $caerul;
-      }
-    }
-  }
-
-  .ql-toolbar {
-    &.ql-snow {
-      border: 0;
-      padding: $spacer-xxxs 0;
-
-      .ql-formats {
-        &.fng-editor-toolbar-buttons-container {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-        }
-      }
-
-      button {
-        line-height: normal;
-        box-sizing: border-box;
-        display: inline-flex;
-        align-items: center;
-        text-align: center;
-        padding: 0 $spacer-xxs;
-        height: $spacer-l;
-        min-height: unset;
-        color: $black;
-        background: none;
-        border-radius: $control-border-radius;
-        cursor: pointer;
-        border: none;
-        width: unset;
-        max-width: $spacer-m;
-        justify-content: center;
-        align-items: center;
-        float: unset;
-
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            background-color: $control-dark;
-            color: $black;
-          }
-        }
-
-        &:active {
-          background-color: $control-darker;
-        }
-
-        // ql-active is setted by quill to an invisible button. The next sibling ( + button ) is the visible representation.
-        &.ql-active + button {
-          background-color: $control;
-        }
-
-        &.fng-btn-toolbar-list {
-          padding: 0 6px;
-        }
-
-        &.fng-button {
-          i {
-            pointer-events: none;
-          }
-          div {
-            pointer-events: none;
-          }
-        }
-      }
-    }
-
-    .fng-button-text {
-      min-width: $spacer-xs;
-      line-height: $spacer-s;
-    }
-  }
-
-  label.fwe-input-text.fwe-disabled {
-    .ql-toolbar {
-      pointer-events: none;
-      button {
-        color: $text-disabled;
-      }
-    }
-  }
-}

package/scss/base/forms/text-input/text-input.component.scss

@@ -1,60 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text {
-  input[type="text"],
-  input[type="password"],
-  input[type="date"],
-  input[type="datetime-local"],
-  input[type="number"] {
-    border-bottom: 1px solid $red !important;
-    box-shadow: none;
-    outline: none;
-
-    &:focus {
-      border-bottom: 1px solid $red !important;
-    }
-
-    &:disabled {
-      border-bottom: 1px solid $control-disabled !important;
-
-      & ~ .fwe-input-text-label,
-      & ~ .fwe-input-text-invalid,
-      & ~ .fwe-input-text-info {
-        color: $text-disabled;
-      }
-    }
-  }
-
-  .fwe-input-text-info {
-    display: none !important;
-  }
-
-  .fwe-input-text-invalid {
-    display: block !important;
-  }
-}
-
-fng-text-input.ng-valid label.fwe-input-text {
-  input[type="text"],
-  input[type="password"],
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="number"] {
-    &:hover:not(:disabled) {
-      border-bottom: 1px solid $hero !important;
-    }
-  }
-}
-
-fng-text-input label.fwe-input-text.fwe-no-pointer-events {
-  pointer-events: none !important;
-}
-
-.fwe-input-text-invalid.fng-projected:empty {
-  display: none;
-}
-
-.fwe-input-text-info.fng-projected:empty {
-  display: none;
-}

package/scss/base/forms/time-picker/time-picker-dropdown/time-picker-dropdown.component.scss

@@ -1,10 +0,0 @@
-@import "../../../../../../web-essentials/scss/variables";
-
-.border-hero {
-  border-color: $hero !important;
-}
-
-.fwe-timepicker {
-  width: 100%;
-  max-width: 100%;
-}

package/scss/base/forms/time-picker/time-picker.component.scss

@@ -1,5 +0,0 @@
-.fng-first-child-fullwidth {
-  fng-time-picker-dropdown {
-    width: 100%;
-  }
-}