src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/datatables/extensions/Responsive/css/dataTables.responsive.scss

   1
   2 //
   3 // Mixins
   4 //
   5 @mixin control() {
   6         display: block;
   7         position: absolute;
   8         color: white;
   9         border: 2px solid white;
  10         border-radius: 16px;
  11         text-align: center;
  12         line-height: 14px;
  13         box-shadow: 0 0 3px #444;
  14         box-sizing: content-box;
  15 }
  16
  17 @mixin control-open() {
  18         content: '+';
  19         background-color: #31b131;
  20 }
  21
  22 @mixin control-close() {
  23         content: '-';
  24         background-color: #d33333;
  25 }
  26
  27
  28 //
  29 // Table styles
  30 //
  31 table.dataTable {
  32         // Styling for the `inline` type
  33         &.dtr-inline.collapsed > tbody {
  34                 > tr > td:first-child,
  35                 > tr > th:first-child {
  36                         position: relative;
  37                         padding-left: 30px;
  38                         cursor: pointer;
  39
  40                         &:before {
  41                                 top: 8px;
  42                                 left: 4px;
  43                                 height: 16px;
  44                                 width: 16px;
  45                                 @include control;
  46                                 @include control-open;
  47                         }
  48
  49                         &.dataTables_empty:before {
  50                                 display: none;
  51                         }
  52                 }
  53
  54                 > tr.parent {
  55                         > td:first-child:before,
  56                         > th:first-child:before {
  57                                 @include control-close;
  58                         }
  59                 }
  60
  61                 > tr.child td:before {
  62                         display: none;
  63                 }
  64         }
  65
  66         // DataTables' `compact` styling
  67         &.dtr-inline.collapsed.compact > tbody {
  68                 > tr > td:first-child,
  69                 > tr > th:first-child {
  70                         padding-left: 27px;
  71
  72                         &:before {
  73                                 top: 5px;
  74                                 left: 4px;
  75                                 height: 14px;
  76                                 width: 14px;
  77                                 border-radius: 14px;
  78                                 line-height: 12px;
  79                         }
  80                 }
  81         }
  82
  83
  84         // Styling for the `column` type
  85         &.dtr-column > tbody {
  86                 > tr > td.control,
  87                 > tr > th.control {
  88                         position: relative;
  89                         cursor: pointer;
  90
  91                         &:before {
  92                                 top: 50%;
  93                                 left: 50%;
  94                                 height: 16px;
  95                                 width: 16px;
  96                                 margin-top: -10px;
  97                                 margin-left: -10px;
  98                                 @include control;
  99                                 @include control-open;
 100                         }
 101                 }
 102
 103                 > tr.parent {
 104                         td.control:before,
 105                         th.control:before {
 106                                 @include control-close;
 107                         }
 108                 }
 109         }
 110
 111
 112         // Child row styling
 113         > tbody > tr.child {
 114                 padding: 0.5em 1em;
 115
 116                 &:hover {
 117                         background: transparent !important;
 118                 }
 119
 120                 ul {
 121                         display: inline-block;
 122                         list-style-type: none;
 123                         margin: 0;
 124                         padding: 0;
 125
 126                         li {
 127                                 border-bottom: 1px solid #efefef;
 128                                 padding: 0.5em 0;
 129
 130                                 &:first-child {
 131                                         padding-top: 0;
 132                                 }
 133
 134                                 &:last-child {
 135                                         border-bottom: none;
 136                                 }
 137                         }
 138                 }
 139
 140                 span.dtr-title {
 141                         display: inline-block;
 142                         min-width: 75px;
 143                         font-weight: bold;
 144                 }
 145
 146                 span.dtr-data {}
 147         }
 148 }
 149