@ihk-gfi/lux-components-theme 11.8.0 → 11.12.0

package/prebuilt-themes/luxtheme-green.css

@@ -5,8 +5,6 @@
 /*
  * Theming for LUX-App-Content
  */
-@import 'https://use.fontawesome.com/releases/v5.13.0/css/all.css';
-@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
 lux-app-content {
   background-color: #ffffff;
 }
@@ -18,7 +16,7 @@ lux-app-footer .lux-app-footer {
   background-color: #E3EBF5;
 }
 lux-app-footer .footerFont {
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 
 /*
@@ -73,7 +71,7 @@ lux-app-header .lux-side-nav .lux-side-nav-content lux-button, lux-app-header .l
  * Theming for LUX-Button
  */
 lux-button button.lux-button {
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 lux-button button.lux-button.mat-button, lux-button button.lux-button.mat-raised-button {
   height: 45px;
@@ -211,6 +209,200 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
   background: #003366;
 }
 
+/*
+* Theming für Lux-File-Upload
+*/
+.lux-file-upload-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  /* Die eigentliche File-Inputs und den Download-Anchor blenden wir aus */
+}
+.lux-file-upload-container .lux-file-upload-drop-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  border: 1px solid var(--lux-theme-primary-500);
+  border-radius: 4px;
+  color: var(--lux-theme-primary-500);
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-label-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+  padding: 24px 48px;
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-container-progress, .lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-container-no-progress {
+  height: 8px;
+}
+.lux-file-upload-container .lux-file-upload-drop-container.lux-file-upload-drop-container-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+  background-color: var(--lux-theme-app-data-bg);
+  border: 1px solid var(--lux-theme-dark-disabled-text);
+}
+.lux-file-upload-container .lux-file-upload-drop-container.lux-file-upload-drop-container-disabled .lux-file-upload-link {
+  cursor: default;
+}
+.lux-file-upload-container .lux-file-upload-drop-container.lux-file-upload-drag-active {
+  background-color: var(--lux-theme-selected-bg-color);
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-icon {
+  display: flex;
+  flex: 0 0 auto;
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-label-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-link {
+  cursor: pointer;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+.lux-file-upload-container .lux-file-upload-error-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+  border: 1px solid var(--lux-theme-warn-500);
+  border-radius: 4px;
+  color: var(--lux-theme-warn-500);
+  padding: 18px 15px 15px 26px;
+  margin-bottom: 12px;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-icon {
+  display: flex;
+  flex: 0 0 30px;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-message {
+  display: flex;
+  flex: 1 1 auto;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-button {
+  display: flex;
+  flex: 0 0 auto;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-button button {
+  padding: 0;
+  margin: 0;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 30px;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-button button i {
+  font-size: 24px;
+}
+.lux-file-upload-container .lux-file-upload-hint-container {
+  margin-top: 4px;
+  margin-bottom: 12px;
+}
+.lux-file-upload-container .lux-file-upload-no-hint-container {
+  min-height: 12px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+  background-color: var(--lux-theme-selected-bg-color);
+  border: 1px solid var(--lux-theme-accent-500);
+  border-radius: 4px;
+  color: var(--lux-theme-primary-500);
+  padding: 18px 15px 18px 26px;
+  margin-bottom: 12px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container.lux-file-upload-view-item-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+  background-color: var(--lux-theme-app-data-bg);
+  border: 1px solid var(--lux-theme-dark-disabled-text);
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item .lux-file-upload-view-item-icon {
+  display: flex;
+  flex: 0 0 30px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item .lux-file-upload-view-item-label-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button {
+  display: flex;
+  align-items: center;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button {
+  padding: 0;
+  margin: 0;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 30px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button i {
+  font-size: 24px;
+}
+.lux-file-upload-container .lux-file-upload-input {
+  display: none;
+}
+
+.file-upload-dialog-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container {
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: flex-end;
+  align-items: center;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button {
+  display: flex;
+  flex: 0 0 auto;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button button {
+  padding: 0;
+  margin: 0;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 40px;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button button i,
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button button mat-icon {
+  font-size: 30px !important;
+}
+.file-upload-dialog-title-container .file-upload-dialog-title {
+  padding-right: 50px;
+}
+.file-upload-dialog-title-container .file-upload-dialog-content-text {
+  padding-bottom: 30px;
+}
+
+.file-dialog div.mat-dialog-title.lux-dialog-title {
+  font-size: 28px;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+.file-dialog p {
+  margin: 0;
+  padding-top: 12px;
+  padding-bottom: 30px;
+}
+
 /*
  * Theming for LUX-Form-Controls
  */
@@ -592,7 +784,7 @@ lux-tile .lux-highlight {
  */
 lux-toggle .mat-slide-toggle label {
   color: #003366;
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 lux-toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
   background-color: #b3c2d1;
@@ -623,6 +815,237 @@ mat-tooltip-component .mat-tooltip {
   font-size: 14px;
 }
 
+/*
+* Theming für Lux-Stepper-Large
+*/
+lux-stepper-large {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow-y: hidden;
+  background-color: transparent;
+}
+
+.lux-stepper-large-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  gap: 30px;
+}
+.lux-stepper-large-container .lux-stepper-large-button-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 30px;
+}
+
+.lux-stepper-large-button-container {
+  margin-top: 30px;
+}
+
+.lux-stepper-large-nav-container {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 30%;
+  gap: 12px;
+  padding: 12px;
+  overflow-y: auto;
+  min-width: 400px;
+}
+
+.lux-stepper-large-nav-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 22px;
+  line-height: 1.5;
+}
+.lux-stepper-large-nav-item.lux-active {
+  font-weight: bold;
+}
+.lux-stepper-large-nav-item.lux-completed {
+  color: #2E8533;
+}
+.lux-stepper-large-nav-item.lux-completed a {
+  text-decoration: underline;
+}
+.lux-stepper-large-nav-item.lux-disabled {
+  opacity: 0.6;
+}
+.lux-stepper-large-nav-item.lux-completed .lux-stepper-large-nav-item-number-container {
+  color: #ffffff;
+  background-color: #2E8533;
+}
+.lux-stepper-large-nav-item.lux-active .lux-stepper-large-nav-item-number-container {
+  color: #ffffff;
+  background-color: #003366;
+}
+.lux-stepper-large-nav-item.lux-disabled .lux-stepper-large-nav-item-number-container {
+  color: #003366;
+  background-color: #eff3f6;
+}
+.lux-stepper-large-nav-item.lux-disabled .lux-stepper-large-nav-item-label {
+  color: #003366;
+}
+.lux-stepper-large-nav-item .lux-stepper-large-nav-item-number-container {
+  max-width: 45px;
+  max-height: 45px;
+  margin: 0 15px 0 0;
+  padding: 6px 11px;
+  border-radius: 18px;
+}
+.lux-stepper-large-nav-item .lux-stepper-large-nav-item-number-container .lux-stepper-large-nav-item-number {
+  text-align: center;
+}
+.lux-stepper-large-nav-item .lux-stepper-large-nav-item-label-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.lux-stepper-large-nav-item .lux-stepper-large-nav-item-label-container .lux-stepper-large-nav-item-label-link {
+  cursor: pointer;
+}
+.lux-stepper-large-nav-item .lux-stepper-large-nav-item-label-container .lux-stepper-large-nav-item-complete {
+  color: #2E8533;
+  font-size: 23px;
+}
+
+.lux-stepper-large-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.lux-stepper-large-content-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 70%;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.lux-stepper-large-mobile-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 12px;
+}
+.lux-stepper-large-mobile-container lux-button {
+  display: flex;
+}
+.lux-stepper-large-mobile-container lux-button button {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+.lux-stepper-large-mobile-container .lux-stepper-large-button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: 30px;
+}
+
+.lux-stepper-large-mobile-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 2px;
+  font-size: 12px;
+}
+.lux-stepper-large-mobile-header .lux-stepper-large-mobile-header-label {
+  display: flex;
+  flex: 0 1 auto;
+}
+.lux-stepper-large-mobile-header .lux-stepper-large-mobile-header-button {
+  display: flex;
+  flex: 0 0 auto;
+  padding: 0;
+}
+.lux-stepper-large-mobile-header .lux-stepper-large-mobile-header-button button {
+  padding: 0;
+  min-height: 45px;
+  min-width: 45px;
+  display: flex;
+  justify-content: center;
+}
+.lux-stepper-large-mobile-header .lux-stepper-large-mobile-header-button button i {
+  font-size: 25px;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lux-stepper-large-mobile-overlay-backdrop {
+  opacity: 0.6;
+  background-color: #636d76;
+}
+
+.lux-stepper-large-mobile-nav-container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: calc(100% - 0px);
+  max-height: calc(100% - 0px);
+  padding: 0;
+  background: #ffffff;
+}
+
+.lux-stepper-large-mobile-nav-close-button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 13px;
+}
+
+.lux-stepper-large-mobile-nav-header {
+  display: flex;
+  flex-direction: row;
+  padding: 0 30px 24px 30px;
+}
+.lux-stepper-large-mobile-nav-header div {
+  font-family: "Korb", "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
+  font-size: 28px;
+}
+
+.lux-stepper-large-mobile-nav-item-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: auto;
+  padding: 0 30px 30px 30px;
+}
+
+.lux-stepper-large-mobile-nav-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 18px;
+}
+.lux-stepper-large-mobile-nav-item .lux-stepper-large-mobile-nav-item-number-container {
+  max-width: 30px;
+  max-height: 30px;
+  margin: 0 10px 0 0;
+  padding: 1px 6px 2px 5px;
+  border-radius: 12px;
+}
+.lux-stepper-large-mobile-nav-item .lux-stepper-large-mobile-nav-item-label-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.lux-stepper-large-mobile-nav-item .lux-stepper-large-mobile-nav-item-label-container .lux-stepper-large-mobile-nav-item-label-link {
+  cursor: pointer;
+}
+.lux-stepper-large-mobile-nav-item .lux-stepper-large-mobile-nav-item-label-container .lux-stepper-large-mobile-nav-item-complete {
+  color: #2E8533;
+  font-size: 18px;
+}
+
 /*
   Dieses Partial-SCSS dient der Verwaltung der Styles für Fokus, Hover und Selected für die LUX-Components und
   die ihnen zugrunde liegenden Material Components.
@@ -1121,6 +1544,28 @@ lux-message-box div.lux-message-box-content div.lux-message-container:not(.lux-b
   color: #e3ebf5;
 }
 
+/** ########## Stepper large ########## **/
+lux-stepper-large a:focus {
+  outline: none;
+}
+lux-stepper-large a:hover {
+  background-color: #e3ebf5 !important;
+  border-radius: 4px;
+}
+lux-stepper-large a.lux-focused {
+  background-color: #e3ebf5 !important;
+  border-radius: 4px;
+}
+
+/** ########## File-Upload ########## **/
+.lux-file-upload-drop-container {
+  margin-left: 1px;
+  margin-right: 1px;
+}
+.lux-file-upload-drop-container:focus {
+  outline: 1px dotted #000000 !important;
+}
+
 :root {
   --lux-theme-primary-50: #e0e7ed;
   --lux-theme-primary-50-contrast: #000000;
@@ -1265,7 +1710,7 @@ body,
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 
 h1 {
@@ -1402,7 +1847,7 @@ body {
 }
 
 div {
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lux-file-preview-backdrop {
@@ -1451,10 +1896,18 @@ lux-card.lux-card-grow mat-card-content {
   display: none;
 }
 
+.lux-display-none-important {
+  display: none !important;
+}
+
 .lux-hidden {
   visibility: hidden;
 }
 
+.lux-hidden-important {
+  visibility: hidden !important;
+}
+
 .lux-nowrap {
   white-space: nowrap;
 }
@@ -6602,15 +7055,15 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 
 body {
   color: #003366;
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 
 p, div {
-  font-family: "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Korb", "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+  font-family: "Korb", "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
 }
 
 lux-card .mat-card {
@@ -6625,7 +7078,7 @@ lux-panel .mat-expansion-panel, lux-panel .mat-expansion-panel-header-title, lux
  * Theming for LUX-App-Footer
  */
 lux-app-footer .lux-app-footer .lux-menu-extended > lux-button button.lux-button {
-  font-size: 18px;
+  font-size: 22px;
 }
 
 lux-app-header .lux-app-header {
@@ -6742,7 +7195,7 @@ lux-button button.lux-button {
 lux-button button.lux-button.mat-button, lux-button button.lux-button.mat-raised-button {
   border-radius: 18px;
   height: 45px;
-  font-size: 18px;
+  font-size: 22px;
   margin-left: 1px;
   margin-right: 1px;
 }