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

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

@@ -0,0 +1,179 @@
+/**
+ * @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);
+  }
+
+  [part='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;
+  }
+
+  /* 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'] {
+      flex: auto;
+      flex-basis: 0;
+      box-sizing: border-box;
+    }
+
+    [part='brand'] {
+      justify-content: flex-start;
+    }
+
+    [part='form'] {
+      padding: var(--lumo-space-l);
+      overflow: auto;
+    }
+  }
+
+  /* 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'] {
+      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));
+    }
+  }
+}

package/src/components/map.css

@@ -0,0 +1,437 @@
+/**
+ * @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_map {
+  :host {
+    display: block;
+    height: 400px;
+    flex: 1 1 auto;
+    align-self: stretch;
+    overflow: hidden;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    --vaadin-map-controls-inset: var(--lumo-space-xs);
+    --vaadin-map-icon-zoom-in: var(--lumo-icons-plus);
+    --vaadin-map-icon-zoom-out: var(--lumo-icons-minus);
+    --vaadin-map-icon-compass: var(--lumo-icons-arrow-up);
+    --vaadin-map-icon-overview-map-collapse: var(--lumo-icons-angle-down);
+    --vaadin-map-icon-overview-map-expand: var(--lumo-icons-angle-up);
+    --vaadin-map-icon-close: var(--lumo-icons-cross);
+    --vaadin-map-icon-attribution-collapse: var(--lumo-icons-angle-right);
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([theme~='no-border'])) {
+    border-radius: var(--lumo-border-radius-l);
+    position: relative;
+  }
+
+  :host(:not([theme~='no-border']))::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--lumo-contrast-10pct);
+    border-radius: inherit;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  #map {
+    width: 100%;
+    height: 100%;
+    outline: none;
+  }
+
+  #map,
+  .ol-viewport,
+  .ol-layers {
+    border-radius: inherit;
+    overflow: hidden;
+  }
+
+  #map:fullscreen {
+    border-radius: 0;
+  }
+
+  #map:-webkit-full-screen {
+    border-radius: 0;
+  }
+
+  /* Functional styles, copied from 'ol/ol.css' */
+
+  .ol-box {
+    box-sizing: border-box;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+  }
+
+  .ol-unsupported {
+    display: none;
+  }
+
+  .ol-viewport,
+  .ol-unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .ol-viewport canvas {
+    all: unset;
+  }
+
+  .ol-selectable {
+    -webkit-touch-callout: default;
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  .ol-grabbing {
+    cursor: grabbing;
+  }
+
+  .ol-grab {
+    cursor: move;
+    cursor: grab;
+  }
+
+  /* Control positioning and styling */
+
+  .ol-overlaycontainer-stopevent {
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content 1fr min-content min-content min-content min-content;
+    padding: var(--vaadin-map-controls-inset, 0.25em);
+    box-sizing: border-box;
+    grid-template-areas:
+      'scale mouse-position fullscreen'
+      'overview-map . zoom-extent'
+      'overview-map . compass'
+      'overview-map . zoom-slider'
+      'overview-map . zoom'
+      'overview-map attribution attribution';
+  }
+
+  .ol-mouse-position {
+    grid-area: mouse-position;
+    align-self: start;
+    text-align: center;
+    font-size: 0.625em;
+    color: #000;
+    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+  }
+
+  .ol-scale-line,
+  .ol-scale-bar {
+    grid-area: scale;
+    position: relative;
+    pointer-events: none !important;
+    color: #000;
+  }
+
+  .ol-scale-line-inner {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    border-top: none;
+    font-size: 0.625em;
+    text-align: center;
+    will-change: contents, width, filter;
+    transition: all 0.25s;
+    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+  }
+
+  .ol-scale-bar-inner {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+    overflow: hidden;
+    border-radius: var(--lumo-border-radius-s);
+  }
+
+  .ol-scale-step-marker {
+    display: none;
+  }
+
+  .ol-scale-step-text {
+    position: absolute;
+    top: 0.75em;
+    font-size: 0.625em;
+    color: #000;
+    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .ol-scale-text {
+    position: absolute;
+    font-size: 0.625em;
+    top: 2em;
+    color: #000;
+    white-space: nowrap;
+    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+  }
+
+  .ol-scale-singlebar {
+    height: 0.25em;
+    opacity: 0.5;
+  }
+
+  .ol-compass {
+    grid-area: compass;
+    display: block;
+    will-change: transform;
+  }
+
+  .ol-rotate {
+    grid-area: compass;
+  }
+
+  .ol-compass:empty::before {
+    content: var(--vaadin-map-icon-compass, '\\2191');
+  }
+
+  .ol-full-screen {
+    grid-area: fullscreen;
+    height: var(--lumo-size-s);
+  }
+
+  .ol-full-screen button:empty::before {
+    content: var(--vaadin-map-icon-fullscreen, '\2922');
+  }
+
+  .ol-full-screen .ol-full-screen-true:empty::before {
+    content: var(--vaadin-map-icon-close, '\00D7');
+  }
+
+  .ol-overviewmap {
+    grid-area: overview-map;
+    align-self: end;
+    width: max-content;
+  }
+
+  .ol-overviewmap button span:empty::before {
+    content: var(--vaadin-map-icon-overview-map-collapse, '\25BE');
+  }
+
+  .ol-overviewmap.ol-collapsed button span:empty::before {
+    content: var(--vaadin-map-icon-overview-map-expand, '\25B4');
+  }
+
+  .ol-overviewmap-map {
+    height: 10em;
+    width: 10em;
+    margin: var(--lumo-space-xs);
+    border: 0;
+    border-radius: var(--lumo-border-radius-s);
+  }
+
+  .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+  .ol-overviewmap.ol-uncollapsible button {
+    display: none;
+  }
+
+  .ol-overviewmap-box {
+    border: 1px dashed rgba(0, 0, 0, 0.5);
+    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+    will-change: filter;
+    cursor: move;
+  }
+
+  .ol-overviewmap:not(.ol-collapsed),
+  .ol-overviewmap:not(.ol-collapsed):hover {
+    background-color: var(--lumo-base-color);
+    box-shadow: var(--lumo-box-shadow-s);
+    transition: 0.15s box-shadow;
+  }
+
+  .ol-overviewmap:not(.ol-uncollapsible) .ol-overviewmap-map {
+    margin-bottom: 0;
+  }
+
+  .ol-zoomslider {
+    grid-area: zoom-slider;
+    height: 8em;
+  }
+
+  .ol-zoomslider button {
+    position: relative;
+    display: block;
+    border-radius: inherit;
+    height: var(--lumo-space-m);
+  }
+
+  .ol-zoomslider:hover button {
+    box-shadow: var(--lumo-box-shadow-s);
+  }
+
+  .ol-zoomslider:not(.ol-uncollapsible):hover {
+    box-shadow: none;
+    overflow: visible;
+  }
+
+  .ol-zoom-extent {
+    grid-area: zoom-extent;
+    align-self: end;
+  }
+
+  .ol-control,
+  .ol-scale-bar,
+  .ol-scale-line {
+    margin: var(--lumo-space-xs);
+  }
+
+  .ol-control {
+    margin: 0.25em;
+    border-radius: var(--lumo-border-radius-m);
+    transition:
+      0.15s box-shadow,
+      0.15s background-color;
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .ol-control:hover {
+    background-color: var(--lumo-base-color);
+  }
+
+  .ol-control:not(.ol-uncollapsible):hover {
+    box-shadow: var(--lumo-box-shadow-s);
+    background-color: var(--lumo-shade-20pct);
+  }
+
+  .ol-control button {
+    appearance: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    font: inherit;
+    color: inherit;
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    border-radius: inherit;
+    font-family: 'lumo-icons';
+    font-size: var(--lumo-icon-size-s);
+    font-weight: 400;
+  }
+
+  .ol-control button::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  .ol-control button,
+  .ol-attribution:not(.ol-uncollapsible) ul {
+    transition: 0.15s opacity;
+    background-color: var(--lumo-base-color);
+    color: var(--lumo-body-text-color);
+    opacity: 0.65;
+  }
+
+  .ol-control:hover button,
+  .ol-control button:focus,
+  .ol-attribution:hover ul {
+    opacity: 1;
+  }
+
+  .ol-control button:hover {
+    color: var(--lumo-primary-text-color);
+  }
+
+  .ol-control button:active {
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  .ol-control button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  .ol-zoom {
+    grid-area: zoom;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ol-zoom-in:empty::before {
+    content: var(--vaadin-map-icon-zoom-in, '+');
+  }
+
+  .ol-zoom-out:empty::before {
+    content: var(--vaadin-map-icon-zoom-out, '\2013');
+  }
+
+  button.ol-zoom-in {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  button.ol-zoom-out {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .ol-attribution {
+    grid-area: attribution;
+    margin-inline-start: auto !important;
+    display: flex;
+    flex-flow: row-reverse;
+  }
+
+  .ol-attribution.ol-uncollapsible {
+    margin-inline-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+    margin-block-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+    border-radius: var(--lumo-border-radius-m) 0 0 0;
+  }
+
+  .ol-attribution button span:empty::before {
+    content: var(--vaadin-map-icon-attribution-collapse, '\\25B8');
+  }
+
+  .ol-attribution.ol-collapsed button span:empty::before {
+    content: var(--vaadin-map-icon-attribution-expand, '\\2139');
+  }
+
+  .ol-attribution ul {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    list-style: none;
+    margin: 0;
+    font-size: 0.8em;
+    font-size: var(--lumo-font-size-xxs);
+    color: var(--lumo-secondary-text-color);
+    padding: var(--lumo-space-xs) var(--lumo-space-s);
+    cursor: default;
+  }
+
+  .ol-attribution.ol-collapsed ul {
+    display: none;
+  }
+
+  .ol-attribution.ol-uncollapsible button {
+    display: none;
+  }
+
+  .ol-attribution:not(.ol-uncollapsible) ul {
+    background-color: var(--lumo-base-color);
+  }
+
+  .ol-attribution a {
+    color: inherit;
+    cursor: pointer;
+  }
+}

package/src/components/master-detail-layout.css

@@ -0,0 +1,26 @@
+/**
+ * @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_master-detail-layout {
+  :host(:is([drawer], [stack])) [part='detail'] {
+    background-color: var(--lumo-base-color);
+  }
+
+  :host([drawer]) [part='detail'] {
+    box-shadow: var(--lumo-box-shadow-s);
+  }
+
+  :host([drawer][orientation='horizontal']) [part='detail'] {
+    border-inline-start: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([drawer][orientation='vertical']) [part='detail'] {
+    border-block-start: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([drawer]) [part='backdrop'] {
+    background-color: var(--lumo-shade-20pct);
+  }
+}