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

package/src/components/horizontal-layout.css

@@ -0,0 +1,34 @@
+/**
+ * @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_horizontal-layout {
+  :host([theme~='margin']) {
+    margin: var(--lumo-space-m);
+  }
+
+  :host([theme~='padding']) {
+    padding: var(--lumo-space-m);
+  }
+
+  :host([theme~='spacing-xs']) {
+    gap: var(--lumo-space-xs);
+  }
+
+  :host([theme~='spacing-s']) {
+    gap: var(--lumo-space-s);
+  }
+
+  :host([theme~='spacing']) {
+    gap: var(--lumo-space-m);
+  }
+
+  :host([theme~='spacing-l']) {
+    gap: var(--lumo-space-l);
+  }
+
+  :host([theme~='spacing-xl']) {
+    gap: var(--lumo-space-xl);
+  }
+}

package/src/components/icon.css

@@ -0,0 +1,11 @@
+/**
+ * @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_icon {
+  :host {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+}

package/src/components/input-container.css

@@ -0,0 +1,228 @@
+/**
+ * @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_input-container {
+  :host {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+    --_border-radius: var(--vaadin-input-field-border-radius, 0);
+    --_input-border-width: var(--vaadin-input-field-border-width, 0px);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+    background: var(--_background);
+    padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
+    font-weight: var(--vaadin-input-field-value-font-weight, 500);
+    line-height: 1;
+    position: relative;
+    cursor: text;
+    box-sizing: border-box;
+    border-radius:
+    /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax */
+      var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
+      var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
+      var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius))
+      var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius));
+    /* Fallback */
+    --_input-container-radius: var(--vaadin-input-field-border-radius, var(--lumo-border-radius-m));
+    --_input-height: var(--lumo-text-field-size, var(--lumo-size-m));
+    /* Default values */
+    --_background: var(--vaadin-input-field-background, var(--lumo-contrast-10pct));
+    --_hover-highlight: var(--vaadin-input-field-hover-highlight, var(--lumo-contrast-50pct));
+    --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
+    --_icon-color: var(--vaadin-input-field-icon-color, var(--lumo-contrast-60pct));
+    --_icon-size: var(--vaadin-input-field-icon-size, var(--lumo-icon-size-m));
+    --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
+    --_invalid-hover-highlight: var(--vaadin-input-field-invalid-hover-highlight, var(--lumo-error-color-50pct));
+    --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-5pct));
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
+  }
+
+  :host([dir='rtl']) {
+    border-radius:
+    /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
+      var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
+      var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
+      var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius))
+      var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius));
+  }
+
+  /* Used for hover and activation effects */
+  :host::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: var(--_hover-highlight);
+    opacity: 0;
+    transition:
+      transform 0.15s,
+      opacity 0.2s;
+    transform-origin: 100% 0;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Reset the native input styles */
+  ::slotted(input) {
+    appearance: none;
+    flex: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    min-width: 0;
+    font: inherit;
+    line-height: normal;
+    color: inherit;
+    background-color: transparent;
+    /* Disable default invalid style in Firefox */
+    box-shadow: none;
+  }
+
+  ::slotted(*) {
+    flex: none;
+  }
+
+  ::slotted(:is(input, textarea))::placeholder {
+    /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
+    /* because ::slotted(...)::placeholder does not work in Safari. */
+    font: inherit;
+    color: inherit;
+    /* Override default opacity in Firefox */
+    opacity: 1;
+  }
+
+  ::slotted(:not([slot$='fix'])) {
+    cursor: inherit;
+    min-height: var(--vaadin-input-field-height, var(--_input-height));
+    padding: 0 0.25em;
+    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+    mask-image: var(--_lumo-text-field-overflow-mask-image);
+  }
+
+  /* Read-only */
+  :host([readonly]) {
+    color: var(--lumo-secondary-text-color);
+    background-color: transparent;
+    cursor: default;
+  }
+
+  :host([readonly])::after {
+    background-color: transparent;
+    opacity: 1;
+    border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct));
+  }
+
+  /* Disabled */
+  :host([disabled]) {
+    background: var(--_disabled-background);
+  }
+
+  :host([disabled]) ::slotted(:not([slot$='fix'])) {
+    -webkit-text-fill-color: var(--_disabled-value-color);
+    color: var(--_disabled-value-color);
+  }
+
+  /* Invalid */
+  :host([invalid]) {
+    background: var(--_invalid-background);
+  }
+
+  :host([invalid]:not([readonly]))::after {
+    background: var(--_invalid-hover-highlight);
+  }
+
+  /* Slotted icons */
+  ::slotted(vaadin-icon) {
+    color: var(--_icon-color);
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+  }
+
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
+  }
+
+  /* Text align */
+  :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
+    --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent, #000 1.25em);
+  }
+
+  @-moz-document url-prefix() {
+    :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
+      mask-image: var(--_lumo-text-field-overflow-mask-image);
+    }
+  }
+
+  :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
+    text-align: start;
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  :host([theme~='align-center']) ::slotted(:not([slot$='fix'])) {
+    text-align: center;
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
+    text-align: end;
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  @-moz-document url-prefix() {
+    /* Firefox is smart enough to align overflowing text to right */
+    :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
+      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
+    }
+  }
+
+  @-moz-document url-prefix() {
+    /* Firefox is smart enough to align overflowing text to right */
+    :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
+      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
+    }
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl'])::after {
+    transform-origin: 0% 0;
+  }
+
+  :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  :host([theme~='align-center'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
+    --_lumo-text-field-overflow-mask-image: none;
+  }
+
+  @-moz-document url-prefix() {
+    /* Firefox is smart enough to align overflowing text to right */
+    :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
+      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
+    }
+  }
+
+  @-moz-document url-prefix() {
+    /* Firefox is smart enough to align overflowing text to right */
+    :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
+      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
+    }
+  }
+}

