@vaadin/vaadin-lumo-styles/src/mixins/dashboard-item.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */

@media lumo_mixins_dashboard-item {
  :host {
    --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
    --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
    --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
    --_widget-editable-shadow: var(--lumo-box-shadow-s);
    --_widget-selected-shadow:
      0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);
    --_drop-target-background-color: var(
      --vaadin-dashboard-drop-target-background-color,
      var(--lumo-primary-color-10pct)
    );
    --_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--lumo-primary-color-50pct));

    color: var(--lumo-body-text-color);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    line-height: var(--lumo-line-height-m);
    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
    --_icon-color: var(--lumo-contrast-60pct);
    opacity: var(--_widget-opacity);
    filter: var(--_widget-filter);
  }

  [part~='move-apply-button'] {
    --icon: var(--lumo-icons-checkmark);
    font-size: var(--lumo-icon-size-m);
  }

  :host([focused]) {
    outline: none;
  }

  header {
    overflow: hidden;
    align-items: start;
    gap: 0;
  }

  [part='title'] {
    color: var(--lumo-header-text-color);
    line-height: var(--lumo-line-height-s);
    margin: 0 0 1px;
  }

  vaadin-dashboard-button {
    font-family: 'lumo-icons';
    font-size: var(--lumo-icon-size-m);
    margin: 0;
  }

  vaadin-dashboard-button .icon::before {
    display: block;
    content: var(--icon);
    background: transparent;
    mask-image: none;
    width: auto;
    height: auto;
  }

  /* Common styles for non-mode edit buttons */
  [part~='move-button'],
  [part~='resize-button'],
  [part~='remove-button'] {
    color: var(--_icon-color);
    padding-inline: 0;
  }

  :where([part~='move-button'], [part~='resize-button'], [part~='remove-button']):hover {
    --_icon-color: var(--lumo-primary-text-color);
  }

  :host([selected]) {
    opacity: 1;
    z-index: 1;
    --_icon-color: var(--lumo-primary-text-color);
  }

  :host(:is([move-mode], [resize-mode])) {
    --_icon-color: var(--lumo-disabled-text-color);
  }

  /* Drag handle */
  [part~='move-button'] {
    --icon: var(--lumo-icons-drag-handle);
  }

  /* Remove button */
  [part~='remove-button'] {
    --icon: var(--lumo-icons-cross);
    margin-inline-start: var(--lumo-space-xs);
  }

  /* Mode controls */
  .mode-controls vaadin-dashboard-button[focused] {
    z-index: 3;
  }

  /* Move mode */

  :host([move-mode]) :is([part~='move-forward-button'], [part~='move-backward-button']) .icon {
    rotate: none;
  }

  :host(:not([dir='rtl'])) [part~='move-backward-button'],
  :host([dir='rtl']) [part~='move-forward-button'] {
    --icon: var(--lumo-icons-angle-left);
  }

  :host(:not([dir='rtl'])) [part~='move-forward-button'],
  :host([dir='rtl']) [part~='move-backward-button'] {
    --icon: var(--lumo-icons-angle-right);
  }
}