@vaadin/vaadin-lumo-styles 25.0.0-alpha2 → 25.0.0-alpha21

package/src/components/rich-text-editor.css

@@ -0,0 +1,383 @@
+/**
+ * @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_rich-text-editor {
+  :host {
+    min-height: calc(var(--lumo-size-m) * 8);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    -webkit-text-size-adjust: 100%;
+    -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);
+    --_item-indent: var(--lumo-space-m);
+    --_marker-indent: var(--lumo-space-xs);
+  }
+
+  :host(:focus-within) {
+    outline: none;
+  }
+
+  [part='content'] {
+    background-color: var(--lumo-base-color);
+  }
+
+  [part='toolbar'] {
+    background-color: var(--lumo-contrast-5pct);
+    padding: calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs);
+    gap: 0;
+  }
+
+  [part~='toolbar-button'] {
+    padding: 0;
+    font: inherit;
+    line-height: 1;
+    text-transform: none;
+    background: transparent;
+    border: none;
+    width: var(--lumo-size-m);
+    height: var(--lumo-size-m);
+    border-radius: var(--lumo-border-radius-m);
+    color: var(--lumo-contrast-60pct);
+    margin: 2px 1px;
+    cursor: var(--lumo-clickable-cursor);
+    transition:
+      background-color 100ms,
+      color 100ms;
+  }
+
+  [part~='toolbar-button']:not([part~='toolbar-button-pressed']):hover {
+    outline: none;
+    background-color: var(--lumo-contrast-5pct);
+    color: var(--lumo-contrast-80pct);
+  }
+
+  [part~='toolbar-button']::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-family: 'lumo-icons', var(--lumo-font-family);
+    font-size: var(--lumo-icon-size-m);
+    mask-image: none;
+    background: transparent;
+    height: auto;
+    width: auto;
+  }
+
+  [part~='toolbar-group'] {
+    margin: 0 0.5em;
+    margin: 0 calc(var(--lumo-space-l) / 2 - 1px);
+  }
+
+  [part~='toolbar-button-bold']::before {
+    content: 'B';
+    font-weight: 700;
+  }
+
+  [part~='toolbar-button-italic']::before {
+    content: 'I';
+    font-style: italic;
+  }
+
+  [part~='toolbar-button-underline']::before {
+    content: 'U';
+    text-decoration: underline;
+  }
+
+  [part~='toolbar-button-strike']::before {
+    content: 'T';
+    text-decoration: line-through;
+  }
+
+  [part~='toolbar-button-h1']::before {
+    content: 'H1';
+    font-size: 1.25em;
+    font-size: var(--lumo-font-size-m);
+  }
+
+  [part~='toolbar-button-h2']::before {
+    content: 'H2';
+    font-size: 1em;
+    font-size: var(--lumo-font-size-s);
+  }
+
+  [part~='toolbar-button-h3']::before {
+    content: 'H3';
+    font-size: 0.875em;
+    font-size: var(--lumo-font-size-xs);
+  }
+
+  [part~='toolbar-button-h1']::before,
+  [part~='toolbar-button-h2']::before,
+  [part~='toolbar-button-h3']::before {
+    letter-spacing: -0.05em;
+    font-weight: 600;
+  }
+
+  [part~='toolbar-button-subscript']::before,
+  [part~='toolbar-button-superscript']::before {
+    content: 'X';
+    font-weight: 600;
+    font-size: var(--lumo-font-size-s);
+  }
+
+  [part~='toolbar-button-subscript']::after,
+  [part~='toolbar-button-superscript']::after {
+    content: '2';
+    position: absolute;
+    top: 50%;
+    left: 70%;
+    font-size: 0.625em;
+    font-weight: 700;
+  }
+
+  [part~='toolbar-button-superscript']::after {
+    top: 20%;
+  }
+
+  [part~='toolbar-button-blockquote']::before {
+    content: '”';
+    height: 0.6em;
+    font-size: var(--lumo-font-size-xxl);
+  }
+
+  [part~='toolbar-button-code-block']::before {
+    content: var(--lumo-icons-angle-left) var(--lumo-icons-angle-right);
+    font-size: var(--lumo-font-size-l);
+    letter-spacing: -0.5em;
+    margin-left: -0.25em;
+    font-weight: 600;
+  }
+
+  [part~='toolbar-button-background']::before,
+  [part~='toolbar-button-color']::before {
+    content: 'A';
+    font-size: 1em;
+  }
+
+  [part~='toolbar-button-color']::after,
+  [part~='toolbar-button-background']::after {
+    width: auto;
+    height: auto;
+    mask-image: none;
+    transform: none;
+  }
+
+  [part~='toolbar-button-color']::after {
+    bottom: 4px;
+    left: 25%;
+    right: 25%;
+    width: 50%;
+    height: 4px;
+  }
+
+  [part~='toolbar-button-background']::before {
+    z-index: 1;
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  [part~='toolbar-button-background']::after {
+    content: '';
+    position: absolute;
+    inset: 20%;
+    background: repeating-linear-gradient(
+      135deg,
+      var(--_background-value, currentColor),
+      var(--_background-value, currentColor) 1px,
+      transparent 1px,
+      transparent 2px
+    );
+  }
+
+  :host([disabled]) [part~='toolbar-button'] {
+    background-color: transparent;
+  }
+
+  [part~='toolbar-button']:focus,
+  [part~='toolbar-button'][aria-expanded='true'] {
+    outline: none;
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  @media (hover: none) {
+    [part~='toolbar-button']:hover {
+      background-color: transparent;
+    }
+  }
+
+  [part~='toolbar-button-pressed'] {
+    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  [part~='toolbar-button']:not([part~='toolbar-button-pressed']):active {
+    background-color: var(--lumo-contrast-10pct);
+    color: var(--lumo-contrast-90pct);
+  }
+
+  [part~='toolbar-button-undo']::before {
+    content: var(--lumo-icons-undo);
+  }
+
+  [part~='toolbar-button-redo']::before {
+    content: var(--lumo-icons-redo);
+  }
+
+  [part~='toolbar-button-bold']::before,
+  [part~='toolbar-button-background']::before,
+  [part~='toolbar-button-color']::before,
+  [part~='toolbar-button-italic']::before,
+  [part~='toolbar-button-underline']::before,
+  [part~='toolbar-button-strike']::before {
+    font-size: var(--lumo-font-size-m);
+    font-weight: 600;
+  }
+
+  [part~='toolbar-button-background']:hover::before {
+    background-image:
+      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  [part~='toolbar-button-background']:active::before {
+    background-image:
+      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+      linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
+  }
+
+  [part~='toolbar-button-list-ordered']::before {
+    content: var(--lumo-icons-ordered-list);
+  }
+
+  [part~='toolbar-button-list-bullet']::before {
+    content: var(--lumo-icons-unordered-list);
+  }
+
+  [part~='toolbar-button-outdent']::before {
+    content: var(--lumo-icons-outdent);
+  }
+
+  [part~='toolbar-button-indent']::before {
+    content: var(--lumo-icons-indent);
+  }
+
+  [part~='toolbar-button-align-left']::before {
+    content: var(--lumo-icons-align-left);
+  }
+
+  [part~='toolbar-button-align-center']::before {
+    content: var(--lumo-icons-align-center);
+  }
+
+  [part~='toolbar-button-align-right']::before {
+    content: var(--lumo-icons-align-right);
+  }
+
+  [part~='toolbar-button-image']::before {
+    content: var(--lumo-icons-photo);
+  }
+
+  [part~='toolbar-button-link']::before {
+    content: var(--lumo-icons-link);
+  }
+
+  [part~='toolbar-button-clean']::before {
+    content: var(--lumo-icons-clean);
+    font-size: var(--lumo-font-size-l);
+  }
+
+  /* Theme variants */
+
+  /* No border */
+  :host(:not([theme~='no-border'])) {
+    border: 1px solid var(--lumo-contrast-20pct);
+  }
+
+  :host(:not([theme~='no-border']):not([readonly])) [part='content'] {
+    border-top: 1px solid var(--lumo-contrast-20pct);
+  }
+
+  :host([theme~='no-border']) [part='toolbar'] {
+    padding-top: var(--lumo-space-s);
+    padding-bottom: var(--lumo-space-s);
+  }
+
+  /* Compact */
+  :host([theme~='compact']) {
+    min-height: calc(var(--lumo-size-m) * 6);
+  }
+
+  :host([theme~='compact']) [part='toolbar'] {
+    padding: var(--lumo-space-xs) 0;
+  }
+
+  :host([theme~='compact'][theme~='no-border']) [part='toolbar'] {
+    padding: calc(var(--lumo-space-xs) + 1px) 0;
+  }
+
+  :host([theme~='compact']) [part~='toolbar-button'] {
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+  }
+
+  :host([theme~='compact']) [part~='toolbar-group'] {
+    margin: 0 calc(var(--lumo-space-m) / 2 - 1px);
+  }
+
+  .ql-editor {
+    color: inherit;
+    padding: 0 var(--lumo-space-m);
+  }
+
+  .ql-code-block-container {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
+    margin-block: 0.3125em;
+    padding: 0.3125em 0.625em;
+  }
+
+  blockquote {
+    padding-left: 1em;
+    margin-inline: 40px;
+  }
+
+  code {
+    background-color: var(--lumo-contrast-10pct);
+    font-size: 85%;
+    padding: 0.125em 0.25em;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-top: 1.25em;
+  }
+
+  :where(h1) {
+    margin-bottom: 0.75em;
+  }
+
+  :where(h2, h3, h4) {
+    margin-bottom: 0.5em;
+  }
+
+  :where(h5) {
+    margin-bottom: 0.25em;
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) [part~='toolbar-button-redo']::before {
+    content: var(--lumo-icons-undo);
+  }
+
+  :host([dir='rtl']) [part~='toolbar-button-undo']::before {
+    content: var(--lumo-icons-redo);
+  }
+}

