package.lib.components.VDataTable.VDataTable.sass Maven / Gradle / Ivy

Go to download
@use '../../styles/settings'
@use '../../styles/tools'
@use '../../components/VTable/variables' as *
@use './variables' as *
@use '../VTable/variables' as VTable

@include tools.layer('components')
  .v-data-table
    width: 100%

  .v-data-table__table
    width: 100%
    border-collapse: separate
    border-spacing: 0

  .v-data-table__tr
    &--focus
      border: 1px dotted black

    &--clickable
      cursor: pointer

  .v-data-table
    .v-table__wrapper
      > table
        > thead,
          tbody
          > tr
            > td,
              th

              &.v-data-table-column--align-end
                text-align: end

                .v-data-table-header__content
                  flex-direction: row-reverse

              &.v-data-table-column--align-center
                text-align: center

                .v-data-table-header__content
                  justify-content: center

              &.v-data-table-column--no-padding
                padding: 0 8px

              &.v-data-table-column--nowrap
                text-overflow: ellipsis
                text-wrap: nowrap
                overflow: hidden

                & .v-data-table-header__content
                  display: contents

            > th
              align-items: center

            > th.v-data-table__th--fixed
              position: sticky

            > th.v-data-table__th--sortable:hover
                cursor: pointer
                color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))

            > th:not(.v-data-table__th--sorted)
                .v-data-table-header__sort-icon
                  opacity: 0

                &:hover
                  .v-data-table-header__sort-icon
                    opacity: 0.5

            &.v-data-table__tr--mobile
              > td
                height: fit-content

  .v-data-table-column--fixed,
  .v-data-table__th--sticky
    background: $table-background
    position: sticky !important
    left: 0
    z-index: 1

  .v-data-table-column--last-fixed
    border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))

  .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed
    z-index: 2

  .v-data-table-group-header-row
    td
      background: rgba(var(--v-theme-surface))
      color: rgba(var(--v-theme-on-surface))

      > span
        padding-left: 5px

  .v-data-table--loading
    .v-data-table__td
      opacity: $data-table-loading-opacity

  .v-data-table-group-header-row__column
    padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important

  .v-data-table-header__content
    display: flex
    align-items: center

  .v-data-table-header__sort-badge
    display: inline-flex
    justify-content: center
    align-items: center
    font-size: 0.875rem
    padding: 4px
    border-radius: 50%
    background: $data-table-header-sort-badge-color
    min-width: $data-table-header-sort-badge-size
    min-height: $data-table-header-sort-badge-size
    width: $data-table-header-sort-badge-size
    height: $data-table-header-sort-badge-size

  .v-data-table-progress
    > th
      border: none !important
      height: auto !important
      padding: 0 !important

  .v-data-table-progress__loader
    position: relative

  .v-data-table-rows-loading,
  .v-data-table-rows-no-data
    text-align: center

  .v-data-table__tr--mobile
    > .v-data-table__td--expanded-row
      grid-template-columns: 0
      justify-content: center

    > .v-data-table__td--select-row
      grid-template-columns: 0
      justify-content: end

    > td
      align-items: center
      column-gap: 4px
      display: grid
      grid-template-columns: repeat(2, 1fr)
      min-height: var(--v-table-row-height)

      &:not(:last-child)
        border-bottom: 0 !important

  .v-data-table__td-title
    font-weight: VTable.$table-header-font-weight
    text-align: left

  .v-data-table__td-value
    text-align: right

  .v-data-table__td
    &-sort-icon
      color: $data-table-header-mobile-chip-icon-color

      &-active
        color: $data-table-header-mobile-chip-icon-color-active