How to edit the color of the sort glyph when using ng-table?

1.3k views Asked by At

In a table made using AngularJS ng-table, very similar to: http://ng-table.com/#/demo/2-1 i have to change the colour of the sort symbol for default/ascendent/descendent and normal/hover/active state. I assume it's done by CSS(SASS) but what is the selector and how you can use it in this case?

2

There are 2 answers

2
Ajay Narain Mathur On

It is in CSS following are the two classes:

CSS for up arrow and ascending Sorting:

.ng-table th.sortable .sort-indicator:after, {
      border-color: #AB8383 transparent;
    }

and CSS for down arrow:

.ng-table th.sortable .sort-indicator:before{
  border-top: 4px solid #4D1F4B;
}

Descending Sorting:

.ng-table th.sortable.sort-desc .sort-indicator:after{
border-top: 4px solid #420A0A;
}

For hover you may use:

.ng-table th.sortable .sort-indicator:hover:after, .ng-table th.sortable .sort-indicator:hover:before{
//css rule here
}
0
Renat Gatin On

Overwrite some classes:

.ng-table th.sortable .sort-indicator:before,
.ng-table th.sortable.sort-desc .sort-indicator:after, 
.ng-table th.sortable.sort-desc .sort-indicator:hover:after{
  border-top: 4px solid #4D1F4B;
}

.ng-table th.sortable .sort-indicator:after,
.ng-table th.sortable.sort-asc .sort-indicator:after, 
.ng-table th.sortable.sort-asc .sort-indicator:hover:after{
  border-bottom: 4px solid #4D1F4B;
}