react-data-grid/themes/react-data-grid.less

Data grid for React

@react-grid-shadow: 0px 0px 4px 0px @table-border-color;
@react-grid-shadow-locked: none;
@react-grid-scrollbar-color: @gray-light;

.react-grid-Grid {
  background-color: @body-bg;
  border: 1px solid @table-border-color;
}

.react-grid-Canvas {
  background-color: @body-bg;
}

.react-grid-Cell {
  background-color: @body-bg;
  padding-left: @table-cell-padding;
  padding-right: @table-cell-padding;
  border-top: 1px solid @table-border-color;
}

.react-grid-Cell:not(.editing) .react-grid-Cell__value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.react-grid-Cell__value ul {
  margin-top: 0;
  margin-bottom: 0;
  display:inline-block;
}

.react-grid-Cell__value .btn-sm{
  padding : 0
}

.react-grid-Cell.copied {
  background: rgba(0, 0, 255, 0.2) !important;
  -webkit-transition: 0.5s background;
}

.react-grid-Row {
  &:hover .react-grid-Cell {
  background-color: darken(@body-bg, 5%);
  }
}

.react-grid-Cell--locked:last-of-type {
  border-right: 1px solid @table-border-color;
  box-shadow: @react-grid-shadow-locked;
}


.react-grid-Cell.editing {
  padding : 0;
  overflow : visible !important;
}

.react-grid-Cell.editing .has-error input{
  border : 2px red solid !important;
  border-radius: 2px !important;
}

.react-grid-Cell input.editor-main, select.editor-main{
  .form-control();

}

.react-grid-cell input[type='checkbox']{
  display: block;
  margin : 0;
  margin-left: auto;
  margin-right: auto;
}

.react-grid-HeaderCell input[type='checkbox']{
   display: block;
   margin : 0;
   margin-left: auto;
   margin-right: auto;
   position : relative;
   top : 50%;
   transform : translateY(-50%);
}

.react-grid-Header {
  box-shadow: @react-grid-shadow;
  background: @gray-lighter;
}

.react-grid-Header--resizing {
  cursor: ew-resize;
}

.react-grid-HeaderRow {
  .user-select(none);
  border-bottom: 1px solid @table-border-color;
}

.react-grid-HeaderCell {
  .user-select(none);
  background: @gray-lighter;
  padding: @table-cell-padding;
  font-weight: bold;
  border-right: 1px solid @table-border-color;
}

.react-grid-HeaderCell__value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.react-grid-HeaderCell__resizeHandle:hover {
  cursor: ew-resize;
  background: @table-border-color;
}

.react-grid-HeaderCell--locked:last-of-type {
  box-shadow: @react-grid-shadow-locked;
}

.react-grid-HeaderCell--resizing {
  .react-grid-HeaderCell__resizeHandle {
    background: @table-border-color;
  }
}

.react-grid-ScrollShim {
  z-index: 10002;
}

.react-grid-Cell.selected-draggable {
  border: 1px solid #66afe9;
  background: #eee;
}

.react-grid-cell .form-control-feedback {
  color: #a94442;
  position: absolute;
  top: 0px;
  right: 10px;
  z-index: 1000000;
  display: block;
  width: 34px;
  height: 34px;
}

.react-grid-Cell.was-dragged-over {
  border-right: 1px dashed black;
  border-left: 1px dashed black;
}



.react-grid-Cell.active-drag-cell{
  overflow : visible !important;
  .drag-handle{
    position: absolute;
    bottom: -5px;
    right: -4px;
    background: #66afe9;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    border-right: 0px;
    border-bottom: 0px;
    z-index: 10;
    cursor: crosshair;
  }
}

.react-grid-Cell.is-dragged-over-down {
  border-right: 1px dashed black;
  border-left: 1px dashed black;
  border-bottom: 1px dashed black;
}

.react-grid-Cell.is-dragged-over-up {
  border-right: 1px dashed black;
  border-left: 1px dashed black;
  border-top: 1px dashed black;
  .drag-handle{
    top: -5px;
  }
}

.react-grid-Cell {
  border-right: 1px solid #eee;
}
.react-grid-Cell:last-child {
  border-right: none;
}

.react-grid-Cell:hover {
  background: #eee;
}
.react-grid-Cell.selected {
  border: 2px solid #66afe9;
  background: #eee;
  border-radius: 4px;
}
.react-grid-Cell:focus {
  outline: none;
}

.react-autocomplete-Autocomplete__search {
  .form-control();
}

.react-autocomplete-Autocomplete__results {
  .dropdown-menu();
  width: 100%;
  max-height: 200px;
  overflow: auto;
}

.react-autocomplete-Result {
  cursor: pointer;
  & > a {
    text-decoration: none;
  }
}

.react-autocomplete-Result--active {
  color: @dropdown-link-hover-color;
  background-color: @dropdown-link-hover-bg;
}