@vaadin/vaadin-lumo-styles/src/utilities/layout.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
/* === Aspect ratio === */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

/* === Box sizing === */
.box-border {
  box-sizing: border-box;
}

.box-content {
  box-sizing: content-box;
}

/* === Display === */
.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.inline-grid {
  display: inline-grid;
}

/* === Overflow === */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

/* === Position === */
.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}

.relative {
  position: relative;
}

/* === Top, end, bottom, start === */
.-bottom-xs {
  bottom: calc(var(--lumo-space-xs) / -1);
}

.-bottom-s {
  bottom: calc(var(--lumo-space-s) / -1);
}

.-bottom-m {
  bottom: calc(var(--lumo-space-m) / -1);
}

.-bottom-l {
  bottom: calc(var(--lumo-space-l) / -1);
}

.-bottom-xl {
  bottom: calc(var(--lumo-space-xl) / -1);
}

.-bottom-full {
  bottom: -100%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-xs {
  bottom: var(--lumo-space-xs);
}

.bottom-s {
  bottom: var(--lumo-space-s);
}

.bottom-m {
  bottom: var(--lumo-space-m);
}

.bottom-l {
  bottom: var(--lumo-space-l);
}

.bottom-xl {
  bottom: var(--lumo-space-xl);
}

.bottom-auto {
  bottom: auto;
}

.bottom-full {
  bottom: 100%;
}

.-end-xs {
  inset-inline-end: calc(var(--lumo-space-xs) / -1);
}

.-end-s {
  inset-inline-end: calc(var(--lumo-space-s) / -1);
}

.-end-m {
  inset-inline-end: calc(var(--lumo-space-m) / -1);
}

.-end-l {
  inset-inline-end: calc(var(--lumo-space-l) / -1);
}

.-end-xl {
  inset-inline-end: calc(var(--lumo-space-xl) / -1);
}

.-end-full {
  inset-inline-end: -100%;
}

.end-0 {
  inset-inline-end: 0;
}

.end-xs {
  inset-inline-end: var(--lumo-space-xs);
}

.end-s {
  inset-inline-end: var(--lumo-space-s);
}

.end-m {
  inset-inline-end: var(--lumo-space-m);
}

.end-l {
  inset-inline-end: var(--lumo-space-l);
}

.end-xl {
  inset-inline-end: var(--lumo-space-xl);
}

.end-auto {
  inset-inline-end: auto;
}

.end-full {
  inset-inline-end: 100%;
}

.-start-xs {
  inset-inline-start: calc(var(--lumo-space-xs) / -1);
}

.-start-s {
  inset-inline-start: calc(var(--lumo-space-s) / -1);
}

.-start-m {
  inset-inline-start: calc(var(--lumo-space-m) / -1);
}

.-start-l {
  inset-inline-start: calc(var(--lumo-space-l) / -1);
}

.-start-xl {
  inset-inline-start: calc(var(--lumo-space-xl) / -1);
}

.-start-full {
  inset-inline-start: -100%;
}

.start-0 {
  inset-inline-start: 0;
}

.start-xs {
  inset-inline-start: var(--lumo-space-xs);
}

.start-s {
  inset-inline-start: var(--lumo-space-s);
}

.start-m {
  inset-inline-start: var(--lumo-space-m);
}

.start-l {
  inset-inline-start: var(--lumo-space-l);
}

.start-xl {
  inset-inline-start: var(--lumo-space-xl);
}

.start-auto {
  inset-inline-start: auto;
}

.start-full {
  inset-inline-start: 100%;
}

.-top-xs {
  top: calc(var(--lumo-space-xs) / -1);
}

.-top-s {
  top: calc(var(--lumo-space-s) / -1);
}

.-top-m {
  top: calc(var(--lumo-space-m) / -1);
}

.-top-l {
  top: calc(var(--lumo-space-l) / -1);
}

.-top-xl {
  top: calc(var(--lumo-space-xl) / -1);
}

.-top-full {
  top: -100%;
}

.top-0 {
  top: 0;
}

.top-xs {
  top: var(--lumo-space-xs);
}

.top-s {
  top: var(--lumo-space-s);
}

.top-m {
  top: var(--lumo-space-m);
}

.top-l {
  top: var(--lumo-space-l);
}

.top-xl {
  top: var(--lumo-space-xl);
}

.top-auto {
  top: auto;
}

.top-full {
  top: 100%;
}

/* === Visibility === */
.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

/* === Z-index === */
.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

/* === Responsive design === */
@media (min-width: 640px) {
  /* Display */
  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:inline-grid {
    display: inline-grid;
  }

  /* Position */
  .sm\:absolute {
    position: absolute;
  }

  .sm\:fixed {
    position: fixed;
  }

  .sm\:relative {
    position: relative;
  }

  .sm\:static {
    position: static;
  }

  .sm\:sticky {
    position: sticky;
  }
}
@media (min-width: 768px) {
  /* Display */
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:inline {
    display: inline;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:inline-grid {
    display: inline-grid;
  }

  /* Position */
  .md\:absolute {
    position: absolute;
  }

  .md\:fixed {
    position: fixed;
  }

  .md\:relative {
    position: relative;
  }

  .md\:static {
    position: static;
  }

  .md\:sticky {
    position: sticky;
  }
}
@media (min-width: 1024px) {
  /* Display */
  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:inline-grid {
    display: inline-grid;
  }

  /* Position */
  .lg\:absolute {
    position: absolute;
  }

  .lg\:fixed {
    position: fixed;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:static {
    position: static;
  }

  .lg\:sticky {
    position: sticky;
  }
}
@media (min-width: 1280px) {
  /* Display */
  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:inline-block {
    display: inline-block;
  }

  .xl\:inline-flex {
    display: inline-flex;
  }

  .xl\:inline-grid {
    display: inline-grid;
  }

  /* Position */
  .xl\:absolute {
    position: absolute;
  }

  .xl\:fixed {
    position: fixed;
  }

  .xl\:relative {
    position: relative;
  }

  .xl\:static {
    position: static;
  }

  .xl\:sticky {
    position: sticky;
  }
}
@media (min-width: 1536px) {
  /* Display */
  .\32xl\:block {
    display: block;
  }

  .\32xl\:flex {
    display: flex;
  }

  .\32xl\:grid {
    display: grid;
  }

  .\32xl\:hidden {
    display: none;
  }

  .\32xl\:inline {
    display: inline;
  }

  .\32xl\:inline-block {
    display: inline-block;
  }

  .\32xl\:inline-flex {
    display: inline-flex;
  }

  .\32xl\:inline-grid {
    display: inline-grid;
  }

  /* Position */
  .\32xl\:absolute {
    position: absolute;
  }

  .\32xl\:fixed {
    position: fixed;
  }

  .\32xl\:relative {
    position: relative;
  }

  .\32xl\:static {
    position: static;
  }

  .\32xl\:sticky {
    position: sticky;
  }
}