app/scss/main.scss
$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;
}
}