gridpackage.theme.lumo.vaadin-grid-styles.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/font-icons.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
registerStyles(
'vaadin-grid',
css`
:host {
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-m);
line-height: var(--lumo-line-height-s);
color: var(--lumo-body-text-color);
background-color: var(--lumo-base-color);
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
/* For internal use only */
--_lumo-grid-border-color: var(--lumo-contrast-20pct);
--_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct);
--_lumo-grid-border-width: 1px;
--_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
}
/* No (outer) border */
:host(:not([theme~='no-border'])) {
border: var(--_lumo-grid-border-width) solid var(--_lumo-grid-border-color);
}
:host([disabled]) {
opacity: 0.7;
}
/* Cell styles */
[part~='cell'] {
min-height: var(--lumo-size-m);
background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
cursor: default;
--_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
--_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
}
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
cursor: inherit;
padding: var(--_cell-padding);
}
/* Apply row borders by default and introduce the "no-row-borders" variant */
:host(:not([theme~='no-row-borders'])) [part~='cell']:not([part~='details-cell']) {
border-top: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
}
/* Hide first body row top border */
:host(:not([theme~='no-row-borders'])) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
border-top: 0;
min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
}
/* Focus-ring */
[part~='row'] {
position: relative;
}
[part~='row']:focus,
[part~='focused-cell']:focus {
outline: none;
}
:host([navigating]) [part~='row']:focus::before,
:host([navigating]) [part~='focused-cell']:focus::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
}
:host([navigating]) [part~='row']:focus::before {
transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
z-index: 3;
}
/* Empty state */
[part~='empty-state'] {
padding: var(--lumo-space-m);
color: var(--lumo-secondary-text-color);
}
/* Drag and Drop styles */
:host([dragover])::after {
content: '';
position: absolute;
z-index: 100;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
}
[part~='row'][dragover] {
z-index: 100 !important;
}
[part~='row'][dragover] [part~='cell'] {
overflow: visible;
}
[part~='row'][dragover] [part~='cell']::after {
content: '';
position: absolute;
inset: 0;
height: calc(var(--_lumo-grid-border-width) + 2px);
pointer-events: none;
background: var(--lumo-primary-color-50pct);
}
[part~='row'][dragover] [part~='cell'][last-frozen]::after {
right: -1px;
}
:host([theme~='no-row-borders']) [dragover] [part~='cell']::after {
height: 2px;
}
[part~='row'][dragover='below'] [part~='cell']::after {
top: 100%;
bottom: auto;
margin-top: -1px;
}
:host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
height: 1px;
}
[part~='row'][dragover='above'] [part~='cell']::after {
top: auto;
bottom: 100%;
margin-bottom: -1px;
}
[part~='row'][details-opened][dragover='below'] [part~='cell']:not([part~='details-cell'])::after,
[part~='row'][details-opened][dragover='above'] [part~='details-cell']::after {
display: none;
}
[part~='row'][dragover][dragover='on-top'] [part~='cell']::after {
height: 100%;
opacity: 0.5;
}
[part~='row'][dragstart] [part~='cell'] {
border: none !important;
box-shadow: none !important;
}
[part~='row'][dragstart] [part~='cell'][last-column] {
border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
}
[part~='row'][dragstart] [part~='cell'][first-column] {
border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
}
#scroller [part~='row'][dragstart]:not([dragstart=''])::after {
display: block;
position: absolute;
left: var(--_grid-drag-start-x);
top: var(--_grid-drag-start-y);
z-index: 100;
content: attr(dragstart);
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: calc(var(--lumo-space-xs) * 0.8);
color: var(--lumo-error-contrast-color);
background-color: var(--lumo-error-color);
border-radius: var(--lumo-border-radius-m);
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-xxs);
line-height: 1;
font-weight: 500;
text-transform: initial;
letter-spacing: initial;
min-width: calc(var(--lumo-size-s) * 0.7);
text-align: center;
}
/* Headers and footers */
[part~='header-cell'],
[part~='footer-cell'],
[part~='reorder-ghost'] {
font-size: var(--lumo-font-size-s);
font-weight: 500;
}
[part~='footer-cell'] {
font-weight: 400;
}
[part~='row']:only-child [part~='header-cell'] {
min-height: var(--lumo-size-xl);
}
/* Header borders */
/* Hide first header row top border */
:host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='header-cell'] {
border-top: 0;
}
/* Hide header row top border if previous row is hidden */
[part~='row'][hidden] + [part~='row'] [part~='header-cell'] {
border-top: 0;
}
[part~='row']:last-child [part~='header-cell'] {
border-bottom: var(--_lumo-grid-border-width) solid transparent;
}
:host(:not([theme~='no-row-borders'])) [part~='row']:last-child [part~='header-cell'] {
border-bottom-color: var(--_lumo-grid-secondary-border-color);
}
/* Overflow uses a stronger border color */
:host([overflow~='top']) [part~='row']:last-child [part~='header-cell'] {
border-bottom-color: var(--_lumo-grid-border-color);
}
/* Footer borders */
[part~='row']:first-child [part~='footer-cell'] {
border-top: var(--_lumo-grid-border-width) solid transparent;
}
:host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='footer-cell'] {
border-top-color: var(--_lumo-grid-secondary-border-color);
}
/* Overflow uses a stronger border color */
:host([overflow~='bottom']) [part~='row']:first-child [part~='footer-cell'] {
border-top-color: var(--_lumo-grid-border-color);
}
/* Column reordering */
:host([reordering]) [part~='cell'] {
background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct)) var(--lumo-base-color);
}
:host([reordering]) [part~='cell'][reorder-status='allowed'] {
background: var(--lumo-base-color);
}
:host([reordering]) [part~='cell'][reorder-status='dragging'] {
background: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)) var(--lumo-base-color);
}
[part~='reorder-ghost'] {
opacity: 0.85;
box-shadow: var(--lumo-box-shadow-s);
/* TODO Use the same styles as for the cell element (reorder-ghost copies styles from the cell element) */
padding: var(--lumo-space-s) var(--lumo-space-m) !important;
}
/* Column resizing */
[part='resize-handle'] {
--_resize-handle-width: 3px;
width: var(--_resize-handle-width);
background-color: var(--lumo-primary-color-50pct);
opacity: 0;
transition: opacity 0.2s;
}
[part='resize-handle']::before {
transform: translateX(calc(-50% + var(--_resize-handle-width) / 2));
width: var(--lumo-size-s);
}
:host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'],
[part='resize-handle']:active {
opacity: 1;
transition-delay: 0.15s;
}
/* Column borders */
:host([theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
border-right: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
}
/* Frozen columns */
[last-frozen] {
border-right: var(--_lumo-grid-border-width) solid transparent;
overflow: hidden;
}
:host([overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
border-right-color: var(--_lumo-grid-border-color);
}
[first-frozen-to-end] {
border-left: var(--_lumo-grid-border-width) solid transparent;
}
:host([overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
border-left-color: var(--_lumo-grid-border-color);
}
/* Row stripes */
:host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
:host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}
/* Selected row */
/* Raise the selected rows above unselected rows (so that box-shadow can cover unselected rows) */
:host(:not([reordering])) [part~='row'][selected] {
z-index: 1;
}
:host(:not([reordering])) [part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));
background-repeat: repeat;
}
/* Cover the border of an unselected row */
:host(:not([theme~='no-row-borders'])) [part~='row'][selected] [part~='cell']:not([part~='details-cell']) {
box-shadow: 0 var(--_lumo-grid-border-width) 0 0 var(--_lumo-grid-selected-row-color);
}
/* Compact */
:host([theme~='compact']) [part~='row']:only-child [part~='header-cell'] {
min-height: var(--lumo-size-m);
}
:host([theme~='compact']) [part~='cell'] {
min-height: var(--lumo-size-s);
--_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
}
:host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
}
:host([theme~='compact']) [part~='empty-state'] {
padding: var(--lumo-space-s);
}
/* Wrap cell contents */
:host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
white-space: normal;
}
/* RTL specific styles */
:host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][last-column] {
border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
}
:host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][first-column] {
border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
}
:host([dir='rtl'][theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
border-right: none;
border-left: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
}
:host([dir='rtl']) [last-frozen] {
border-right: none;
border-left: var(--_lumo-grid-border-width) solid transparent;
}
:host([dir='rtl']) [first-frozen-to-end] {
border-left: none;
border-right: var(--_lumo-grid-border-width) solid transparent;
}
:host([dir='rtl'][overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
border-left-color: var(--_lumo-grid-border-color);
}
:host([dir='rtl'][overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
border-right-color: var(--_lumo-grid-border-color);
}
`,
{ moduleId: 'lumo-grid' },
);