@o2xp/react-datatable/src/app.css

@o2xp/react-datatable is a modulable component to render data in a table with some nice features !

#o2xp {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),  
  0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

#o2xp .searchAnimationInput {
  width: 0;
  transition: width ease-out 350ms, margin-left ease-out 0ms 350ms;
  margin-left: 0!important;
}

#o2xp .searchAnimationInputActive {
  margin-left: 12px!important;
  transition: width ease-in 350ms;
  width: 180px;
}

#o2xp .Header {  
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#o2xp .disabled-icon span svg {
  color: rgba(0, 0, 0, 0.26)!important;
}

#o2xp .title {
  margin-right: auto;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding-left: 14px;
}

#o2xp .Table {
  display: table;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 0.8rem;
}

#o2xp .Table-Header {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
  overflow: auto;
}

#o2xp .button-header, .Table-Header-Cell-Draging-o2xp .button-header{
  color: black;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 30px;
  word-break: break-word;
}

#o2xp .button-header:hover {
  background: #ededed;
}

#o2xp .button-header:focus {
  outline: none;
}

#o2xp .cell-header {
  display: flex;
  align-items: center;
}

#o2xp .descIcon {
  animation: rotate 0.7s forwards;
}

@keyframes rotate {
  100% {
    transform: rotate(180deg);
  }
}

#o2xp .Table-Body {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

#o2xp .Table-Row {
  color: inherit;
  display: table-row;
  outline: none;
  top: 50%;
}

#o2xp .Table-Cell {
  display: table-cell;
  padding: 0px 25px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(224, 224, 244, 1);
}

#o2xp .scrolling-shadow {
  border-right: solid 2px lightgrey;
}

#o2xp .no-scrolling-shadow {
  border-right: solid 2px transparent;
}

#o2xp .Table-Cell > div > div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#o2xp .Table-Header-Cell {
  display: table-cell;
  padding: 5px 25px;
  text-align: left;
  vertical-align: middle;
  height: 60px;
  overflow: hidden;
  color: rgba(0,0,0,0.54);
  background: white;
}

#o2xp .Table-Header-Cell:hover {
  cursor: grab;
  background: #e2e2e2;
}


#o2xp .Table-Header-Cell.action:hover {
  cursor: pointer;
  background: white!important;
} 

.Table-Header-Cell-Child-Hovered {
  display: table-cell;
  padding: 5px 25px;
  text-align: left;
  vertical-align: middle;
  height: 50px;
  overflow: hidden;
  color: rgba(0,0,0,0.54);
}

.Table-Header-Cell-Draging-o2xp {
  color: rgba(0,0,0,0.54);
  background: #e2e2e2;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 0.9rem;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
  0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.Table-Header-Cell-Draging-o2xp .cell-header {
  display: flex;
  align-items: center;
}

#o2xp .Footer {
  border-top: 1px solid #7e7e7e;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#o2xp .Footer, #o2xp .Footer > *, #o2xp .Footer-Element > *{
  font-size: 0.8rem;
}

#o2xp .Footer-Element > div{
  margin: 0px 8px 0px 12px;
  text-align: center;
}

.close-icon {
  float: right;
  margin-top: -7px!important;
}

/* .input-fileName input {
  height: 20.09px;
} */

.action{
  position: sticky;
  left:0;
  z-index: 9;
}

#no-rows, #loader, #no-rows-filtered {
  font-style: italic;
  overflow: auto;
  display: flex;
  font-size: 1.2rem;
  align-items: center; 
  justify-content: center;
  color: rgba(0,0,0,0.54);
}

@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

#no-rows span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

#no-rows span:nth-child(2) {
  animation-delay: .2s;
}

#no-rows span:nth-child(3) {
  animation-delay: .4s;
}

.Table-Cell .select, .Table-Cell button {
  padding: 0 12px!important;
}

.table-input {
  font-size: 0.8rem!important;
  line-height: 0.8rem!important;
  padding: 2px 0px 4px!important;
}