@logo-elements/logo-elements-styles/utilities/spacing.js

Logo Elements Design System is a design system library for modern web applications which gives your web apps Logo Applications look and feel, used by Logo Elements

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
import { css } from '@vaadin/vaadin-themable-mixin/register-styles';

export const spacing = css`
  /* === Margin === */
  .m-auto {
    margin: auto;
  }
  .m-0 {
    margin: 0;
  }
  .m-xs {
    margin: var(--leds-space-xs);
  }
  .m-s {
    margin: var(--leds-space-s);
  }
  .m-m {
    margin: var(--leds-space-m);
  }
  .m-l {
    margin: var(--leds-space-l);
  }
  .m-xl {
    margin: var(--leds-space-xl);
  }

  /* === Margin (bottom) === */
  .mb-auto {
    margin-bottom: auto;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-xs {
    margin-bottom: var(--leds-space-xs);
  }
  .mb-s {
    margin-bottom: var(--leds-space-s);
  }
  .mb-m {
    margin-bottom: var(--leds-space-m);
  }
  .mb-l {
    margin-bottom: var(--leds-space-l);
  }
  .mb-xl {
    margin-bottom: var(--leds-space-xl);
  }

  /* === Margin (end) === */
  .me-auto {
    margin-inline-end: auto;
  }
  .me-0 {
    margin-inline-end: 0;
  }
  .me-xs {
    margin-inline-end: var(--leds-space-xs);
  }
  .me-s {
    margin-inline-end: var(--leds-space-s);
  }
  .me-m {
    margin-inline-end: var(--leds-space-m);
  }
  .me-l {
    margin-inline-end: var(--leds-space-l);
  }
  .me-xl {
    margin-inline-end: var(--leds-space-xl);
  }

  /* === Margin (horizontal) === */
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-xs {
    margin-left: var(--leds-space-xs);
    margin-right: var(--leds-space-xs);
  }
  .mx-s {
    margin-left: var(--leds-space-s);
    margin-right: var(--leds-space-s);
  }
  .mx-m {
    margin-left: var(--leds-space-m);
    margin-right: var(--leds-space-m);
  }
  .mx-l {
    margin-left: var(--leds-space-l);
    margin-right: var(--leds-space-l);
  }
  .mx-xl {
    margin-left: var(--leds-space-xl);
    margin-right: var(--leds-space-xl);
  }

  /* === Margin (left) === */
  .ml-auto {
    margin-left: auto;
  }
  .ml-0 {
    margin-left: 0;
  }
  .ml-xs {
    margin-left: var(--leds-space-xs);
  }
  .ml-s {
    margin-left: var(--leds-space-s);
  }
  .ml-m {
    margin-left: var(--leds-space-m);
  }
  .ml-l {
    margin-left: var(--leds-space-l);
  }
  .ml-xl {
    margin-left: var(--leds-space-xl);
  }

  /* === Margin (right) === */
  .mr-auto {
    margin-right: auto;
  }
  .mr-0 {
    margin-right: 0;
  }
  .mr-xs {
    margin-right: var(--leds-space-xs);
  }
  .mr-s {
    margin-right: var(--leds-space-s);
  }
  .mr-m {
    margin-right: var(--leds-space-m);
  }
  .mr-l {
    margin-right: var(--leds-space-l);
  }
  .mr-xl {
    margin-right: var(--leds-space-xl);
  }

  /* === Margin (start) === */
  .ms-auto {
    margin-inline-start: auto;
  }
  .ms-0 {
    margin-inline-start: 0;
  }
  .ms-xs {
    margin-inline-start: var(--leds-space-xs);
  }
  .ms-s {
    margin-inline-start: var(--leds-space-s);
  }
  .ms-m {
    margin-inline-start: var(--leds-space-m);
  }
  .ms-l {
    margin-inline-start: var(--leds-space-l);
  }
  .ms-xl {
    margin-inline-start: var(--leds-space-xl);
  }

  /* === Margin (top) === */
  .mt-auto {
    margin-top: auto;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-xs {
    margin-top: var(--leds-space-xs);
  }
  .mt-s {
    margin-top: var(--leds-space-s);
  }
  .mt-m {
    margin-top: var(--leds-space-m);
  }
  .mt-l {
    margin-top: var(--leds-space-l);
  }
  .mt-xl {
    margin-top: var(--leds-space-xl);
  }

  /* === Margin (vertical) === */
  .my-auto {
    margin-bottom: auto;
    margin-top: auto;
  }
  .my-0 {
    margin-bottom: 0;
    margin-top: 0;
  }
  .my-xs {
    margin-bottom: var(--leds-space-xs);
    margin-top: var(--leds-space-xs);
  }
  .my-s {
    margin-bottom: var(--leds-space-s);
    margin-top: var(--leds-space-s);
  }
  .my-m {
    margin-bottom: var(--leds-space-m);
    margin-top: var(--leds-space-m);
  }
  .my-l {
    margin-bottom: var(--leds-space-l);
    margin-top: var(--leds-space-l);
  }
  .my-xl {
    margin-bottom: var(--leds-space-xl);
    margin-top: var(--leds-space-xl);
  }

  /* === Padding === */
  .p-0 {
    padding: 0;
  }
  .p-xs {
    padding: var(--leds-space-xs);
  }
  .p-s {
    padding: var(--leds-space-s);
  }
  .p-m {
    padding: var(--leds-space-m);
  }
  .p-l {
    padding: var(--leds-space-l);
  }
  .p-xl {
    padding: var(--leds-space-xl);
  }

  /* === Padding (bottom) === */
  .pb-0 {
    padding-bottom: 0;
  }
  .pb-xs {
    padding-bottom: var(--leds-space-xs);
  }
  .pb-s {
    padding-bottom: var(--leds-space-s);
  }
  .pb-m {
    padding-bottom: var(--leds-space-m);
  }
  .pb-l {
    padding-bottom: var(--leds-space-l);
  }
  .pb-xl {
    padding-bottom: var(--leds-space-xl);
  }

  /* === Padding (end) === */
  .pe-0 {
    padding-inline-end: 0;
  }
  .pe-xs {
    padding-inline-end: var(--leds-space-xs);
  }
  .pe-s {
    padding-inline-end: var(--leds-space-s);
  }
  .pe-m {
    padding-inline-end: var(--leds-space-m);
  }
  .pe-l {
    padding-inline-end: var(--leds-space-l);
  }
  .pe-xl {
    padding-inline-end: var(--leds-space-xl);
  }

  /* === Padding (horizontal) === */
  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-xs {
    padding-left: var(--leds-space-xs);
    padding-right: var(--leds-space-xs);
  }
  .px-s {
    padding-left: var(--leds-space-s);
    padding-right: var(--leds-space-s);
  }
  .px-m {
    padding-left: var(--leds-space-m);
    padding-right: var(--leds-space-m);
  }
  .px-l {
    padding-left: var(--leds-space-l);
    padding-right: var(--leds-space-l);
  }
  .px-xl {
    padding-left: var(--leds-space-xl);
    padding-right: var(--leds-space-xl);
  }

  /* === Padding (left) === */
  .pl-0 {
    padding-left: 0;
  }
  .pl-xs {
    padding-left: var(--leds-space-xs);
  }
  .pl-s {
    padding-left: var(--leds-space-s);
  }
  .pl-m {
    padding-left: var(--leds-space-m);
  }
  .pl-l {
    padding-left: var(--leds-space-l);
  }
  .pl-xl {
    padding-left: var(--leds-space-xl);
  }

  /* === Padding (right) === */
  .pr-0 {
    padding-right: 0;
  }
  .pr-xs {
    padding-right: var(--leds-space-xs);
  }
  .pr-s {
    padding-right: var(--leds-space-s);
  }
  .pr-m {
    padding-right: var(--leds-space-m);
  }
  .pr-l {
    padding-right: var(--leds-space-l);
  }
  .pr-xl {
    padding-right: var(--leds-space-xl);
  }

  /* === Padding (start) === */
  .ps-0 {
    padding-inline-start: 0;
  }
  .ps-xs {
    padding-inline-start: var(--leds-space-xs);
  }
  .ps-s {
    padding-inline-start: var(--leds-space-s);
  }
  .ps-m {
    padding-inline-start: var(--leds-space-m);
  }
  .ps-l {
    padding-inline-start: var(--leds-space-l);
  }
  .ps-xl {
    padding-inline-start: var(--leds-space-xl);
  }

  /* === Padding (top) === */
  .pt-0 {
    padding-top: 0;
  }
  .pt-xs {
    padding-top: var(--leds-space-xs);
  }
  .pt-s {
    padding-top: var(--leds-space-s);
  }
  .pt-m {
    padding-top: var(--leds-space-m);
  }
  .pt-l {
    padding-top: var(--leds-space-l);
  }
  .pt-xl {
    padding-top: var(--leds-space-xl);
  }

  /* === Padding (vertical) === */
  .py-0 {
    padding-bottom: 0;
    padding-top: 0;
  }
  .py-xs {
    padding-bottom: var(--leds-space-xs);
    padding-top: var(--leds-space-xs);
  }
  .py-s {
    padding-bottom: var(--leds-space-s);
    padding-top: var(--leds-space-s);
  }
  .py-m {
    padding-bottom: var(--leds-space-m);
    padding-top: var(--leds-space-m);
  }
  .py-l {
    padding-bottom: var(--leds-space-l);
    padding-top: var(--leds-space-l);
  }
  .py-xl {
    padding-bottom: var(--leds-space-xl);
    padding-top: var(--leds-space-xl);
  }
`;