package.utilities.spacing.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-lumo-styles Show documentation
Show all versions of vaadin-lumo-styles Show documentation
Lumo is a design system foundation for modern web applications, used by Vaadin components
/**
* @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 spacing = css`
/* === Margin === */
.-m-xs {
margin: calc(var(--lumo-space-xs) / -1);
}
.-m-s {
margin: calc(var(--lumo-space-s) / -1);
}
.-m-m {
margin: calc(var(--lumo-space-m) / -1);
}
.-m-l {
margin: calc(var(--lumo-space-l) / -1);
}
.-m-xl {
margin: calc(var(--lumo-space-xl) / -1);
}
.m-0 {
margin: 0;
}
.m-xs {
margin: var(--lumo-space-xs);
}
.m-s {
margin: var(--lumo-space-s);
}
.m-m {
margin: var(--lumo-space-m);
}
.m-l {
margin: var(--lumo-space-l);
}
.m-xl {
margin: var(--lumo-space-xl);
}
.m-auto {
margin: auto;
}
/* === Margin (bottom) === */
.-mb-xs {
margin-bottom: calc(var(--lumo-space-xs) / -1);
}
.-mb-s {
margin-bottom: calc(var(--lumo-space-s) / -1);
}
.-mb-m {
margin-bottom: calc(var(--lumo-space-m) / -1);
}
.-mb-l {
margin-bottom: calc(var(--lumo-space-l) / -1);
}
.-mb-xl {
margin-bottom: calc(var(--lumo-space-xl) / -1);
}
.mb-0 {
margin-bottom: 0;
}
.mb-xs {
margin-bottom: var(--lumo-space-xs);
}
.mb-s {
margin-bottom: var(--lumo-space-s);
}
.mb-m {
margin-bottom: var(--lumo-space-m);
}
.mb-l {
margin-bottom: var(--lumo-space-l);
}
.mb-xl {
margin-bottom: var(--lumo-space-xl);
}
.mb-auto {
margin-bottom: auto;
}
/* === Margin (end) === */
.-me-xs {
margin-inline-end: calc(var(--lumo-space-xs) / -1);
}
.-me-s {
margin-inline-end: calc(var(--lumo-space-s) / -1);
}
.-me-m {
margin-inline-end: calc(var(--lumo-space-m) / -1);
}
.-me-l {
margin-inline-end: calc(var(--lumo-space-l) / -1);
}
.-me-xl {
margin-inline-end: calc(var(--lumo-space-xl) / -1);
}
.me-0 {
margin-inline-end: 0;
}
.me-xs {
margin-inline-end: var(--lumo-space-xs);
}
.me-s {
margin-inline-end: var(--lumo-space-s);
}
.me-m {
margin-inline-end: var(--lumo-space-m);
}
.me-l {
margin-inline-end: var(--lumo-space-l);
}
.me-xl {
margin-inline-end: var(--lumo-space-xl);
}
.me-auto {
margin-inline-end: auto;
}
/* === Margin (horizontal) === */
.-mx-xs {
margin-inline: calc(var(--lumo-space-xs) / -1);
}
.-mx-s {
margin-inline: calc(var(--lumo-space-s) / -1);
}
.-mx-m {
margin-inline: calc(var(--lumo-space-m) / -1);
}
.-mx-l {
margin-inline: calc(var(--lumo-space-l) / -1);
}
.-mx-xl {
margin-inline: calc(var(--lumo-space-xl) / -1);
}
.mx-0 {
margin-inline: 0;
}
.mx-xs {
margin-inline: var(--lumo-space-xs);
}
.mx-s {
margin-inline: var(--lumo-space-s);
}
.mx-m {
margin-inline: var(--lumo-space-m);
}
.mx-l {
margin-inline: var(--lumo-space-l);
}
.mx-xl {
margin-inline: var(--lumo-space-xl);
}
.mx-auto {
margin-inline: auto;
}
/* === Margin (left) === */
.-ml-xs {
margin-left: calc(var(--lumo-space-xs) / -1);
}
.-ml-s {
margin-left: calc(var(--lumo-space-s) / -1);
}
.-ml-m {
margin-left: calc(var(--lumo-space-m) / -1);
}
.-ml-l {
margin-left: calc(var(--lumo-space-l) / -1);
}
.-ml-xl {
margin-left: calc(var(--lumo-space-xl) / -1);
}
.ml-0 {
margin-left: 0;
}
.ml-xs {
margin-left: var(--lumo-space-xs);
}
.ml-s {
margin-left: var(--lumo-space-s);
}
.ml-m {
margin-left: var(--lumo-space-m);
}
.ml-l {
margin-left: var(--lumo-space-l);
}
.ml-xl {
margin-left: var(--lumo-space-xl);
}
.ml-auto {
margin-left: auto;
}
/* === Margin (right) === */
.-mr-xs {
margin-right: calc(var(--lumo-space-xs) / -1);
}
.-mr-s {
margin-right: calc(var(--lumo-space-s) / -1);
}
.-mr-m {
margin-right: calc(var(--lumo-space-m) / -1);
}
.-mr-l {
margin-right: calc(var(--lumo-space-l) / -1);
}
.-mr-xl {
margin-right: calc(var(--lumo-space-xl) / -1);
}
.mr-0 {
margin-right: 0;
}
.mr-xs {
margin-right: var(--lumo-space-xs);
}
.mr-s {
margin-right: var(--lumo-space-s);
}
.mr-m {
margin-right: var(--lumo-space-m);
}
.mr-l {
margin-right: var(--lumo-space-l);
}
.mr-xl {
margin-right: var(--lumo-space-xl);
}
.mr-auto {
margin-right: auto;
}
/* === Margin (start) === */
.-ms-xs {
margin-inline-start: calc(var(--lumo-space-xs) / -1);
}
.-ms-s {
margin-inline-start: calc(var(--lumo-space-s) / -1);
}
.-ms-m {
margin-inline-start: calc(var(--lumo-space-m) / -1);
}
.-ms-l {
margin-inline-start: calc(var(--lumo-space-l) / -1);
}
.-ms-xl {
margin-inline-start: calc(var(--lumo-space-xl) / -1);
}
.ms-0 {
margin-inline-start: 0;
}
.ms-xs {
margin-inline-start: var(--lumo-space-xs);
}
.ms-s {
margin-inline-start: var(--lumo-space-s);
}
.ms-m {
margin-inline-start: var(--lumo-space-m);
}
.ms-l {
margin-inline-start: var(--lumo-space-l);
}
.ms-xl {
margin-inline-start: var(--lumo-space-xl);
}
.ms-auto {
margin-inline-start: auto;
}
/* === Margin (top) === */
.-mt-xs {
margin-top: calc(var(--lumo-space-xs) / -1);
}
.-mt-s {
margin-top: calc(var(--lumo-space-s) / -1);
}
.-mt-m {
margin-top: calc(var(--lumo-space-m) / -1);
}
.-mt-l {
margin-top: calc(var(--lumo-space-l) / -1);
}
.-mt-xl {
margin-top: calc(var(--lumo-space-xl) / -1);
}
.mt-0 {
margin-top: 0;
}
.mt-xs {
margin-top: var(--lumo-space-xs);
}
.mt-s {
margin-top: var(--lumo-space-s);
}
.mt-m {
margin-top: var(--lumo-space-m);
}
.mt-l {
margin-top: var(--lumo-space-l);
}
.mt-xl {
margin-top: var(--lumo-space-xl);
}
.mt-auto {
margin-top: auto;
}
/* === Margin (vertical) === */
.-my-xs {
margin-block: calc(var(--lumo-space-xs) / -1);
}
.-my-s {
margin-block: calc(var(--lumo-space-s) / -1);
}
.-my-m {
margin-block: calc(var(--lumo-space-m) / -1);
}
.-my-l {
margin-block: calc(var(--lumo-space-l) / -1);
}
.-my-xl {
margin-block: calc(var(--lumo-space-xl) / -1);
}
.my-0 {
margin-block: 0;
}
.my-xs {
margin-block: var(--lumo-space-xs);
}
.my-s {
margin-block: var(--lumo-space-s);
}
.my-m {
margin-block: var(--lumo-space-m);
}
.my-l {
margin-block: var(--lumo-space-l);
}
.my-xl {
margin-block: var(--lumo-space-xl);
}
.my-auto {
margin-block: auto;
}
/* === Padding === */
.p-0 {
padding: 0;
}
.p-xs {
padding: var(--lumo-space-xs);
}
.p-s {
padding: var(--lumo-space-s);
}
.p-m {
padding: var(--lumo-space-m);
}
.p-l {
padding: var(--lumo-space-l);
}
.p-xl {
padding: var(--lumo-space-xl);
}
/* === Padding (bottom) === */
.pb-0 {
padding-bottom: 0;
}
.pb-xs {
padding-bottom: var(--lumo-space-xs);
}
.pb-s {
padding-bottom: var(--lumo-space-s);
}
.pb-m {
padding-bottom: var(--lumo-space-m);
}
.pb-l {
padding-bottom: var(--lumo-space-l);
}
.pb-xl {
padding-bottom: var(--lumo-space-xl);
}
/* === Padding (end) === */
.pe-0 {
padding-inline-end: 0;
}
.pe-xs {
padding-inline-end: var(--lumo-space-xs);
}
.pe-s {
padding-inline-end: var(--lumo-space-s);
}
.pe-m {
padding-inline-end: var(--lumo-space-m);
}
.pe-l {
padding-inline-end: var(--lumo-space-l);
}
.pe-xl {
padding-inline-end: var(--lumo-space-xl);
}
/* === Padding (horizontal) === */
.px-0 {
padding-left: 0;
padding-right: 0;
}
.px-xs {
padding-left: var(--lumo-space-xs);
padding-right: var(--lumo-space-xs);
}
.px-s {
padding-left: var(--lumo-space-s);
padding-right: var(--lumo-space-s);
}
.px-m {
padding-left: var(--lumo-space-m);
padding-right: var(--lumo-space-m);
}
.px-l {
padding-left: var(--lumo-space-l);
padding-right: var(--lumo-space-l);
}
.px-xl {
padding-left: var(--lumo-space-xl);
padding-right: var(--lumo-space-xl);
}
/* === Padding (left) === */
.pl-0 {
padding-left: 0;
}
.pl-xs {
padding-left: var(--lumo-space-xs);
}
.pl-s {
padding-left: var(--lumo-space-s);
}
.pl-m {
padding-left: var(--lumo-space-m);
}
.pl-l {
padding-left: var(--lumo-space-l);
}
.pl-xl {
padding-left: var(--lumo-space-xl);
}
/* === Padding (right) === */
.pr-0 {
padding-right: 0;
}
.pr-xs {
padding-right: var(--lumo-space-xs);
}
.pr-s {
padding-right: var(--lumo-space-s);
}
.pr-m {
padding-right: var(--lumo-space-m);
}
.pr-l {
padding-right: var(--lumo-space-l);
}
.pr-xl {
padding-right: var(--lumo-space-xl);
}
/* === Padding (start) === */
.ps-0 {
padding-inline-start: 0;
}
.ps-xs {
padding-inline-start: var(--lumo-space-xs);
}
.ps-s {
padding-inline-start: var(--lumo-space-s);
}
.ps-m {
padding-inline-start: var(--lumo-space-m);
}
.ps-l {
padding-inline-start: var(--lumo-space-l);
}
.ps-xl {
padding-inline-start: var(--lumo-space-xl);
}
/* === Padding (top) === */
.pt-0 {
padding-top: 0;
}
.pt-xs {
padding-top: var(--lumo-space-xs);
}
.pt-s {
padding-top: var(--lumo-space-s);
}
.pt-m {
padding-top: var(--lumo-space-m);
}
.pt-l {
padding-top: var(--lumo-space-l);
}
.pt-xl {
padding-top: var(--lumo-space-xl);
}
/* === Padding (vertical) === */
.py-0 {
padding-bottom: 0;
padding-top: 0;
}
.py-xs {
padding-bottom: var(--lumo-space-xs);
padding-top: var(--lumo-space-xs);
}
.py-s {
padding-bottom: var(--lumo-space-s);
padding-top: var(--lumo-space-s);
}
.py-m {
padding-bottom: var(--lumo-space-m);
padding-top: var(--lumo-space-m);
}
.py-l {
padding-bottom: var(--lumo-space-l);
padding-top: var(--lumo-space-l);
}
.py-xl {
padding-bottom: var(--lumo-space-xl);
padding-top: var(--lumo-space-xl);
}
`;
© 2015 - 2025 Weber Informatics LLC | Privacy Policy