Files
Website/resources/css/data-table.scss
2023-03-01 20:12:47 +10:00

63 lines
1.7 KiB
SCSS

@import "vue3-easy-data-table/dist/style.css";
.vue3-easy-data-table {
border-radius: 12px;
.vue3-easy-data-table__header tr {
background-color: var(--easy-table-header-background-color);
}
.vue3-easy-data-table__header th {
background-color: transparent;
}
.vue3-easy-data-table__body td {
white-space: nowrap;
// overflow: hidden;
text-overflow: ellipsis;
}
.vue3-easy-data-table__main {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.vue3-easy-data-table__footer {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
td.easy-data-table-cell-center {
text-align: center !important;
}
th.easy-data-table-cell-center .header {
justify-content: center !important;
}
.action-wrapper {
a {
color: $font-color;
}
}
}
:root {
--easy-table-border: #{1px solid $border-color};
--easy-table-row-border: #{1px solid $border-color};
--easy-table-header-font-size: #{calc($font-size / 1.1)};
--easy-table-header-background-color: #{$secondary-background-color};
--easy-table-header-item-padding: 20px 20px;
--easy-table-body-row-font-size: #{calc($font-size / 1.2)};
--easy-table-body-item-padding: 20px 20px;
--easy-table-body-row-hover-background-color: #e5f3fd;
--easy-table-footer-font-size: #{calc($font-size / 1.2)};
--easy-table-footer-background-color: #{$secondary-background-color};
--easy-table-footer-padding: 20px 20px;
--easy-table-footer-height: auto;
--easy-table-message-font-size: #{calc($font-size / 1.2)};
}