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

package/src/utilities/layout.css

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

package/src/utilities/shadows.css

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* === Box shadow === */
+.shadow-none {
+  box-shadow: none;
+}
+
+.shadow-xs {
+  box-shadow: var(--lumo-box-shadow-xs);
+}
+
+.shadow-s {
+  box-shadow: var(--lumo-box-shadow-s);
+}
+
+.shadow-m {
+  box-shadow: var(--lumo-box-shadow-m);
+}
+
+.shadow-l {
+  box-shadow: var(--lumo-box-shadow-l);
+}
+
+.shadow-xl {
+  box-shadow: var(--lumo-box-shadow-xl);
+}