@porscheinformatik/clr-addons 13.4.3 → 13.5.0

package/src/flow-bar/flow-bar.scss

@@ -1,95 +0,0 @@
-@include exports('flow-bar.clr-addons') {
-  .flow-bar {
-    display: flex;
-    flex: 0 0 auto;
-
-    .flow-bar-dropdown {
-      display: none;
-
-      @media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
-        display: block;
-      }
-
-      .dropdown-toggle {
-        border: none;
-        width: 100%;
-        padding: 0 1rem;
-        max-width: none;
-      }
-
-      .dropdown-toggle:active {
-        box-shadow: none;
-      }
-    }
-
-    .flow-bar-wrapper {
-      display: flex;
-      height: 1.5rem;
-      align-items: center;
-      width: 100%;
-      overflow-x: auto;
-      overflow-y: hidden;
-
-      @media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
-        display: none;
-      }
-
-      .flow-bar-step {
-        box-shadow: 0 -0.35rem 0 var(--clr-nav-box-shadow-color) inset;
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        // Set a min width so every step shows at least a little bit of its title
-        min-width: 5rem;
-        max-width: 10rem;
-
-        clr-icon[shape*='caret right'] {
-          flex: 0 0 auto;
-        }
-
-        &:hover,
-        &.active {
-          box-shadow: 0 -0.35rem 0 var(--clr-nav-active-box-shadow-color) inset;
-          transition: box-shadow 0.2s ease-in;
-        }
-
-        &:focus-within {
-          box-shadow: 0 -0.35rem 0 var(--clr-nav-active-box-shadow-color) inset;
-          transition: box-shadow 0.2s ease-in;
-          outline: none;
-        }
-
-        .flow-bar-btn {
-          border: none;
-          padding: 0 1rem;
-          color: var(--clr-nav-link-color);
-          text-transform: none;
-          font-size: 0.7rem;
-          font-weight: 400;
-          letter-spacing: normal;
-          min-width: 0;
-
-          &:hover,
-          &.active {
-            background-color: transparent;
-            color: var(--clr-nav-link-active-color);
-          }
-
-          &:focus {
-            outline: none;
-            color: black;
-          }
-
-          &.active {
-            font-weight: 700;
-          }
-
-          // This moves the box shadow the required distance down to line up with the border
-          &.btn {
-            margin: 0 0 var(--clr-global-borderwidth) 0;
-          }
-        }
-      }
-    }
-  }
-}

package/src/generic-quick-list/generic-quick-list.scss

