xmeter/css/src/__tool.borders.less

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

/*################################*\
    xmeter  |  __tool.borders.less
\*################################*/


// The following mixins adjust border widths for **BLOCK** Objects only! They will keep the
// vertical rhythm intact when adding border widths (by slightly adjusting position and margins).
// Do *not* use these mixins on INLINE Objects!
//
// Note: This mixin affects border width only (for structure). It does not affect cosmetics,
// i.e., border style or color. To change these, you must include the `border-style` and
// `border-color` properties after including this mixin.
//
// ```
// .border-vert(top   ; <length>); // adjust the top border
// .border-vert(bottom; <length>); // adjust the bottom border
// .border-vert(topbot; <length>); // adjust both the top and bottom borders
// .border-vert(all   ; <length>); // adjust all four borders
// ```
//
// Note: In place of `.border-vert(all; ...)`, you may use a hack involving `box-shadow` to create
// an effective border around an element, without using this tool and thus affecting the element’s
// `margin-top` value.
// The box-shadow must be outset, have an offset-x of 0, an offset-y of 0, a blur of 0,
// a spread of `<length>` (the effective border-width), and a color of `<color>` (the effective border-color).
// The color must be specified in the same declaration, and the effective border-style will always be solid.
// ```
// box-shadow: 0 0 0 <length> <color>;
// ```
//
// @width - (optional: `0`) value of `border-width`
// ^author
// : Chris Harvey
// ^updated
// : 2017-11-28
.border-vert(top; @width: 0) {
  border-top-width: @width;
  margin-top: (-@width);
}

.border-vert(bottom; @width: 0) {
  border-bottom-width: @width;
  margin-top: (-@width);
}

.border-vert(topbot; @width: 0) {
  border-top-width:    @width;
  border-bottom-width: @width;
  margin-top: (-2 * @width);
}

.border-vert(all; @width: 0) {
  border-width: @width;
  margin-top: (-2 * @width);
}

// Logical Properties below

.border-block(start; @width: 0) {
  border-block-start-width: @width;
  margin-block-start: (-@width);
}

.border-block(end; @width: 0) {
  border-block-end-width: @width;
  margin-block-start: (-@width);
}

.border-block(block; @width: 0) {
  border-block-width: @width;
  margin-block-start: (-2 * @width);
}

.border-block(all; @width: 0) {
  border-width: @width;
  margin-block-start: (-2 * @width);
}