Angular UI Grid Flat (Material-ish) styling

mixin.less

.transition (@props: all;
             @duration:1s;
             @delay: 0s;
             @timing: ease;
             @compact: true;
             @raw-input: false) {
    .output() when (@raw-input = false) and not (@compact = true) {
        -webkit-transition-property:@props;
        -moz-transition-property:@props;
        -ms-transition-property:@props;
        -o-transition-property:@props;
        transition-property:@props;
        -webkit-transition-duration:@duration;
        -moz-transition-duration:@duration;
        -ms-transition-duration:@duration;
        -o-transition-duration:@duration;
        transition-duration:@duration;
        -webkit-transition-delay:   @delay;
        -moz-transition-delay:   @delay;
        -ms-transition-delay:   @delay;
        -o-transition-delay:   @delay;
        transition-delay:   @delay;
        -webkit-transition-timing-function:@timing;
        -moz-transition-timing-function:@timing;
        -ms-transition-timing-function:@timing;
        -o-transition-timing-function:@timing;
        transition-timing-function:@timing;
    }
    .output() when (@raw-input = false) and (@compact = true) {
        @propsLength: length(@props);
        @durationLength: length(@duration);
        @delayLength: length(@delay);
        @timingLength: length(@timing);
        .buildString(@i, @s: ~'') when (@i <= @propsLength) {
            @prop: extract(@props, @i);
            .setDuration() when (@i <= @durationLength) {
                @dur: extract(@duration, @i);
            }
            .setDuration() when (@i > @durationLength) {
                @dur: extract(@duration, @durationLength);
            }
            .setDuration();
            .setDelay() when (@i <= @delayLength) {
                @del: extract(@delay, @i);
            }
            .setDelay() when (@i > @delayLength) {
                @del: extract(@delay, @delayLength);
            }
            .setDelay();
            .setTiming() when (@i <= @timingLength) {
                @time: extract(@timing, @i);
            }
            .setTiming() when (@i > @timingLength) {
                @time: extract(@timing, @timingLength);
            }
            .setTiming();
            .setDivider() when (@i > 1) {
                @divider: ~'@{s},';
            }
            .setDivider() when (@i = 1) {
                @divider: ~'';
            }
            .setDivider();
            @string: @divider @prop @dur @del @time;
            .buildString((@i + 1), @string);
        }
        .buildString(1);
        .buildString(@i, @s: ~'') when (@i > @propsLength) {
            .compact(@s);
        }
    }
    .output() when not (@raw-input = false) {
        .compact(@raw-input);
    }
    .compact(@string) {
        -webkit-transition:@string;
        -moz-transition:@string;
        -ms-transition:@string;
        -o-transition:@string;
        transition:@string;
    }
    .output();
}

screen.png

ui-grid.less

@import 'mixin.less';

// header colors
@base-color: #FFFFFF;
@border-color-hidden: transparent;
@border-color: rgba(204, 204, 204, 1.0);

// row colors
@row-color: #FFFFFF;
@selected-row-color: #cdeaff;

.ui-grid {
    border: none;
    font-size: 12px;
    .ui-grid-header {
        border-bottom: none;
        .ui-grid-top-panel {
            background: @base-color;
            box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
            .ui-grid-header-cell {
                text-align: center;
                font-weight: initial;
                border-right-color: @border-color-hidden;
                .transition(@raw-input: border-color 1s ease);
                .ui-grid-cell-contents {
                    padding: 5px 5px 4px 5px;
                }
                .ui-grid-column-menu-button {
                    top: 2px;
                }
            }
            &:hover {
                .ui-grid-header-cell {
                    border-right-color: @border-color;
                }
            }
        }
    }
    .ui-grid-viewport {
        position: initial;
        .ui-grid-canvas {
            position: initial;
            .ui-grid-row {
                .ui-grid-cell {
                    background-color: @row-color;
                    border-right: none;
                    border-bottom: 1px solid @border-color;
                    .ui-grid-cell-contents {
                        padding: 7px;
                    }
                }
                &.ui-grid-row-selected .ui-grid-cell {
                    background-color: @selected-row-color !important;
                }
                &:last-child .ui-grid-cell {
                    border-bottom-width: 1px !important;
                }
            }
        }
    }
}