vuesax/dist/style/components/vsTable.styl

Framework Components for Vue js

.vs-con-table
  background: rgb(251,251,251)
  border-radius: 5px
  padding: 5p
  .empty
    color: getColor('danger', 1)
  .con-edit-td
    position: absolute
    padding: 6px
    // top: 0px
    propWithDir(left, null, 0)
    transform: translate(0px, 15%)
    border-radius: 5px
    z-index: 300
    background: rgb(255,255,255)
    box-shadow: 0px 6px 10px 0px rgba(0,0,0,.05)
    display: flex
    align-items: center
    justify-content: center
    width: 100%
    // display: block
    // transition: all .25s ease
    overflow: hidden
  &.stripe
    .tr-values
      &:nth-child(2n)
        background: transparent !important
  table
    font-size: .8rem
    width: 100%
    border-collapse: collapse
    tbody
      width: 100%
  td
    border: 0px
    padding: 2px 8px
    // border-left: 1px solid rgba(0,0,0,.04)
    &:first-child
      border-left: 1px solid rgba(0,0,0,.0)
    &.td-check
      cursor: pointer
      padding: 5px !important
      .con-vs-checkbox
        margin-left: 0px !important
        margin-right: 0px !important
      .vs-icon
        transition: all .25s ease
        transform translate(7px) rotate(-90deg)

.td-edit
  text-decoration: underline
  .icon-edit
    transition: all .25s ease
    font-size: .75rem
    position: absolute
    opacity: 0
    padding-top: 3px
    transform translate(-0px)
    background: rgb(240,240,240)
    width: 17px
    height: 17px
    display: flex
    align-items: center
    justify-content: center
    border-radius: 5px
  >span
    // display: block
    cursor: pointer
    // transform translate(0px)

.vs-table--pagination
  width 100%
  padding: 7px
  display: flex
  align-items: center
  justify-content: flex-end
  .vs-pagination--buttons
    width: 30px
    height: 30px
  .item-pagination
    width: 30px
    height: 30px
    font-size: .8rem

.vs-table--tbody
  z-index 400
  position relative

.vs-table--tbody-table
  width: 100%
  margin: 0px
  min-width: 400px
  position: relative
  .tr-table:last-child
    .con-edit-td
      // top: 0px
      transform translateY(-100%) !important

  .tr-spacer
    height: 4px
    opacity: 1
    // width: 0px
  &:nth-child(2n)
    background: rgb(0,0,0)
  tr:not(.tr-expand)
    // border-bottom: 1px solid rgba(0,0,0,.03)
  .tr-expand
    td
      padding: 0px
      overflow: hidden
      .con-expand
        transition: all .25s ease
        // padding: 10px
  // .tr-table
  //   transition: all .25s ease
  //   width: calc(100% - 10px)
  //   margin-left: 5px
  //   z-index 100
  //   margin-top: 5px
  //   margin-bottom: 5px
  //   border-radius: 5px
  //   background: rgb(255,255,255)
  //   padding: 6px 0px
  //   position: relative
  tr
    transition: all .3s ease
    background: rgb(255,255,255)
    // border-radius: 5px
  .tr-values
    &.activeEdit
      z-index 500 !important
      + .tr-table
        transform: translate(0) !important
    &.hoverFlat
      &:not(.activeEdit):not(.is-expand):hover
        opacity: .8
    &:not(.activeEdit):not(.tr-expandedx):not(.hoverFlat):hover

      z-index 200
      // border-radius: 5px
      transform: translate(0, -4px)
      .tr-values
        box-shadow: 0px 2px 12px 0px rgba(0,0,0,.05)
      ~ tbody
        z-index: 10

    td
      padding: 10px
    .tr-expand
      td
        padding 0px
    &.selected
      cursor: pointer
    &:last-child
      border-bottom: 1px solid rgba(0,0,0,.0)


    &.is-expand
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,.08)
      transform scale(1.025)
      z-index: 300
      .tr-values
        z-index: 300
        box-shadow: 0px 2px 10px 0px rgba(0,0,0,.0)
      .tr-spacer
        height: 0px
      .tr-expand
        .con-expand
          border-top: 1px solid rgba(0,0,0,.05) !important

