druid/web-console/lib/react-table.styl

/*
 * 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.
 */

// This is a heavily modified version of the style file originally distributed here:
// https://github.com/react-tools/react-table/blob/master/src/index.styl
// Released originally under the MIT License https://github.com/react-tools/react-table/blob/master/LICENSE

$easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
$easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
$expandSize = 7px
$border-color = alpha(black, 0.15)

input-select-style()
  border: 1px solid rgba(0,0,0,0.1)
  background: white
  padding: 5px 7px
  font-size: inherit
  border-radius: 3px
  font-weight: normal
  outline:none

.ReactTable
  position:relative
  display: flex
  flex-direction: column
  *
    box-sizing: border-box
  .rt-table
    flex: auto 1
    display: flex
    flex-direction: column
    align-items: stretch
    width: 100%
    border-collapse: collapse
    overflow: auto

  .rt-thead
    flex: 1 0 auto
    display: flex
    flex-direction: column
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &.-headerGroups
      background: alpha(black, .03)
      border-bottom: 1px solid $border-color

    &.-filters
      border-bottom: 1px solid $border-color

      //input
      //select
      //  input-select-style();

      .rt-th
        border-right: 1px solid $border-color

    &.-header
      box-shadow: 0 1px 0 0 $border-color

    .rt-tr
      text-align: left

    .rt-th
    .rt-td
      padding: 5px 5px
      line-height: normal
      position: relative
      border-right: 1px solid $border-color
      transition box-shadow .3s $easeOutBack
      box-shadow:inset 0 0 0 0 transparent
      &.-sort-asc
        box-shadow:inset 0 3px 0 0 #8489A1
      &.-sort-desc
        box-shadow:inset 0 -3px 0 0 #8489A1
      &.-cursor-pointer
        cursor: pointer
      &:last-child
        border-right: 0

    .rt-resizable-header
      overflow: visible
      &:last-child
        overflow: hidden

    .rt-resizable-header-content
      overflow: hidden
      text-overflow: ellipsis

    .rt-header-pivot
      border-right-color: $border-color

    .rt-header-pivot:after, .rt-header-pivot:before
      left: 100%
      top: 50%
      border: solid transparent
      content: " "
      height: 0
      width: 0
      position: absolute
      pointer-events: none

    .rt-header-pivot:after
      border-color: rgba(255, 255, 255, 0)
      border-left-color: #FFF
      border-width: 8px
      margin-top: -8px

    .rt-header-pivot:before
      border-color: rgba(102, 102, 102, 0)
      border-left-color: #f7f7f7
      border-width: 10px
      margin-top: -10px

  .rt-tbody
    flex: 99999 1 auto
    display: flex
    flex-direction: column
    overflow: auto
    // z-index:0
    .rt-tr-group
      border-bottom: 1px solid $border-color
      &:last-child
        border-bottom: 0
    .rt-td
      border-right:1px solid $border-color
      &:last-child
        border-right:0
    .rt-expandable
      cursor: pointer
      text-overflow: clip
  .rt-tr-group
    flex: 1 0 auto
    display: flex
    flex-direction: column
    align-items: stretch
  .rt-tr
    flex: 1 0 auto
    display: inline-flex
  .rt-th
  .rt-td
    flex: 1 0 0px
    white-space: nowrap
    text-overflow: ellipsis
    padding: 7px 5px
    overflow: hidden
    transition: .3s ease
    transition-property: width, min-width, padding, opacity

    &.-hidden
      width: 0 !important
      min-width: 0 !important
      padding: 0 !important
      border:0 !important
      opacity: 0 !important

  .rt-expander
    display: inline-block
    position:relative
    margin: 0
    color: transparent
    margin: 0 10px
    &:after
      content: ''
      position: absolute
      width: 0
      height: 0
      top:50%
      left:50%
      transform: translate(-50%, -50%) rotate(-90deg)
      border-left: ($expandSize * .72) solid transparent
      border-right: ($expandSize * .72) solid transparent
      border-top: $expandSize solid alpha(white, .8)
      transition: all .3s $easeOutBack
      cursor: pointer
    &.-open:after
        transform: translate(-50%, -50%) rotate(0deg)

  .rt-resizer
    display: inline-block
    position: absolute
    width: 36px
    top: 0
    bottom: 0
    right: -18px
    cursor: col-resize
    z-index: 10

  .rt-tfoot
    flex: 1 0 auto
    display: flex
    flex-direction: column
    box-shadow: 0 0px 15px 0px alpha(black, 0)

    .rt-td
      border-right:1px solid $border-color
      &:last-child
        border-right:0

  &.-striped
    .rt-tr.-odd
      background: alpha(white, .025)
  &.-highlight
    .rt-tbody
      .rt-tr:not(.-padRow):hover
        background: alpha(black, .05)

  .-pagination
    z-index: 1
    display:flex
    justify-content: space-between
    align-items: stretch
    flex-wrap: wrap
    padding: 3px
    border-top: 1px solid $border-color

    input
    select
      input-select-style()

    .-btn
      appearance:none
      display:block
      width:100%
      height:100%
      border: 0
      border-radius: 3px
      padding: 6px
      font-size: 1em
      color: alpha(black, .6)
      background: alpha(black, .1)
      transition: all .1s ease
      cursor: pointer
      outline:none

      &[disabled]
        opacity: .5
        cursor: default

      &:not([disabled]):hover
        background: alpha(black, .3)
        color: white

    .-previous
    .-next
      flex: 1
      text-align: center

    .-center
      flex: 1.5
      text-align:center
      margin-bottom:0
      display: flex
      flex-direction: row
      flex-wrap: wrap
      align-items: center
      justify-content: space-around

    .-pageInfo
      display: inline-block
      margin: 3px 10px
      white-space: nowrap

    .-pageJump
      display:inline-block
      input
        width: 70px
        text-align:center

    .-pageSizeOptions
      margin: 3px 10px

  .rt-noData
    display:block
    position:absolute
    left:50%
    top:40%
    transform: translate(-50%, -50%)
    background: alpha(black, .4)
    transition: all .3s ease
    z-index: 1
    padding: 20px
    color: alpha(white, .5)
    border-radius: 5px

  .-loading
    display:block
    position:absolute
    left:0
    right:0
    top:0
    bottom:0
    background: alpha(#4c4c4c, .8)
    transition: all .3s ease
    z-index: -1
    opacity: 0
    pointer-events: none

    > div
      position:absolute
      display: block
      text-align:center
      width:100%
      top:50%
      left: 0
      font-size: 15px
      color: alpha(black, .6)
      transform: translateY(-52%)
      transition: all .3s $easeOutQuad

    &.-active
      opacity: 1
      z-index: 2
      pointer-events: all
      > div
        transform: translateY(50%)

  .rt-resizing
    .rt-th
    .rt-td
      transition: none!important
      cursor: col-resize
      user-select none