@vaadin/vaadin-lumo-styles 25.0.0-alpha1 → 25.0.0-alpha10

package/src/utilities/sizing.css

@@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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%;
+}