201 lines
5.4 KiB
Sass
201 lines
5.4 KiB
Sass
@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--empty
|
|
padding: 0
|
|
|
|
&.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,
|
|
> th.v-data-table__th--sortable:focus
|
|
cursor: pointer
|
|
color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
|
|
|
|
> th:not(.v-data-table__th--sorted)
|
|
.v-data-table-header__sort-icon
|
|
opacity: $data-table-header-sort-icon-default-opacity
|
|
|
|
&:hover,
|
|
&:focus-visible
|
|
.v-data-table-header__sort-icon
|
|
opacity: $data-table-header-sort-icon-hover-opacity
|
|
|
|
&.v-data-table__tr--mobile
|
|
> td
|
|
height: fit-content
|
|
|
|
.v-data-table-column--fixed,
|
|
.v-data-table-column--fixed-end,
|
|
.v-data-table__th--sticky
|
|
background-color: $table-background
|
|
background-image: inherit
|
|
left: 0
|
|
z-index: 1
|
|
|
|
@include tools.layer('overrides')
|
|
// Beat out relative on table > tbody > tr > td
|
|
// TODO: Use :where() for all those child combinators
|
|
// @scope would probably be even better but
|
|
// doesn't seem to be getting here any time soon
|
|
position: sticky
|
|
|
|
.v-data-table-column--fixed-end
|
|
left: unset
|
|
right: 0
|
|
|
|
.v-data-table-column--last-fixed
|
|
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
|
|
|
|
.v-data-table-column--first-fixed-end
|
|
border-left: 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,
|
|
> th.v-data-table-column--fixed-end
|
|
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
|
|
&:not(.v-table--fixed-header) > .v-table__wrapper > table > thead,
|
|
&:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot,
|
|
> .v-table__wrapper > table > tbody
|
|
> tr > .v-data-table__td
|
|
&:not(.v-data-table-column--fixed),
|
|
&:not(.v-data-table-column--fixed-end)
|
|
opacity: $data-table-loading-opacity
|
|
|
|
@include tools.layer('overrides')
|
|
// Again, needs to beat all the child combinators
|
|
.v-data-table-group-header-row__column
|
|
padding-inline-start: calc(var(--v-data-table-group-header-row-depth) * 16px)
|
|
|
|
.v-data-table-header__content
|
|
display: flex
|
|
align-items: center
|
|
|
|
.v-data-table-header__sort-icon
|
|
margin-inline: $data-table-header-sort-icon-margin-inline
|
|
|
|
.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
|
|
|
|
@include tools.layer('overrides')
|
|
.v-data-table-progress
|
|
> th
|
|
border: none
|
|
height: auto
|
|
padding: 0
|
|
|
|
.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: auto
|
|
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)
|
|
|
|
@include tools.layer('overrides')
|
|
&:not(:last-child)
|
|
border-bottom: 0
|
|
|
|
.v-data-table__td-title
|
|
font-weight: VTable.$table-header-font-weight
|
|
text-align: start
|
|
|
|
.v-data-table__td-value
|
|
text-align: end
|
|
|
|
.v-data-table__td
|
|
&-sort-icon
|
|
color: $data-table-header-mobile-chip-icon-color
|
|
|
|
&-active
|
|
color: $data-table-header-mobile-chip-icon-color-active
|