@quadrel-enterprise-ui/framework 19.8.1 → 20.0.0

package/src/assets/styles/components/_components.datePicker.scss

@@ -1,204 +0,0 @@
-@import "../../styles/settings/settings.colors";
-@import "../../styles/tools/tools.all";
-
-.mat-form-field.date-picker {
-  $date-picker-height: $form-field-height;
-  $date-picker-margin-button: $form-field-margin-button;
-  $date-picker-input-height: 2.25rem;
-
-  overflow: hidden;
-  height: $date-picker-height;
-  border-bottom: $date-picker-margin-button;
-  line-height: unset;
-  transform: translateY(0);
-
-  .mat-form-field-wrapper {
-    margin-top: 0 !important;
-    transform: translateY(-0.375rem);
-  }
-
-  .mat-form-field-flex {
-    padding-right: 0 !important;
-    margin-top: 0;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  .mat-form-field-infix {
-    height: 2.5rem;
-    padding: 0.563rem 0;
-    /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
-    border: none !important;
-    border-top-width: 0.25rem;
-    margin: 0;
-    line-height: unset !important;
-  }
-
-  .mat-input-element {
-    position: relative;
-    top: -0.5rem;
-    height: auto;
-    padding-right: 2.25rem;
-    margin: 0.25rem 0 0.0625rem 0.0625rem;
-    line-height: unset !important;
-    transform: translateY(0.5625rem);
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    .mat-input-element {
-      color: $licorice;
-    }
-  }
-
-  input {
-    margin-top: 0;
-    font-size: 0.9375rem;
-    font-weight: 400;
-    line-height: $date-picker-input-height;
-
-    &::placeholder {
-      color: $licorice !important;
-      line-height: 2.125rem !important;
-    }
-  }
-
-  .mat-form-field-label-wrapper {
-    top: 0;
-    overflow: unset;
-    height: 1rem;
-    padding-top: 0;
-    transform: translateY(0.125rem);
-
-    .mat-form-field-label {
-      top: -0.9375rem;
-      width: auto;
-      height: 1rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-      transform: none;
-
-      // mat-form-field-label
-    }
-  }
-
-  .mat-form-field-suffix {
-    position: static !important;
-    top: unset !important;
-    transform: initial !important;
-  }
-
-  .mat-datepicker-toggle {
-    position: static;
-    top: unset;
-    display: block;
-  }
-
-  .mat-button-wrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  .mat-icon-button {
-    position: absolute;
-    top: 0.3125rem;
-    right: 0;
-    width: 2.25rem !important;
-    height: 2.125rem !important;
-    align-items: unset !important;
-    border: none;
-
-    svg {
-      width: 1.25rem;
-      height: 1.25rem;
-      font-size: 0.9375rem;
-
-      path {
-        // TODO: delete after Icon refactoring
-        fill: transparent !important;
-      }
-    }
-
-    &:active,
-    &:focus,
-    &:hover {
-      border: none;
-    }
-  }
-
-  &.ng-invalid:not(.ng-untouched) {
-    .qd-icon {
-      color: $error-default;
-    }
-
-    .mat-input-element::placeholder {
-      color: $error-default !important;
-    }
-  }
-
-  .mat-form-field-hint-wrapper {
-    overflow: visible;
-    transform: translateY(0.09375rem) !important;
-  }
-
-  .mat-hint {
-    height: 1.5rem;
-  }
-}
-
-.mat-datepicker-content {
-  border-radius: 0 !important;
-}
-
-.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
-  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
-.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
-.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
-  background-color: $distance;
-}
-
-button.mat-button-base:not(.mat-flat-button) {
-  color: $licorice !important;
-}
-
-.mat-calendar-body-today:not(.mat-calendar-body-selected) {
-  border-color: $licorice;
-}
-
-.mat-calendar-table-header {
-  color: $ash;
-}
-
-.mat-calendar-table-header-divider::after {
-  background: $light-gray;
-}
-
-.mat-calendar-body-cell-content {
-  border-color: transparent;
-  color: $licorice;
-}
-
-.mat-calendar-body-selected {
-  background-color: $cerulean;
-  color: $white !important;
-}
-
-.mat-calendar-previous-button::after,
-.mat-calendar-next-button::after {
-  top: -0.4375rem !important;
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-top-width: 0.0625rem;
-  border-left-width: 0.0625rem;
-}
-
-.mat-calendar-previous-button::after {
-  transform: translateX(0.125rem) rotate(-45deg);
-}
-
-.mat-calendar-next-button::after {
-  transform: translateX(-0.125rem) rotate(45deg);
-}