.td-check
  user-select: none
  &.active-expanded
    .vs-icon
      transform: translate(7px) rotate(0deg) !important
  .vs-icon
    user-select: none
    transform translate(7px) rotate(0deg)

.vs-table--content
  width: 100%
  overflow auto

.vs-table--header
  display: flex
  align-items: center
  justify-content: space-between

.vs-table--search
  display: flex
  align-items: center
  justify-content: center
  max-width: 200px
  position: relative
  propWithDir(margin, left, auto)
  i
    position: absolute
    transition: all .25s ease
    propWithDir(left, null, 10px)
    font-size: 1rem

.vs-table--search-input
  padding: 5px 10px
  propWithDir(padding, left, 30px)
  border-radius: 20px
  border: 1px solid rgba(0,0,0,.04)
  font-size: .7rem
  width: 200px
  color: rgba(0,0,0,.7)
  transition: all .25s ease
  &:focus
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,.03)
    + i
      color: getColor('primary', 1)

// header table


.vs-table--thead
  z-index 200
  width: 100%
  position relative

// .vs-table--thead-table
//   margin: 0px
//   z-index 100
//   padding-top: 5px
  // border-bottom: 1px solid rgba(0,0,0,.06)
  th
    padding: 6px 10px
    padding-top: 5px
    padding-bottom: 3px
    border: 0px
    text-align: left
    font-size: .85rem
    .vs-table-text
      display: flex
      align-items: center
      justify-content: flex-start
      cursor: pointer
    .sort-th
      display: flex
      align-items: center
      justify-content: center
      flex-direction: column
      padding-left: 6px
      transform translate(0, 2px)
      .th-sort-icon
        font-size: .9rem
        transition: all .25s ease
        border-radius: 2px
    &.td-check
      padding: 0px !important
      .con-td-check
        display: block
        padding-top: 3px
        background: rgb(255,255,255)
        border-radius 6px
        padding: 5px
        padding-right: 2px
        box-shadow: 0px 3px 10px 0px rgba(0,0,0,.05)
        transition: all .25s ease
      &:hover
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,.05)

      .con-vs-checkbox
        margin-right: 0 !important
        margin-left: 0px !important

.vs-table--not-data
  padding: 10px
  text-align: center

for colorx, i in $vs-colors
  .tr-table-state-{colorx}
    background: getColor(colorx, .1) !important
    color: getColor(colorx, 1)
    box-shadow: 0px 0px 1px 0px getColor(colorx, 1) !important
  .vs-table-{colorx}
    .is-selected
      transform: translate(0) !important
      color: getColor(colorx, 1)
      background: getColor(colorx, .05) !important
      box-shadow: 0px 0px 1px 0px getColor(colorx, 1) !important
      td
        &:first-child
          border-left: 1px solid rgba(0,0,0,.0) !important

// animation


.td-enter-active, .td-leave-active {
  transition: all .25s ease;
}
.td-enter, .td-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translate(0px, 15%) scale(.4) !important
}


.tr-expand-enter-active, .tr-expand-leave-active {
  transition: all .3s ease;
}
.tr-expand-enter, .tr-expand-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height 0px
}


.tr-expand
  td
    .content-tr-expand
      padding: 10px
      position relative
      display: flex
      align-items: center
      justify-content: center
      border-top: 1px solid rgba(0,0,0,.05)
      border-bottom: 1px solid rgba(0,0,0,.05)
      width: 100%
      padding-right: 30px

    .tr-expand--close
      position absolute
      width: 30px
      height 30px
      right 0px
      background: inherit
      color getColor('danger', 1)
      border 0px
      margin-left: 10px
      background: rgb(245,245,245)
      display: flex
      align-items: center
      justify-content: center
      border-radius: 3px
      cursor pointer
      transition all .25s ease
      &:hover
        opacity .7
        background: getColor('danger', 1)
        color rgb(255,255,255)
      i
        font-size: 1.1rem

.vuesax-app-is-rtl
  .vs-con-table
    td
      &.td-check
        .vs-icon
          transform translate(-7px) rotate(90deg)
        .vs-checkbox--check
          .vs-icon
            transform translate(1px) rotate(0deg)