xmeter/css/src/_-my.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  _-my.less
\*################################*/


// margin-vertical
//
// Set the `margin-top` and `margin-bottom` properties on an element,
// or `margin-block` if it is supported.
//
// <header><dl>
//   <dt>author</dt>  <dd>Chris Harvey</dd>
//   <dt>updated</dt> <dd><time>2018-07-07</time></dd>
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-my.css"/-->
// <ul>
//   <li class="-my-0">Point    (0.00)</li>
//   <li class="-my-q">Quark    (0.25)</li>
//   <li class="-my-h">Atom     (0.50)</li>
//   <li class="-my-1">Molecule (1.00)</li>
//   <li class="-my-2">Asteroid (2.00)</li>
//   <li class="-my-4">Planet   (4.00)</li>
// </ul>
//
// Weight: 1.2
//
// Styleguide Atoms.margin-vertical

@p-lh: 1.5rem; // COMBAK{FALLBACK} for `lh` unit

.-my-0 {
  margin-top: 0; margin-bottom: 0;
  margin-block: 0;
}

.-my-q {
  margin-top: (0.25 * @p-lh);         margin-bottom: (0.25 * @p-lh);         // COMBAK{FALLBACK}
  margin-top: calc(0.25 * var(--lh)); margin-bottom: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
  margin-top: 0.25lh;                 margin-bottom: 0.25lh;
  @supports (margin-block: var(--v)) {
    margin-top: unset; margin-bottom: unset;
    margin-block: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
    margin-block: 0.25lh;
  }
}

.-my-h {
  margin-top: (0.5 * @p-lh);         margin-bottom: (0.5 * @p-lh);         // COMBAK{FALLBACK}
  margin-top: calc(0.5 * var(--lh)); margin-bottom: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
  margin-top: 0.5lh;                 margin-bottom: 0.5lh;
  @supports (margin-block-end: var(--v)) {
    margin-top: unset; margin-bottom: unset;
    margin-block: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
    margin-block: 0.5lh;
  }
}

.-my-1 {
  margin-top: @p-lh;     margin-bottom: @p-lh;     // COMBAK{FALLBACK}
  margin-top: var(--lh); margin-bottom: var(--lh); // COMBAK{FALLBACK}
  margin-top: 1lh;       margin-bottom: 1lh;
  @supports (margin-block: var(--v)) {
    margin-top: unset; margin-bottom: unset;
    margin-block: var(--lh); // COMBAK{FALLBACK}
    margin-block: 1lh;
  }
}

.-my-2 {
  margin-top: (2 * @p-lh);         margin-bottom: (2 * @p-lh);         // COMBAK{FALLBACK}
  margin-top: calc(2 * var(--lh)); margin-bottom: calc(2 * var(--lh)); // COMBAK{FALLBACK}
  margin-top: 2lh;                 margin-bottom: 2lh;
  @supports (margin-block: var(--v)) {
    margin-top: unset; margin-bottom: unset;
    margin-block: calc(2 * var(--lh)); // COMBAK{FALLBACK}
    margin-block: 2lh;
  }
}

.-my-4 {
  margin-top: (4 * @p-lh);         margin-bottom: (4 * @p-lh);         // COMBAK{FALLBACK}
  margin-top: calc(4 * var(--lh)); margin-bottom: calc(4 * var(--lh)); // COMBAK{FALLBACK}
  margin-top: 4lh;                 margin-bottom: 4lh;
  @supports (margin-block: var(--v)) {
    margin-top: unset; margin-bottom: unset;
    margin-block: calc(4 * var(--lh)); // COMBAK{FALLBACK}
    margin-block: 4lh;
  }
}