Thomasorus Design System

Spacings 

<div style="padding:var(--margin-l); border:1px solid black;">
    This is a large margin/padding
</div>

<div style="padding:var(--margin-s); border:1px solid black;">
    This is a small margin/padding
</div>
 
<div style="padding:var(--margin-l); border:1px solid black;">
    This is a large margin/padding
</div>

<div style="padding:var(--margin-s); border:1px solid black;">
    This is a small margin/padding
</div>
 
/* No context defined. */
  • Content: 
    :root {
    /* Main margin for containers, min: 20px, max: 64px */
    --margin-l: calc(((20 / 16) * 1rem) + (64 - 20) * var(--fluid-bp));
  
    /* Main margin for other things, min: 25, max: 30 */
    --margin-s: calc(((25 / 16) * 1rem) + (30 - 25) * var(--fluid-bp));    
  }
  
  @media screen and (min-width: 1440px) {
    :root {
      --fluid-screen: calc(var(--fluid-max-width) * 1px);
    }
  }
  • URL: /components/raw/spacings/spacings.demo.css
  • Filesystem Path: src/components/design-tokens/spacings/spacings.demo.css
  • Size: 403 Bytes

No notes defined.