@ihk-gfi/lux-components-theme 11.6.1 → 11.9.0

package/src/green/_custom.scss

@@ -1,4 +1,7 @@
-$green-button-font-size: 18px;
+$button-font-size: 18px;
+$light-green: #E4F1E4;
+$light-gray: #EFF3F6;
+$light-blue: #E3EBF5;
 
 body {
   color: #003366;
@@ -37,7 +40,7 @@ lux-app-footer {
       > lux-button {
         button {
           &.lux-button {
-            font-size: $green-button-font-size;
+            font-size: $button-font-size;
           }
         }
       }
@@ -213,7 +216,7 @@ lux-button button.lux-button {
   &.mat-button, &.mat-raised-button {
     border-radius: 18px;
     height: $button-height;
-    font-size: $green-button-font-size;
+    font-size: $button-font-size;
     margin-left: $outline-width;
     margin-right: $outline-width;
   }
@@ -326,3 +329,364 @@ lux-tile {
   }
   
 }
+
+/*
+ * Theming for LUX-Form-Controls
+ */
+$form-control-padding: 10px 5px 10px 5px;
+$form-control-label-padding-bottom: 4px;
+$form-control-border-radius: 4px;
+$form-control-old-border-bottom: 0px;
+
+lux-checkbox, lux-toggle, lux-radio, lux-slider {
+  & .lux-form-control {
+    margin-right: 4px;
+    margin-left: 4px;
+
+    .lux-form-control-label {
+      padding-bottom: $form-control-label-padding-bottom;
+    }
+
+    .lux-form-control-container {
+      padding: 10px 0px;
+    }
+  }
+
+  .lux-form-control:not(.lux-form-control-disabled), .lux-form-control:not(.lux-form-control-disabled).lux-focused {
+    .lux-form-control-label {
+      > * {
+        color: $dark-secondary-text;
+      }
+    }
+  }
+}
+
+lux-input, lux-select, lux-file-input, lux-textarea, lux-autocomplete, lux-datepicker, lux-datetimepicker, lux-chips {
+  & .lux-form-control {
+    margin-right: 4px;
+    margin-left: 4px;
+
+    .lux-form-control-label {
+      padding-bottom: $form-control-label-padding-bottom;
+    }
+
+    .lux-form-control-container {
+      border: 1px solid $form-border-color;
+      border-radius: $form-control-border-radius;
+      padding: $form-control-padding;
+
+      &:after {
+        border-bottom: $form-control-old-border-bottom;
+      }
+    }
+
+    .lux-label, mat-hint, mat-error {
+      color: $dark-secondary-text;
+    }
+  }
+
+  .lux-form-control-error {
+    .lux-form-control-label {
+      > * {
+        color: $lux-warn-color !important;
+      }
+    }
+
+    .lux-form-control-container {
+      border-color: $lux-selected-border-color !important;
+      box-shadow: 0 0 0 2px $lux-warn-color, 0 0 4px 2px $lux-warn-color;
+    }
+
+    .lux-form-control-misc {
+      > * {
+        color: $lux-warn-color !important;
+      }
+    }
+  }
+
+  .lux-form-control-disabled {
+    .lux-form-control-container {
+      color: $dark-disabled-text !important;
+      border: 1px dashed $dark-disabled-text !important;
+      border-radius: $form-control-border-radius;
+      padding: $form-control-padding;
+
+      &:after {
+        border-bottom: $form-control-old-border-bottom;
+      }
+    }
+  }
+
+  .lux-form-control:not(.lux-form-control-disabled).lux-focused {
+    .lux-form-control-label {
+      > * {
+        color: $dark-secondary-text;
+      }
+    }
+
+    .lux-form-control-container {
+      box-shadow: 0 0 0 2px $lux-selected-border-color, 0 0 4px 2px $lux-selected-border-color;
+
+      &:after {
+        border-bottom: $form-control-old-border-bottom;
+      }
+    }
+  }
+}
+
+.lux-form-control-error {
+  .lux-form-control-label {
+    > * {
+      color: $lux-warn-color !important;
+    }
+  }
+
+  .lux-form-control-container {
+    border-color: $lux-warn-color !important;
+  }
+
+  .lux-form-control-misc {
+    > * {
+      color: $lux-warn-color !important;
+    }
+  }
+}
+
+/*
+ * Theming für LUX-Checkbox
+ */
+lux-checkbox {
+
+  .mat-checkbox-disabled .mat-checkbox-inner-container{
+    border: 1px solid $dark-disabled-text;
+  }
+
+  .mat-checkbox-inner-container {
+    border-radius: 4px;
+    border: 1px solid map-get($lux-palette_primary, 500);
+    // wegen der Border
+    height: 18px !important;
+    width: 18px !important;
+
+    .mat-checkbox-frame {
+      border: none;
+    }
+
+    .mat-checkbox-background .mat-checkbox-checkmark {
+      border-radius: 2px; // bei 4px ist ein grüner Rand zu sehen
+    }
+  }
+}
+
+/*
+ * Theming für LUX-Table
+ */
+lux-table {
+
+  table.mat-table.cdk-table.mat-sort.lux-multiselect-table {
+    border-spacing: 0px 0px !important;
+  }
+
+  .mat-header-row:not(.lux-table-header-no-data) {
+    background-color: $light-green;
+  }
+  .mat-row:nth-child(even){
+    background-color: $light-gray;
+  }
+  .mat-row:nth-child(odd){
+    background-color:#ffffff;
+  }
+}
+
+/*
+ * Theming für LUX-Tabs.
+ */
+// Tabs außerhalb einer LUX-Card (z.B. Master-Detail)
+lux-tabs {
+  .mat-tab-label-active:not(.mat-tab-disabled) {
+    background-color: $lux-hover-color-for-dark-background;
+  }
+
+  div.lux-tab-title {
+    font-family: "Korb", "Source Code Pro", "Helvetica", "Arial", "sans-serif";
+    font-size: 22px;
+    font-weight: 700;
+  }
+}
+
+// Tabs innerhalb einer LUX-Card
+mat-card lux-tabs {
+  .mat-tab-label-active:not(.mat-tab-disabled) {
+    background-color: $lux-hover-color-for-dark-background;
+  }
+}
+
+/*
+ * Theming für LUX-Radio-Buttons
+ */
+lux-radio {
+
+  .mat-radio-outer-circle{
+    border: 1.5px solid map-get($lux-palette_primary, 500);
+  }
+
+  .mat-radio-inner-circle{
+    // Checkmark-Symbol mit css gezeichnet, anstatt des inneren Kreises
+    border-radius:2px;
+    background-color: transparent!important;
+    border-bottom: 5px solid white;
+    border-right: 5px solid white;
+    height: 32px;
+    width: 14px;
+    margin-top: -8px;
+    margin-left: 3px;
+  }
+
+  .mat-radio-checked {
+    .mat-radio-outer-circle {
+      background: map-get($lux-palette_primary, 500);
+    }
+
+    &.mat-radio-disabled .mat-radio-outer-circle {
+      background: $dark-disabled-text;
+      border: none;
+    }
+
+    &.mat-radio-disabled label .mat-radio-container {
+      span.mat-radio-inner-circle {
+        background-color: $dark-disabled-text;
+      }
+
+      span.mat-radio-outer-circle {
+        border-color: $dark-disabled-text;
+      }
+    }
+  }
+
+  .mat-radio-disabled label.mat-radio-label {
+    .mat-radio-label-content {
+      color: $dark-disabled-text;
+    }
+
+    .mat-radio-container {
+      span.mat-radio-inner-circle {
+        background-color: $dark-disabled-text;
+      }
+
+      span.mat-radio-outer-circle {
+        border-color: $dark-disabled-text;
+      }
+    }
+  }
+
+  .mat-radio-checked .mat-radio-inner-circle{
+    transform: rotate(45deg) scale(0.4);
+  }
+
+  .mat-radio-button .mat-radio-ripple{
+    height: 20px; /*double of your required circle radius*/
+    width: 20px;  /*double of your required circle radius*/
+    left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
+    top: calc(50% - 10px); /*'10px'-same as your required circle radius */
+  }
+}
+
+/* 
+ * Mixin für den Datepicker und Datetimepicker
+ */
+@mixin datepicker-content {
+  .mat-calendar-content {
+    padding: 0px 10px 10px 10px;
+    
+    th {
+      font-size: 18px;
+      color: map-get($lux-palette_primary, 500);
+    }
+
+    td.mat-calendar-body-cell {
+
+      &:after {
+        background-color: white;
+      }
+
+      &:hover > div {
+        border-radius: 2px;
+        background-color:map-get($lux-palette_accent, 300) !important;
+        color: map-get($lux-palette_primary, 500);
+      }
+
+      & > div {
+        border-radius: 2px;
+        background-color: $light-blue;
+        font-size: 18px;
+        color: map-get($lux-palette_primary, 500);
+      }
+    }
+
+    .mat-calendar-body-cell-content.mat-focus-indicator.mat-calendar-body-selected {
+      border-radius: 2px;
+      background-color: map-get($lux-palette_primary, 500);
+      color: $light-blue;
+    }
+
+    // Ausblenden des zusätzlichen Monatslabels
+    .mat-calendar-body-label:not(:last-of-type) {
+      visibility: hidden;
+    }
+
+    .mat-calendar-body-label:last-of-type, th.mat-calendar-table-header-divider {
+        display: none;
+    }
+  }
+}
+
+/*
+* Theming für Lux-Datepicker-Custom-Header 
+*/
+.lux-datepicker-custom-header-component {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 10px 18px 10px;
+
+  button, .mat-icon-button {
+    font-size: 18px;
+    color: map-get($lux-palette_primary, 500);
+
+    .mat-button-focus-overlay {
+      display: none;
+    }
+
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin;
+    }
+  }
+}
+
+/*
+* Theming für Lux-Datepicker 
+*/
+.lux-datepicker-panel {
+
+  .mat-calendar.mat-datepicker-content  {
+    min-height: 350px;
+  }
+  @include datepicker-content();
+}
+
+
+
+/*
+* Theming für Lux-Datetime-Picker 
+*/
+.lux-datetime-overlay-content {
+  
+  .mat-calendar.lux-datetime-overlay-calendar {
+    min-height: 340px ;
+  }
+  @include datepicker-content();
+}

package/src/green/_luxcommon.scss

@@ -19,6 +19,11 @@ $app-data-bg: #ffffff;
 
 // Form
 $form-border-color: rgba(0, 0, 0, 0.42);
+$form-control-default-height-not-scalable: 40px;
+$form-control-height: 24px;
+$form-control-height-small: 18px;
+$form-control-font-size: 15px;
+$form-control-font-size-small: 12px;
 
 // Button
 $button-height: 45px;

package/src/orange/_luxcommon.scss

@@ -19,6 +19,11 @@ $app-data-bg: #ffffff;
 
 // Form
 $form-border-color: rgba(0, 0, 0, 0.42);
+$form-control-default-height-not-scalable: 30px;
+$form-control-height: 24px;
+$form-control-height-small: 18px;
+$form-control-font-size: 15px;
+$form-control-font-size-small: 12px;
 
 // Button
 $button-height: 45px;