lumo-css-framework
Version:
CSS framework for building web apps using Vaadin's Lumo theme
125 lines (118 loc) • 1.63 kB
CSS
/* === 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-max {
max-width: max-content;
}
.max-w-min {
max-width: min-content;
}
.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%;
}
.min-w-max {
min-width: max-content;
}
.min-w-min {
min-width: min-content;
}