Add styles for new column label

IgniteUI · Nov 12, 2024 · d47dbd1 · d47dbd1
1 parent 4b9798f
commit d47dbd1
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 14 deletions.
diff --git a/src/css/structure/modules/infragistics.ui.grid.css b/src/css/structure/modules/infragistics.ui.grid.css
@@ -683,7 +683,16 @@ body[dir="rtl"] .ui-iggrid-featurechoosericoncontainer {
     margin     : 0;
     border     : 0 none;
     border-top : none;
-    height     : 1.6em;
+    min-height     : 1.6em;
+
+    &::before {
+        content: 'Column label';
+        /* TODO USE THIS ONE AFTER ADDING THE data-column-label attr */
+        /*content: attr(data-column-label);*/
+        font-weight: bold;
+        font-size: 11px;
+        padding-inline-start: 4px;
+    }
 }
 
 .ui-iggrid-filtercell input {
@@ -778,10 +787,10 @@ body[dir="rtl"] .ui-iggrid-featurechoosericoncontainer {
 /* Filtering icons */
 /*.ui-iggrid-filterbutton
 {
-    background: url(../images/igGrid/filter-icons-333333.png) no-repeat -32px 0!important;  
+    background: url(../images/igGrid/filter-icons-333333.png) no-repeat -32px 0!important;
     border: 1px solid transparent;
 }
-.ui-iggrid th .ui-iggrid-filterbutton, .ui-iggrid-filterbuttonright 
+.ui-iggrid th .ui-iggrid-filterbutton, .ui-iggrid-filterbuttonright
 {
     background: url(../images/igGrid/filter-icons-FFFFFF.png) no-repeat -32px 0!important;
 }*/
@@ -1289,7 +1298,7 @@ body[dir="rtl"] .ui-iggrid-featurechoosericoncontainer {
 .ui-iggrid-summaries-headerbuttoncontainer {
     float  : right;
     border : 1px solid transparent;
-    /*width:16px; 
+    /*width:16px;
     height:16px;*/
 }
 
@@ -2353,4 +2362,4 @@ div.ui-iggrid-indicatorcontainer.ui-iggrid-collapsibleindicatorcontainer a {
 
 .ui-grid tr th .ui-icon {
     cursor: default;
-}
+}
diff --git a/src/css/themes/bootstrap3/default/modules/infragistics.ui.grid.less b/src/css/themes/bootstrap3/default/modules/infragistics.ui.grid.less
@@ -730,4 +730,10 @@
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid @table-border-color;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/bootstrap3/flatly/modules/infragistics.ui.grid.less b/src/css/themes/bootstrap3/flatly/modules/infragistics.ui.grid.less
@@ -728,4 +728,10 @@
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid @table-border-color;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/bootstrap3/superhero/modules/infragistics.ui.grid.less b/src/css/themes/bootstrap3/superhero/modules/infragistics.ui.grid.less
@@ -729,4 +729,10 @@
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid @table-border-color;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/bootstrap3/yeti/modules/infragistics.ui.grid.less b/src/css/themes/bootstrap3/yeti/modules/infragistics.ui.grid.less
@@ -728,4 +728,10 @@
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid @table-border-color;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/bootstrap4/default/modules/_infragistics.ui.grid.scss b/src/css/themes/bootstrap4/default/modules/_infragistics.ui.grid.scss
@@ -727,4 +727,10 @@
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid $table-border-color;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+	&::before {
+		color: $text-color;
+	}
+}
diff --git a/src/css/themes/infragistics/modules/infragistics.ui.grid.less b/src/css/themes/infragistics/modules/infragistics.ui.grid.less
@@ -724,4 +724,10 @@
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid @table-border-color;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/infragistics2012/modules/infragistics.ui.grid.less b/src/css/themes/infragistics2012/modules/infragistics.ui.grid.less
@@ -564,4 +564,10 @@ ui-iggrid-groupbyarea a,
 .ui-state-hover .ui-igcheckbox-container .ui-icon,
 .ui-state-focus .ui-igcheckbox-container .ui-icon {
   color: @ui-icons-dark;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/ios/modules/infragistics.ui.grid.less b/src/css/themes/ios/modules/infragistics.ui.grid.less
@@ -752,4 +752,10 @@ background-color: @igGray3;*/
 
 .ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
   border-bottom: 1px solid @igGray3;
-}
+}
+
+.ui-iggrid td.ui-iggrid-filtercell {
+  &::before {
+    color: @text-color;
+  }
+}
diff --git a/src/css/themes/metro/modules/infragistics.ui.grid.less b/src/css/themes/metro/modules/infragistics.ui.grid.less
@@ -896,6 +896,10 @@ ui-iggrid-groupbyarea a,
 .ui-iggrid td.ui-iggrid-filtercell {
   border: 0 none !important;
   background: #00AADE;
+
+  &::before {
+    color: @text-color;
+  }
 }
 /*Reset button on hide column dialog on grids */
 
@@ -930,4 +934,4 @@ ui-iggrid-groupbyarea a,
 .ui-iggrid-modaldialog-caption-buttoncontainer .ui-igbutton.ui-state-focus .ui-button-text,
 .ui-iggrid-modaldialog-caption-buttoncontainer .ui-igbutton.ui-state-active .ui-button-text {
   color: white;
-}
+}