@moonwalker/orbit-mixins-stylus/lib/orbit/box.styl

Stylus mixins and utilities library

@require '_variables';
@require 'utils';

/*
 * Box helper
 *
 * Set element dimentions
 *
 * Examples:
 *   box(100px)
 *   box(100%, 20px)
 *   box(height: 20px)
 *   box(cover)
 */
box(width = null, height = null) {
  if (length(arguments) > 0 && arguments[0] == cover) {
    width = 100%; // @stylint off
    height = 100%; // @stylint off
  }

  width: width if width != null;
  height: height if height != null;
}

/*
 * Display block helper
 *
 * Examples:
 *   block()
 *   block(100px)
 *   block(100px, 20px)
 *   block(height: 20px)
 *   block(cover)
 */
block(width = null, height = null) {
  display: block;
  content: '' if is-pseudoelement();

  box(width, height);
}

/*
 * Display inline-block helper
 *
 * Examples:
 *   inline-block()
 *   inline-block(100px)
 *   inline-block(100px, 20px)
 *   inline-block(height: 20px)
 *   inline-block(cover)
 */
inline-block(width = null, height = null) {
  display: inline-block;
  content: '' if is-pseudoelement();

  box(width, height);
}

/*
 * Display flex helper
 *
 * Examples:
 *   flex();
 *   flex(100px)
 *   flex(100px, 20px)
 *   flex(height: 20px)
 *   flex(cover)
 */
flex(width = null, height = null) {
  // Skip when triggered by a property, eg: flex: 1 1 auto
  {current-property}: arguments if current-property;
  return if current-property;

  display: flex;
  box(width, height);
}

/*
 * Display inline-flex helper
 *
 * Examples:
 *   inline-flex();
 *   inline-flex(100px)
 *   inline-flex(100px, 20px)
 *   inline-flex(height: 20px)
 *   inline-flex(cover)
 */
inline-flex(width = null, height = null) {
  display: inline-flex;
  box(width, height);
}

/*
 * Proportional box helper
 *
 * Examples:
 *   proportional-box()
 *   proportional-box(200px / 100px)
 *   proportional-box(0.5)
 */
proportional-box(ratio = 1) {
  if (!@position || @position == 'static') {
    position: relative;
  }

  &::before {
    block();
    padding-bottom: percentage(1 / ratio);
  }
}

/*
 * Padding based on space scale
 *
 * Examples:
 *   inner-space()
 *   inner-space($space-small)
 *   inner-space($space-small $space-large, 2px)
 */
inner-space(padding-value = 0, border-width = 0) {
  padding-values = { top: 0, right: 0, bottom: 0, left: 0 };

  if (length(padding-value) == 1) {
    padding-values['top'] = padding-value;
    padding-values['right'] = padding-value;
    padding-values['bottom'] = padding-value;
    padding-values['left'] = padding-value;
  }

  if (length(padding-value) == 2) {
    padding-values['top'] = padding-value[0];
    padding-values['right'] = padding-value[1];
    padding-values['bottom'] = padding-value[0];
    padding-values['left'] = padding-value[1];
  }

  if (length(padding-value) == 3) {
    padding-values['top'] = padding-value[0];
    padding-values['right'] = padding-value[1];
    padding-values['bottom'] = padding-value[2];
    padding-values['left'] = padding-value[1];
  }

  if (length(padding-value) >= 4) {
    padding-values['top'] = padding-value[0];
    padding-values['right'] = padding-value[1];
    padding-values['bottom'] = padding-value[2];
    padding-values['left'] = padding-value[3];
  }

  for key, value in padding-values {
    padding-{key}: border-width ? (unit(value) == unit(border-width) ? (value - border-width) : scalc('%s - %s', value, border-width)) : value;
  }
}