package/src/assets/styles/components/_components.menuPanel.scss

@@ -1,49 +0,0 @@
-@import "../../styles/settings/settings.colors";
-@import "../../styles/tools/tools.all";
-
-.mat-menu-panel {
-  $panel-border-color: $light-gray;
-  $list-item-height: 2.25rem;
-  $panel-width: 12.875rem;
-  $panel-border-width: 0.063rem;
-  $panel-horizontal-offset: 0.5rem;
-  $panel-vertical-offset: 0.25rem;
-
-  border-radius: 0 !important;
-  transform: translate($panel-horizontal-offset, $panel-vertical-offset);
-
-  .mat-menu-content:not(:empty) {
-    padding: 0;
-  }
-
-  .mat-list {
-    min-width: $panel-width;
-    padding: 0;
-    border: $panel-border-width solid $panel-border-color;
-    margin: 0;
-  }
-
-  .mat-list-item {
-    @include font-caption;
-
-    height: inherit !important;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $distance;
-    }
-  }
-
-  .mat-list-item-content {
-    height: $list-item-height !important;
-    line-height: $list-item-height !important;
-
-    > div {
-      display: none;
-    }
-  }
-}

package/src/assets/styles/components/_components.paginator.scss

@@ -1,43 +0,0 @@
-@import "../../styles/settings/settings.colors";
-
-mat-paginator {
-  $paginator-border-bottom: $vertical-spacing-default;
-
-  margin-bottom: $paginator-border-bottom;
-
-  .mat-paginator-container {
-    min-height: unset;
-  }
-
-  .mat-paginator-page-size-select {
-    margin: 0 0 0 1rem;
-  }
-
-  .mat-form-field-wrapper {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  .mat-form-field-outline-start,
-  .mat-form-field-outline-end {
-    border-radius: 0 !important;
-  }
-
-  .mat-paginator-page-size {
-    align-items: unset;
-  }
-
-  .mat-paginator-page-size-label {
-    margin: 0;
-    line-height: 1.875rem;
-  }
-
-  .mat-paginator-range-label {
-    line-height: 1.875rem;
-  }
-
-  .mat-paginator-navigation-previous,
-  .mat-paginator-navigation-next {
-    transform: translateY(-0.125rem);
-  }
-}

package/src/assets/styles/components/_components.radio-button.scss

@@ -1,17 +0,0 @@
-@import "../../styles/settings/settings.colors";
-@import "../../styles/tools/tools.all";
-
-$radio-margin-bottom: 1rem;
-$radio-margin-right: 1rem;
-
-.mat-radio-group {
-  margin-bottom: $radio-margin-bottom;
-
-  > .mat-radio-button {
-    margin-right: $radio-margin-right;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}

package/src/assets/styles/components/_components.table.scss

@@ -1,230 +0,0 @@
-@import "../../styles/settings/settings.colors";
-@import "../../styles/tools/tools.all";
-
-mat-table.mat-table {
-  $icon-background-size: 1.875rem;
-  $icon-hover-color: $north;
-  $table-background-color: $white;
-  $table-border-width: 0.063rem;
-  $table-bottom-padding: 0;
-  $table-hover-color: $distance;
-  $table-left-right-padding: 0;
-  $table-row-height: 2.5rem;
-  $table-top-padding: 0;
-  $table-border-bottom: $vertical-spacing-default;
-
-  display: table;
-  width: 100%;
-  margin-bottom: $table-border-bottom;
-  border-collapse: collapse;
-  white-space: nowrap;
-
-  .mat-header-row,
-  .mat-row,
-  .mat-footer-row {
-    display: table-row;
-    width: 100%;
-    height: $table-row-height;
-    min-height: auto;
-    box-sizing: content-box;
-    border-right: $table-left-right-padding solid $table-background-color !important;
-    border-bottom: none;
-    border-left: $table-left-right-padding solid $table-background-color !important;
-  }
-
-  .mat-header-row {
-    border-color: $empress;
-    border-top: $table-top-padding solid $table-background-color;
-  }
-
-  .mat-row {
-    border-color: $light-gray;
-
-    .mat-cell,
-    .mat-footer-cell {
-      @include font-table-body;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $table-hover-color;
-
-      .download,
-      .close,
-      .menu {
-        opacity: 1;
-      }
-    }
-  }
-
-  .mat-footer-row {
-    border-bottom: $table-bottom-padding solid $table-background-color;
-  }
-
-  .mat-header-cell,
-  .mat-footer-cell,
-  .mat-cell {
-    display: table-cell !important;
-    height: $table-row-height;
-    padding: 0 0.5rem;
-    vertical-align: middle;
-
-    &.right {
-      text-align: right;
-    }
-
-    &.center {
-      text-align: center;
-    }
-
-    a {
-      color: $cerulean;
-      text-decoration: none;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .mat-header-cell {
-    border-bottom: $table-border-width solid $pebble;
-  }
-
-  .mat-cell {
-    border-bottom: $table-border-width solid $light-gray;
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .mat-header-cell {
-    @include font-table-header;
-  }
-
-  .download,
-  .close,
-  .menu {
-    display: inline-block;
-    width: $icon-background-size;
-    height: $icon-background-size;
-    flex: none;
-    border-radius: 50%;
-    cursor: pointer;
-    line-height: $icon-background-size;
-    text-align: center;
-    transform: translateX(0.625rem);
-    white-space: nowrap;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $north;
-    }
-  }
-
-  .download,
-  .close {
-    opacity: 0;
-  }
-
-  .menu {
-    opacity: 1;
-  }
-
-  .qd-icon[icon="overflowMenuHorizontal"] {
-    display: block !important;
-    transform: translate(-(rem(4)), -(rem(5)));
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .menu {
-    color: $empress;
-    font-size: 1.625rem;
-    vertical-align: inherit;
-  }
-
-  &:last-child::after {
-    display: table-row;
-    height: $table-bottom-padding;
-    content: "";
-  }
-
-  .main-column {
-    max-width: 12.5rem;
-    text-overflow: ellipsis;
-  }
-
-  .icon-column {
-    width: 2.8125rem;
-  }
-
-  .qd-container-type-panel & {
-    margin-bottom: 0;
-
-    mat-row.mat-row {
-      background: $smoke;
-
-      &:hover,
-      &:active,
-      &:focus {
-        background-color: $distance;
-      }
-
-      mat-cell.mat-cell {
-        font-size: 0.9375rem;
-      }
-
-      &:last-child {
-        .mat-cell {
-          border-bottom: none;
-        }
-      }
-    }
-  }
-
-  /* hide buttons when parent-container has class .qd-container-editDisabled */
-  .qd-container-editDisabled & {
-    button[qd-icon-button] {
-      display: none;
-    }
-
-    .mat-row {
-      background-color: $gainsboro !important;
-    }
-
-    .mat-cell {
-      color: $empress !important;
-    }
-  }
-
-  .mat-menu-trigger {
-    cursor: pointer;
-  }
-
-  &.mat-table-readonly .mat-row {
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: inherit;
-      cursor: initial;
-    }
-  }
-}
-
-mat-row.mat-row::before,
-mat-header-row.mat-header-row::before {
-  position: relative;
-  z-index: 100;
-  display: table-cell;
-  width: 0;
-  border: none;
-  content: "";
-}
-
-.mat-row.clickable-row {
-  cursor: pointer;
-  outline: none;
-}

package/src/assets/styles/components/forms/_components.forms.all.scss

@@ -1,8 +0,0 @@
-@import "components.forms.dropdown";
-@import "components.forms.inputFields";
-@import "components.forms.selectBox";
-@import "components.forms.textField";
-
-mat-form-field {
-  width: 100%;
-}

package/src/assets/styles/components/forms/_components.forms.dropdown.scss

@@ -1,19 +0,0 @@
-@import "../../../../assets/styles/settings/settings.colors";
-@import "../../../../assets/styles/tools/tools.convertPxToRem";
-
-$dropdown-font-size: rem(14);
-$dropdown-font-weight: 400;
-$dropdown-background-color: $white;
-$dropdown-border-width: rem(1);
-$dropdown-border-width-focus: rem(2);
-$dropdown-height: rem(36);
-$dropdown-margin-button: rem(6);
-$dropdown-suffix-right-margin: rem(16);
-$dropdown-left-padding-thick-border: rem(11);
-$dropdown-left-padding-thin-border: rem(12);
-$dropdown-left-padding: rem(12);
-$dropdown-right-padding: rem(12);
-$dropdown-line-height-thick-border: rem(34);
-$dropdown-line-height-thin-border: rem(36);
-$dropdown-options-font-size: rem(14);
-$dropdown-options-font-weight: 400;