fixed-vuesax/dist/style/components/vsTable.styl

Framework Components for Vue js

.vs-con-table
  background: rgb(251, 251, 251)
  border-radius: 5px
  padding: 5px

  .empty
    color: getColor('danger', 1)

  .con-edit-td
    position: absolute
    padding: 6px
    // top: 0
    propWithDir(left, null, 0)
    transform: translate(0px, 15%)
    border-radius: 5px
    z-index: 300
    background: rgb(255, 255, 255)
    box-shadow: 0 6px 10px 0 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: 0
    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, &.td-expand
      cursor: pointer
      padding: 5px !important

      .con-vs-checkbox
        margin-left: 0 !important
        margin-right: 0 !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: 0
  min-width: 400px
  position: relative

  .tr-table:last-child
    .con-edit-td
      // top: 0
      transform translateY(-100%) !important

  .tr-spacer
    height: 4px
    opacity: 1

  // width: 0

  &: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: 0
      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 0
  //   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: 0 2px 12px 0 rgba(0, 0, 0, .05)

      ~ tbody
        z-index: 10

    td
      padding: 10px

    .tr-expand
      transform scale(.98)

      td
        padding 0

    &.selected
      cursor: pointer

    &:last-child
      border-bottom: 1px solid rgba(0, 0, 0, .0)


    &.is-expand
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .08)
      z-index: 300

      .tr-values
        z-index: 300
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .0)

      .tr-spacer
        height: 0

      .tr-expand
        .con-expand
          border-top: 1px solid rgba(0, 0, 0, .05) !important

.td-check, .td-expand
  user-select: none

  &.active-expanded
    .vs-icon
      transform: translate(7px) rotate(0deg) !important

  .vs-icon
    user-select: none

.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: 0 4px 10px 0 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: 0
  //   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: 0
    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: 0 !important

      .con-td-check
        display: block
        background: rgb(255, 255, 255)
        border-radius 6px
        padding: 5px
        padding-right: 2px
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .05)
        transition: all .25s ease

      &:hover
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .05)

      .con-vs-checkbox
        margin-right: 0 !important
        margin-left: 0 !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: 0 0 1px 0 getColor(colorx, 1) !important
  .vs-table-{colorx}
    .is-selected
      transform: translate(0) !important
      color: getColor(colorx, 1)
      background: getColor(colorx, .05) !important
      box-shadow: 0 0 1px 0 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 0
}


.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 0
      background: inherit
      color getColor('danger', 1)
      border 0
      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)