routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+200
@@ -0,0 +1,200 @@
|
||||
@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
|
||||
Reference in New Issue
Block a user