package/src/components/scroller.css

@@ -0,0 +1,21 @@
+/**
+ * @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_scroller {
+  :host {
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([focus-ring]) {
+    outline: none;
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  :host([theme*='overflow-indicator'])::before,
+  :host([theme*='overflow-indicator'])::after {
+    background: var(--lumo-contrast-10pct);
+  }
+}

package/src/components/select-overlay.css

@@ -0,0 +1,54 @@
+/**
+ * @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_select-overlay {
+  :host {
+    align-items: flex-start;
+    justify-content: flex-start;
+    --_lumo-item-selected-icon-display: block;
+  }
+
+  /* Small viewport adjustment */
+  :host([phone]) {
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+    top: 0 !important;
+    right: 0 !important;
+    bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+    left: 0 !important;
+    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+    align-items: stretch;
+    justify-content: flex-end;
+  }
+
+  :host(:not([phone])) [part='overlay'] {
+    min-width: var(--vaadin-select-overlay-width, var(--_vaadin-select-overlay-default-width));
+  }
+
+  :host([no-vertical-overlap][top-aligned]) [part='overlay'] {
+    margin-block-start: var(--lumo-space-xs);
+  }
+
+  :host([no-vertical-overlap][bottom-aligned]) [part='overlay'] {
+    margin-block-end: var(--lumo-space-xs);
+  }
+
+  :host([theme~='align-left']) {
+    text-align: left;
+  }
+
+  :host([theme~='align-right']) {
+    text-align: right;
+  }
+
+  :host([theme~='align-center']) {
+    text-align: center;
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid;
+    }
+  }
+}

