refactore css

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts

@@ -454,7 +454,8 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
   
   const cssString = ` {
     --mat-toolbar-container-text-color: ${mdDark};
-    --mat-tab-header-inactive-label-text-color: ${mdDarkSecondary};
+    --mat-tab-header-active-label-text-color: ${mdDark};
+    --mat-tab-header-inactive-label-text-color: ${mdDark};
     --mat-tab-header-pagination-icon-color: ${mdDark};
     --mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2};
     --mat-table-header-headline-color: ${mdDarkSecondary};
@@ -468,12 +469,10 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
     --mat-paginator-disabled-icon-color: ${mdDarkDisabled};
     --mat-select-enabled-trigger-text-color: ${mdDarkSecondary};
     --mat-select-disabled-trigger-text-color: ${mdDarkDisabled};
-    --mat-table-header-headline-color: ${mdDarkSecondary};
+    --mat-table-row-item-outline-color: ${mdDarkDivider};
+    --mdc-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
 
     --tb-orig-background-color: ${origBackgroundColor};
-    --tb-secondary-text-color: ${mdDarkSecondary};
-    --tb-second-disabled-color: ${mdDarkDisabled2};
-    --tb-divider-color: ${mdDarkDivider};
     --tb-current-entity-color: ${currentEntityColor};
     --tb-current-entity-sticky-color: ${currentEntityStickyColor};
     --tb-hover-color: ${hoverColor};

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host ::ng-deep{
+:host {
   .tb-table-widget {
     .mat-mdc-table, .mat-mdc-paginator, mat-toolbar.mat-mdc-table-toolbar:not([color="primary"]) {
       background: transparent;
@@ -25,9 +25,6 @@
         height: 39px;
         max-height: 39px;
       }
-      .mat-mdc-table-toolbar:not([color="primary"]) .mat-toolbar-tools button.mat-mdc-icon-button mat-icon {
-        color:var(--tb-secondary-text-color)
-      }
     }
     .table-container {
       overflow: auto;
@@ -49,33 +46,22 @@
     }
 
     .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {
-      border-color: var(--tb-second-disabled-color);
+      border-color: var(--mat-tab-header-pagination-disabled-icon-color);
     }
   }
 
-  .mat-mdc-input-element {
-    &::placeholder,
-    &::-moz-placeholder,
-    &::-webkit-input-placeholder,
-    &::-ms-input-placeholder {
-      color: var(--tb-secondary-text-color);
-    }
+  .mat-mdc-input-element::placeholder {
+    color: var(--mat-table-header-headline-color);
   }
-  
+
   .mat-mdc-table {
     .mat-mdc-header-row {
       background-color: var(--tb-orig-background-color);
     }
 
     .mat-mdc-cell, .mat-mdc-header-cell {
-      border-bottom-color: var(--tb-divider-color);
-      &.mat-mdc-table-sticky{
-        background-color:var(--tb-orig-background-color)
-      }
-      .mat-mdc-checkbox {
-        .mdc-checkbox__native-control:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true']) ~ .mdc-checkbox__background {
-          border-color: var(--tb-secondary-text-color);
-        }
+      &.mat-mdc-table-sticky {
+        background-color:var(--tb-orig-background-color);
       }
     }
 
@@ -83,26 +69,25 @@
       background-color: rgba(0,0,0,0); 
       &.tb-current-entity {
         background-color: var(--tb-current-entity-color);
-
         .mat-mdc-cell.mat-mdc-table-sticky {
           background-color: var(--tb-current-entity-sticky-color);
         }
       }
       &:hover:not(.tb-current-entity){
         background-color: var(--tb-hover-color);
-        .mat-mdc-cell.mat-mdc-table-sticky{
+        .mat-mdc-cell.mat-mdc-table-sticky {
           background-color: var(--tb-hover-sticky-color);
         }
       }
       &.mat-row-select.mat-selected:not(.tb-current-entity){
         background-color: var(--tb-selected-color);
-        .mat-mdc-cell.mat-mdc-table-sticky{
+        .mat-mdc-cell.mat-mdc-table-sticky {
           background-color: var(--tb-selected-sticky-color);
         }
       }
-      .mat-mdc-cell.mat-mdc-table-sticky {
+      &, .mat-mdc-cell.mat-mdc-table-sticky {
         transition: background-color .2s;
-        background-color:var(--tb-orig-background-color)
+        background-color:var(--tb-orig-background-color);
       }
     }
   } 

ui-ngx/src/styles.scss

@@ -692,7 +692,7 @@ pre.tb-highlight {
   mat-toolbar.mat-mdc-table-toolbar:not(.mat-primary), .mat-mdc-cell, .mat-expansion-panel-header, mat-card-header.mat-mdc-card-header {
     button.mat-mdc-icon-button {
       .mat-icon {
-        color: rgba(0, 0, 0, .54);
+        color:var(--mat-icon-color, rgba(0, 0, 0, .54));
       }
       &[disabled][disabled] {
         .mat-icon {
@@ -760,11 +760,11 @@ pre.tb-highlight {
       transition: background-color .2s;
 
       &:hover:not(.tb-current-entity) {
-        background-color: #f4f4f4;
+        background-color: var(--tb-hover-color, #f4f4f4);
       }
 
       &.tb-current-entity {
-        background-color: #e9e9e9;
+        background-color: var(--tb-current-entity-color, #e9e9e9);
       }
 
       &.tb-pointer {
@@ -816,7 +816,7 @@ pre.tb-highlight {
     vertical-align: middle;
     border-width: 0;
     border-bottom-width: 1px;
-    border-bottom-color: rgba(0, 0, 0, 0.12);
+    border-bottom-color: var(--mat-table-row-item-outline-color,rgba(0, 0, 0, 0.12));
     border-style: solid;
     text-overflow: ellipsis;
     touch-action: auto !important;