less/patternfly/datatables.less

   1 //
   2 // Datatables
   3 // --------------------------------------------------
   4
   5 .ColVis_Button {
   6   &:active {
   7     &:focus {
   8       outline: none;
   9     }
  10   }
  11 }
  12
  13 .ColVis_catcher {
  14   position: absolute;
  15   z-index: 999;
  16 }
  17
  18 .ColVis_collection {
  19   background-color: @dropdown-bg;
  20   border: 1px solid @dropdown-fallback-border; // IE8 fallback
  21   border: 1px solid @dropdown-border;
  22   border-radius: @border-radius-base;
  23   .box-shadow(0 6px 12px rgba(0,0,0,.175));
  24   background-clip: padding-box;
  25   list-style: none;
  26   margin: -1px 0 0 0;
  27   padding: 5px 10px;
  28   width: 150px;
  29   z-index: @zindex-dropdown;
  30   label {
  31     font-weight: normal;
  32     margin-bottom: 5px;
  33     margin-top: 5px;
  34     padding-left: 20px;
  35   }
  36 }
  37
  38 .ColVis_collectionBackground {
  39   background-color: #fff;
  40   height: 100%;
  41   left: 0;
  42   position: fixed;
  43   top: 0;
  44   width: 100%;
  45   z-index: 998;
  46 }
  47
  48 .dataTables_header {
  49   background-color: #f6f6f6;
  50   border: 1px solid @table-border-color;
  51   border-bottom: none;
  52   padding: 5px;
  53   position: relative;
  54   text-align: center;
  55   .btn {
  56     .box-shadow(none);
  57   }
  58   .ColVis {
  59     position: absolute;
  60     right: 5px;
  61     text-align: left;
  62     top: 5px;
  63     + .dataTables_info {
  64       padding-right: 30px;
  65     }
  66   }
  67   .dataTables_filter {
  68     position: absolute;
  69     input {
  70       border: 1px solid #bbb;
  71       height: 24px;
  72       @media (max-width: @screen-xs-max) {
  73         width: 100px;
  74       }
  75     }
  76   }
  77   .dataTables_info {
  78     padding: 2px 0;
  79     @media (max-width: @screen-xs) {
  80      text-align: right;
  81     }
  82     b {
  83       font-weight: bold;
  84     }
  85   }
  86 }
  87
  88 .dataTables_footer {
  89   background-color: #fff;
  90   border: 1px solid @table-border-color;
  91   border-top: none;
  92   overflow: hidden;
  93 }
  94
  95 .dataTables_paginate {
  96   background: #fafafa;
  97   float: right;
  98   margin: 0;
  99   .pagination {
 100     float: left;
 101     margin: 0;
 102     > li {
 103       > span {
 104         border-color: #ffffff #e1e1e1 #f4f4f4;
 105         border-width: 0 1px;
 106         font-size: @font-size-base + 4;
 107         font-weight: normal;
 108         padding: 0;
 109         text-align: center;
 110         width: 31px;
 111         &:hover,
 112         &:focus {
 113           .reset-filter();
 114         }
 115       }
 116       &.last > span {
 117         border-right: none;
 118       }
 119       &.disabled > span {
 120         background: #f5f5f5;
 121         border-left-color: #ececec;
 122         border-right-color: #ececec;
 123         .reset-filter();
 124       }
 125     }
 126   }
 127   .pagination-input {
 128     float: left;
 129     font-size: @font-size-base;
 130     line-height: 1em;
 131     padding: 4px 15px 0;
 132     text-align: right;
 133     .paginate_input {
 134       border: 1px solid #d3d3d3;
 135       .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
 136       font-size: @font-size-base;
 137       font-weight: 600;
 138       height: 19px;
 139       margin-right: 8px;
 140       padding-right: 3px;
 141       text-align: right;
 142       width: 30px;
 143     }
 144     .paginate_of {
 145       position: relative;
 146       b {
 147         margin-left: 3px;
 148       }
 149     }
 150   }
 151 }
 152
 153 .dataTables_wrapper {
 154   margin: @line-height-computed 0;
 155   @media (max-width: @screen-xs-max) {
 156     .table-responsive {
 157       margin-bottom: 0;
 158     }
 159   }
 160 }
 161
 162 .DTCR_clonedTable {
 163   background-color: rgba(255, 255, 255, 0.7);
 164   z-index: 202;
 165 }
 166
 167 .DTCR_pointer {
 168   background-color: @link-color;
 169   width: 1px;
 170   z-index: 201;
 171 }
 172
 173 table.datatable {
 174   margin-bottom: 0;
 175   max-width: none !important;
 176   thead {
 177     .sorting,
 178     .sorting_asc,
 179     .sorting_desc,
 180     .sorting_asc_disabled,
 181     .sorting_desc_disabled {
 182       cursor: pointer;
 183       *cursor: hand;
 184     }
 185     .sorting_asc,
 186     .sorting_desc {
 187       border: 0;
 188       color: @link-color !important;
 189       display: block;
 190       position: relative;
 191       &:after {
 192         content: @fa-var-angle-down;
 193         font-family: @icon-font-name-fa;
 194         font-size: @font-size-base - 2;
 195         font-weight: normal;
 196         height: @font-size-base - 3;
 197         left: 7px;
 198         line-height: @font-size-base;
 199         position: relative;
 200         top: 2px;
 201         vertical-align: baseline;
 202         width: @font-size-base;
 203       }
 204       &:before {
 205         background: @link-color;
 206         content: '';
 207         height: 2px;
 208         position: absolute;
 209         left: 0;
 210         top: 0;
 211         width: 100%;
 212       }
 213     }
 214     .sorting_asc:after {
 215       content: @fa-var-angle-up;
 216       top: -3px;
 217     }
 218   }
 219   th:active {
 220     outline: none;
 221   }
 222 }