@ihk-gfi/lux-components-theme 19.1.0 → 19.3.0

package/prebuilt-themes/luxtheme-authentic.css

@@ -244,6 +244,13 @@ lux-datetimepicker-ac mat-datepicker-toggle .mat-mdc-button-persistent-ripple::b
 }
 
 /** ########## Select-AC ########## **/
+@media (prefers-contrast: more) {
+  lux-select-ac .mat-mdc-select:focus,
+  lux-lookup-combobox-ac .mat-mdc-select:focus {
+    outline: 4px solid rgb(0, 152, 218) !important;
+  }
+}
+
 .lux-select-panel-ac mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled), .lux-select-panel-ac mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled), .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled),
 .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),
 .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled),
@@ -1084,19 +1091,28 @@ lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content {
   width: 100%;
   grid-template-columns: 1fr auto;
   gap: 5px;
+  min-width: 0;
 }
 lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content mat-card-title.lux-tile-title {
   color: rgba(0, 0, 0, 0.87);
-  font-family: "Blogger Sans", "Source Sans Pro", Helvetica, Arial, sans-serif;
   line-height: 30px;
   font-size: 1.25rem;
   margin: 0;
+  min-width: 0;
+}
+lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content mat-card-title.lux-tile-title span {
+  font-family: "Blogger Sans", "Source Sans Pro", Helvetica, Arial, sans-serif;
+}
+lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content mat-card-subtitle.lux-tile-subtitle span {
+  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+  font-size: 0.9375rem;
 }
 lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content mat-card-subtitle.mat-mdc-card-subtitle:not(:first-child) {
   color: rgba(0, 0, 0, 0.6);
   font-size: 0.875rem;
   font-weight: normal;
   margin: 0px;
+  min-width: 0;
   grid-row-start: 2;
 }
 lux-tile-ac .mat-mdc-card.lux-tile-ac:not([class*=mat-elevation-z]) {
@@ -1235,7 +1251,6 @@ lux-tile .lux-tile-label {
   flex-shrink: 1;
   flex-grow: 0;
   min-height: 40px;
-  max-height: 70px;
   text-align: center;
   text-decoration-line: underline;
 }
@@ -1791,6 +1806,18 @@ lux-card.lux-card-grow mat-card-content {
   text-overflow: ellipsis;
 }
 
+.lux-crop-2-lines {
+  overflow: hidden;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
 .lux-label {
   color: rgba(0, 0, 0, 0.6);
   font-size: 0.75rem;
@@ -4474,6 +4501,12 @@ lux-lookup-combobox-ac mat-select .mat-mdc-select-arrow-wrapper .mat-mdc-select-
   mask-position: center;
   mask-size: cover;
 }
+@media (prefers-contrast: more) {
+  lux-select-ac mat-select .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow svg,
+  lux-lookup-combobox-ac mat-select .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow svg {
+    background-color: ButtonText;
+  }
+}
 lux-select-ac mat-select[aria-readonly=true] .mat-mdc-select-arrow,
 lux-lookup-combobox-ac mat-select[aria-readonly=true] .mat-mdc-select-arrow {
   background-color: rgba(0, 0, 0, 0.38);
@@ -5460,9 +5493,6 @@ lux-button button:not([disabled]):focus-visible {
 lux-button button:not([disabled]):not(.mat-mdc-fab):not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):hover, lux-button button:not([disabled]).mat-mdc-outlined-button:hover {
   background-color: #3c5772;
 }
-lux-button button:not([disabled]):not(.mat-mdc-fab):not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):hover.mat-accent, lux-button button:not([disabled]).mat-mdc-outlined-button:hover.mat-accent {
-  color: #2b9838;
-}
 lux-button button:not([disabled]).mat-mdc-fab:hover, lux-button button:not([disabled]).mat-mdc-raised-button:hover, lux-button button:not([disabled]).mat-mdc-unelevated-button:hover {
   background-color: #3c5772 !important;
 }
@@ -6217,6 +6247,113 @@ lux-menu .lux-menu-trigger > lux-button button.mat-mdc-button {
   margin: 0;
 }
 
+.lux-menu-section-panel,
+.lux-menu-section-panel:not(.lux-menu-panel-large) {
+  min-width: 260px !important;
+  max-width: 100%;
+}
+
+.lux-menu-section-panel,
+.lux-menu-section-panel:has(.lux-menu-panel-large) {
+  min-width: 360px !important;
+  max-width: 100%;
+}
+
+.lux-menu-section-panel .lux-menu-item-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.lux-menu-section-panel .lux-menu-item-icon {
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+.lux-menu-section-panel .lux-button-label {
+  text-align: left;
+  flex: 1 1 auto;
+  white-space: normal;
+}
+.lux-menu-section-panel .lux-menu-item-badge-right {
+  min-width: 0px !important;
+  margin-left: auto;
+  align-self: center;
+  display: flex;
+}
+.lux-menu-section-panel .lux-button-label-subtitle {
+  color: #3a5f94;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.07px;
+}
+.lux-menu-section-panel .lux-menu-panelheader-username {
+  display: flex;
+  padding: 12px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  font-weight: 600;
+  font-size: 1rem;
+  font-style: normal;
+  line-height: 120%;
+}
+.lux-menu-section-panel .lux-menu-panelheader-username-subtitle {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  font-weight: 400;
+  font-size: 0.75rem;
+  font-style: normal;
+  line-height: normal;
+}
+.lux-menu-section-panel .lux-menu-section-title {
+  display: flex;
+  padding: 8px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+  color: #605e5e;
+  font-weight: 600;
+  font-size: 1rem;
+  letter-spacing: 0.08px;
+  line-height: 120%; /* 19.2px */
+}
+.lux-menu-section-panel .lux-menu-item-divider {
+  padding: 4px;
+}
+.lux-menu-section-panel .lux-menu-item-divider-large {
+  margin-right: 16px;
+  margin-left: 16px;
+}
+.lux-menu-section-panel .lux-menu-item.lux-menu-item-selected {
+  background-color: #d5e3ff !important;
+}
+.lux-menu-section-panel .lux-menu-item-selected {
+  background-color: #d5e3ff;
+}
+.lux-menu-section-panel .lux-menu-item-selected.lux-button-label {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: 10%;
+  text-underline-offset: 5%;
+  text-underline-position: from-font;
+}
+.lux-menu-section-panel .lux-menu-item-selected.lux-button-label-subtitle {
+  text-decoration-color: #3a5f94;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: 12%;
+  text-underline-offset: 5%;
+  text-underline-position: from-font;
+}
+.lux-menu-section-panel .lux-menu-item-badge-right {
+  text-align: end;
+}
+
 /** ########## Hover / Focus ########## **/
 .lux-menu-panel .lux-menu-item:not([disabled=true]):focus-visible {
   outline: 4px solid rgb(0, 152, 218) !important;
@@ -6232,7 +6369,40 @@ lux-menu .lux-menu-trigger > lux-button button.mat-mdc-button {
   background-color: #4d7094;
 }
 .lux-menu-panel .lux-menu-item:not([disabled=true]):hover .mat-icon-no-color {
-  color: #fff;
+  color: #ffffff;
+}
+
+/** ########## Hover / Focus ########## **/
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):focus-visible {
+  background-color: #ffffff;
+  color: #003366;
+  border-radius: 4px;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):focus-visible:after {
+  width: 0px;
+  border: none;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):focus-visible .lux-button-label-subtitle {
+  color: #3a5f94;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):focus-visible .mat-icon-no-color {
+  color: #003366;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):hover {
+  color: #ffffff;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):hover .mat-icon-no-color {
+  color: #ffffff;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):hover .lux-button-label-subtitle {
+  color: #ecf1ff;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):hover .lux-button-label.lux-menu-item-selected {
+  background-color: #4d7094;
+}
+.lux-menu-panel.lux-menu-section-panel .lux-menu-item:not([disabled=true]):hover .lux-button-label-subtitle.lux-menu-item-selected {
+  background-color: #4d7094;
+  text-decoration-color: #ffffff;
 }
 
 lux-table {
@@ -6447,8 +6617,7 @@ lux-table th.cdk-keyboard-focused div.mat-sort-header-container {
 }
 
 lux-filter-form lux-menu div.lux-menu-custom-trigger {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding: 4px;
 }
 lux-filter-form .no-filter-active {
   padding: 8px 25px;
@@ -6480,44 +6649,16 @@ lux-filter-form .filterPanel .mat-action-row {
   padding: 0 !important;
   border: none;
 }
-lux-filter-form .filterPanel mat-expansion-panel-header.mat-expansion-panel-header {
-  padding-right: 6px;
-}
-lux-filter-form lux-menu.filter-menu .lux-menu-extended {
-  padding: 0 !important;
+lux-filter-form .lux-filter-form-button button.lux-button.lux-icon-button {
+  margin-left: 16px;
 }
 lux-filter-form lux-menu.filter-menu .lux-filter-menu-trigger button.lux-button-rounded {
   height: 36px;
   width: 36px;
   min-width: 36px;
   max-width: 36px;
-  background-color: transparent;
-  color: #003366;
-  padding: 0px !important;
-  margin: 0px 4px !important;
   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-filter-form lux-menu .lux-filter-menu-trigger button:not([disabled]).mat-fab.lux-button-rounded:hover {
-  background-color: transparent !important;
-  color: #4d7094;
-}
-lux-filter-form lux-menu .lux-filter-menu-trigger button:not([disabled]).mat-fab.lux-button-rounded:focus-visible {
-  outline: 4px solid rgb(0, 152, 218) !important;
-  outline-offset: -4px;
-  background-color: transparent !important;
-}
-lux-filter-form lux-menu .lux-filter-menu-trigger button:not([disabled]).mat-fab.lux-button-rounded:active {
-  background-color: transparent !important;
-  color: #002753;
-}
-lux-filter-form lux-accordion lux-panel-header-title {
-  width: 100%;
-}
-lux-filter-form lux-accordion lux-panel-header-title mat-panel-title.mat-expansion-panel-header-title {
-  align-items: center;
-  justify-content: space-between;
-  margin: 0px;
-}
 lux-filter-form lux-card .lux-card-header .lux-card-title,
 lux-filter-form lux-card .lux-card-header .lux-card-subtitle {
   height: 36px;
@@ -7495,6 +7636,13 @@ mat-expansion-panel.mat-expansion-panel:not([class*=mat-elevation-z]) .mat-expan
   font-size: 1rem;
 }
 
+.mat-expansion-panel-header.lux-dynamic-height {
+  min-height: unset;
+  height: unset;
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+
 .mat-expansion-panel {
   --mat-expansion-container-shape: 4px;
   --mat-expansion-container-shape: 4px;