@logo-elements/logo-elements-styles/utilities/sizing.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 sizing = css`
  /* === Height === */
  .h-0 {
    height: 0;
  }
  .h-xs {
    height: var(--leds-size-xs);
  }
  .h-s {
    height: var(--leds-size-s);
  }
  .h-m {
    height: var(--leds-size-m);
  }
  .h-l {
    height: var(--leds-size-l);
  }
  .h-xl {
    height: var(--leds-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(--leds-icon-size-s);
    width: var(--leds-icon-size-s);
  }
  .icon-m {
    height: var(--leds-icon-size-m);
    width: var(--leds-icon-size-m);
  }
  .icon-l {
    height: var(--leds-icon-size-l);
    width: var(--leds-icon-size-l);
  }

  /* === Width === */
  .w-xs {
    width: var(--leds-size-xs);
  }
  .w-s {
    width: var(--leds-size-s);
  }
  .w-m {
    width: var(--leds-size-m);
  }
  .w-l {
    width: var(--leds-size-l);
  }
  .w-xl {
    width: var(--leds-size-xl);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }

  /* === Width (max) === */
  .max-w-full {
    max-width: 100%;
  }
  .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%;
  }
`;