@porscheinformatik/clr-addons 12.1.0 → 12.2.0

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

@@ -0,0 +1,95 @@
+@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

@@ -0,0 +1,219 @@
+@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

@@ -0,0 +1,377 @@
+@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

@@ -0,0 +1,25 @@
+@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;
+      }
+    }
+  }
+}