iamisti/mdDataTable

$whiteColor: #ffffff;
$primaryColorPalette: #0D47A1;
$disabled: #9E9E9E;
$grey: #757575;

@mixin hoverSortIcons($size){
    ng-md-icon{
        visibility: hidden;
        width: $size;
        height: $size;
        fill: darken($whiteColor, 30%);

        svg{
            -webkit-transform:rotate(90deg);
            transform:rotate(90deg);
        }
    }
}

@mixin hoverSortIconOnHover(){
    ng-md-icon{
        visibility: visible;
    }
}

@mixin sortedTarget($size){
    /* when hoverSortIcons on a sorted column*/
    .hoverSortIcons ng-md-icon{
        display:none;
    }

    ng-md-icon{
        /* specified 16px is a fix now cause angular materia generates a 24x24 icon even the passed value is 16  */
        width: $size;
        height: $size;

        fill: darken($whiteColor, 87%);

        /* sort icon rotated 90 degrees for ascending sort (default) */
        svg{
            -webkit-transform:rotate(90deg);
            transform:rotate(90deg);
        }

    }

    /* sort icon rotated -90 degrees for descending sort */
    &.descending ng-md-icon>svg{
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
    }
}

.mdtTableContainer{

    position:relative;
    overflow: visible;

    .mdtTable{
        position:relative;
    }

    .md-chips {font-size: 13px;}
    .p-r {position: relative;}
    .no-outline {outline: none;}

    *,
    *:before,
    *:after {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
    }
    
    table{
        width:100%;
        display: table;

        &:focus{
            outline: none;
        }
    }

    td, th{ padding: 0; margin: 0; }
    font-size: 15px;

    /* 12sp Roboto Medium, 54% black */
    th{
        font-size: 12px;
        font-weight: 500;
        color: darken($whiteColor, 54%);
        white-space: nowrap;
        /* prevent ink ripple bleeding */
        position: relative;

        /* no pointer cursor when disabled, could be not-allowed but i think that indication is to strong */
        &[disabled]{
            cursor: auto;
        }

        /* remove the default blue outline in Chrome for consistent button-like behaviour */
        &:focus, *:focus{
            outline: none;
        }

        .column-header-content{
            cursor: default;
        }

        .column-header-content.clickable{
            cursor: pointer;
        }

        /* when hoverSortIcons on a non-sorted column*/
        .hoverSortIcons{
            @include hoverSortIcons(16px);
        }

        &:hover .hoverSortIcons{
            @include hoverSortIconOnHover();
        }

        .sortedColumn{
            @include sortedTarget(16px);
        }
    }

    /* optional animation of sort icons: add class 'animate-sort-icon' to mdt-header-row to activate animation */
    tr.animate-sort-icon .sortedColumn ng-md-icon svg{
        -webkit-transition: 0.3s linear all;
        transition: 0.3s linear all;
    }


    /* 64dp card header height */
    .mdt-header{
        height: 64px;
        padding-left: 24px;
        padding-right: 14px;

        md-button{
            margin-left: 24px;
        }

        ng-md-icon{
            fill: darken($whiteColor, 54%);
        }
    }

    .mdt-header-alternate{
        @extend .mdt-header;

        background-color: lighten($primaryColorPalette, 60%);

        .alternate-text{
            color: $primaryColorPalette;
        }
    }

    /* 56do for last row */
    .mdt-footer, tr th{
        height: 56px;
        line-height: 56px;

        .mdt-pagination{
            font-size: 12px;
            color: darken($whiteColor, 54%);

            md-input-container{
                margin-top: 0px;
                margin-bottom: 0px;
            }
        }
    }

    .mdt-footer{
        overflow: hidden;
    }

    /* column padding */
    .checkboxCell{
        width: 18px;

        & md-checkbox{
            margin: 0;
            padding: 0;
        }

        /*the next cell should not have just 24px padding */
        & + td, & + th {
            padding-left: 24px;
        }
    }

    /* 48dp row height */
    /* 13sp Roboto Regular, 87% black */
    tr td{
        padding: 0;
        height: 48px;
        font-size: 13px;
        color: darken($whiteColor, 87%);
    }

    td:first-child, th:first-child{
        padding: 0 0 0 24px;
    }

    td:last-child, th:last-child{
        padding-right: 24px;
    }

    .column{
        padding-left: 56px;
    }

    .leftAlignedColumn{
        text-align: left;
    }

    .rightAlignedColumn{
        text-align: right;
    }

    /* border separation color */
    tr th{
      border-bottom: solid 1px #DDDDDD;
    }

    tr td{
      border-bottom: solid 1px #DDDDDD;
    }


    /* INTERACTION */
    tr:hover td{
        background: #EEEEEE;
    }

    .selectedRow td{
        background: #F5F5F5;
    }

    /* default icon color */
    ng-md-icon{
        fill: darken($whiteColor, 54%);
    }

    .md-inactive ng-md-icon { fill: rgba(0, 0, 0, 0.26); }

    .md-virtual-repeat-container{
        min-height: 106px;
    }

    /* filter drop down */
    /* TH Select outline color & caret */
    .filter-select {
        border: 1px solid transparent; padding: 11px 10px;
        border-radius: 2px; cursor: pointer; margin-left: -10px;
    }
    .filter-select:hover {
        border-color: #dedede;
        & ng-md-icon {visibility: visible;}
    }
    .filter-select.is-active {
        color: #fff;
        background-color: #0096D6;
        border-color: #0096D6;
    }
    .filter-select ng-md-icon {visibility: hidden;}
    .filter-select.is-active ng-md-icon {
        visibility: visible;
        fill: rgba(255,255,255,0.87); fill: #fff;
    }

    md-progress-linear{
        .md-container{
            height: 3px;
        }

        .md-bar {
            background: #2A87E3;
        }
    }

    .loading-indicator{
        position:absolute;
        top:0;
        left:0;

        visibility: hidden;
    }

    .loading-is-active{
        visibility: visible;
    }
}


