third_party/ot-br-posix/repo/third_party/mdl/repo/src/data-table/_data-table.scss

   1 /**
   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 }