blob: 1f04724cedb97822b82396b72f2ede4def6a8578 [file] [log] [blame]
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../variables";
@import "../mixins";
.mdl-data-table {
position: relative;
border: $data-table-dividers;
border-collapse: collapse;
white-space: nowrap;
font-size: $data-table-font-size;
background-color: unquote("rgb(#{$color-white})");
thead {
padding-bottom: 3px;
.mdl-data-table__select {
margin-top: 0;
}
}
tbody {
tr {
position: relative;
height: $data-table-row-height;
@include material-animation-default(0.28s);
transition-property: background-color;
&.is-selected {
background-color: $data-table-selection-color;
}
&:hover {
background-color: $data-table-hover-color;
}
}
}
td, th {
padding: 0 $data-table-column-padding 12px $data-table-column-padding;
text-align: right;
&:first-of-type {
padding-left: 24px;
}
&:last-of-type {
padding-right: 24px;
}
}
td {
position: relative;
vertical-align: middle;
height: $data-table-row-height;
border-top: $data-table-dividers;
border-bottom: $data-table-dividers;
padding-top: $data-table-cell-top;
box-sizing: border-box;
.mdl-data-table__select {
vertical-align: middle;
}
}
th {
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
@include typo-body-2();
height: $data-table-row-height;
font-size: $data-table-header-font-size;
color: $data-table-header-color;
padding-bottom: 8px;
box-sizing: border-box;
&.mdl-data-table__header--sorted-ascending,
&.mdl-data-table__header--sorted-descending {
color: $data-table-header-sorted-color;
&:before {
@include typo-icon;
font-size: $data-table-header-sort-icon-size;
content: "\e5d8";
margin-right: 5px;
vertical-align: sub;
}
&:hover {
cursor: pointer;
&:before {
color: $data-table-header-sorted-icon-hover-color;
}
}
}
&.mdl-data-table__header--sorted-descending:before {
content: "\e5db";
}
}
}
.mdl-data-table__select {
width: 16px;
}
.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
text-align: left;
}