@ihk-gfi/lux-components-theme 15.0.0 → 15.2.0

package/prebuilt-themes/luxtheme-authentic.css

@@ -144,43 +144,6 @@ lux-card mat-card[class~=lux-cursor]:hover {
   border-radius: 4px;
 }
 
-/** ########## List ########## **/
-lux-list {
-  border: 4px dashed transparent;
-}
-lux-list:focus-visible {
-  border: 4px solid rgb(0, 152, 218) !important;
-  border-radius: 4px;
-  outline: none;
-}
-lux-list lux-list-item:focus-visible {
-  outline: none;
-}
-lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card {
-  background-color: #f0f3f6 !important;
-  position: relative;
-  border-radius: 4px;
-}
-lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card:after {
-  content: "";
-  left: 0;
-  width: 6px;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  border-left: 4px solid #003366;
-  border-radius: 4px 0 0 4px;
-}
-lux-list lux-list-item lux-card mat-card {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-lux-list lux-list-item lux-card mat-card:hover {
-  background-color: #4d7094 !important;
-  border-radius: 4px;
-}
-
 /** ########## Filter-Form ########## **/
 lux-filter-form lux-menu .lux-filter-menu-trigger button:not([disabled]).mat-fab.lux-button-rounded:hover {
   background-color: #3c5772 !important;
@@ -816,6 +779,7 @@ lux-app-header-ac .lux-app-header-nav-bar .lux-header-ac-nav-menu lux-button.lux
 }
 lux-app-header-ac .lux-app-header-nav-bar .lux-header-ac-nav-menu lux-button.lux-menu-item.nav-item-selected button.lux-button .lux-button-label {
   font-weight: 600;
+  height: 33px !important;
 }
 lux-app-header-ac .lux-app-header-nav-bar .lux-header-ac-nav-menu .lux-menu-extended {
   padding: 0;
@@ -1127,7 +1091,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Blogger Sans", Roboto, Helvetica Neue, sans-serif;
+  font-family: "Blogger Sans", Source Sans Pro, Helvetica Neue, sans-serif;
 }
 
 h1 {
@@ -1290,7 +1254,7 @@ body {
 }
 
 div {
-  font-family: Roboto, Helvetica Neue, sans-serif;
+  font-family: Source Sans Pro, Helvetica Neue, sans-serif;
 }
 
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lux-file-preview-backdrop {
@@ -1351,6 +1315,15 @@ lux-card.lux-card-grow mat-card-content {
   visibility: hidden !important;
 }
 
+.lux-sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 .lux-nowrap {
   white-space: nowrap;
 }
@@ -4215,13 +4188,23 @@ lux-form-control-wrapper .lux-form-control-wrapper.lux-focused-authentic .lux-fo
   border-color: #003366;
   box-shadow: 0 0 0 1px #003366 inset;
 }
-lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-label-authentic > * {
-  color: #ec2125;
-}
 lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-container-authentic:not(.lux-no-input-row) {
   border-color: #ec2125;
   box-shadow: 0 0 0 1px #ec2125 inset;
 }
+lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-misc-authentic .lux-alert-icon {
+  color: #bf0006;
+}
+lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-misc-authentic .lux-alert-icon mat-icon.mat-icon {
+  box-sizing: border-box;
+}
+lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-misc-authentic .mat-error {
+  background-color: rgb(255, 228, 231);
+  border-radius: 4px;
+  padding-right: 2px;
+  color: #bf0006 !important;
+  box-shadow: -18px 0px 0 0 rgb(255, 228, 231), -18px -1px 0 0 rgb(255, 228, 231), 0 -1px 0 0 rgb(255, 228, 231);
+}
 lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-disabled-authentic .lux-form-control-container-authentic,
 lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-disabled-authentic .lux-form-control-label-authentic,
 lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-disabled-authentic .lux-form-control-misc-authentic > * {
@@ -4506,6 +4489,11 @@ lux-chips-ac .lux-chips mat-chip.mat-chip-disabled lux-icon mat-icon {
 lux-chips-ac .lux-chips mat-chip-list div.mat-chip-list-wrapper {
   margin: 0px 0px 0px -4px;
 }
+lux-chips-ac .lux-hide-input-border .lux-form-control-container-authentic {
+  border: none;
+  padding: 0;
+  box-shadow: none !important;
+}
 
 .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel,
 .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
@@ -4532,9 +4520,34 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
 }
 
 .lux-master-detail-ac {
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  width: 100%;
   max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: hidden;
   z-index: 10;
 }
+.lux-master-detail-ac.lux-master-detail-ac-mobile {
+  gap: 0px;
+}
+.lux-master-detail-ac .lux-master-ac-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  max-height: 100%;
+  width: 30%;
+  max-width: 500px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.lux-master-detail-ac .lux-master-ac-container.lux-master-ac-container-medium {
+  min-width: calc(50% - 15px);
+  max-width: calc(50% - 15px);
+}
 .lux-master-detail-ac .lux-master-ac-container.lux-master-closed {
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-left-style: none;
@@ -4546,12 +4559,17 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
   background-color: #fff;
 }
 .lux-master-detail-ac .lux-master-ac-container.lux-master-ac-container-mobile {
+  width: 100%;
+  max-width: unset;
   border: none;
   background-color: unset;
 }
 .lux-master-detail-ac .lux-master-header-container-ac {
   z-index: 100;
   position: relative;
+  display: flex;
+  align-items: start;
+  justify-content: center;
 }
 .lux-master-detail-ac .lux-master-header-container-ac lux-button.master-ac-toggle {
   position: absolute;
@@ -4566,9 +4584,7 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
   background-color: #fff !important;
 }
 .lux-master-detail-ac .lux-master-header-container-ac lux-button.master-ac-toggle .lux-button-icon-round.lux-lx-icon.lux-no-size {
-  padding-bottom: 2px;
-  padding-right: 1px;
-  padding-left: 1px;
+  padding-bottom: 4px;
 }
 .lux-master-detail-ac .lux-master-header-container-ac button.lux-button.lux-button-rounded:hover:not([disabled]) {
   color: #4d7094;
@@ -4588,6 +4604,10 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
 .lux-master-detail-ac .lux-master-header-container-ac mat-card-subtitle.mat-card-subtitle {
   font-size: 14px;
 }
+.lux-master-detail-ac .lux-master-header-container-ac .lux-master-header-content-container-ac {
+  flex: 1 1 100%;
+  max-width: 100%;
+}
 .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card.mat-card,
 .lux-master-detail-ac .detail-header-container .lux-detail-header-ac mat-card.mat-card,
 .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card {
@@ -4616,14 +4636,18 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
   top: 18px;
 }
 .lux-master-detail-ac .lux-master-view-ac {
-  margin: 10px 0;
+  height: 100%;
+  overflow-y: hidden;
   z-index: 100;
 }
 .lux-master-detail-ac .lux-master-view-ac lux-list {
-  border: none !important;
+  height: 100%;
+  overflow-y: auto;
 }
 .lux-master-detail-ac .lux-master-view-ac lux-list-item {
-  margin-bottom: 4px;
+  /**
+  * Die List-Items basieren auf einer Card, für die Masterliste werden hier die Schriftgrößen und der White-Space verkleinert
+  */
 }
 .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card {
   margin: 0px;
@@ -4640,39 +4664,46 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
 .lux-master-detail-ac .lux-master-view-ac lux-list-item-content {
   display: block;
 }
+.lux-master-detail-ac .lux-master-view-ac .lux-list-empty-container {
+  margin: 20px auto;
+}
+.lux-master-detail-ac .lux-master-view-ac .lux-list-empty-icon,
+.lux-master-detail-ac .lux-master-view-ac .lux-list-empty-icon-text {
+  color: rgb(158, 158, 158);
+  opacity: 1;
+  margin-bottom: 8px;
+}
 .lux-master-detail-ac lux-master-footer-ac {
-  padding: 10px 16px;
+  padding: 10px 12px 10px 16px;
   z-index: 100;
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   background-color: #fff;
 }
 .lux-master-detail-ac lux-master-footer-ac .lux-menu-extended {
-  padding: 0;
+  padding: 4px;
 }
 .lux-master-detail-ac .lux-detail-ac-container {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 20px;
+  max-height: 100%;
+}
+.lux-master-detail-ac .lux-detail-ac-container.lux-empty-detail {
+  width: 100%;
 }
 .lux-master-detail-ac .lux-detail-ac-container .lux-detail-header-ac mat-card.mat-card.lux-card {
   border: none;
 }
-.lux-master-detail-ac .lux-detail-ac-container .lux-detail-empty {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.lux-master-detail-ac .lux-detail-ac-container .lux-detail-empty.lux-mobile {
-  top: 60px;
-}
 .lux-master-detail-ac .lux-detail-ac-container .lux-detail-empty-icon,
 .lux-master-detail-ac .lux-detail-ac-container .lux-detail-empty-icon-text {
-  opacity: 0.6;
-  padding: 0 8px;
+  color: rgb(158, 158, 158);
+  opacity: 1;
 }
 .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile {
   border: none;
@@ -4682,10 +4713,13 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
   border: 2px solid #003366;
 }
 .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .back-to-master-button-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 4px;
 }
 .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .back-to-master-button-container:hover {
-  background-color: #4d7094;
+  color: #4d7094;
   cursor: pointer;
 }
 .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .back-to-master-button-container lux-button.back-to-master-button button.lux-button.lux-button-rounded {
@@ -4698,7 +4732,7 @@ lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb
 }
 .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .back-to-master-button-container .back-to-master-label {
   font-size: 16px;
-  color: #4d7094;
+  color: #003366;
 }
 .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .lux-detail-view-container {
   border: 1px solid rgba(0, 0, 0, 0.12);
@@ -4745,8 +4779,15 @@ lux-textbox .lux-textbox-container {
   padding: 1.5em;
   background-color: #ffffff;
 }
-lux-textbox .lux-textbox-container h3.lux-textbox-title {
+lux-textbox .lux-textbox-container h1.lux-textbox-title,
+lux-textbox .lux-textbox-container h2.lux-textbox-title,
+lux-textbox .lux-textbox-container h3.lux-textbox-title,
+lux-textbox .lux-textbox-container h4.lux-textbox-title,
+lux-textbox .lux-textbox-container h5.lux-textbox-title,
+lux-textbox .lux-textbox-container h6.lux-textbox-title {
   margin: 0;
+  font-size: 20px;
+  font-weight: 500;
 }
 lux-textbox .lux-textbox-container .lux-textbox-icon {
   width: 24px;
@@ -4834,7 +4875,7 @@ lux-icon.lux-error-icon mat-icon.lux-icon:hover {
  * Styling for LUX-Button
  */
 lux-button button.lux-button {
-  font-family: Roboto, Helvetica Neue, sans-serif;
+  font-family: Source Sans Pro, Helvetica Neue, sans-serif;
   font-size: 14px;
   font-weight: 600;
   height: 36px;
@@ -4924,6 +4965,66 @@ lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-i
   background-color: #004080 !important;
 }
 
+/*
+ * Theming for LUX-List
+ */
+lux-list {
+  border-radius: 4px;
+  /** ########## FOCUS ########## **/
+}
+lux-list .lux-list-empty-icon,
+lux-list .lux-list-empty-icon-text {
+  color: rgba(0, 0, 0, 0.87);
+}
+lux-list .mat-card:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+lux-list lux-list-item:not(:last-of-type) lux-card {
+  margin-bottom: 4px;
+}
+lux-list .mat-card-content.menu-item-content {
+  margin-bottom: 0;
+}
+lux-list:focus-visible {
+  outline: none;
+}
+lux-list:focus-visible .lux-list-empty-icon-text {
+  outline: 4px solid rgb(0, 152, 218) !important;
+  border-radius: 4px;
+}
+lux-list lux-list-item:focus-visible {
+  outline: none;
+}
+lux-list lux-list-item:focus-visible lux-card mat-card {
+  outline: 4px solid rgb(0, 152, 218) !important;
+  outline-offset: -4px;
+}
+lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card {
+  background-color: #f0f3f6 !important;
+  position: relative;
+  border-radius: 4px;
+}
+lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card:after {
+  content: "";
+  left: 0;
+  width: 6px;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  border-left: 4px solid #003366;
+  border-radius: 4px 0 0 4px;
+}
+lux-list lux-list-item lux-card mat-card {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+lux-list lux-list-item lux-card mat-card:hover {
+  background-color: #4d7094 !important;
+  border-radius: 4px;
+  background: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
+}
+
 /*
  * Theming for LUX-App-Content
  */
@@ -4938,7 +5039,7 @@ lux-app-footer .lux-app-footer {
   background-color: #e0e7ed;
 }
 lux-app-footer .footerFont {
-  font-family: Roboto, Helvetica Neue, sans-serif;
+  font-family: Source Sans Pro, Helvetica Neue, sans-serif;
 }
 
 /*
@@ -5287,23 +5388,6 @@ lux-layout-form-row .row-title {
   color: rgba(0, 0, 0, 0.87);
 }
 
-/*
- * Theming for LUX-List
- */
-lux-list .lux-list-empty-icon,
-lux-list .lux-list-empty-icon-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-lux-list .mat-card:not([class*=mat-elevation-z]) {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-lux-list lux-list-item lux-card mat-card {
-  margin: 4px;
-}
-lux-list .mat-card-content.menu-item-content {
-  margin-bottom: 0;
-}
-
 /*
  * Theming for LUX-Lookup-Components
  */
@@ -5657,8 +5741,8 @@ lux-stepper .mat-step-header:not(.lux-step-header-touched) .mat-step-icon-select
 /*
  * Theming for LUX-Table
  */
-lux-table {
-  font-family: Roboto, Helvetica Neue, sans-serif;
+lux-table table.mat-table {
+  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
 }
 lux-table .lux-row-selected {
   background-color: #f0f3f6;
@@ -5948,7 +6032,7 @@ lux-stepper-large {
   padding: 0 30px 24px 30px;
 }
 .lux-stepper-large-mobile-nav-header div {
-  font-family: Korb, Roboto, Helvetica Neue, sans-serif;
+  font-family: Korb, Source Sans Pro, Helvetica Neue, sans-serif;
   font-size: 28px;
 }
 
@@ -12395,14 +12479,6 @@ lux-list .mat-card:not([class*=mat-elevation-z]) {
 lux-list .mat-card-content.menu-item-content {
   margin-bottom: 0;
 }
-lux-list:focus-visible {
-  border: 4px solid rgb(0, 152, 218) !important;
-  border-radius: 4px;
-  outline: none;
-}
-lux-list lux-list-item:focus-visible {
-  outline: none;
-}
 lux-list lux-list-item:focus-visible mat-card.mat-card.lux-card {
   outline: 4px solid rgb(0, 152, 218) !important;
   outline-offset: -4px;
@@ -12427,6 +12503,7 @@ lux-list lux-list-item lux-card mat-card[class~=lux-cursor]:not([class*=mat-elev
 }
 lux-list lux-list-item lux-card mat-card[class~=lux-cursor]:not([class*=mat-elevation-z]):hover {
   border: 1px solid #4d7094;
+  background: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
   background-color: #fff !important;
 }