@porscheinformatik/clr-addons 11.2.0 → 12.1.0

package/src/mobile.scss

@@ -1,103 +0,0 @@
-@media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
-  .open-overflow-menu {
-    overflow: hidden;
-  }
-
-  .header {
-    position: fixed;
-    width: 100%;
-    z-index: map-get($clr-layers, sidepanel);
-    top: 0;
-    left: 0;
-  }
-
-  .content-header {
-    padding: 0 0.5rem;
-
-    .command-bar {
-      margin-right: 0;
-      align-items: center;
-    }
-  }
-
-  .main-container .content-container .content-area,
-  .content-container .content-area-footer,
-  .content-panel-content-wrapper {
-    padding: 0.5rem;
-  }
-
-  //prevents the upper body part from being hidden by the fixed header
-  body {
-    padding-top: var(--clr-header-height);
-  }
-
-  //main-container needs the display:block property in order to work properly on safari
-  .main-container {
-    display: block;
-    overflow-y: auto;
-  }
-
-  .u-main-container {
-    min-height: 100%;
-  }
-
-  //every container which contains .content-area-footer class needs padding-bottom
-  //due to fixed positioning of the .content-area-footer
-  .content-container-fixed-footer {
-    padding-bottom: var(--clr-footer-height);
-  }
-
-  //Make footer sticky on sm screen size as the .main-container class gets the property display:block (instead of display:flex)
-  .content-container {
-    .content-area-footer {
-      position: fixed;
-      width: 100%;
-      height: var(--clr-footer-height);
-      // Sticky footer should be shown above datagrid-host but below column-switch
-      z-index: map-get($clr-layers, datagrid-host) + 5;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  .modal {
-    .modal-header,
-    .modal-footer {
-      padding-right: 0;
-    }
-  }
-
-  .card {
-    margin-top: 0.5rem;
-  }
-
-  .signpost {
-    .signpost-content {
-      width: max-content;
-      min-width: 5rem;
-      max-width: calc(100% - 2rem);
-      margin: auto;
-      position: fixed !important;
-      top: 0 !important;
-      bottom: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      height: max-content !important;
-      transform: unset !important;
-
-      .popover-pointer {
-        display: none;
-      }
-
-      .signpost-action.close {
-        width: 1rem;
-        height: 1rem;
-
-        clr-icon {
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-  }
-}

package/src/multilingual/multilingual.scss

@@ -1,39 +0,0 @@
-@include exports('multilingual.clr-addons') {
-  .clr-multilingual {
-    .clr-control-container {
-      display: flex;
-    }
-
-    .clr-multilingual-button {
-      line-height: 0.458333rem;
-      height: 1rem;
-      min-width: 3.2rem;
-      max-width: 3.2rem;
-      --clr-btn-border-radius: 0.5rem;
-
-      &:focus {
-        outline: none;
-        color: var(--clr-btn-default-outline-hover-color);
-        background-color: var(--clr-btn-default-outline-hover-bg-color);
-      }
-    }
-
-    .clr-multilingual-dd-entry {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-
-      .label {
-        text-transform: uppercase;
-        width: 2rem;
-      }
-    }
-
-    clr-multilingual-selector {
-      margin-right: 0.3rem;
-    }
-
-    .clr-multi-input-wrapper {
-      width: 100%;
-    }
-  }
-}

package/src/notification/notification.scss

@@ -1,94 +0,0 @@
-@mixin progress-color($alertLevel, $color) {
-  &.#{$alertLevel} {
-    progress {
-      color: $color;
-
-      &::-webkit-progress-value {
-        background-color: $color;
-      }
-
-      &::-moz-progress-bar {
-        background-color: $color;
-      }
-    }
-  }
-}
-
-@include exports('notification.clr-addons') {
-  .notification {
-    &__wrapper {
-      position: fixed;
-      z-index: map-get($clr-layers, tooltips) + 1;
-      top: 36px;
-      width: 400px;
-      left: 0;
-      right: 0;
-      border-radius: 4px;
-      margin: 0 auto;
-      overflow: hidden;
-
-      @media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
-        width: calc(100% - 2rem);
-        margin: 0 1rem;
-      }
-    }
-
-    .progress {
-      height: 0.5em;
-      position: absolute;
-      z-index: 1;
-
-      @include progress-color('info', var(--clr-notification-progress-info-bar-color));
-      @include progress-color('success', var(--clr-progress-alt-color-1));
-      @include progress-color('warning', var(--clr-progress-alt-color-3));
-      @include progress-color('danger', var(--clr-progress-alt-color-2));
-    }
-
-    .alert-items {
-      padding: 0.333333rem calc(0.75rem - 1px);
-    }
-
-    .alert-app-level {
-      font-size: 14px;
-
-      .alert-icon {
-        height: 1.4rem;
-        width: 1.4rem;
-      }
-
-      .alert-items {
-        padding-top: 0.86rem;
-        padding-bottom: 0.86rem;
-
-        .alert-item {
-          justify-content: left;
-
-          .alert-text {
-            white-space: pre-wrap;
-          }
-        }
-      }
-
-      .alert-icon-wrapper {
-        margin-top: 0.05rem;
-        height: 1.2rem;
-      }
-
-      .close {
-        flex: 0 0 2.266667rem;
-        height: 3rem;
-        width: 2rem;
-
-        &:focus {
-          box-shadow: none;
-        }
-
-        clr-icon {
-          margin: auto 0;
-          height: calc(1.3rem - 1px);
-          width: calc(1.3rem - 1px);
-        }
-      }
-    }
-  }
-}

package/src/numericfield/numeric-field.scss

@@ -1,18 +0,0 @@
-@include exports('numericfield.clr-addons') {
-  .numeric-input-wrapper {
-    position: relative;
-
-    .unit {
-      position: absolute;
-      font-size: 13px;
-    }
-
-    .unit-left {
-      left: 0.25rem;
-    }
-
-    .unit-right {
-      right: 0.25rem;
-    }
-  }
-}

package/src/paged-search-result-list/paged-search-result-list.scss

@@ -1,10 +0,0 @@
-@include exports('paged-search-result-list.clr-addons') {
-  .pager-top,
-  .pager-bottom {
-    margin: auto;
-  }
-
-  .pager-bottom {
-    margin-top: 1rem;
-  }
-}

package/src/pager/pager.scss

@@ -1,22 +0,0 @@
-@include exports('pager.clr-addons') {
-  .pager {
-    .btn {
-      min-width: 1.5rem;
-    }
-
-    button:disabled {
-      border-color: var(--clr-btn-default-color);
-      opacity: 1;
-    }
-  }
-  @media (hover: none) {
-    .pager .btn:not(.btn-primary):hover {
-      background-color: var(--clr-btn-default-bg-color);
-      color: var(--clr-btn-default-color);
-    }
-    .pager .btn.btn-primary:hover {
-      background-color: var(--clr-btn-primary-bg-color);
-      color: var(--clr-btn-primary-color);
-    }
-  }
-}

package/src/progress-spinner/progress-spinner.scss

@@ -1,15 +0,0 @@
-@include exports('spinner.clr-addons') {
-  .progress-spinner-overlay {
-    background-color: var(--white);
-    opacity: 0.8;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 99999;
-  }
-}

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

@@ -1,23 +0,0 @@
-@include exports('quick-list.clr-addons') {
-  .quick-list {
-    .quick-list-option {
-      display: flex;
-      margin-bottom: 0.25rem;
-      .quick-list-trash {
-        margin-top: -0.25rem;
-      }
-    }
-    .quick-list-input {
-      flex: 1;
-    }
-
-    .quick-list-select {
-      width: 100%;
-    }
-
-    .quick-list-add {
-      padding: 0;
-      text-align: left;
-    }
-  }
-}

package/src/searchfield/search-field.scss

@@ -1,33 +0,0 @@
-@include exports('searchfield.clr-addons') {
-  .search-input-wrapper {
-    position: relative;
-
-    .search-input {
-      padding-left: 1.4rem;
-      padding-right: 1.2rem;
-    }
-
-    &.has-value {
-      .delete-button {
-        display: inline-block;
-        position: absolute;
-        right: 0;
-        top: 0.25rem;
-        height: 16px;
-        line-height: 1rem;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    .delete-button {
-      display: none;
-    }
-
-    .search-symbol {
-      position: absolute;
-      left: 0.25rem;
-      top: 0.25rem;
-    }
-  }
-}

package/src/themes/phs/css.overrides.scss

@@ -1,148 +0,0 @@
-:root[cds-theme~='phs'] {
-  .header .header-nav .nav-link.active {
-    background: var(--clr-global-selection-color);
-  }
-
-  header,
-  .header {
-    .header-actions {
-      > .dropdown > .nav-icon > clr-icon {
-        color: var(--turquoise-darkest);
-      }
-
-      .nav-icon > clr-icon {
-        color: var(--turquoise-darkest);
-      }
-    }
-
-    .settings .nav-icon > clr-icon {
-      color: var(--turquoise-darkest);
-    }
-
-    .branding {
-      min-width: 4rem;
-    }
-  }
-
-  .card {
-    &.selectable:hover::after,
-    &.card-active::after {
-      top: 0;
-    }
-  }
-
-  .card-img {
-    &:first-child > img {
-      border-radius: var(--clr-card-border-radius) var(--clr-card-border-radius) 0 0;
-    }
-
-    &:last-child > img {
-      border-radius: 0 0 var(--clr-card-border-radius) var(--clr-card-border-radius);
-    }
-  }
-
-  .card.card-img,
-  .card > .card-img:first-child:last-child {
-    & > img {
-      border-radius: var(--clr-card-border-radius);
-    }
-  }
-
-  .datagrid .datagrid-table .datagrid-column {
-    .datagrid-filter-toggle {
-      &:hover,
-      &.datagrid-filter-open {
-        cds-icon {
-          --color: var(--turquoise);
-        }
-      }
-    }
-
-    .datagrid-column-title .sort-icon {
-      --color: var(--turquoise);
-    }
-  }
-
-  .datagrid-footer .column-switch-wrapper .column-toggle--action:hover cds-icon {
-    --color: var(--turquoise);
-  }
-
-  .spinner:not(.spinner-check) {
-    background: generateSpinnerIcon($black, $turquoise);
-
-    &.spinner-inverse {
-      background: generateSpinnerIcon($white, $turquoise);
-    }
-  }
-
-  clr-tooltip clr-icon {
-    color: var(--turquoise);
-  }
-
-  clr-icon {
-    &.is-green,
-    &.is-success {
-      fill: var(--clr-icon-color-success);
-    }
-
-    &.is-danger {
-      fill: var(--clr-icon-color-danger);
-    }
-
-    &.is-red,
-    &.is-error {
-      fill: var(--clr-icon-color-error);
-    }
-
-    &.is-warning {
-      fill: var(--clr-icon-color-warning);
-    }
-
-    &.is-blue,
-    &.is-info {
-      fill: var(--clr-icon-color-info);
-    }
-
-    &.is-highlight {
-      fill: var(--clr-icon-color-highlight);
-    }
-  }
-
-  // Bootstrap text color overrides
-  .text-primary {
-    color: var(--clr-text-color-primary) !important;
-  }
-
-  .text-success {
-    color: var(--clr-text-color-success) !important;
-  }
-
-  .text-info {
-    color: var(--clr-text-color-info) !important;
-  }
-
-  .text-warning {
-    color: var(--clr-text-color-warning) !important;
-  }
-
-  .text-danger {
-    color: var(--clr-text-color-danger) !important;
-  }
-
-  .header .header-actions > .dropdown .dropdown-toggle.nav-icon,
-  .dropdown .dropdown-toggle {
-    clr-icon[shape^='caret'] {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 0.5rem;
-      width: 0.5rem;
-      right: 0.6rem;
-    }
-  }
-
-  .clr-combobox-wrapper,
-  .clr-combobox-input {
-    width: 100%;
-  }
-}

package/src/themes/phs/phs-theme.scss

@@ -1,13 +0,0 @@
-@import './variables.color';
-
-// Component variables
-@import '../../components.variables.clr-addons';
-
-// Clarity Addons Component
-@import '../../components.clr-addons';
-
-// Custom theme
-@import './theme.clarity';
-
-// Custom CSS overrides
-@import './css.overrides';