vaadin-lumo-stylespackage.utilities.layout.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
/**
* @license
* Copyright (c) 2017 - 2024 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
export const layout = css`
/* === 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;
}
}
`;