@@ -1,219 +0,0 @@
-@include exports('generic-quick-list.clr-addons') {
-  .generic-quick-list {
-    .clr-form-control {
-      margin-top: 0;
-    }
-
-    .controls-wrapper {
-      display: flex;
-    }
-
-    .controls-container {
-      display: flex;
-      flex: 1;
-      margin-bottom: 0.25rem;
-
-      > :not(.btn-trash) {
-        flex: 1;
-        margin-right: 0.5rem;
-      }
-
-      > .clr-col-xl,
-      > .clr-col-xl-auto,
-      > .clr-col-xl-12,
-      > .clr-col-xl-11,
-      > .clr-col-xl-10,
-      > .clr-col-xl-9,
-      > .clr-col-xl-8,
-      > .clr-col-xl-7,
-      > .clr-col-xl-6,
-      > .clr-col-xl-5,
-      > .clr-col-xl-4,
-      > .clr-col-xl-3,
-      > .clr-col-xl-2,
-      > .clr-col-xl-1,
-      > .clr-col-lg,
-      > .clr-col-lg-auto,
-      > .clr-col-lg-12,
-      > .clr-col-lg-11,
-      > .clr-col-lg-10,
-      > .clr-col-lg-9,
-      > .clr-col-lg-8,
-      > .clr-col-lg-7,
-      > .clr-col-lg-6,
-      > .clr-col-lg-5,
-      > .clr-col-lg-4,
-      > .clr-col-lg-3,
-      > .clr-col-lg-2,
-      > .clr-col-lg-1,
-      > .clr-col-md,
-      > .clr-col-md-auto,
-      > .clr-col-md-12,
-      > .clr-col-md-11,
-      > .clr-col-md-10,
-      > .clr-col-md-9,
-      > .clr-col-md-8,
-      > .clr-col-md-7,
-      > .clr-col-md-6,
-      > .clr-col-md-5,
-      > .clr-col-md-4,
-      > .clr-col-md-3,
-      > .clr-col-md-2,
-      > .clr-col-md-1,
-      > .clr-col-sm,
-      > .clr-col-sm-auto,
-      > .clr-col-sm-12,
-      > .clr-col-sm-11,
-      > .clr-col-sm-10,
-      > .clr-col-sm-9,
-      > .clr-col-sm-8,
-      > .clr-col-sm-7,
-      > .clr-col-sm-6,
-      > .clr-col-sm-5,
-      > .clr-col-sm-4,
-      > .clr-col-sm-3,
-      > .clr-col-sm-2,
-      > .clr-col-sm-1,
-      > .clr-col,
-      > .clr-col-auto,
-      > .clr-col-12,
-      > .clr-col-11,
-      > .clr-col-10,
-      > .clr-col-9,
-      > .clr-col-8,
-      > .clr-col-7,
-      > .clr-col-6,
-      > .clr-col-5,
-      > .clr-col-4,
-      > .clr-col-3,
-      > .clr-col-2,
-      > .clr-col-1 {
-        padding: 0;
-      }
-    }
-
-    .header-container {
-      display: flex;
-      max-width: calc(100% - 18px); // for correct alignment; 18px is the width of trash button in content rows
-
-      > * {
-        flex: 1;
-        display: block;
-        color: var(--clr-forms-label-color);
-        font-size: 0.65rem;
-        font-weight: var(--clr-forms-label-font-weight);
-      }
-
-      > .clr-col-xl,
-      > .clr-col-xl-auto,
-      > .clr-col-xl-12,
-      > .clr-col-xl-11,
-      > .clr-col-xl-10,
-      > .clr-col-xl-9,
-      > .clr-col-xl-8,
-      > .clr-col-xl-7,
-      > .clr-col-xl-6,
-      > .clr-col-xl-5,
-      > .clr-col-xl-4,
-      > .clr-col-xl-3,
-      > .clr-col-xl-2,
-      > .clr-col-xl-1,
-      > .clr-col-lg,
-      > .clr-col-lg-auto,
-      > .clr-col-lg-12,
-      > .clr-col-lg-11,
-      > .clr-col-lg-10,
-      > .clr-col-lg-9,
-      > .clr-col-lg-8,
-      > .clr-col-lg-7,
-      > .clr-col-lg-6,
-      > .clr-col-lg-5,
-      > .clr-col-lg-4,
-      > .clr-col-lg-3,
-      > .clr-col-lg-2,
-      > .clr-col-lg-1,
-      > .clr-col-md,
-      > .clr-col-md-auto,
-      > .clr-col-md-12,
-      > .clr-col-md-11,
-      > .clr-col-md-10,
-      > .clr-col-md-9,
-      > .clr-col-md-8,
-      > .clr-col-md-7,
-      > .clr-col-md-6,
-      > .clr-col-md-5,
-      > .clr-col-md-4,
-      > .clr-col-md-3,
-      > .clr-col-md-2,
-      > .clr-col-md-1,
-      > .clr-col-sm,
-      > .clr-col-sm-auto,
-      > .clr-col-sm-12,
-      > .clr-col-sm-11,
-      > .clr-col-sm-10,
-      > .clr-col-sm-9,
-      > .clr-col-sm-8,
-      > .clr-col-sm-7,
-      > .clr-col-sm-6,
-      > .clr-col-sm-5,
-      > .clr-col-sm-4,
-      > .clr-col-sm-3,
-      > .clr-col-sm-2,
-      > .clr-col-sm-1,
-      > .clr-col,
-      > .clr-col-auto,
-      > .clr-col-12,
-      > .clr-col-11,
-      > .clr-col-10,
-      > .clr-col-9,
-      > .clr-col-8,
-      > .clr-col-7,
-      > .clr-col-6,
-      > .clr-col-5,
-      > .clr-col-4,
-      > .clr-col-3,
-      > .clr-col-2,
-      > .clr-col-1 {
-        margin-left: -0.6rem;
-        margin-right: 0.5rem;
-        padding-left: 0.6rem;
-      }
-    }
-
-    .btn-add {
-      padding: 0;
-      text-align: left;
-    }
-
-    .btn-trash {
-      padding: 0;
-      margin-top: -0.25rem;
-    }
-  }
-
-  form:not(.clr-form-horizontal) .generic-quick-list {
-    .clr-control-container {
-      width: 100%;
-    }
-
-    .header-container {
-      margin: 0 -0.5rem;
-      max-width: calc(100% + 2px);
-
-      > * {
-        padding-left: 0.6rem;
-        margin-right: 0.5rem;
-        margin-left: 0;
-      }
-    }
-
-    .controls-container {
-      margin-right: -0.5rem;
-      margin-left: -0.5rem;
-
-      > * {
-        padding: 0;
-      }
-    }
-  }
-}

