blob: 1f04724cedb97822b82396b72f2ede4def6a8578 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17@import "../variables";
18@import "../mixins";
19
20.mdl-data-table {
21 position: relative;
22 border: $data-table-dividers;
23 border-collapse: collapse;
24 white-space: nowrap;
25 font-size: $data-table-font-size;
26 background-color: unquote("rgb(#{$color-white})");
27
28 thead {
29 padding-bottom: 3px;
30
31 .mdl-data-table__select {
32 margin-top: 0;
33 }
34 }
35
36 tbody {
37 tr {
38 position: relative;
39 height: $data-table-row-height;
40 @include material-animation-default(0.28s);
41 transition-property: background-color;
42
43 &.is-selected {
44 background-color: $data-table-selection-color;
45 }
46
47 &:hover {
48 background-color: $data-table-hover-color;
49 }
50 }
51 }
52
53 td, th {
54 padding: 0 $data-table-column-padding 12px $data-table-column-padding;
55 text-align: right;
56
57 &:first-of-type {
58 padding-left: 24px;
59 }
60
61 &:last-of-type {
62 padding-right: 24px;
63 }
64 }
65
66 td {
67 position: relative;
68 vertical-align: middle;
69 height: $data-table-row-height;
70 border-top: $data-table-dividers;
71 border-bottom: $data-table-dividers;
72 padding-top: $data-table-cell-top;
73 box-sizing: border-box;
74
75 .mdl-data-table__select {
76 vertical-align: middle;
77 }
78 }
79
80 th {
81 position: relative;
82 vertical-align: bottom;
83 text-overflow: ellipsis;
84 @include typo-body-2();
85 height: $data-table-row-height;
86 font-size: $data-table-header-font-size;
87 color: $data-table-header-color;
88 padding-bottom: 8px;
89 box-sizing: border-box;
90
91 &.mdl-data-table__header--sorted-ascending,
92 &.mdl-data-table__header--sorted-descending {
93 color: $data-table-header-sorted-color;
94 &:before {
95 @include typo-icon;
96 font-size: $data-table-header-sort-icon-size;
97 content: "\e5d8";
98 margin-right: 5px;
99 vertical-align: sub;
100 }
101 &:hover {
102 cursor: pointer;
103 &:before {
104 color: $data-table-header-sorted-icon-hover-color;
105 }
106 }
107 }
108 &.mdl-data-table__header--sorted-descending:before {
109 content: "\e5db";
110 }
111 }
112}
113
114.mdl-data-table__select {
115 width: 16px;
116}
117
118.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
119 text-align: left;
120}