oui-kit/src/css-utopia-space.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../stylus/index";
@require "../stylus/preset/utopia";

._utopia_space {
  ._space {
    border: 1px solid red;
    display: flex;
  }

  .left {
    background: #ccc;
  }

  .right {
    background: #eee;
  }

  ._space-3xs {
    gap-space: 3xs;
  }

  ._space-2xs {
    gap-space: 2xs;
  }

  ._space-xs {
    gap-space: xs;
  }

  ._space-s {
    gap-space: s;
  }

  ._space-m {
    gap-space: m;
  }

  ._space-l {
    gap-space: l;
  }

  ._space-xl {
    gap-space: xl;
  }

  ._space-2xl {
    gap-space: 2xl;
  }

  ._space-3xl {
    gap-space: 3xl;
  }

  ._space-3xs-2xs {
    gap-space: 3xs -2xs;
  }

  ._space-2xs-xs {
    gap-space: 2xs -xs;
  }

  ._space-xs-s {
    gap-space: xs-s;
  }

  ._space-s-m {
    gap-space: s-m;
  }

  ._space-m-l {
    gap-space: m-l;
  }

  ._space-l-xl {
    gap-space: l-xl;
  }

  ._space-xl-2xl {
    gap-space: xl-2xl;
  }

  ._space-2xl-3xl {
    gap-space: 2xl -3xl;
  }

  ._space-s-l {
    gap-space: s-l;
  }

  ._font--2 {
    font-size-step: -2;
  }

  ._font--1 {
    font-size-step: -1;
  }

  ._font-0 {
    font-size-step: 0;
  }

  ._font-1 {
    font-size-step: 1;
  }

  ._font-2 {
    font-size-step: 2;
  }

  ._font-3 {
    font-size-step: 3;
  }

  ._font-4 {
    font-size-step: 4;
  }

  ._font-5 {
    font-size-step: 5;
  }
}