Minor issue with sort handle

[giosh94mhz]

In the theme sass file, the sort handle icon is set as follow:

            &[data-sorted-direction="descending"]:after
                border-top-color: inherit

            &[data-sorted-direction="ascending"]:after
                border-bottom-color: inherit

This create an issue with some (all?) bootstrap theme, since the color for top and bottom may be different.

You may think at first that this is an uncommon scenario, but it is not; that's because bootstrap use border-top: 0; to hide the top border, and this will actually translate to border-top-width: 0px; border-top-style: initial; border-top-color: initial;: in the end, the sort ascending has "border-color" and sort descending has "color".

I see two possibile soution to this issue. One is to explicitely set the color to a default value, which may be initial to be consistent with the font. The other is to use UTF-8 characters ▼ and ▲ as after/before pseudo-selector content, avoiding the issue completely.

What do you think?

[dumb]

My solution was to modify the minimal.css to match what Bootstrap (v4 Alpha) does for their dropdown carets:

table[data-sortable] {
    border-collapse: collapse;
    border-spacing: 0;
}
table[data-sortable] th:not([data-sortable="false"]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    cursor: pointer;
}
table[data-sortable] th:after {
    visibility: hidden;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}
table[data-sortable] th[data-sorted="true"]:after {
    visibility: visible;
}
table[data-sortable] th[data-sorted-direction="ascending"]:after {
    border-top: 0;
    border-bottom: .3em solid;
}

This naturally inherits the color of the parent th (plus it uses ems instead of px so it scales properly). I also removed the float: right because it looked weird having the caret way off to the side on wide columns.