feat: reusable ag grid
This commit is contained in:
@@ -1,6 +1,320 @@
|
||||
.ag-theme-alpine-dark .ag-cell {
|
||||
cursor: text !important;
|
||||
}
|
||||
.ag-theme-alpine.vuetify-grid .ag-cell,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-cell {
|
||||
-webkit-user-select: text !important;
|
||||
-moz-user-select: text !important;
|
||||
-ms-user-select: text !important;
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
/* Inputs (filters, quick filter, tool panels) */
|
||||
.ag-theme-alpine.vuetify-grid .ag-input-field-input,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-input-field-input {
|
||||
background-color: rgba(var(--v-theme-on-surface), 0.04) !important;
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 8px !important;
|
||||
height: auto !important;
|
||||
line-height: normal !important;
|
||||
box-sizing: border-box !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-input-field-input:focus,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-input-field-input:focus {
|
||||
outline: none !important;
|
||||
border-color: rgb(var(--v-theme-primary)) !important;
|
||||
box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.2) !important;
|
||||
}
|
||||
|
||||
/* Checkboxes (row select, set filter items) */
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
border-radius: 6px !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"],
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"] {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
border-radius: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
position: static !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:checked,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:checked { transform: none; }
|
||||
|
||||
/* keep AG Grid's own checkmark */
|
||||
|
||||
/* Center and tidy header selection checkbox */
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-select-all,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-select-all {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-cell .ag-selection-checkbox,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-cell .ag-selection-checkbox {
|
||||
margin: 0 auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
/* Center selection checkbox inside body cells as well */
|
||||
.ag-theme-alpine.vuetify-grid .ag-cell .ag-selection-checkbox,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-cell .ag-selection-checkbox {
|
||||
margin: 0 auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
/* Prevent nested visual duplication: wrapper stays transparent, input renders the box */
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-cell .ag-checkbox-input-wrapper,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-cell .ag-checkbox-input-wrapper {
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
/* Unify checkbox input look & interactions */
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"],
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"] {
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:hover,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:hover {
|
||||
border-color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:focus-visible,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.25) !important;
|
||||
}
|
||||
|
||||
/* Improve alignment for narrow first column without forcing brittle indices */
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-cell.ag-column-first,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-cell.ag-column-first {
|
||||
padding-left: 6px !important;
|
||||
padding-right: 6px !important;
|
||||
}
|
||||
|
||||
/* Make selection column narrower and center contents */
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-cell.ag-column-first,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-cell.ag-column-first {
|
||||
padding-left: 6px !important;
|
||||
padding-right: 6px !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-center-cols-container .ag-cell.ag-cell-not-inline-editing.ag-cell-focus.ag-cell-value.ag-cell-normal-height[aria-colindex="1"],
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-center-cols-container .ag-cell.ag-cell-not-inline-editing.ag-cell-focus.ag-cell-value.ag-cell-normal-height[aria-colindex="1"] {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* Set filter items aesthetics */
|
||||
.ag-theme-alpine.vuetify-grid .ag-set-filter-item,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-set-filter-item {
|
||||
padding: 6px 8px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-set-filter-item:hover,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-set-filter-item:hover {
|
||||
background-color: rgba(var(--v-theme-primary), 0.08) !important;
|
||||
}
|
||||
|
||||
/* Status cell: ensure chip text aligns nicely */
|
||||
.ag-theme-alpine.vuetify-grid .ag-cell[col-id="status"],
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-cell[col-id="status"] {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
.ag-theme-alpine .ag-cell,
|
||||
.ag-theme-alpine-dark .ag-cell {
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
/* Set Filter, Column Tool Panel, Picker styles to match panel */
|
||||
.ag-theme-alpine .ag-menu,
|
||||
.ag-theme-alpine .ag-filter,
|
||||
.ag-theme-alpine .ag-set-filter,
|
||||
.ag-theme-alpine .ag-column-panel,
|
||||
.ag-theme-alpine .ag-tool-panel-wrapper,
|
||||
.ag-theme-alpine .ag-picker-field-wrapper {
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark .ag-menu,
|
||||
.ag-theme-alpine-dark .ag-filter,
|
||||
.ag-theme-alpine-dark .ag-set-filter,
|
||||
.ag-theme-alpine-dark .ag-column-panel,
|
||||
.ag-theme-alpine-dark .ag-tool-panel-wrapper,
|
||||
.ag-theme-alpine-dark .ag-picker-field-wrapper {
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-set-filter-item,
|
||||
.ag-theme-alpine-dark .ag-set-filter-item {
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
}
|
||||
|
||||
/* Target the exact AG Grid checkbox structure you shared */
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-wrapper,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-wrapper {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-wrapper:hover,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-wrapper:hover { transform: none; }
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-wrapper.ag-checked,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-wrapper.ag-checked { transform: none; }
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-wrapper.ag-checked::after,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-wrapper.ag-checked::after { content: none !important; }
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-field-input,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-field-input {
|
||||
position: static !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-field-input:focus-visible + .ag-input-wrapper,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-field-input:focus-visible + .ag-input-wrapper { transform: none; }
|
||||
|
||||
/* Ensure horizontal/vertical centering of checkbox in header and cells */
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-cell .ag-checkbox,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-cell .ag-checkbox,
|
||||
.ag-theme-alpine.vuetify-grid .ag-cell .ag-checkbox,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-cell .ag-checkbox {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* Final neutralization: let AG Grid draw the checkbox visuals */
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"],
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"] {
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:checked,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:checked {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-set-filter-item:hover,
|
||||
.ag-theme-alpine-dark .ag-set-filter-item:hover {
|
||||
background-color: rgba(var(--v-theme-primary), 0.08) !important;
|
||||
}
|
||||
|
||||
/* Remove generic checkbox box styling to avoid double visuals; rely on theme defaults */
|
||||
.ag-theme-alpine .ag-checkbox-input-wrapper input[type="checkbox"],
|
||||
.ag-theme-alpine-dark .ag-checkbox-input-wrapper input[type="checkbox"] {
|
||||
background: initial !important;
|
||||
border: initial !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-checkbox-input-wrapper input[type="checkbox"]:checked,
|
||||
.ag-theme-alpine-dark .ag-checkbox-input-wrapper input[type="checkbox"]:checked {
|
||||
background: initial !important;
|
||||
border-color: initial !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-selection-checkbox,
|
||||
.ag-theme-alpine-dark .ag-selection-checkbox {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-header-cell-menu-button,
|
||||
.ag-theme-alpine-dark .ag-header-cell-menu-button {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-header-cell:hover .ag-icon-filter,
|
||||
.ag-theme-alpine-dark .ag-header-cell:hover .ag-icon-filter {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-picker-field-display,
|
||||
.ag-theme-alpine-dark .ag-picker-field-display {
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-select .ag-picker-field-wrapper,
|
||||
.ag-theme-alpine-dark .ag-select .ag-picker-field-wrapper {
|
||||
background-color: rgba(var(--v-theme-on-surface), 0.05) !important;
|
||||
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 4px 8px !important;
|
||||
min-height: 32px !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine .ag-list-item,
|
||||
.ag-theme-alpine-dark .ag-list-item {
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark .ag-cell:hover {
|
||||
cursor: text !important;
|
||||
@@ -150,45 +464,25 @@
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"] {
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
border: 2px solid rgba(var(--v-theme-on-surface), 0.6) !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"]:checked {
|
||||
background-color: rgb(var(--v-theme-primary)) !important;
|
||||
border-color: rgb(var(--v-theme-primary)) !important;
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
border-radius: 4px !important;
|
||||
border: 2px solid rgba(var(--v-theme-on-surface), 0.6) !important;
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
position: relative !important;
|
||||
transition: all 0.2s ease-in-out !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox:checked {
|
||||
background-color: rgb(var(--v-theme-primary)) !important;
|
||||
border-color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox:checked { transform: none; }
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox:checked::after {
|
||||
content: "✓" !important;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
color: rgb(var(--v-theme-on-primary)) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox:checked::after { content: none !important; }
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox:hover {
|
||||
border-color: rgb(var(--v-theme-primary)) !important;
|
||||
background-color: rgba(var(--v-theme-primary), 0.08) !important;
|
||||
}
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox:hover { transform: none; }
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-menu {
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
@@ -313,7 +607,31 @@
|
||||
justify-content: space-between !important;
|
||||
transition: all 0.2s ease-in-out !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Ensure page-size picker can overflow and is clickable */
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-paging-page-size,
|
||||
.ag-theme-alpine.vuetify-grid .ag-paging-page-size {
|
||||
position: relative !important;
|
||||
overflow: visible !important;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-wrapper.ag-picker-field-wrapper,
|
||||
.ag-theme-alpine.vuetify-grid .ag-wrapper.ag-picker-field-wrapper {
|
||||
position: relative !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
/* Raise ag-Grid popups above footer */
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-popup,
|
||||
.ag-theme-alpine.vuetify-grid .ag-popup,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-select-list,
|
||||
.ag-theme-alpine.vuetify-grid .ag-select-list,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-menu,
|
||||
.ag-theme-alpine.vuetify-grid .ag-menu {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-paging-panel:hover {
|
||||
@@ -653,7 +971,7 @@
|
||||
justify-content: space-between !important;
|
||||
transition: all 0.2s ease-in-out !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
overflow: visible !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
@@ -998,4 +1316,73 @@
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-paging-page-summary-panel,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-paging-row-summary-panel {
|
||||
color: rgb(var(--v-theme-on-surface)) !important;
|
||||
}
|
||||
|
||||
/* === FINAL MINIMAL CHECKBOX FIXES (reset visuals, keep centering) === */
|
||||
/* Reset wrappers/inputs to AG Grid default rendering so no double visuals occur */
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper,
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
display: inline-block !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox .ag-input-wrapper,
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox .ag-input-wrapper {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
position: static !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"],
|
||||
.ag-theme-alpine.vuetify-grid .ag-checkbox-input-wrapper input[type="checkbox"] {
|
||||
position: static !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
opacity: 1 !important;
|
||||
cursor: pointer !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Center selection checkboxes in header and cells without altering visuals */
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-cell .ag-header-select-all,
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-cell .ag-header-select-all {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* Ensure checkbox container is centered */
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-selection-checkbox,
|
||||
.ag-theme-alpine.vuetify-grid .ag-selection-checkbox,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-header-select-all,
|
||||
.ag-theme-alpine.vuetify-grid .ag-header-select-all,
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-cell .ag-checkbox,
|
||||
.ag-theme-alpine.vuetify-grid .ag-cell .ag-checkbox {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark.vuetify-grid .ag-centered,
|
||||
.ag-theme-alpine.vuetify-grid .ag-centered {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
/* Optional: use AG Grid var to unify checkbox size if supported */
|
||||
.ag-theme-alpine-dark.vuetify-grid,
|
||||
.ag-theme-alpine.vuetify-grid {
|
||||
--ag-checkbox-size: 18px;
|
||||
}
|
||||
Reference in New Issue
Block a user