/* filter drop down AND column selector */
.filter-dropdown, .mdt-column-selector{
    position: absolute;
    z-index: 1;
    width: 250px;
    text-align: initial;

    a{
        text-decoration: none;
    }

    .selectall_clearall{
        font-size: 12px;

        span{
            margin: 0 5px 0 5px;
        }

        .selected_items{
            text-align: right;
            color: darkgray;
        }

        .disabled{
            color: $disabled;
            cursor: default;
        }
    }

    .hoverSortIcons{
        @include hoverSortIcons(20px);
        @include hoverSortIconOnHover();
    }

    .sortedColumn{
        @include sortedTarget(20px);
    }

    .b-b {border-bottom: 1px solid #dedede;}
    .p-md {padding: 16px;}
    .p-l-md {padding-left: 16px;}
    .p-r-md {padding-right: 16px;}
    .p-t-md {padding-top: 16px;}
    .p-r-md {padding-right: 16px;}
    .p-smd {padding: 12px;}
    .p-sm {padding: 8px;}
    .p-l-sm {padding-left: 8px;}
    .p-t-sm {padding-top: 8px;}
    .p-b-sm {padding-bottom: 8px;}
    .p-r-sm {padding-right: 8px;}
    .p-b-n {padding-bottom: 0;}

    .md-chips{
        font-size: 12px;
    }

    .filter__scroll {max-height: 200px; overflow-y: auto; border-bottom: solid 1px #DDDDDD;}
}

.mdt-column-selector{
    right: 0px; /* <-- this is a fix for positioning an element with the 'right' value using jquery. To make it work right:0px should be set in css before */

    .mdt-column-selector-title{
        color: darken($whiteColor, 54%);
    }

    .mdt-checbox-column-items span{
        width: 180px;
        display:block;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
}