package/src/components/item.css

@@ -0,0 +1,94 @@
+/**
+ * @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_item {
+  :host {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-xs);
+    padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
+      var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+    min-height: var(--lumo-size-m);
+    outline: none;
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Checkmark */
+  [part='checkmark']::before {
+    display: var(--_lumo-item-selected-icon-display, none);
+    content: var(--lumo-icons-checkmark);
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    font-weight: normal;
+    width: 1em;
+    height: 1em;
+    margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
+    color: var(--_selection-color-text);
+    flex: none;
+    opacity: 0;
+    transition:
+      transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
+      opacity 0.1s;
+  }
+
+  :host([selected]) [part='checkmark']::before {
+    opacity: 1;
+  }
+
+  :host([active]:not([selected])) [part='checkmark']::before {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-duration: 0s;
+  }
+
+  [part='content'] {
+    flex: auto;
+  }
+
+  /* Disabled */
+  :host([disabled]) {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
+  @media (any-hover: hover) {
+    :host(:hover:not([disabled])) {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+  }
+
+  :host([focus-ring]:not([disabled])) {
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) {
+    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+  }
+
+  /* Slotted icons */
+  :host ::slotted(vaadin-icon) {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+}

package/src/components/list-box.css

@@ -0,0 +1,31 @@
+/**
+ * @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_list-box {
+  :host {
+    display: flex;
+    -webkit-tap-highlight-color: transparent;
+    --_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='items'] {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  /* Dividers */
+  [part='items'] ::slotted(hr) {
+    height: 1px;
+    border: 0;
+    padding: 0;
+    margin: var(--lumo-space-s) var(--lumo-border-radius-m);
+    background-color: var(--lumo-contrast-10pct);
+  }
+}

package/src/components/login-form-wrapper.css

@@ -0,0 +1,113 @@
+/**
+ * @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_login-form-wrapper {
+  :host {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: var(--lumo-space-l);
+    overflow: hidden;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    width: calc(var(--lumo-size-m) * 10);
+    max-width: 100%;
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  ::slotted(form) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::slotted([slot='form-title']) {
+    margin: 0;
+    margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
+    color: var(--lumo-header-text-color);
+    font-size: var(--lumo-font-size-xxl);
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='error-message'] {
+    position: relative;
+    background-color: var(--lumo-error-color-10pct);
+    padding: var(--lumo-space-m);
+    border-radius: var(--lumo-border-radius-m);
+    margin-top: var(--lumo-space-m);
+    margin-bottom: var(--lumo-space-s);
+    color: var(--lumo-error-text-color);
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  ::slotted([slot='submit']) {
+    margin-top: var(--lumo-space-l);
+    margin-bottom: var(--lumo-space-s);
+  }
+
+  ::slotted([slot='forgot-password']) {
+    margin: var(--lumo-space-s) auto;
+  }
+
+  :host(:not([dir='rtl'])) [part='error-message'] {
+    padding-left: var(--lumo-size-m);
+  }
+
+  :host([dir='rtl']) [part='error-message'] {
+    padding-right: var(--lumo-size-m);
+  }
+
+  [part='error-message']::before {
+    content: var(--lumo-icons-error);
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    position: absolute;
+    width: var(--lumo-size-m);
+    height: 1em;
+    line-height: 1;
+    text-align: center;
+  }
+
+  :host(:not([dir='rtl'])) [part='error-message']::before {
+    /* Visual centering */
+    margin-left: calc(var(--lumo-size-m) * -0.95);
+  }
+
+  :host([dir='rtl']) [part='error-message']::before {
+    /* Visual centering */
+    margin-right: calc(var(--lumo-size-m) * -0.95);
+  }
+
+  [part='error-message-title'] {
+    display: block;
+    margin: 0 0 0.25em;
+    color: inherit;
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='error-message-description'] {
+    font-size: var(--lumo-font-size-s);
+    line-height: var(--lumo-line-height-s);
+    margin: 0;
+    opacity: 0.9;
+  }
+
+  [part='footer'] {
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-s);
+    color: var(--lumo-secondary-text-color);
+  }
+}

