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

package/src/components/checkbox.css

@@ -0,0 +1,341 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_checkbox {
+  :host {
+    color: var(--vaadin-checkbox-label-color, var(--lumo-body-text-color));
+    font-size: var(--vaadin-checkbox-label-font-size, var(--lumo-font-size-m));
+    font-family: var(--lumo-font-family);
+    line-height: var(--lumo-line-height-s);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    outline: none;
+    --_checkbox-size: var(--vaadin-checkbox-size, calc(var(--lumo-size-m) / 2));
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+    --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
+    --_disabled-checkmark-color: var(--vaadin-checkbox-disabled-checkmark-color, var(--lumo-contrast-30pct));
+  }
+
+  [part='label'] {
+    display: flex;
+    position: relative;
+    max-width: max-content;
+  }
+
+  :host([has-label]) ::slotted(label) {
+    padding: var(
+      --vaadin-checkbox-label-padding,
+      var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
+    );
+  }
+
+  :host([dir='rtl'][has-label]) ::slotted(label) {
+    padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+  }
+
+  :host([has-label][required]) ::slotted(label) {
+    padding-inline-end: var(--lumo-space-m);
+  }
+
+  [part='checkbox'] {
+    --_input-size: var(--_checkbox-size);
+    margin: var(--lumo-space-xs);
+    position: relative;
+    border-radius: var(--vaadin-checkbox-border-radius, var(--lumo-border-radius-s));
+    background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
+    transition:
+      transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
+      background-color 0.15s;
+    cursor: var(--lumo-clickable-cursor);
+    /* Default field border color */
+    --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
+  }
+
+  :host([indeterminate]),
+  :host([checked]) {
+    --vaadin-input-field-border-color: transparent;
+  }
+
+  :host([indeterminate]) [part='checkbox'],
+  :host([checked]) [part='checkbox'] {
+    background-color: var(--_selection-color);
+  }
+
+  /* Used for activation "halo" */
+  [part='checkbox']::before {
+    pointer-events: none;
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: inherit;
+    transform: scale(1.4);
+    opacity: 0;
+    transition:
+      transform 0.1s,
+      opacity 0.8s;
+  }
+
+  /* Checkmark */
+  [part='checkbox']::after {
+    pointer-events: none;
+    font-family: 'lumo-icons';
+    content: var(--vaadin-checkbox-checkmark-char, var(--lumo-icons-checkmark));
+    color: var(--vaadin-checkbox-checkmark-color, var(--lumo-primary-contrast-color));
+    font-size: var(--vaadin-checkbox-checkmark-size, calc(var(--_checkbox-size) + 2px));
+    line-height: 1;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    contain: content;
+    opacity: 0;
+  }
+
+  :host([checked]) [part='checkbox']::after {
+    opacity: 1;
+  }
+
+  :host([readonly]:not([checked]):not([indeterminate])) {
+    color: var(--lumo-secondary-text-color);
+  }
+
+  :host([readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :host([readonly]:not([checked]):not([indeterminate])) [part='checkbox']::after {
+    content: '';
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-50pct));
+  }
+
+  /* Indeterminate checkmark */
+  :host([indeterminate]) [part='checkbox']::after {
+    content: var(--vaadin-checkbox-checkmark-char-indeterminate, '');
+    opacity: 1;
+    top: 45%;
+    height: 10%;
+    left: 22%;
+    right: 22%;
+    width: auto;
+    border: 0;
+    background-color: var(--lumo-primary-contrast-color);
+  }
+
+  /* Focus ring */
+  :host([focus-ring]) [part='checkbox'] {
+    box-shadow:
+      0 0 0 1px var(--lumo-base-color),
+      0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
+      inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  :host([focus-ring][readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
+    box-shadow:
+      0 0 0 1px var(--lumo-base-color),
+      0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+  }
+
+  /* Disabled */
+  :host([disabled]) {
+    pointer-events: none;
+    --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
+  }
+
+  :host([disabled]) ::slotted(label) {
+    color: inherit;
+  }
+
+  :host([disabled]) [part='checkbox'] {
+    background-color: var(--vaadin-checkbox-disabled-background, var(--lumo-contrast-10pct));
+  }
+
+  :host([disabled]) [part='checkbox']::after {
+    color: var(--_disabled-checkmark-color);
+  }
+
+  :host([disabled]) [part='label'],
+  :host([disabled]) [part='helper-text'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([indeterminate][disabled]) [part='checkbox']::after {
+    background-color: var(--_disabled-checkmark-color);
+  }
+
+  :host([readonly][checked]:not([disabled])) [part='checkbox'],
+  :host([readonly][indeterminate]:not([disabled])) [part='checkbox'] {
+    background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
+  }
+
+  /* Hover */
+  :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
+    background: var(--vaadin-checkbox-background-hover, var(--lumo-contrast-30pct));
+  }
+
+  /* Disable hover for touch devices */
+  @media (pointer: coarse) {
+    /* prettier-ignore */
+    :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
+        background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
+      }
+  }
+
+  /* Active */
+  :host([active]) [part='checkbox'] {
+    transform: scale(0.9);
+    transition-duration: 0.05s;
+  }
+
+  :host([active][checked]) [part='checkbox'] {
+    transform: scale(1.1);
+  }
+
+  :host([active]:not([checked])) [part='checkbox']::before {
+    transition-duration: 0.01s, 0.01s;
+    transform: scale(0);
+    opacity: 0.4;
+  }
+
+  /* Required */
+  :host([required]) [part='required-indicator'] {
+    position: absolute;
+    top: var(--lumo-space-xs);
+    right: var(--lumo-space-xs);
+  }
+
+  :host([required][dir='rtl']) [part='required-indicator'] {
+    right: auto;
+    left: var(--lumo-space-xs);
+  }
+
+  :host([required]) [part='required-indicator']::after {
+    content: var(--lumo-required-field-indicator, '\2022');
+    transition: opacity 0.2s;
+    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    width: 1em;
+    text-align: center;
+  }
+
+  :host(:not([has-label])) [part='required-indicator'] {
+    display: none;
+  }
+
+  /* Invalid */
+  :host([invalid]) {
+    --vaadin-input-field-border-color: var(--lumo-error-color);
+  }
+
+  :host([invalid]) [part='checkbox'] {
+    background-color: var(--_invalid-background);
+    background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
+  }
+
+  :host([invalid]:hover) [part='checkbox'] {
+    background-image:
+      linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%),
+      linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
+  }
+
+  :host([invalid][focus-ring]) {
+    --_focus-ring-color: var(--lumo-error-color-50pct);
+  }
+
+  :host([invalid]) [part='required-indicator']::after {
+    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+  }
+
+  /* Error message */
+  [part='error-message'] {
+    font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
+    line-height: var(--lumo-line-height-xs);
+    font-weight: var(--vaadin-input-field-error-font-weight, 400);
+    color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
+    will-change: max-height;
+    transition: 0.4s max-height;
+    max-height: 5em;
+    padding-inline-start: var(--lumo-space-xs);
+  }
+
+  [part='helper-text'],
+  [part='error-message'] {
+    grid-column: 2;
+  }
+
+  :host(:not([has-helper])) [part='helper-text'],
+  :host(:not([has-error-message])) [part='error-message'] {
+    display: none;
+  }
+
+  :host([has-error-message]) [part='error-message']::after,
+  :host([has-helper]) [part='helper-text']::after {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
+
+  :host(:not([invalid])) [part='error-message'] {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  /* Helper */
+  [part='helper-text'] {
+    display: block;
+    color: var(--vaadin-input-field-helper-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-input-field-helper-font-size, var(--lumo-font-size-xs));
+    line-height: var(--lumo-line-height-xs);
+    font-weight: var(--vaadin-input-field-helper-font-weight, 400);
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    transition: color 0.2s;
+    padding-inline-start: var(--lumo-space-xs);
+  }
+
+  :host(:hover:not([readonly])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  :host([has-error-message]) ::slotted(label),
+  :host([has-helper]) ::slotted(label) {
+    padding-bottom: 0;
+  }
+
+  @media (forced-colors: active) {
+    [part='checkbox'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([disabled]) [part='checkbox'],
+    :host([disabled]) [part='checkbox']::after {
+      outline-color: GrayText;
+    }
+
+    :host(:is([checked], [indeterminate])) [part='checkbox']::after {
+      outline: 1px solid;
+      outline-offset: -1px;
+      border-radius: inherit;
+    }
+
+    :host([focused]) [part='checkbox'],
+    :host([focused]) [part='checkbox']::after {
+      outline-width: 2px;
+    }
+  }
+}

package/src/components/combo-box-item.css

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_combo-box-item {
+  :host {
+    transition: background-color 100ms;
+    overflow: hidden;
+    --_lumo-item-selected-icon-display: block;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([focused]:not([disabled])) {
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+}

package/src/components/combo-box-overlay.css

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_combo-box-overlay {
+  :host {
+    --_vaadin-combo-box-items-container-border-width: var(--lumo-space-xs);
+    --_vaadin-combo-box-items-container-border-style: solid;
+  }
+
+  #overlay {
+    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+  }
+}

package/src/components/combo-box.css

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_combo-box {
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
+}

package/src/components/confirm-dialog-overlay.css

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_confirm-dialog-overlay {
+  #resizerContainer {
+    height: 100%;
+  }
+
+  [part='header'] {
+    pointer-events: auto;
+    margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+    font-size: var(--lumo-font-size-xl);
+    color: var(--lumo-header-text-color);
+  }
+
+  ::slotted([slot='header']) {
+    display: contents !important;
+    font: inherit !important;
+    color: inherit !important;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] > * {
+    pointer-events: all;
+  }
+
+  [part='message'] {
+    width: 25em;
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  ::slotted([slot$='button'][theme~='tertiary']) {
+    padding-left: var(--lumo-space-s);
+    padding-right: var(--lumo-space-s);
+  }
+
+  [part='cancel-button'] {
+    flex-grow: 1;
+  }
+
+  @media (max-width: 360px) {
+    [part='footer'] {
+      flex-direction: column-reverse;
+      align-items: stretch;
+      padding: var(--lumo-space-s) var(--lumo-space-l);
+      gap: var(--lumo-space-s);
+    }
+
+    ::slotted([slot$='button']) {
+      width: 100%;
+      margin: 0;
+    }
+  }
+}

package/src/components/context-menu-item.css

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_context-menu-item {
+  /* :hover needed to workaround https://github.com/vaadin/web-components/issues/3133 */
+  :host(:hover) {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([role='menuitem'][menu-item-checked]) [part='checkmark']::before {
+    opacity: 1;
+  }
+
+  :host([aria-haspopup='true'])::after {
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-xs);
+    content: var(--lumo-icons-angle-right);
+    color: var(--lumo-tertiary-text-color);
+  }
+
+  :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
+    margin-right: calc(var(--lumo-space-m) * -1);
+    padding-left: var(--lumo-space-m);
+  }
+
+  :host([expanded]) {
+    background-color: var(--lumo-primary-color-10pct);
+  }
+
+  /* RTL styles */
+  :host([dir='rtl'][aria-haspopup='true'])::after {
+    content: var(--lumo-icons-angle-left);
+    margin-left: calc(var(--lumo-space-m) * -1);
+    padding-right: var(--lumo-space-m);
+  }
+}

package/src/components/context-menu-list-box.css

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_context-menu-list-box {
+  :host {
+    --_lumo-list-box-item-selected-icon-display: block;
+  }
+
+  /* Normal item */
+  [part='items'] ::slotted([role='menuitem']) {
+    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
+    cursor: default;
+    outline: none;
+    border-radius: var(--lumo-border-radius-m);
+    padding-left: calc(var(--lumo-border-radius-m) / 4);
+    padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+  }
+
+  /* Hovered item */
+  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
+  [part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
+  [part='items'] ::slotted([role='menuitem'][expanded]:not([disabled])) {
+    background-color: var(--lumo-primary-color-10pct);
+  }
+
+  /* RTL styles */
+  :host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
+    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    padding-right: calc(var(--lumo-border-radius-m) / 4);
+  }
+
+  /* Focused item */
+  @media (pointer: coarse) {
+    [part='items'] ::slotted([role='menuitem']:hover:not([expanded]):not([disabled])) {
+      background-color: transparent;
+    }
+  }
+}

package/src/components/context-menu-overlay.css

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_context-menu-overlay {
+  :host {
+    align-items: flex-start;
+    justify-content: flex-start;
+    /* TODO These style overrides should not be needed.
+     We should instead offer a way to have non-selectable items inside the context menu. */
+    --_lumo-list-box-item-selected-icon-display: none;
+    --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
+  }
+
+  :host([right-aligned]),
+  :host([end-aligned]) {
+    align-items: flex-end;
+  }
+
+  :host([bottom-aligned]) {
+    justify-content: flex-end;
+  }
+
+  [part='overlay'] {
+    background-color: #fff;
+    outline: none;
+  }
+
+  :host([phone]) {
+    inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 !important;
+    align-items: stretch;
+    justify-content: flex-end;
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid !important;
+    }
+  }
+}

package/src/components/crud-dialog-overlay.css

@@ -0,0 +1,57 @@
+/**
+ * @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_crud-dialog-overlay {
+  [part='overlay'] {
+    max-width: 54em;
+    min-width: 20em;
+    display: flex;
+  }
+
+  .resizer-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  [part='footer'] {
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] ::slotted(:not([disabled])) {
+    pointer-events: all;
+  }
+
+  :host([fullscreen]) {
+    inset: 0;
+    padding: 0;
+  }
+
+  :host([fullscreen]) [part='overlay'] {
+    height: 100vh;
+    width: 100vw;
+    border-radius: 0 !important;
+  }
+
+  :host([fullscreen]) [part='content'] {
+    flex: 1;
+  }
+
+  [part='header'] ::slotted(h3) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    margin-inline-start: var(--lumo-space-s);
+  }
+
+  :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
+    margin-right: auto;
+  }
+
+  :host([dir='rtl']) ::slotted([slot='delete-button']) {
+    margin-left: auto;
+  }
+}

package/src/components/crud-edit.css

@@ -0,0 +1,30 @@
+/**
+ * @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_crud-edit {
+  :host {
+    display: block;
+    min-width: auto;
+    margin: 0;
+    font-family: 'lumo-icons', var(--lumo-font-family);
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    position: relative;
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    outline: none;
+  }
+
+  [part='icon']::before {
+    content: var(--lumo-icons-edit);
+    width: var(--lumo-size-m);
+    height: var(--lumo-size-m);
+    line-height: var(--lumo-size-m);
+    text-align: center;
+    position: absolute;
+    top: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
+    left: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
+  }
+}