package/src/components/select-value-button.css

@@ -0,0 +1,57 @@
+/**
+ * @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_select-value-button {
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+    min-width: 0;
+    width: 0;
+    font-family: var(--lumo-font-family);
+    font-size: var(--vaadin-input-field-value-font-size, var(--lumo-font-size-m));
+    padding: 0 0.25em;
+    --_lumo-selected-item-height: var(--lumo-size-m);
+    --_lumo-selected-item-padding: 0.5em;
+  }
+
+  ::slotted(*) {
+    padding: var(--_lumo-selected-item-padding) 0 var(--_lumo-selected-item-padding) 0;
+    flex: auto;
+    min-height: var(--_lumo-selected-item-height);
+    font-size: inherit;
+  }
+
+  ::slotted(*:hover) {
+    background-color: transparent;
+  }
+
+  /* placeholder styles */
+  ::slotted(*:not([selected])) {
+    line-height: 1;
+  }
+
+  .vaadin-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: inherit;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-shadow: inherit;
+  }
+
+  [part='label'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    line-height: inherit;
+  }
+}

package/src/components/select.css

@@ -0,0 +1,73 @@
+/**
+ * @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_select {
+  :host {
+    position: relative;
+    /* Disable pointer focus-ring for select, not supported yet */
+    --lumo-input-field-pointer-focus-visible: 0;
+  }
+
+  ::slotted(div[slot='overlay']) {
+    display: contents;
+  }
+
+  :host(:not([theme*='align'])) ::slotted([slot='value']) {
+    text-align: start;
+  }
+
+  [part='input-field'] {
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part='input-field'] ::slotted([slot='value']) {
+    flex-grow: 1;
+    font-weight: var(--vaadin-input-field-value-font-weight, 500);
+  }
+
+  [part='input-field'] ::slotted([slot='value']:not([placeholder])) {
+    color: var(--vaadin-input-field-value-color, var(--lumo-body-text-color));
+  }
+
+  :host([readonly]) [part='input-field'] ::slotted([slot='value']:not([placeholder])) {
+    color: var(--lumo-secondary-text-color);
+  }
+
+  /* placeholder styles */
+  [part='input-field'] ::slotted([slot='value'][placeholder]) {
+    color: var(--vaadin-input-field-placeholder-color, var(--lumo-secondary-text-color));
+  }
+
+  :host(:is([readonly], [disabled])) ::slotted([slot='value'][placeholder]) {
+    opacity: 0;
+  }
+
+  [part~='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
+
+  /* Highlight the toggle button when hovering over the entire component */
+  :host(:hover:not([readonly]):not([disabled])) [part~='toggle-button'] {
+    color: var(--lumo-contrast-80pct);
+  }
+
+  :host([theme~='small']) [part='input-field'] ::slotted([slot='value']) {
+    --_lumo-selected-item-height: var(--lumo-size-s);
+    --_lumo-selected-item-padding: 0;
+  }
+
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
+}