@vaadin/vaadin-lumo-styles/src/utilities/sizing.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/
 */
/* === Height === */
.h-0 {
  height: 0;
}

.h-xs {
  height: var(--lumo-size-xs);
}

.h-s {
  height: var(--lumo-size-s);
}

.h-m {
  height: var(--lumo-size-m);
}

.h-l {
  height: var(--lumo-size-l);
}

.h-xl {
  height: var(--lumo-size-xl);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

/* === Height (max) === */
.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

/* === Height (min) === */
.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

/* === Icon sizing === */
.icon-s {
  height: var(--lumo-icon-size-s);
  width: var(--lumo-icon-size-s);
}

.icon-m {
  height: var(--lumo-icon-size-m);
  width: var(--lumo-icon-size-m);
}

.icon-l {
  height: var(--lumo-icon-size-l);
  width: var(--lumo-icon-size-l);
}

/* === Width === */
.w-xs {
  width: var(--lumo-size-xs);
}

.w-s {
  width: var(--lumo-size-s);
}

.w-m {
  width: var(--lumo-size-m);
}

.w-l {
  width: var(--lumo-size-l);
}

.w-xl {
  width: var(--lumo-size-xl);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

/* === Width (max) === */
.max-w-full {
  max-width: 100%;
}

.max-w-screen-sm {
  max-width: 640px;
}

.max-w-screen-md {
  max-width: 768px;
}

.max-w-screen-lg {
  max-width: 1024px;
}

.max-w-screen-xl {
  max-width: 1280px;
}

.max-w-screen-2xl {
  max-width: 1536px;
}

/* === Width (min) === */
.min-w-0 {
  min-width: 0;
}

.min-w-full {
  min-width: 100%;
}