@vaadin/vaadin-lumo-styles 25.0.0-alpha5 → 25.0.0-alpha7

package/src/components/app-layout.css

@@ -0,0 +1,193 @@
+/**
+ * @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_app-layout {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    height: 100%;
+    --vaadin-app-layout-transition-duration: 200ms;
+    transition: padding var(--vaadin-app-layout-transition-duration);
+    --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
+    --vaadin-app-layout-touch-optimized: false;
+    --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
+    --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
+    padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
+    padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([no-anim]) {
+    --vaadin-app-layout-transition-duration: 0s !important;
+  }
+
+  :host([drawer-opened]) {
+    --vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
+  }
+
+  :host([overlay]) {
+    --vaadin-app-layout-drawer-offset-left: 0;
+    --vaadin-app-layout-navbar-offset-left: 0;
+  }
+
+  :host(:not([no-scroll])) [content] {
+    overflow: auto;
+  }
+
+  [content] {
+    height: 100%;
+  }
+
+  @media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
+    :host {
+      --vaadin-app-layout-touch-optimized: true;
+    }
+  }
+
+  [part='navbar'] {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    top: 0;
+    inset-inline: 0;
+    transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
+    padding-top: var(--safe-area-inset-top);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
+    z-index: 1;
+    min-height: var(--lumo-size-xl);
+    border-bottom: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
+    inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
+  }
+
+  :host([primary-section='drawer']) [part='drawer'] {
+    top: 0;
+  }
+
+  [part='navbar'][bottom] {
+    top: auto;
+    bottom: 0;
+    padding-bottom: var(--safe-area-inset-bottom);
+    border-bottom: none;
+    border-top: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  [part='drawer'] {
+    overflow: auto;
+    position: fixed;
+    top: var(--vaadin-app-layout-navbar-offset-top, 0);
+    bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
+    inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
+    transition:
+      transform var(--vaadin-app-layout-transition-duration),
+      visibility var(--vaadin-app-layout-transition-duration);
+    transform: translateX(-100%);
+    max-width: 90%;
+    width: var(--_vaadin-app-layout-drawer-width);
+    box-sizing: border-box;
+    padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
+    outline: none;
+    /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
+    visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    border-inline-end: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([drawer-opened]) [part='drawer'] {
+    /* The drawer should be accessible by the tabbing navigation when it is opened. */
+    visibility: visible;
+    transform: translateX(0%);
+    touch-action: manipulation;
+  }
+
+  [part='backdrop'] {
+    background-color: var(--lumo-shade-20pct);
+    opacity: 1;
+  }
+
+  :host(:not([drawer-opened])) [part='backdrop'] {
+    opacity: 0;
+  }
+
+  :host([overlay]) [part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    transition: opacity var(--vaadin-app-layout-transition-duration);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([overlay]) [part='drawer'] {
+    top: 0;
+    bottom: 0;
+    border-inline-end: none;
+    box-shadow: var(--lumo-box-shadow-s);
+  }
+
+  :host([overlay]) [part='drawer'],
+  :host([overlay]) [part='backdrop'] {
+    z-index: 2;
+  }
+
+  :host([drawer-opened][overlay]) [part='backdrop'] {
+    pointer-events: auto;
+    touch-action: manipulation;
+  }
+
+  :host([dir='rtl']) [part='drawer'] {
+    transform: translateX(100%);
+  }
+
+  :host([dir='rtl'][drawer-opened]) [part='drawer'] {
+    transform: translateX(0%);
+  }
+
+  :host([drawer-opened]:not([overlay])) {
+    padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
+  }
+
+  @media (max-width: 800px), (max-height: 600px) {
+    :host {
+      --vaadin-app-layout-drawer-overlay: true;
+      --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
+    }
+  }
+
+  /* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
+  [part='drawer'] ::slotted(vaadin-scroller) {
+    flex: 1;
+    overscroll-behavior: contain;
+  }
+
+  [part='navbar'],
+  [part='drawer'] {
+    background-color: var(--lumo-base-color);
+    background-clip: padding-box;
+  }
+
+  :host([primary-section='navbar']) [part='navbar'] {
+    border: none;
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  :host([primary-section='drawer']:not([overlay])) [part='drawer'] {
+    background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+  }
+
+  [part] ::slotted(h2),
+  [part] ::slotted(h3),
+  [part] ::slotted(h4) {
+    margin-top: var(--lumo-space-xs) !important;
+    margin-bottom: var(--lumo-space-xs) !important;
+  }
+}

package/src/components/avatar-group-menu-item.css

@@ -0,0 +1,22 @@
+/**
+ * @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_avatar-group-menu-item {
+  :host {
+    padding: var(--lumo-space-xs);
+    padding-inline-end: var(--lumo-space-m);
+  }
+
+  [part='content'] {
+    display: flex;
+    align-items: center;
+  }
+
+  [part='content'] ::slotted(vaadin-avatar) {
+    width: var(--lumo-size-xs);
+    height: var(--lumo-size-xs);
+    margin-inline-end: var(--lumo-space-s);
+  }
+}

package/src/components/avatar-group-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_avatar-group-overlay {
+  :host {
+    --_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);
+  }
+
+  [part='overlay'] {
+    outline: none;
+  }
+}

package/src/components/avatar-group.css

@@ -0,0 +1,67 @@
+/**
+ * @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_avatar-group {
+  :host {
+    display: block;
+    width: 100%; /* prevent collapsing inside non-stretching column flex */
+    --vaadin-avatar-size: var(--lumo-size-m);
+    --vaadin-avatar-group-overlap: 8px;
+    /* Deprecated property name (overlap-border), for backwards compatibility */
+    --vaadin-avatar-group-overlap-border: var(--vaadin-avatar-group-gap, 2px);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='container'] {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-wrap: nowrap;
+  }
+
+  ::slotted(vaadin-avatar:not(:first-child)) {
+    mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
+    mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
+  }
+
+  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+    margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
+    mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
+  }
+
+  ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+    margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
+    mask-position: calc(
+      50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
+    );
+  }
+
+  :host([theme~='xlarge']) {
+    --vaadin-avatar-group-overlap: 12px;
+    --vaadin-avatar-group-overlap-border: 3px;
+    --vaadin-avatar-size: var(--lumo-size-xl);
+  }
+
+  :host([theme~='large']) {
+    --vaadin-avatar-group-overlap: 10px;
+    --vaadin-avatar-group-overlap-border: 3px;
+    --vaadin-avatar-size: var(--lumo-size-l);
+  }
+
+  :host([theme~='small']) {
+    --vaadin-avatar-group-overlap: 6px;
+    --vaadin-avatar-group-overlap-border: 2px;
+    --vaadin-avatar-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='xsmall']) {
+    --vaadin-avatar-group-overlap: 4px;
+    --vaadin-avatar-group-overlap-border: 2px;
+    --vaadin-avatar-size: var(--lumo-size-xs);
+  }
+}

