@porscheinformatik/material-addons 0.0.34 → 0.0.99

package/themes/common/styles.scss

@@ -1,303 +1,359 @@
-@import '~@angular/material/theming';
-
-@include mat-core();
-
-$contrast: (
-  50: $dark-primary-text,
-  100: $dark-primary-text,
-  200: $dark-primary-text,
-  300: $dark-primary-text,
-  400: $dark-primary-text,
-  500: $light-primary-text,
-  600: $light-primary-text,
-  700: $light-primary-text,
-  800: $light-primary-text,
-  900: $light-primary-text,
-  A100: $dark-primary-text,
-  A200: $dark-primary-text,
-  A400: $dark-primary-text,
-  A700: $dark-primary-text,
-);
-
-@function get-main-color($color-scheme) {
-  @return map-get($color-scheme, 500);
-}
-
-@function get-selection-background($color-scheme) {
-  @return map-get($color-scheme, 50);
-}
-
-@function get-table-hover-color($color) {
-  @return rgba($color, 0.08);
-}
-
-@function get-background-color($color-scheme) {
-  @return map-get($color-scheme, background-color);
-}
-
-@mixin build-custom-theme($primary-palette, $warn-palette: mat-palette($mat-red), $theme-name: 'undefined') {
-  $material-addons-colors-primary: mat-palette($primary-palette);
-  $material-addons-colors-warn: $warn-palette;
-  $material-addons-theme: mat-light-theme($material-addons-colors-primary, $material-addons-colors-primary, $material-addons-colors-warn);
-
-  $hover-color: mat-palette($primary-palette, 50);
-
-  @include angular-material-theme($material-addons-theme);
-
-  @if variable-exists(table-hover-color) {
-    .clickable-table-row:hover,
-    .mat-row-link:hover {
-      background-color: $table-hover-color;
-    }
-  } @else {
-    @warn 'variable $table-hover-color in theme #{$theme-name} is not defined';
-  }
-
-  @if variable_exists(warn-color) {
-    .mat-form-field-required-marker {
-      color: $warn-color;
-    }
-
-    .mat-chip.mat-standard-chip.mat-warn {
-      color: $warn-color;
-      border: 1px solid $warn-color;
-    }
-  } @else {
-    @warn 'variable $warn-color in theme #{$theme-name} is not defined';
-  }
-
-  @if variable_exists(main-primary) {
-    .mat-chip-selected {
-      border: 1px solid $main-primary !important;
-      color: $main-primary !important;
-    }
-  } @else {
-    @warn 'variable $main-primary  in theme #{$theme-name} is not defined';
-  }
-
-  .mat-chip-selected {
-    background-color: white !important;
-  }
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-table {
-  width: 100%;
-}
-
-.mat-input-element:disabled {
-  cursor: auto;
-  color: black;
-}
-
-.mat-select-disabled .mat-select-value {
-  color: black;
-}
-
-.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
-  color: white;
-}
-
-.mat-checkbox-disabled .mat-checkbox-label {
-  color: black;
-}
-
-.clickable-table-row:hover,
-.mat-row-link:hover {
-  cursor: pointer;
-}
-
-.button-panel {
-  display: flex;
-  flex-direction: row;
-  padding-top: 16px;
-  padding-bottom: 8px;
-  padding-right: 16px;
-}
-
-.button-panel button {
-  margin-right: 8px;
-}
-
-.simple-edit-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.simple-edit-section > * {
-  width: 100%;
-  max-width: 640px;
-}
-
-.tiny-table-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.table-condensed > .mat-row {
-  min-height: 36px;
-}
-
-.small-input {
-  max-width: 90px !important;
-}
-
-.tiny-input {
-  max-width: 60px !important;
-}
-
-.main-content {
-  padding: 73px 16px 16px;
-}
-
-.mat-tab-header {
-  margin: -16px -16px 16px;
-}
-
-.mat-row {
-  position: relative;
-}
-
-.mat-row-link {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-
-.mat-button,
-.mat-flat-button,
-.mat-raised-button,
-.mat-stroked-button,
-.mat-icon-button {
-  text-transform: uppercase;
-}
-
-.toolbar-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.mat-select-disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.sticky-paginator {
-  background-color: white;
-  position: fixed;
-  padding-right: 16px;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 5;
-  text-align: right;
-}
-
-.with-sticky-paginator {
-  padding-bottom: 64px;
-}
-
-.criteria-panel {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.criteria-panel > * {
-  padding-right: 16px;
-}
-
-.mat-chip.mat-standard-chip {
-  background-color: white;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid rgba(0, 0, 0, 0.4);
-}
-
-.mat-chip.mat-standard-chip.mat-warn {
-  background-color: white;
-}
-
-.mat-tab-group {
-  max-width: 100%;
-}
-
-.large-icon {
-  font-size: xx-large;
-}
-
-.transparent .mat-dialog-container {
-  box-shadow: none;
-  background: rgba(0, 0, 0, 0);
-}
-
-.fixedtabs {
-  .mat-tab-header {
-    z-index: 10;
-    width: 100vw;
-    position: fixed;
-    background-color: white;
-  }
-}
-
-.mat-dialog-actions {
-  justify-content: flex-end;
-}
-
-@mixin ellipsis-text-overflow {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.ellipsis-text-overflow {
-  @include ellipsis-text-overflow;
-}
-@media print {
-  .no-print, .no-print * {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  mat-paginator {
-    display: none !important;
-    height: 0 !important;
-  }
-
-  mat-sidenav-content {
-    margin: 0 !important;
-  }
-
-  .mat-raised-button, .mat-stroked-button, .button-panel {
-    display: none !important;
-  }
-
-  .criteria-panel {
-    display: none !important;
-    height: 0 !important;
-  }
-
-  async-autocomplete mat-icon {
-    display: none !important;
-  }
-
-  .mat-tab-label:not(.mat-tab-label-active) {
-    display: none !important;
-  }
-}
+@use '@angular/material' as mat;
+
+@include mat.all-component-typographies();
+@include mat.all-component-densities(-2);
+@include mat.core();
+
+//TODO Contrasts should be part of the themes!
+$contrast: (
+  50: rgba(black, 0.87),
+  100: rgba(black, 0.87),
+  200: rgba(black, 0.87),
+  300: rgba(black, 0.87),
+  400: rgba(black, 0.87),
+  500: white,
+  600: white,
+  700: white,
+  800: white,
+  900: white,
+  A100: rgba(black, 0.87),
+  A200: rgba(black, 0.87),
+  A400: rgba(black, 0.87),
+  A700: rgba(black, 0.87),
+);
+
+@function get-main-color($color-scheme) {
+  @return map-get($color-scheme, 500);
+}
+
+@function get-selection-background($color-scheme) {
+  @return map-get($color-scheme, 50);
+}
+
+@function get-table-hover-color($color) {
+  @return rgba($color, 0.08);
+}
+
+@function get-background-color($color-scheme) {
+  @return map-get($color-scheme, background-color);
+}
+
+@mixin build-custom-theme($primary-palette, $warn-palette: mat.$red-palette, $theme-name: 'undefined') {
+  $material-addons-colors-primary: mat.define-palette($primary-palette);
+  $material-addons-colors-warn: mat.define-palette($warn-palette);
+  //$material-addons-theme: mat.define-light-theme($material-addons-colors-primary, $material-addons-colors-primary, $material-addons-colors-warn);
+
+  $material-addons-theme: mat.define-light-theme(
+    (
+      color: (
+        primary: $material-addons-colors-primary,
+        accent: $material-addons-colors-primary,
+        warn: $material-addons-colors-warn,
+      ),
+    )
+  );
+
+  $hover-color: mat.define-palette($primary-palette, 50);
+
+  @include mat.all-component-themes($material-addons-theme);
+  //setting the density for the components
+  //@include mat.form-field-density(-5);
+
+  @if variable-exists(table-hover-color) {
+    .clickable-table-row:hover,
+    .mat-row-link:hover {
+      background-color: $table-hover-color;
+    }
+  } @else {
+    @warn 'variable $table-hover-color in theme #{$theme-name} is not defined';
+  }
+
+  @if variable_exists(warn-color) {
+    .mat-mdc-form-field-required-marker {
+      color: $warn-color;
+    }
+  } @else {
+    @warn 'variable $warn-color in theme #{$theme-name} is not defined';
+  }
+
+  @if variable_exists(main-primary) {
+    .mat-mdc-outlined-button {
+      border-color: $main-primary !important;
+    }
+    .selected-drag-list {
+      border-color: $main-primary !important;
+    }
+    .active-column-definition {
+      color: $main-primary !important;
+    }
+  } @else {
+    @warn 'variable $main-primary  in theme #{$theme-name} is not defined';
+  }
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+table {
+  width: 100%;
+}
+
+.mat-mdc-input-element:disabled {
+  cursor: auto;
+  color: black;
+}
+
+.mat-mdc-select-disabled .mat-select-value {
+  color: black;
+}
+
+.mat-mdc-form-field .mat-mdc-select.mat-select-disabled .mat-select-arrow {
+  color: white;
+}
+
+.mat-mdc-checkbox-disabled .mat-checkbox-label {
+  color: black;
+}
+
+.clickable-table-row:hover,
+.mat-row-link:hover {
+  cursor: pointer;
+}
+
+.button-panel {
+  padding-top: 16px;
+  padding-bottom: 8px;
+  padding-right: 16px;
+}
+
+mad-primary-button {
+  margin-right: 8px;
+}
+
+mad-outline-button {
+  margin-right: 8px;
+}
+
+mad-link-button {
+  margin-right: 8px;
+}
+
+mad-danger-button {
+  margin-right: 8px;
+}
+
+.simple-edit-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.simple-edit-section > * {
+  width: 100%;
+  max-width: 640px;
+}
+
+.tiny-table-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.table-condensed > .mat-mdc-row {
+  min-height: 36px;
+}
+
+.small-input {
+  max-width: 90px !important;
+}
+
+.tiny-input {
+  max-width: 60px !important;
+}
+
+.main-content {
+  padding: 73px 16px 16px;
+}
+
+.mat-mdc-tab-header {
+  margin: -16px -16px 16px;
+}
+
+.mat-mdc-row {
+  position: relative;
+}
+
+.mat-row-link {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.mat-mdc-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+.mat-mdc-icon-button {
+  text-transform: uppercase;
+}
+
+.toolbar-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.mat-mdc-select-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.sticky-paginator {
+  background-color: white;
+  position: fixed;
+  padding-right: 16px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+  text-align: right;
+}
+
+.with-sticky-paginator {
+  padding-bottom: 64px;
+}
+
+.criteria-panel {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.criteria-panel > * {
+  padding-right: 16px;
+}
+
+.mat-mdc-tab-group {
+  max-width: 100%;
+}
+
+.large-icon {
+  font-size: xx-large;
+}
+
+.transparent .mat-mdc-dialog-container {
+  box-shadow: none;
+  background: rgba(0, 0, 0, 0);
+}
+
+/*
+* This class can be used to fix mat-tabs at the top of a page
+*/
+.fixedtabs > .mat-mdc-tab-header {
+  z-index: 10;
+  width: 100vw;
+  position: fixed;
+  background-color: white;
+}
+
+.mat-mdc-dialog-actions {
+  justify-content: flex-end;
+}
+
+.mat-md-card-header-text {
+  margin: 0 !important;
+}
+
+@mixin ellipsis-text-overflow {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ellipsis-text-overflow {
+  @include ellipsis-text-overflow;
+}
+
+@media print {
+  .no-print,
+  .no-print * {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+  mat-paginator {
+    display: none !important;
+    height: 0 !important;
+  }
+
+  mat-sidenav-content {
+    margin: 0 !important;
+  }
+
+  .mat-mdc-raised-button,
+  .mat-mdc-outlined-button,
+  .button-panel {
+    display: none !important;
+  }
+
+  mad-primary-button,
+  mad-outline-button,
+  mad-danger-button,
+  mad-link-button,
+  mad-icon-button {
+    display: none !important;
+  }
+
+  .criteria-panel {
+    display: none !important;
+    height: 0 !important;
+  }
+
+  async-autocomplete mat-icon {
+    display: none !important;
+  }
+  .mat-mdc-tab-label:not(.mat-tab-label-active) {
+    display: none !important;
+  }
+}
+
+.mad-read-only {
+  mat-label {
+    color: black;
+  }
+  .content {
+    color: black !important;
+  }
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__notch,
+  .mdc-notched-outline__trailing {
+    border: none !important;
+  }
+}
+
+// needed for the padding fix when subscriptSizing: 'dynamic'
+mat-form-field .mat-mdc-form-field {
+  &-subscript-wrapper {
+    margin-bottom: 1.25em;
+  }
+}
+
+// the label of the outline input is set into the padding of the form-field-component
+.mat-form-field-appearance-outline {
+  margin-top: 8px;
+}
+
+.pointer {
+  cursor: pointer;
+}