@porscheinformatik/clr-addons 12.0.1 → 12.1.0

package/src/components.clr-addons.scss

@@ -1,395 +0,0 @@
-@import './mixins';
-
-@import './header.clr-addons';
-@import './collapse-expand-section/collapse-expand-section';
-@import './main-nav-group/main-nav-group';
-@import './paged-search-result-list/paged-search-result-list';
-@import './pager/pager';
-@import './dot-pager/dot-pager';
-@import './view-edit-section/view-edit-section';
-@import './content-panel/content-panel';
-@import './breadcrumb/breadcrumb';
-@import './notification/notification';
-@import './flow-bar/flow-bar';
-@import './back-button/back-button';
-@import './treetable/treetable';
-@import './progress-spinner/progress-spinner';
-@import './numericfield/numeric-field';
-@import './date-time-container/date-time-container';
-@import './searchfield/search-field';
-@import './quick-list/quick-list';
-@import './letter-avatar/letter-avatar';
-@import './brand-avatar/brand-avatar';
-@import './multilingual/multilingual';
-@import './generic-quick-list/generic-quick-list';
-@import './history/history.scss';
-@import './location-bar/location-bar-node/location-bar-node.component.scss';
-
-html,
-body,
-.main-container {
-  height: 100%;
-}
-
-.main-container,
-.u-main-container {
-  > .content-container {
-    border-top: var(--clr-global-borderwidth) solid var(--clr-border-color);
-  }
-
-  .content-header {
-    padding: 0.5rem 0.5rem 0 1rem;
-    display: flex;
-    flex: 0 0 auto;
-
-    h2 {
-      margin-top: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .command-bar {
-      display: flex;
-      flex: 1 0 auto;
-      justify-content: flex-end;
-      align-items: flex-start;
-    }
-  }
-}
-
-.content-container {
-  // Define the sticky footer css when inside a content-container
-  .content-area-footer {
-    border-top: var(--clr-global-borderwidth) solid var(--clr-border-color);
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    padding: 0.25rem 1rem;
-    background-color: var(--clr-global-app-background);
-    min-height: 2rem;
-
-    // For some reason clarity sets the margin to 0 for dropdown buttons - we want the default btn margin inside the footer
-    .dropdown .dropdown-toggle {
-      margin-right: 0.5rem;
-    }
-  }
-}
-
-// Classes active and clickable add a border around the whole card.
-// Classes card-active and selectable add a border to the left side only.
-.card {
-  .list-group-item.list-group-item-action:hover {
-    background-color: var(--clr-global-selection-color);
-    cursor: pointer;
-  }
-
-  &.active {
-    box-shadow: 0 0.125rem 0 0 var(--clr-card-active-border-color);
-    border: var(--clr-global-borderwidth) solid var(--clr-card-active-border-color);
-    cursor: default;
-    text-decoration: none;
-    transform: translateY(-2px);
-    transition: border 0.2s ease, transform 0.2s ease;
-
-    &.clickable:hover {
-      cursor: default;
-    }
-  }
-
-  @mixin disable-card-clickable-hover() {
-    &.clickable:hover {
-      border-radius: var(--clr-card-border-radius);
-      border-width: var(--clr-card-border-width);
-      border-color: var(--clr-card-border-color);
-      border-style: solid;
-      box-shadow: var(--clr-card-box-shadow);
-      cursor: default;
-      transform: none;
-      transition: none;
-
-      &.active:hover {
-        box-shadow: 0 0.125rem 0 0 var(--clr-card-active-border-color);
-        border: var(--clr-global-borderwidth) solid var(--clr-card-active-border-color);
-        transform: translateY(-2px);
-      }
-    }
-  }
-
-  @mixin card-active-after() {
-    content: '';
-    width: 0.1667rem;
-    position: absolute;
-    background: var(--clr-card-active-border-color);
-    top: -1px;
-    left: -1px;
-    bottom: 0;
-    border-top-left-radius: var(--clr-card-border-radius);
-    border-bottom-left-radius: var(--clr-card-border-radius);
-  }
-
-  &.card-active::after {
-    @include card-active-after();
-  }
-
-  @mixin card-handle-hover() {
-    &.selectable:hover::after {
-      @include card-active-after();
-    }
-
-    &.selectable:hover {
-      border-radius: var(--clr-card-border-radius);
-      border-width: var(--clr-card-border-width);
-      border-color: var(--clr-card-border-color);
-      border-style: solid;
-      cursor: pointer;
-      transform: translateY(-2px);
-      transition: border 0.2s ease, transform 0.2s ease;
-      z-index: 1;
-
-      &.card-active:hover {
-        cursor: default;
-        transform: none;
-        transition: none;
-      }
-    }
-  }
-
-  // firefox needs this, because the hover in @media (hover: hover) is not supported
-  @-moz-document url-prefix() {
-    @include card-handle-hover();
-  }
-
-  @media (hover: hover) {
-    @include card-handle-hover();
-  }
-
-  @media (hover: none) {
-    @include disable-card-clickable-hover();
-  }
-
-  &.card-placeholder {
-    border-left-style: dashed;
-    border-top-style: dashed;
-    border-right-style: dashed;
-  }
-}
-
-.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 {
-  .nav-link .nav-text,
-  .nav-list > .nav-link {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: block;
-  }
-}
-
-.datagrid-no-select-all .datagrid-header .datagrid-select .clr-checkbox-wrapper {
-  display: none;
-}
-
-// Enable highlighting of rows in a table by adding a new class 'highlight'
-.table {
-  tbody {
-    tr {
-      &.highlight {
-        background-color: var(--clr-global-selection-color);
-      }
-    }
-  }
-}
-
-@mixin required-asterisk($color: var(--red-dark)) {
-  position: relative;
-
-  &:after {
-    position: absolute;
-    content: '*';
-    font-size: 0.58479532rem; // Approximately 14px.
-    line-height: 0.5rem;
-    color: $color;
-    margin-left: 0.25rem;
-    margin-top: 0.25rem;
-  }
-}
-
-form {
-  .required {
-    @include required-asterisk();
-  }
-
-  .required-multiple {
-    @include required-asterisk(var(--orange-light));
-  }
-}
-
-// Readonly checkboxes, radiobuttons
-clr-radio-container[readonly][show-only-selected='true'] .clr-radio-wrapper input:not(:checked),
-clr-checkbox-container[readonly][show-only-selected='true'] .clr-checkbox-wrapper input:not(:checked) {
-  display: none;
-
-  + label {
-    display: none;
-  }
-}
-
-clr-radio-container[readonly].readonly-danger .clr-radio-wrapper input[type='radio'],
-clr-checkbox-container[readonly].readonly-danger .clr-checkbox-wrapper input[type='checkbox'] {
-  &:checked + label {
-    color: var(--clr-btn-danger-bg-color);
-
-    &::before {
-      border-color: var(--clr-btn-danger-bg-color);
-    }
-  }
-}
-
-clr-radio-container[readonly] .clr-radio-wrapper input[type='radio'],
-clr-checkbox-container[readonly] .clr-checkbox-wrapper input[type='checkbox'] {
-  pointer-events: none;
-
-  + label {
-    pointer-events: none;
-  }
-
-  + label::before {
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    transform: rotate(45deg);
-    background: var(--clr-forms-radio-label-color);
-    top: 0.5rem;
-    left: 1px;
-    width: 0.6rem;
-    height: 1px;
-  }
-
-  + label::after {
-    border: 0;
-    border-radius: 0;
-    content: '';
-    display: inline-block;
-    transform: rotate(-45deg);
-    background: var(--clr-forms-radio-label-color);
-    position: absolute;
-    top: 0.5rem;
-    left: 1px;
-    width: 0.6rem;
-    height: 1px;
-  }
-
-  &:checked {
-    + label::before {
-      content: '';
-      background: none;
-      box-shadow: none;
-      border-left: 2px solid var(--clr-forms-checkbox-mark-color);
-      border-bottom: 2px solid var(--clr-forms-checkbox-mark-color);
-      border-color: var(--clr-btn-success-bg-color);
-      position: absolute;
-      top: 0.3rem;
-      left: 0.1rem;
-      width: 0.5rem;
-      height: 0.3rem;
-      transform: rotate(-45deg);
-    }
-
-    + label::after {
-      content: none;
-    }
-  }
-}
-
-// FORM OVERRIDES BELOW
-
-// forms should never be bigger than 1200px
-form,
-.form {
-  max-width: 1200px;
-
-  h4:not(:first-child) {
-    margin-top: 2rem;
-  }
-
-  // Fix alignment of label & values
-  .clr-control-label {
-    line-height: inherit;
-  }
-}
-
-// Set max width for the date picker - Only needs to be as wide as the displayed date
-clr-date-container .clr-control-container {
-  .clr-input-group {
-    max-width: 7rem;
-
-    .clr-input {
-      max-width: 5.5rem;
-    }
-  }
-}
-
-.clr-input-group {
-  width: 100%;
-  max-width: 100%;
-
-  &.clr-focus {
-    width: 100%;
-  }
-
-  // Set all input widths inside a clr-input-group to 100% minus the icons width
-  > .clr-input {
-    // Except for the ClrDataListInput and ClrDate, because this one just looks terrible otherwise (clarity using diff icon here)
-    &:not([clrdatalistinput]):not([clrdate]) {
-      width: calc(100% - 1.5rem);
-    }
-  }
-}
-
-// Set the width of all inputs except time and date to 100%
-.clr-input-wrapper {
-  max-width: none;
-  input:not([type='time']):not([clrdate]) {
-    width: 100%;
-  }
-}
-
-// Set the width of text areas and selects to 100%
-.clr-control-container {
-  .clr-textarea-wrapper textarea {
-    width: 100%;
-    flex: 1 0 auto;
-  }
-
-  .clr-select-wrapper {
-    display: block;
-
-    select {
-      width: 100%;
-    }
-  }
-}
-
-// This avoids the disposition of the clr select arrow icon if a validation error occurs.
-.clr-error {
-  .clr-select-wrapper::after {
-    right: 0.25rem;
-  }
-}
-
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.btn clr-icon {
-  transform: translate3d(0, -0.1rem, 0);
-}
-
-.clr-treenode-link:hover:visited {
-  color: inherit;
-}
-
-// Has to be at the bottom to override the styles from the above properly
-@import './mobile';

package/src/components.variables.clr-addons.scss

@@ -1,42 +0,0 @@
-:root {
-  --clr-border-color: var(--clr-color-neutral-400);
-  --clr-card-default-border-color: rgba(215, 215, 215, 1);
-  --clr-card-active-border-color: rgba(0, 148, 210, 1);
-  --clr-header-height: 3rem;
-  --clr-footer-height: 2.5rem;
-  --clr-notification-progress-info-bar-color: var(--clr-progress-default-color);
-}
-
-$clr-grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-) !default;
-
-$clr-layers: (
-  content: 0,
-  select-box: 2,
-  datagrid-row: 500,
-  datagrid-row-sticky: 500,
-  datagrid-header: 501,
-  datagrid-header-sticky: 502,
-  datagrid-host: 590,
-  alert: 1033,
-  sidepanel-bg: 1038,
-  sidepanel: 1039,
-  modal-bg: 1040,
-  modal: 1050,
-  dropdown-menu: 1060,
-  column-switch: 1060,
-  tooltips: 1070,
-  smart-popover: 5000,
-  draggable-ghost: 2147483647,
-) !default;
-
-$clr-sliding-panel-width: 18rem;
-$clr-sliding-panel-animation: transform 0.3s ease;
-$clr-trigger-animation: transform 0.6s ease;
-$clr-sliding-panel-z-index: map-get($clr-layers, sidepanel);
-$clr-sliding-panel-backdrop-z-index: map-get($clr-layers, sidepanel-bg);

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