package/src/components/login-overlay-wrapper.css

@@ -0,0 +1,189 @@
+/**
+ * @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_login-overlay-wrapper {
+  :host {
+    inset: 0;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [part='overlay'] {
+    outline: none;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  [part='card'] {
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: calc(var(--lumo-size-m) * 10);
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    border-radius: var(--lumo-border-radius-l);
+    box-shadow: var(--lumo-box-shadow-s);
+    margin: var(--lumo-space-s);
+    height: auto;
+  }
+
+  [part='brand'] {
+    box-sizing: border-box;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+    min-height: calc(var(--lumo-size-m) * 5);
+  }
+
+  ::slotted([slot='title']) {
+    color: inherit;
+    margin: 0;
+    font-size: var(--lumo-font-size-xxxl);
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='backdrop'] {
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+  }
+
+  [part='description'] {
+    line-height: var(--lumo-line-height-s);
+    color: var(--lumo-tint-70pct);
+    margin: 0.5em 0 0;
+  }
+
+  [part='content'] {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  ::slotted(vaadin-login-form-wrapper) {
+    min-height: 100%;
+    max-width: 100%;
+  }
+
+  /* Small screen */
+  @media only screen and (max-width: 500px) {
+    [part='overlay'],
+    [part='content'] {
+      height: 100%;
+    }
+
+    [part='content'] {
+      min-height: 100%;
+      background: var(--lumo-base-color);
+      align-items: flex-start;
+    }
+
+    [part='card'],
+    [part='overlay'] {
+      width: 100%;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0;
+    }
+
+    /* RTL styles */
+    :host([dir='rtl']) [part='brand'] {
+      padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
+    }
+  }
+
+  /* Landscape small screen */
+  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
+    [part='card'] {
+      flex-direction: row;
+      align-items: stretch;
+      max-width: calc(var(--lumo-size-m) * 16);
+      width: 100%;
+    }
+
+    [part='brand'],
+    [part='form-wrapper'] {
+      flex: auto;
+      flex-basis: 0;
+      box-sizing: border-box;
+    }
+
+    [part='brand'] {
+      justify-content: flex-start;
+    }
+
+    [part='form-wrapper'] {
+      padding: var(--lumo-space-l);
+      overflow: auto;
+    }
+
+    ::slotted(vaadin-login-form-wrapper) {
+      flex: 1;
+      padding: 2px;
+    }
+  }
+
+  /* Landscape really small screen */
+  @media only screen and (max-height: 500px) and (min-width: 600px) and (orientation: landscape),
+    only screen and (max-width: 600px) and (min-width: 600px) and (orientation: landscape) {
+    [part='content'] {
+      height: 100vh;
+    }
+
+    [part='card'] {
+      margin: 0;
+      width: 100%;
+      max-width: none;
+      height: 100%;
+      flex: auto;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    [part='form-wrapper'] {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  /* Handle iPhone X notch */
+  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+    [part='card'] {
+      padding-right: env(safe-area-inset-right);
+      padding-left: env(safe-area-inset-left);
+    }
+
+    [part='brand'] {
+      margin-left: calc(env(safe-area-inset-left) * -1);
+      padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
+    }
+
+    /* RTL styles */
+    :host([dir='rtl']) [part='card'] {
+      padding-left: env(safe-area-inset-right);
+      padding-right: env(safe-area-inset-left);
+    }
+
+    :host([dir='rtl']) [part='brand'] {
+      margin-right: calc(env(safe-area-inset-left) * -1);
+      padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
+    }
+  }
+}