package/src/components/avatar.css

@@ -0,0 +1,110 @@
+/**
+ * @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_avatar {
+  :host {
+    position: relative;
+    display: inline-block;
+    flex: none;
+    overflow: hidden;
+    height: var(--vaadin-avatar-size, 64px);
+    width: var(--vaadin-avatar-size, 64px);
+    border: var(--vaadin-avatar-outline-width) solid transparent;
+    margin: calc(var(--vaadin-avatar-outline-width) * -1);
+    background-clip: content-box;
+    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
+    color: var(--lumo-secondary-text-color);
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: 50%;
+    outline: none;
+    cursor: default;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  [part='icon'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: var(--vaadin-avatar-size, 64px);
+    line-height: 1;
+  }
+
+  [part='icon']::before {
+    content: var(--lumo-icons-user);
+    font-family: lumo-icons;
+    font-size: 0.9em;
+  }
+
+  [part='abbr'] {
+    font-family: var(--lumo-font-family);
+    font-size: 2.4375em;
+    font-weight: 500;
+    fill: currentColor;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([has-color-index]) {
+    background-color: var(--vaadin-avatar-user-color);
+    color: var(--lumo-base-color);
+  }
+
+  :host([has-color-index])::before {
+    position: absolute;
+    content: '';
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
+  }
+
+  :host([focus-ring]) {
+    border-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+  }
+
+  :host([theme~='xlarge']) [part='abbr'] {
+    font-size: 2.5em;
+  }
+
+  :host([theme~='large']) [part='abbr'] {
+    font-size: 2.375em;
+  }
+
+  :host([theme~='small']) [part='abbr'] {
+    font-size: 2.75em;
+  }
+
+  :host([theme~='xsmall']) [part='abbr'] {
+    font-size: 3em;
+  }
+
+  :host([theme~='xlarge']) {
+    --vaadin-avatar-size: var(--lumo-size-xl);
+  }
+
+  :host([theme~='large']) {
+    --vaadin-avatar-size: var(--lumo-size-l);
+  }
+
+  :host([theme~='small']) {
+    --vaadin-avatar-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='xsmall']) {
+    --vaadin-avatar-size: var(--lumo-size-xs);
+  }
+}