@vaadin/vaadin-lumo-styles 25.0.0-alpha1 → 25.0.0-alpha10

package/src/components/grid.css

@@ -0,0 +1,755 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_grid {
+  @keyframes vaadin-grid-appear {
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    animation: 1ms vaadin-grid-appear;
+    height: 400px;
+    min-height: var(--_grid-min-height, 0);
+    flex: 1 1 auto;
+    align-self: stretch;
+    position: relative;
+    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);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  #scroller {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    transform: translateY(0);
+    width: auto;
+    height: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  :host([all-rows-visible]) {
+    height: auto;
+    align-self: flex-start;
+    min-height: auto;
+    flex-grow: 0;
+    width: 100%;
+  }
+
+  :host([all-rows-visible]) #scroller {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  :host([all-rows-visible]) #items {
+    min-height: 1px;
+  }
+
+  #table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+    outline: none;
+    /* Workaround for a Desktop Safari bug: new stacking context here prevents the scrollbar from getting hidden */
+    z-index: 0;
+  }
+
+  #header,
+  #footer {
+    display: block;
+    position: sticky;
+    left: 0;
+    overflow: visible;
+    width: 100%;
+    z-index: 1;
+  }
+
+  #header {
+    top: 0;
+  }
+
+  th {
+    text-align: inherit;
+  }
+
+  /* Safari doesn't work with "inherit" */
+  [safari] th {
+    text-align: initial;
+  }
+
+  #footer {
+    bottom: 0;
+  }
+
+  #items {
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    width: 100%;
+    left: 0;
+    overflow: visible;
+  }
+
+  [part~='row'] {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    position: relative;
+  }
+
+  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+    visibility: hidden;
+  }
+
+  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
+    transform: translateX(var(--_grid-lazy-columns-start));
+  }
+
+  #items [part~='row'] {
+    position: absolute;
+  }
+
+  #items [part~='row']:empty {
+    height: 100%;
+  }
+
+  [part~='cell']:not([part~='details-cell']) {
+    flex-shrink: 0;
+    flex-grow: 1;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  [part~='cell'] {
+    outline: none;
+    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'] > [tabindex] {
+    display: flex;
+    align-items: inherit;
+    outline: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  /* Switch the focusButtonMode wrapping element to "position: static" temporarily
+     when measuring real width of the cells in the auto-width columns. */
+  [measuring-auto-width] [part~='cell'] > [tabindex] {
+    position: static;
+  }
+
+  [part~='details-cell'] {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: inherit;
+    padding: var(--_cell-padding);
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  [frozen],
+  [frozen-to-end] {
+    z-index: 2;
+    will-change: transform;
+  }
+
+  [no-scrollbars][safari] #table,
+  [no-scrollbars][firefox] #table {
+    overflow: hidden;
+  }
+
+  /* Empty state */
+
+  #scroller:not([empty-state]) #emptystatebody,
+  #scroller[empty-state] #items {
+    display: none;
+  }
+
+  #emptystatebody {
+    display: flex;
+    position: sticky;
+    inset: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  #emptystaterow {
+    display: flex;
+    flex: 1;
+  }
+
+  #emptystatecell {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+
+  /* Reordering styles */
+  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
+  :host([reordering]) [part~='resize-handle'],
+  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    pointer-events: none;
+  }
+
+  [part~='reorder-ghost'] {
+    visibility: hidden;
+    position: fixed;
+    pointer-events: none;
+
+    /* Prevent overflowing the grid in Firefox */
+    top: 0;
+    left: 0;
+    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;
+  }
+
+  :host([reordering]) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Resizing styles */
+  [part~='resize-handle'] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
+  }
+
+  [part~='resize-handle']::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 35px;
+    transform: translateX(-50%);
+  }
+
+  [last-column] [part~='resize-handle']::before,
+  [last-frozen] [part~='resize-handle']::before {
+    width: 18px;
+    transform: none;
+    right: 0;
+  }
+
+  [frozen-to-end] [part~='resize-handle'] {
+    left: 0;
+    right: auto;
+  }
+
+  [frozen-to-end] [part~='resize-handle']::before {
+    left: 0;
+    right: auto;
+  }
+
+  [first-frozen-to-end] [part~='resize-handle']::before {
+    width: 18px;
+    transform: none;
+  }
+
+  [first-frozen-to-end] {
+    margin-inline-start: auto;
+    border-left: var(--_lumo-grid-border-width) solid transparent;
+  }
+
+  /* Hide resize handle if scrolled to end */
+  :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
+    display: none;
+  }
+
+  #scroller[column-resizing],
+  #scroller[range-selecting] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Sizer styles */
+  #sizer {
+    display: flex;
+    position: absolute;
+    visibility: hidden;
+  }
+
+  #sizer [part~='details-cell'] {
+    display: none !important;
+  }
+
+  #sizer [part~='cell'][hidden] {
+    display: none !important;
+  }
+
+  #sizer [part~='cell'] {
+    display: block;
+    flex-shrink: 0;
+    line-height: 0;
+    height: 0 !important;
+    min-height: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+  }
+
+  #sizer [part~='cell']::before {
+    content: '-';
+  }
+
+  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    display: none !important;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) #items,
+  :host([dir='rtl']) #header,
+  :host([dir='rtl']) #footer {
+    left: auto;
+  }
+
+  :host([dir='rtl']) [part~='reorder-ghost'] {
+    left: auto;
+    right: 0;
+  }
+
+  :host([dir='rtl']) [part~='resize-handle'] {
+    left: 0;
+    right: auto;
+  }
+
+  :host([dir='rtl']) [part~='resize-handle']::before {
+    transform: translateX(50%);
+  }
+
+  :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
+  :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
+    left: 0;
+    right: auto;
+  }
+
+  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
+    right: 0;
+    left: auto;
+  }
+
+  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
+    right: 0;
+    left: auto;
+  }
+
+  /* No (outer) border */
+
+  :host(:not([theme~='no-border'])) {
+    border: var(--_lumo-grid-border-width) solid var(--_lumo-grid-border-color);
+  }
+
+  /* Cell styles */
+
+  /* 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']: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(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);
+  }
+
+  /* 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);
+  }
+
+  :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);
+  }
+
+  @media (forced-colors: active) {
+    [part~='selected-row'] [part~='first-column-cell']::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      border: 2px solid;
+    }
+
+    [part~='focused-cell']::before {
+      outline: 2px solid !important;
+      outline-offset: -1px;
+    }
+  }
+}