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

package/src/base/components/_luxMasterDetailAc.scss

@@ -4,10 +4,46 @@
 @use "../luxpalette";
 @use "../luxelevations";
 
+// Die lux-list besitzt eine unsichtbare Border für die Anzeige des Focus-Indicators
+// damit dieser vollständig angzeigt werden kann, muss die Master-View ein passendes Padding anbieten
+// damit der Master-Header/Master-Footer mit der Liste ausgerichtet werden, müssen sie ebenfalls mit dem
+// passenden Padding/Margin versehen werden.
+// Das Margin berechnet sich aus der Breite der Outline + 1px Abstand zu den Listitems.
+$listmargin: calc(luxcommon.$outline-width + 1px);
+
 .lux-master-detail-ac {
+  // Hauptcontainer für die Komponente
+  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-mobile {
+    gap: 0px;
+  }
+
+  // Hauptcontainer für den gesamten Master, steuert die Breite für die unterschiedlichen Bildschirmauflösungen
   .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-ac-container-medium {
+      // die Breite berechnet sich aus 50% minus die Hälft der gap zwischen Master- und Detail-Container
+      min-width: calc(50% - 15px);
+      max-width: calc(50% - 15px);
+    }
     &.lux-master-closed {
       border: 1px solid luxcommon.$app-border-color;
       border-left-style: none;
@@ -19,14 +55,20 @@
       background-color: #fff;
     }
     &.lux-master-ac-container-mobile {
+      width: 100%;
+      max-width: unset;
       border: none;
       background-color: unset;
     }
   }
 
+  //Container für den Master-Header
   .lux-master-header-container-ac {
     z-index: 100;
     position: relative;
+    display: flex;
+    align-items: start;
+    justify-content: center;
 
     lux-button.master-ac-toggle {
       position: absolute;
@@ -43,10 +85,8 @@
 
       .lux-button-icon-round.lux-lx-icon.lux-no-size {
         // optische Anpassung für das "Chevron"-Icon, damit es zentriert im Button sitzt
-        // Anpassung erforderlich, falls das Icon ausgetauscht wird
-        padding-bottom: 2px;
-        padding-right: 1px;
-        padding-left: 1px;
+        // // Anpassung erforderlich, falls das Icon ausgetauscht wird
+        padding-bottom: 4px;
       }
     }
     button.lux-button.lux-button-rounded {
@@ -69,6 +109,10 @@
     mat-card-subtitle.mat-card-subtitle {
       font-size: 14px;
     }
+    .lux-master-header-content-container-ac {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
   }
 
   lux-filter-form .lux-filter-card,
@@ -99,15 +143,20 @@
   }
 
   .lux-master-view-ac {
-    margin: 10px 0;
+    height: 100%;
+    overflow-y: hidden;
     z-index: 100;
 
     lux-list {
-      border: none !important;
+      height: 100%;
+      overflow-y: auto;
     }
 
     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
+      */
+
       mat-card.mat-card {
         margin: 0px;
 
@@ -127,16 +176,25 @@
     lux-list-item-content {
       display: block;
     }
+    .lux-list-empty-container {
+      margin: 20px auto;
+    }
+    .lux-list-empty-icon,
+    .lux-list-empty-icon-text {
+      color: rgb(158.1, 158.1, 158.1);
+      opacity: 1;
+      margin-bottom: 8px;
+    }
   }
 
   lux-master-footer-ac {
-    padding: 10px 16px;
+    padding: 10px 12px 10px 16px;
     z-index: 100;
     border: 1px solid luxcommon.$app-border-color;
     border-radius: 4px;
     background-color: #fff;
     .lux-menu-extended {
-      padding: 0;
+      padding: 4px;
     }
   }
 
@@ -145,6 +203,15 @@
     border: 1px solid luxcommon.$app-border-color;
     border-radius: 4px;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 20px;
+    max-height: 100%;
+
+    &.lux-empty-detail {
+      width: 100%;
+    }
 
     .lux-detail-header-ac {
       mat-card.mat-card.lux-card {
@@ -152,22 +219,10 @@
       }
     }
 
-    .lux-detail-empty {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      &.lux-mobile {
-        top: 60px;
-      }
-    }
-
     .lux-detail-empty-icon,
     .lux-detail-empty-icon-text {
-      opacity: 0.6;
-      padding: 0 8px;
+      color: rgb(158.1, 158.1, 158.1);
+      opacity: 1;
     }
     &.lux-detail-ac-container-mobile {
       border: none;
@@ -178,10 +233,13 @@
         }
       }
       .back-to-master-button-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
         padding: 4px;
 
         &:hover {
-          background-color: luxcommon.$lux-hover-color;
+          color: luxcommon.$lux-hover-color;
           cursor: pointer;
         }
 
@@ -199,7 +257,7 @@
         }
         .back-to-master-label {
           font-size: 16px;
-          color: map.get(luxpalette.$lux-palette-primary, 300);
+          color: map.get(luxpalette.$lux-palette-primary, 500);
         }
       }
       .lux-detail-view-container {

package/src/green/_custom.scss

@@ -543,16 +543,22 @@ lux-filter-form lux-accordion {
   }
 
   .lux-master-ac-container {
-    padding: 2px 0 2px 2px;
+    padding: 3px 0 3px 3px;
     &.lux-master-closed {
       flex: 1 1 30px !important;
       max-width: 30px !important;
       min-width: 30px !important;
     }
+    lux-list {
+      padding: 0 3px;
+    }
+    lux-master-header-ac {
+      margin: 3px;
+    }
   }
 
   lux-master-footer-ac {
-    margin-bottom: 4px;
+    margin: 0 3px 4px 3px;
     border: none;
     @include luxelevations.lux-elevation-z2;
   }

package/src/public/global.scss

@@ -1,9 +1,9 @@
 // Media Queries
-$mat-xsmall: 'max-width: 599px' !default;
-$mat-small: 'max-width: 959px' !default;
-$mat-medium: 'max-width: 1279px' !default;
-$mat-large: 'max-width: 1919px' !default;
-$mat-xlarge: 'max-width: 5000px' !default;
+$mat-xsmall: "max-width: 599px" !default;
+$mat-small: "max-width: 959px" !default;
+$mat-medium: "max-width: 1279px" !default;
+$mat-large: "max-width: 1919px" !default;
+$mat-xlarge: "max-width: 5000px" !default;
 
 // Font
-$app-font-family: Roboto, Helvetica Neue, sans-serif !default;
+$app-font-family: Source Sans Pro, Helvetica Neue, sans-serif !default;