routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+215
@@ -0,0 +1,215 @@
|
||||
@layer vuetify-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;
|
||||
}
|
||||
.v-data-table__tr--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end {
|
||||
text-align: end;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end .v-data-table-header__content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center .v-data-table-header__content {
|
||||
justify-content: center;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--no-padding,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--no-padding,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--no-padding,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--no-padding {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--empty,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--empty,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--empty,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--empty {
|
||||
padding: 0;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap {
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap .v-data-table-header__content {
|
||||
display: contents;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th {
|
||||
align-items: center;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--fixed,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--fixed {
|
||||
position: sticky;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:hover,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:focus,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:hover,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:focus {
|
||||
cursor: pointer;
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon, .v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):focus-visible .v-data-table-header__sort-icon,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):focus-visible .v-data-table-header__sort-icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr.v-data-table__tr--mobile > td,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr.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: rgb(var(--v-theme-surface));
|
||||
background-image: inherit;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table-column--fixed,
|
||||
.v-data-table-column--fixed-end,
|
||||
.v-data-table__th--sticky {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.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,
|
||||
.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > 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));
|
||||
}
|
||||
.v-data-table-group-header-row td > span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.v-data-table--loading:not(.v-table--fixed-header) > .v-table__wrapper > table > thead > tr > .v-data-table__td:not(.v-data-table-column--fixed), .v-data-table--loading:not(.v-table--fixed-header) > .v-table__wrapper > table > thead > tr > .v-data-table__td:not(.v-data-table-column--fixed-end), .v-data-table--loading:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot > tr > .v-data-table__td:not(.v-data-table-column--fixed), .v-data-table--loading:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot > tr > .v-data-table__td:not(.v-data-table-column--fixed-end),
|
||||
.v-data-table--loading > .v-table__wrapper > table > tbody > tr > .v-data-table__td:not(.v-data-table-column--fixed),
|
||||
.v-data-table--loading > .v-table__wrapper > table > tbody > tr > .v-data-table__td:not(.v-data-table-column--fixed-end) {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table-group-header-row__column {
|
||||
padding-inline-start: calc(var(--v-data-table-group-header-row-depth) * 16px);
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-data-table-header__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.v-data-table-header__sort-icon {
|
||||
margin-inline: 0px;
|
||||
}
|
||||
.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: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table-progress > th {
|
||||
border: none;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.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__tr--mobile > .v-data-table__td--select-row {
|
||||
grid-template-columns: 0;
|
||||
justify-content: end;
|
||||
}
|
||||
.v-data-table__tr--mobile > td {
|
||||
align-items: center;
|
||||
column-gap: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
min-height: var(--v-table-row-height);
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table__tr--mobile > td:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-data-table__td-title {
|
||||
font-weight: 500;
|
||||
text-align: start;
|
||||
}
|
||||
.v-data-table__td-value {
|
||||
text-align: end;
|
||||
}
|
||||
.v-data-table__td-sort-icon {
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-disabled-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-data-table__td-sort-icon-active {
|
||||
color: rgba(var(--v-theme-on-surface));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user