package/src/header.clr-addons.scss

@@ -1,377 +0,0 @@
-@mixin sliding-nav-positioning($top: 0, $right: auto, $bottom: 0, $left: 0) {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-  background: var(--clr-nav-background-color);
-  z-index: $clr-sliding-panel-z-index;
-  height: 100vh;
-}
-
-@mixin vertical-nav-link-colors() {
-  color: var(--clr-vertical-nav-item-color);
-
-  &.active {
-    color: var(--clr-vertical-nav-item-active-color);
-    background-color: var(--clr-vertical-nav-active-bg-color);
-
-    .nav-icon {
-      fill: var(--clr-vertical-nav-icon-active-color);
-    }
-  }
-}
-
-@mixin menu-trigger($right: auto, $left: 0, $transformX: $clr-sliding-panel-width + 0.5rem) {
-  position: fixed;
-  top: 0;
-  right: $right;
-  left: $left;
-  z-index: $clr-sliding-panel-z-index;
-  transform: translateX($transformX);
-  transition: $clr-trigger-animation;
-
-  &::after {
-    content: none;
-  }
-}
-
-.header-actions > .dropdown .dropdown-toggle.nav-icon clr-icon:not([shape^='caret']) {
-  height: 1.1rem;
-  width: 1.1rem;
-}
-
-@media screen and (max-width: map-get($clr-grid-breakpoints, lg)) and (min-width: map-get($clr-grid-breakpoints, md)) {
-  .main-container {
-    .header-hamburger-trigger,
-    .header-overflow-trigger {
-      display: inline-block;
-
-      border: none;
-      background: none;
-      cursor: pointer;
-      font-size: 1rem;
-      height: var(--clr-header-height);
-      width: var(--clr-header-height);
-      padding: 0 0 0.2rem 0;
-      //4px to vertically align the trigger lines. display flex was not working on all browsers.
-      text-align: center;
-      white-space: nowrap;
-      color: var(--clr-header-font-color);
-      opacity: var(--clr-header-nav-opacity);
-
-      &:enabled:hover {
-        opacity: var(--clr-header-nav-hover-opacity);
-      }
-
-      &:focus {
-        outline-offset: -0.208333rem; //So that the outline styles aren't hidden because of the browser
-      }
-    }
-
-    .header-nav.clr-nav-level-1,
-    .subnav.clr-nav-level-1,
-    .sub-nav.clr-nav-level-1,
-    .sidenav.clr-nav-level-1,
-    .clr-vertical-nav.clr-nav-level-1 {
-      @include sliding-nav-positioning();
-      transform: translateX(-1 * $clr-sliding-panel-width);
-      transition: $clr-sliding-panel-animation;
-    }
-
-    .header-nav.clr-nav-level-2,
-    .subnav.clr-nav-level-2,
-    .sub-nav.clr-nav-level-2,
-    .sidenav.clr-nav-level-2,
-    .clr-vertical-nav.clr-nav-level-2 {
-      @include sliding-nav-positioning(0, 0, 0, auto);
-      transform: translateX($clr-sliding-panel-width);
-      transition: $clr-sliding-panel-animation;
-    }
-
-    .subnav.clr-nav-level-1,
-    .sub-nav.clr-nav-level-1,
-    .subnav.clr-nav-level-2,
-    .sub-nav.clr-nav-level-2 {
-      .nav,
-      aside {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      aside {
-        justify-content: center;
-        width: 100%;
-      }
-
-      //Such deep nesting is unfortunately required here because we don't want
-      //navs which are not subnav to behave in a similar way.
-      // TODO: more specificity in classname is preferable to nesting...
-      .nav {
-        padding-left: 0;
-
-        .nav-item {
-          height: 1.5rem;
-          margin-right: 0;
-        }
-
-        .nav-link {
-          padding: 0 0.5rem 0 1rem;
-          width: 100%;
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          border-radius: var(--clr-global-borderradius) 0 0 var(--clr-global-borderradius);
-
-          @include vertical-nav-link-colors();
-
-          &:hover,
-          &.active {
-            box-shadow: none;
-          }
-        }
-      }
-    }
-
-    .sidenav.clr-nav-level-1,
-    .sidenav.clr-nav-level-2 {
-      .nav-link {
-        &:hover,
-        &.active {
-          color: inherit;
-          background: var(
-            --clr-responsive-nav-hover-bg
-          ); // Is the menu that showsup when the viewport is narrow (x-axis)
-        }
-      }
-    }
-
-    .sidenav.clr-nav-level-1,
-    .sidenav.clr-nav-level-2,
-    .clr-vertical-nav.clr-nav-level-1,
-    .clr-vertical-nav.clr-nav-level-2 {
-      border-right: none;
-    }
-
-    .header-overflow-trigger {
-      position: relative;
-
-      &::after {
-        display: inline-block;
-        position: absolute;
-        content: '';
-        background: var(--clr-header-font-color);
-        opacity: var(--clr-header-divider-opacity);
-        height: calc(var(--clr-header-height) - 1rem);
-        width: var(--clr-global-borderwidth);
-        top: 0.5rem;
-        left: 0;
-      }
-    }
-
-    .header {
-      .branding {
-        max-width: 10rem;
-        min-width: 0;
-        overflow: hidden;
-      }
-
-      .header-hamburger-trigger + .branding {
-        padding-left: 0;
-
-        //TODO: deprecate .clr-icon, .logo
-        .clr-icon,
-        .logo,
-        clr-icon {
-          display: none;
-        }
-      }
-
-      .branding + .header-overflow-trigger,
-      .header-nav + .header-overflow-trigger {
-        margin-left: auto;
-      }
-    }
-
-    &.open-hamburger-menu,
-    &.open-overflow-menu {
-      .header {
-        .header-backdrop {
-          position: fixed;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          background: var(--clr-responsive-nav-header-backdrop-bg-color, black);
-          opacity: var(--clr-responsive-nav-header-backdrop-opacity, 0.85);
-          cursor: pointer;
-          z-index: $clr-sliding-panel-backdrop-z-index;
-        }
-
-        .header-nav.clr-nav-level-1,
-        .header-nav.clr-nav-level-2 {
-          .nav-link {
-            flex: 0 0 auto;
-
-            .nav-icon,
-            .fa {
-              display: none;
-            }
-
-            .nav-text {
-              display: inline-block;
-              color: var(--clr-sliding-panel-text-color);
-              line-height: 1rem;
-              padding: 0.25rem 0 0.25rem 1rem;
-              white-space: normal;
-              font-weight: normal;
-            }
-
-            opacity: 1;
-
-            .nav-icon + .nav-text {
-              display: inline-block;
-            }
-
-            @include vertical-nav-link-colors();
-
-            &.active > .nav-text {
-              color: inherit;
-            }
-          }
-        }
-      }
-
-      .clr-vertical-nav .nav-trigger {
-        display: none;
-      }
-    }
-
-    &.open-hamburger-menu {
-      .header {
-        .branding {
-          position: fixed;
-          top: 0;
-          left: 0;
-          overflow: hidden;
-          width: $clr-sliding-panel-width;
-          max-width: $clr-sliding-panel-width;
-          z-index: $clr-sliding-panel-z-index + 1;
-          padding-left: 1rem;
-
-          & > .nav-link {
-            overflow: hidden;
-          }
-
-          //deprecate .clr-icon, .logo
-          .clr-icon,
-          .logo,
-          clr-icon {
-            display: inline-block;
-          }
-
-          .title {
-            color: var(--clr-sliding-panel-text-color);
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-        }
-      }
-
-      .header-hamburger-trigger {
-        @include menu-trigger();
-
-        > span {
-          background: transparent;
-
-          &::before,
-          &::after {
-            left: 0.15rem;
-            transform-origin: 9%;
-            transition: $clr-trigger-animation;
-          }
-
-          &::before {
-            transform: rotate(45deg);
-          }
-
-          &::after {
-            transform: rotate(-45deg);
-          }
-        }
-      }
-
-      .header-nav.clr-nav-level-1,
-      .subnav.clr-nav-level-1,
-      .sub-nav.clr-nav-level-1,
-      .sidenav.clr-nav-level-1,
-      .clr-vertical-nav.clr-nav-level-1 {
-        padding-top: calc(var(--clr-header-height) + 1rem);
-        transform: translateX(0);
-        transition: $clr-sliding-panel-animation;
-        width: $clr-sliding-panel-width;
-        max-width: $clr-sliding-panel-width;
-
-        .sidenav-content {
-          padding-bottom: 1rem;
-        }
-      }
-    }
-
-    &.open-overflow-menu {
-      .header-nav.clr-nav-level-2,
-      .subnav.clr-nav-level-2,
-      .sub-nav.clr-nav-level-2,
-      .sidenav.clr-nav-level-2,
-      .clr-vertical-nav.clr-nav-level-2 {
-        transform: translateX(0);
-        transition: $clr-sliding-panel-animation;
-        width: $clr-sliding-panel-width;
-        max-width: $clr-sliding-panel-width;
-      }
-
-      .header-nav.clr-nav-level-2,
-      .subnav.clr-nav-level-2,
-      .sub-nav.clr-nav-level-2 {
-        padding-top: 1rem;
-      }
-
-      .header-overflow-trigger {
-        @include menu-trigger(0, auto, (-1 * ($clr-sliding-panel-width + 0.5rem)));
-
-        > span {
-          background: transparent;
-
-          &::before,
-          &::after {
-            height: 0.1rem;
-            width: 1.2rem;
-            left: -0.3rem;
-            transform-origin: -3%;
-            transition: $clr-trigger-animation;
-          }
-
-          &::before {
-            transform: rotate(45deg);
-          }
-
-          &::after {
-            transform: rotate(-45deg);
-          }
-        }
-      }
-    }
-  }
-}
-
-.open-hamburger-menu .header-hamburger-trigger,
-.open-overflow-menu .header-overflow-trigger {
-  span::before {
-    background-color: white;
-  }
-  span::after {
-    background-color: white;
-  }
-}

package/src/history/history.scss

@@ -1,25 +0,0 @@
-@include exports('history.clr-addons') {
-  .history-container {
-    padding: 15px;
-  }
-
-  .history {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: -1rem;
-    list-style: none;
-    font-size: 13px;
-  }
-
-  .history-item {
-    cursor: pointer;
-    + .history-item {
-      padding-left: 0.5rem;
-      &::before {
-        content: '/';
-        display: inline-block;
-        padding-right: 0.5rem;
-      }
-    }
-  }
-}