@festo-ui/angular 4.0.3-pre-20221213.1 → 5.0.0

package/scss/base/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.scss

@@ -1,109 +0,0 @@
-@import "../../../../../../../web-essentials/scss/variables";
-
-.fng-accordion-item-body {
-  overflow: hidden;
-  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 0px;
-
-  // remove all padding/margin top of first element in item body to ensure that its always 24px distance to header (which is the headers padding)
-  > :first-child:not(.fng-accordion-item-body-spacer-bottom):not(.fng-accordion) {
-    margin-top: 0 !important;
-    padding-top: 0 !important;
-  }
-
-  // for mobile view we do not have an extra margin for elements in body
-  > :not(.fng-accordion) {
-    margin-right: 0px;
-  }
-
-  &-content {
-    margin-right: $spacer-xxl;
-  }
-
-  &-spacer {
-    // the spacer ensures that there is always at least 24px margin at the end of the body
-    // it also makes use of "margin collapsing" so that even if the last element in the body itself has a margin of 24px or more
-    // it will not add the 24px on top of it
-    &-bottom {
-      margin-top: $spacer-m;
-      height: 0;
-      width: 0;
-    }
-  }
-}
-
-// styles for an accordion inside an accordion (nested accordion)
-.fng-accordion-item-body {
-
-  .fng-accordion {
-    margin-top: $spacer-xxl;
-    margin-bottom: $spacer-m;
-  }
-
-  .fng-accordion-item {
-    &-link {
-      display: block;
-      top: 8px;
-    }
-
-    &-header {
-      padding-top: $spacer-l;
-      padding-right: $spacer-l;
-    }
-
-    &::after {
-      top: 12px;
-      right: 4px;
-      color: $caerul;
-      font-family: $font-family-icons-16;
-      font-size: $font-size-base;
-      content: "\e900";
-      height: $spacer-s;
-      line-height: $spacer-s;
-    }
-
-    &--expanded {
-      &::before {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-// styles for different viewports below this line with mobile first approach
-@media (min-width: $grid-breakpoint-xs) {
-  .fng-accordion-item {
-    &-body {
-      // give all elements inside the accordion body a margin right of 64px except if its another accordion inside the body
-      > :not(.fng-accordion) {
-        margin-right: $spacer-xxl;
-      }
-    }
-  }
-
-  // styles for an accordion inside an accordion (nested accordion)
-  .fng-accordion-item-body {
-    .fng-accordion-item {
-      &-header {
-        padding-top: $spacer-m;
-        // increase the padding right because instead of only arrow icon we have text and arrow icon here
-        // make a best guess to fit also langugages with more chars (if too long it will be truncated with ellipsis)
-        padding-right: 168px;
-      }
-
-      &-link {
-        font-size: $font-size-base;
-        top: $spacer-m;
-        max-width: $spacer-xxl * 2;
-        // if link gets to long we truncate it with ellipsis here
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      &::after {
-        top: 30px;
-      }
-    }
-  }
-}

package/scss/base/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.scss

@@ -1,9 +0,0 @@
-@import "../../../../../../../web-essentials/scss/variables";
-
-.fng-accordion-item-header {
-  display: flex;
-  align-items: center;
-  padding: $spacer-m $spacer-xxl $spacer-m 0;
-  min-height: $spacer-xl;
-  cursor: pointer;
-}

package/scss/base/components/accordion/accordion-item/accordion-item.component.scss

@@ -1,71 +0,0 @@
-@import "../../../../../../web-essentials/scss/variables";
-
-.fng-accordion-item {
-  position: relative;
-  padding: 0 $spacer-s 0 $spacer-m;
-  border-top: 1px solid $gray-100;
-  border-bottom: 1px solid $gray-100;
-
-  &-link {
-    position: absolute;
-    top: $spacer-m;
-    right: $spacer-m;
-    color: $caerul;
-    font-size: $font-size-md;
-    pointer-events: none;
-    display: none;
-  }
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    content: "";
-    width: $spacer-xxxs;
-    height: 0px;
-    background-color: $caerul;
-  }
-
-  &::after {
-    position: absolute;
-    top: 21px;
-    right: $spacer-s;
-    display: block;
-    font-family: $font-family-icons-32;
-    font-size: $font-size-xxl;
-    content: "\e900";
-    height: $spacer-l;
-    line-height: $spacer-l;
-    transition: transform 0.2s ease;
-    pointer-events: none;
-  }
-
-  &--expanded {
-    .fng-accordion-item-header {
-      font-weight: $font-weight-bold;
-    }
-
-    .fng-accordion-item-body {
-      height: auto;
-    }
-
-    &::after {
-      transform: rotate(-180deg);
-    }
-
-    &::before {
-      height: 100%;
-    }
-  }
-
-  &--collapsed {
-    .fng-accordion-item-body {
-      height: 0px;
-    }
-
-    .fng-accordion-item-header {
-      font-weight: $font-weight-normal;
-    }
-  }
-}

package/scss/base/components/accordion/accordion.component.scss

@@ -1,6 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-.fng-accordion {
-  background-color: $white;
-  border-bottom: 1px solid $gray-100;
-}

package/scss/base/components/buttons/button/button.component.scss

@@ -1,7 +0,0 @@
-fng-button {
-  display: inline-block;
-}
-
-.fng-button {
-  width: 100%;
-}

package/scss/base/components/image-gallery/styles.scss

@@ -1,5 +0,0 @@
-@import "swiper/scss";
-@import "swiper/scss/free-mode";
-@import "swiper/scss/navigation";
-@import "swiper/scss/thumbs";
-@import "swiper/scss/zoom";

package/scss/base/components/popovers/legend/legend.component.scss

@@ -1,9 +0,0 @@
-@import "../../../../../../web-essentials/scss/variables";
-@import "../../../../../../web-essentials/scss/popover";
-
-.fng-legend {
-  @include popover-legend();
-  .fng-legend-content {
-    @include popover-legend-content();
-  }
-}

package/scss/base/components/popovers/popover/styles.scss

@@ -1,84 +0,0 @@
-@import "../../../../../../web-essentials/scss/popover";
-@import "@angular/cdk/overlay-prebuilt";
-
-/* This file is imported into global ~src/styles.scss to overwrite cdk overlay styles */
-
-/* Overwrite global styles for popovers based on cdk overlay below this line */
-.cdk-overlay-pane {
-  &.fng-popover-top {
-    .fwe-triangle {
-      @include triangle-bottom();
-    }
-  }
-
-  &.fng-popover-bottom {
-    .fwe-triangle {
-      @include triangle-top();
-    }
-  }
-
-  &.fng-popover-right {
-    .fwe-triangle {
-      @include triangle-left();
-    }
-  }
-
-  &.fng-popover-right-top {
-    .fwe-triangle {
-      @include triangle-left-top();
-    }
-  }
-
-  &.fng-popover-left {
-    .fwe-triangle {
-      @include triangle-right();
-    }
-  }
-
-  &.fng-popover-left-top {
-    .fwe-triangle {
-      @include triangle-right-top();
-    }
-  }
-
-  &.fng-popover-menu {
-    .fwe-popover {
-      @include popover-menu();
-    }
-  }
-
-  &.fng-color-indicator-top {
-    .fwe-triangle {
-      @include triangle-bottom();
-    }
-  }
-
-  &.fng-color-indicator-bottom {
-    .fwe-triangle {
-      @include triangle-top();
-    }
-  }
-
-  &.fng-color-indicator-left {
-    .fwe-triangle {
-      @include triangle-right();
-    }
-  }
-
-  &.fng-color-indicator-right {
-    .fwe-triangle {
-      @include triangle-left();
-    }
-  }
-
-  &.fng-popover-content {
-    .fwe-popover-container {
-      min-height: 100%;
-      min-width: 100%;
-      .fwe-popover {
-        min-height: 100%;
-        min-width: 100%;
-      }
-    }
-  }
-}

package/scss/base/components/popovers/popover-content/popover-content.component.scss

@@ -1,12 +0,0 @@
-@import "../../../../../../web-essentials/scss/variables";
-
-.fng-off-screen {
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-}
-
-.fng-content {
-  font-size: $font-size-md;
-  line-height: 1rem;
-}

package/scss/base/components/scroll/scroll-story-helper.scss

@@ -1,12 +0,0 @@
-@import "~simplebar/dist/simplebar.min.css";
-@import "../../../../../web-essentials/scss/festo-web-essentials.scss";
-
-.scroll-test {
-  display: block;
-  overflow-x: hidden;
-  overflow-y: auto;
-  width: 400px;
-  max-width: 400px;
-  height: 300px;
-  padding-right: 8px;
-}

package/scss/base/components/search-input/search-input.component.scss

@@ -1,7 +0,0 @@
-.fwe-w-100 {
-  width: 100%;
-}
-
-.fwe-search-suggestion {
-  height: 40px;
-}

package/scss/base/components/snackbar/snackbar-container.component.scss

@@ -1,3 +0,0 @@
-.fwe-snackbar-container {
-  pointer-events: none;
-}

package/scss/base/components/snackbar/snackbar.component.scss

@@ -1,3 +0,0 @@
-.fwe-snackbar {
-  pointer-events: all;
-}

package/scss/base/components/stepper-horizontal/step-horizontal/step-horizontal.component.scss

@@ -1,23 +0,0 @@
-.overflow-hidden {
-  overflow: hidden;
-}
-
-@keyframes stepperAnimation {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-
-.fng-moving-container {
-  animation-name: stepperAnimation;
-  animation-duration: 0.3s;
-  animation-timing-function: ease;
-}
-
-.hidden {
-  display: none;
-}
-

package/scss/base/components/stepper-vertical/step-vertical/step-vertical.component.scss

@@ -1,6 +0,0 @@
-// start with closed state
-.fwe-step-container.fwe-step-active {
-  .fwe-step-content-container {
-    height: 20px;
-  }
-}

package/scss/base/components/tabs/tab-pane/tab-pane.component.scss

@@ -1,7 +0,0 @@
-.fng-show {
-  display: block;
-}
-
-.fng-hide {
-  display: none;
-}