@porscheinformatik/clr-addons 11.2.0 → 12.1.0

package/src/content-panel/content-panel.scss

@@ -1,90 +0,0 @@
-@include exports('content-panel.clr-addons') {
-  :root {
-    --clr-content-panel-width: 456px;
-  }
-
-  .content-panel-container {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .content-panel-outer-wrapper {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-  }
-
-  @media screen and (min-width: map-get($clr-grid-breakpoints, xl)) {
-    .content-panel-outer-wrapper {
-      order: 1;
-    }
-  }
-
-  .content-panel {
-    // Position content-panel to the right of the main content
-    order: 2;
-  }
-
-  .content-panel-content-wrapper {
-    background-color: var(--clr-global-app-background);
-    z-index: map-get($clr-layers, sidepanel-bg) - 1;
-    padding: 1rem;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    border-left: var(--clr-global-borderwidth) solid var(--clr-border-color);
-    overflow: auto;
-
-    @media screen and (min-width: map-get($clr-grid-breakpoints, md)) {
-      width: var(--clr-content-panel-width);
-    }
-
-    @media screen and (min-width: map-get($clr-grid-breakpoints, xl)) {
-      position: relative;
-      height: 100%;
-    }
-
-    @media screen and (max-width: map-get($clr-grid-breakpoints, md)) {
-      width: 100%;
-      border: none;
-    }
-  }
-
-  .content-panel-title {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    line-height: 1.5rem;
-  }
-
-  .content-panel-backdrop {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background-color: var(--clr-color-neutral-900);
-    opacity: 0.85;
-    z-index: map-get($clr-layers, sidepanel-bg) - 2;
-
-    @media screen and (max-width: map-get($clr-grid-breakpoints, md)) {
-      display: none;
-    }
-
-    @media screen and (min-width: map-get($clr-grid-breakpoints, xl)) {
-      display: none;
-    }
-  }
-
-  .content-panel-close-btn {
-    line-height: 1rem;
-  }
-
-  .close .content-panel-close-icon {
-    fill: var(--clr-link-color);
-  }
-
-  .close:hover .content-panel-close-icon {
-    fill: var(--clr-link-hover-color);
-  }
-}

package/src/date-time-container/date-time-container.scss

@@ -1,18 +0,0 @@
-@include exports('date-time-container.clr-addons') {
-  .date-time-container {
-    clr-date-container {
-      flex: 1 1 auto;
-      margin-left: 0;
-      margin-right: 0;
-
-      // Places the time input next to the date input on the same height.
-      .clr-input-wrapper {
-        display: flex;
-      }
-    }
-
-    input[type='time'] {
-      margin-left: 1rem;
-    }
-  }
-}

package/src/dot-pager/dot-pager.scss

@@ -1,11 +0,0 @@
-@include exports('dot-pager.clr-addons') {
-  .dot-pager {
-    .clr-control-container {
-      margin: auto;
-    }
-
-    .clr-radio-wrapper input[type='radio']:checked + label::before {
-      box-shadow: inset 0 0 0 1rem var(--clr-forms-checkbox-background-color);
-    }
-  }
-}

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;
-      }
-    }
-  }
-}