ui/legacy/css/src/scss/objects/table.scss

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you 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.

//TODO find new stategy to organize this styles
table {
  position: relative;
  width: 955px;
  max-width: 977px;
  margin: 15px 15px 12px 12px;
  border-bottom: 1px solid #c4c5c5;
  font-size: 13px;
  text-align: left;
  text-indent: 10px;
  border-collapse: collapse;
}

table thead {
  background: url('../images/bg-table-head.png') repeat-x;
  cursor: default;
}

table thead th {
  border: 1px solid #c6c3c3;
  border-top: 0;
  border-bottom: 1px solid #cfc9c9;
  font-weight: bold;
  white-space: nowrap;
  /*+text-shadow:0px 1px 1px #FFFFFF;*/
  color: #525252;
  text-align: left;
  text-shadow: 0 1px 1px #ffffff;
  cursor: pointer;
  -moz-text-shadow: 0 1px 1px #ffffff;
  -webkit-text-shadow: 0 1px 1px #ffffff;
  -o-text-shadow: 0 1px 1px #ffffff;
}

table thead th.sorted {
  color: #312f2f;
  /*+text-shadow:0px 1px 1px #BFBFBF;*/
  text-shadow: 0 1px 1px #bfbfbf;
  -moz-text-shadow: 0 1px 1px #bfbfbf;
  -webkit-text-shadow: 0 1px 1px #bfbfbf;
  -o-text-shadow: 0 1px 1px #bfbfbf;
}

table thead th.sorted.desc {
  background-position: 102% -111px;
}

table thead th.sorted.asc {
  background-position: 102% -157px;
}

table tbody td,
table th {
  clear: none;
  vertical-align: middle;
  min-width: 88px;
  padding: 10px 5px 6px;
  border-right: 1px solid #bfbfbf;
  font-size: 11px;
  color: #282828;
  overflow: hidden;
}

table tbody td.loading {
  border-top: 1px solid #fbfbfb;
  background: #dbe2e9;
  text-align: center;
}

table tbody td.truncated {
  max-width: 120px;
  overflow: visible;
}

table tbody td.truncated > span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list-view-select table th.name,
.list-view-select table td.name {
  width: 170px;
  min-width: 170px;
  max-width: 170px;
}

.list-view-select table th.availableHostSuitability,
.list-view-select table td.availableHostSuitability {
  max-width: 250px;
}

/** Multiselect*/
table thead th.multiselect,
table tbody td.multiselect {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
}

table thead th.multiselect input,
table tbody td.multiselect input {
  position: relative;
  /*+placement:shift -8px 0px;*/
  top: 0;
  left: -8px;
  margin: 0;
}

table thead th.multiselect input {
  margin-left: 2px;
}

/** Actions table cell*/
table tbody td.actions {
  vertical-align: middle;
  width: 130px;
  min-width: 130px !important;
  max-width: 130px !important;
}

table tbody td.actions input {
  /*+placement:shift 10px -6px;*/
  position: relative;
  top: -6px;
  left: 10px;
  margin: 11px 0 0;
}

.list-view-select table tbody td.actions {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
}

.list-view-select table tbody td.actions input {
  margin: 0 0 0 -7px;
}

.list-view-select table thead th.actions {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-indent: 5px;
}

/** Quick view table cell*/
table tbody td.quick-view,
table thead th.quick-view {
  width: 58px !important;
  min-width: 58px;
  max-width: 58px !important;
  height: 14px !important;
  white-space: nowrap;
  text-indent: 2px;
  cursor: default;
}

table tbody td.quick-view .icon {
  margin-top: 3px;
  margin-left: 22px;
  padding: 0 0 6px 12px;
  background: url('../images/sprites.png') no-repeat -44px -62px;
}

table tbody td.quick-view:hover .icon {
  background-position: -44px -644px;
}

table tbody tr.loading td.quick-view .icon {
  display: none;
}

table tbody tr.loading td.quick-view {
  cursor: default;
}

table tbody tr.loading td.quick-view .loading {
  background-position: center center;
}

/** Row styling*/
table tbody tr {
  border-top: 1px solid transparent;
  border-right: 1px solid #c4c5c5;
  border-left: 1px solid #c4c5c5;
}

table tbody tr.even {
  background: #ffffff;
}

table tbody tr.odd {
  background: #f2f0f0;
}

table tbody tr.selected {
  border-top: 1px solid #edf0f7 !important;
  border-bottom: 1px solid #babfd9;
  background: #cbddf3;
  text-shadow: 0 1px 1px #fcfbf7;
}

table tbody tr.to-remove {
  border-top: 1px solid #edf0f7 !important;
  border-bottom: 1px solid #babfd9;
  background: #e05959;
  text-shadow: 0 1px 1px #fcfbf7;
}

table tbody tr.loading {
  background: #e2e9f0;
}

table tbody tr.loading td {
  /*+opacity:50%;*/
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  -moz-opacity: 0.5;
}

table tbody tr.loading td.loading.icon {
  height: 35px;
  padding: 0;
  background: url('../images/ajax-loader.gif') no-repeat center;
}

table tbody tr div.loading {
  display: block;
  width: 50px;
  height: 14px;
  margin: auto;
  background: transparent url('../images/ajax-loader-small.gif') no-repeat center;
}

table th.resizable {
  position: relative;
  cursor: col-resize;
}

table th div.ui-resizable-handle {
  position: relative;
  float: right;
  top: -30px;
}

div.list-view table tbody td span {
  display: block;
  float: left;
  max-width: 89%;
  margin-left: 12px;
  line-height: 15px;
  word-break: break-all;
  word-wrap: break-word;
  text-indent: 0;
}

td.alert-notification-threshold {
  background-color: rgba(255, 231, 175, 0.75);
  color: #e87900;
}

td.alert-disable-threshold {
  background-color: rgba(255, 190, 190, 0.75);
  color: #f50000;
}

span.compact {
  height: 16px;
}

.horizontal-overflow tbody td,
.horizontal-overflow thead th {
  min-width: 40px;
  padding: 10px 10px 5px 0;
}

.horizontal-overflow th.quick-view {
  padding-left: 5px;
}

.groupable-header {
  border-right: 1px solid #c6c3c3;
  border-left: 1px solid #c6c3c3;
  background: url('../images/bg-table-head.png');
}

.groupable-header-columns th {
  border: 0;
}

table.horizontal-overflow td.state {
  width: 55px;
  min-width: 55px;
  max-width: 55px;
}

table.no-split td.first {
  min-width: 150px;
}

.groupable-header-border {
  border-right: 1px solid #c6c3c3;
  border-left: 1px solid #c6c3c3;
}