From b2045352ac5092eec03d203a3e923eabd993f37f Mon Sep 17 00:00:00 2001 From: Paul Valerie GOMA Date: Mon, 28 Jul 2025 11:46:32 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Adding*=20the=20style=20of=20the?= =?UTF-8?q?=20primevue=20datatable=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/primevue-style/datatable.css | 109 ++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 src/assets/style/primevue-style/datatable.css diff --git a/src/assets/style/primevue-style/datatable.css b/src/assets/style/primevue-style/datatable.css new file mode 100644 index 0000000..7a250da --- /dev/null +++ b/src/assets/style/primevue-style/datatable.css @@ -0,0 +1,109 @@ +:root{ + --p-datatable-paginator-bottom-border-color: var(--p-datatable-border-color); + --p-datatable-paginator-bottom-border-width: 0 0 1px 0; + --p-datatable-paginator-top-border-color: var(--p-datatable-border-color); + --p-datatable-paginator-top-border-width: 0 0 1px 0; + --p-datatable-filter-inline-gap: 0.5rem; + --p-datatable-filter-constraint-focus-background: var(--p-list-option-focus-background); + --p-datatable-filter-constraint-selected-background: var(--p-list-option-selected-background); + --p-datatable-filter-constraint-selected-focus-background: var(--p-list-option-selected-focus-background); + --p-datatable-filter-constraint-color: var(--p-list-option-color); + --p-datatable-filter-constraint-focus-color: var(--p-list-option-focus-color); + --p-datatable-filter-constraint-selected-color: var(--p-list-option-selected-color); + --p-datatable-filter-constraint-selected-focus-color: var(--p-list-option-selected-focus-color); + --p-datatable-filter-constraint-padding: var(--p-list-option-padding); + --p-datatable-filter-constraint-border-radius: var(--p-list-option-border-radius); + --p-datatable-filter-constraint-separator-border-color: var(--p-content-border-color); + --p-datatable-filter-constraint-list-padding: var(--p-list-padding); + --p-datatable-filter-constraint-list-gap: var(--p-list-gap); + --p-datatable-filter-rule-border-color: var(--p-content-border-color); + --p-datatable-filter-overlay-popover-background: var(--p-overlay-popover-background); + --p-datatable-filter-overlay-popover-border-color: var(--p-overlay-popover-border-color); + --p-datatable-filter-overlay-popover-border-radius: var(--p-overlay-popover-border-radius); + --p-datatable-filter-overlay-popover-color: var(--p-overlay-popover-color); + --p-datatable-filter-overlay-popover-shadow: var(--p-overlay-popover-shadow); + --p-datatable-filter-overlay-popover-padding: var(--p-overlay-popover-padding); + --p-datatable-filter-overlay-popover-gap: 0.5rem; + --p-datatable-filter-overlay-select-background: var(--p-overlay-select-background); + --p-datatable-filter-overlay-select-border-color: var(--p-overlay-select-border-color); + --p-datatable-filter-overlay-select-border-radius: var(--p-overlay-select-border-radius); + --p-datatable-filter-overlay-select-color: var(--p-overlay-select-color); + --p-datatable-filter-overlay-select-shadow: var(--p-overlay-select-shadow); + --p-datatable-row-toggle-button-hover-background: var(--datatable-hover-background); + --p-datatable-row-toggle-button-selected-hover-background: var(--datatable-background); + --p-datatable-row-toggle-button-color: var(--datatable-row-color); + --p-datatable-row-toggle-button-hover-color: var(--datatable-row-color); + --p-datatable-row-toggle-button-selected-hover-color: var(--datatable-row-color); + --p-datatable-row-toggle-button-size: 1.75rem; + --p-datatable-row-toggle-button-border-radius: 0px; + --p-datatable-row-toggle-button-focus-ring-width: var(--focus-width); + --p-datatable-row-toggle-button-focus-ring-style: var(--focus-style); + --p-datatable-row-toggle-button-focus-ring-color: var(--focus-color); + --p-datatable-row-toggle-button-focus-ring-offset: var(--focus-offset); + /* --p-datatable-row-toggle-button-focus-ring-shadow: var(--p-focus-ring-shadow); */ + --p-datatable-loading-icon-size: 2rem; + --p-datatable-sort-icon-color: var(--datatable-row-color); + --p-datatable-sort-icon-hover-color: var(--datatable-row-color); + --p-datatable-sort-icon-size: 0.875rem; + --p-datatable-resize-indicator-width: 1px; + --p-datatable-resize-indicator-color: var(--p-primary-color); + --p-datatable-column-resizer-width: 0.5rem; + --p-datatable-drop-point-color: var(--p-primary-color); + --p-datatable-footer-background: var(--datatable-background); + --p-datatable-footer-border-color: var(--p-datatable-border-color); + --p-datatable-footer-color: var(--p-content-color); + --p-datatable-footer-border-width: 0 0 1px 0; + --p-datatable-footer-padding: 1rem; + --p-datatable-footer-lg-padding: 1.25rem; + --p-datatable-footer-sm-padding: 0.5rem; + --p-datatable-column-footer-font-weight: 600; + --p-datatable-footer-cell-background: var(--datatable-background); + --p-datatable-footer-cell-border-color: var(--p-datatable-border-color); + --p-datatable-footer-cell-color: var(--p-content-color); + --p-datatable-footer-cell-padding: 1rem; + --p-datatable-footer-cell-lg-padding: 1.25rem; + --p-datatable-footer-cell-sm-padding: 0.5rem; + --p-datatable-body-cell-border-color: var(--p-datatable-border-color); + --p-datatable-body-cell-padding: 1rem; + --p-datatable-body-cell-lg-padding: 1.25rem; + --p-datatable-body-cell-sm-padding: 0.5rem; + --p-datatable-row-background: var(--datatable-alt-background); + --p-datatable-row-hover-background: var(--datatable-hover-background); + --p-datatable-row-selected-background: var(--datatable-active-background); + --p-datatable-row-color: var(--datatable-row-color); + --p-datatable-row-hover-color: var(--datatable-row-color); + --p-datatable-row-selected-color: var(--datatable-row-color); + --p-datatable-row-focus-ring-width: var(--focus-width); + --p-datatable-row-focus-ring-style: var(--focus-style); + --p-datatable-row-focus-ring-color: var(--focus-color); + --p-datatable-row-focus-ring-offset: -1px; + /* --p-datatable-row-focus-ring-shadow: var(--p-focus-ring-shadow); */ + --p-datatable-column-title-font-weight: var(--text-body-SM-detail-text-Bold-weight); + --p-datatable-header-cell-background: var(--datatable-background); + --p-datatable-header-cell-hover-background: var(--datatable-hover-background); + --p-datatable-header-cell-selected-background: var(--datatable-active-background); + --p-datatable-header-cell-border-color: var(--border-plain-grey); + --p-datatable-header-cell-color: var(--datatable-header-cell-color); + --p-datatable-header-cell-hover-color: var(--datatable-header-cell-color); + --p-datatable-header-cell-selected-color: var(--datatable-header-cell-color); + --p-datatable-header-cell-gap: 0.5rem; + --p-datatable-header-cell-padding: 1rem; + --p-datatable-header-cell-lg-padding: 1.25rem; + --p-datatable-header-cell-sm-padding: 0.5rem; + --p-datatable-header-cell-focus-ring-width: var(--focus-width); + --p-datatable-header-cell-focus-ring-style: var(--focus-style); + --p-datatable-header-cell-focus-ring-color: var(--focus-color); + --p-datatable-header-cell-focus-ring-offset: -1px; + /* --p-datatable-header-cell-focus-ring-shadow: var(--p-focus-ring-shadow); */ + --p-datatable-header-background: var(--datatable-background); + --p-datatable-header-border-color: var(--border-default-grey); + --p-datatable-header-color: var(--datatable-header-cell-color); + --p-datatable-header-border-width: 0 0 1px 0; + --p-datatable-header-padding: 1rem; + --p-datatable-header-lg-padding: 1.25rem; + --p-datatable-header-sm-padding: 0.5rem; + /* --p-datatable-transition-duration: var(--p-transition-duration); */ + --p-datatable-body-cell-selected-border-color: var(--datatable-active-background); + --p-datatable-row-striped-background: var(--datatable-background); + --p-datatable-border-color: var(--p-content-border-color); +}