@dabapps/roe/src/less/spacing.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

.spacing-styles (@style, @size) {
  @{style}: @size !important; // lesshint importantRule: false
}

.spacing-directional-styles (@style, @size, @direction) {
  @{style}-@{direction}: @size !important; // lesshint importantRule: false
}

.spacing-vertical-styles (@style, @size) {
  .spacing-directional-styles(@style, @size, top);
  .spacing-directional-styles(@style, @size, bottom);
}

.spacing-horizontal-styles (@style, @size) {
  .spacing-directional-styles(@style, @size, left);
  .spacing-directional-styles(@style, @size, right);
}

.create-spacing (@prefix, @alias, @style, @value-base, @value-small, @value-large) {
  .@{prefix}-@{style}-none {
    .spacing-styles(@style, 0);
  }

  .@{prefix}-@{style}-auto {
    .spacing-styles(@style, auto);
  }

  .@{prefix}-@{style}-base {
    .spacing-styles(@style, @value-base);
  }

  .@{prefix}-@{style}-small {
    .spacing-styles(@style, @value-small);
  }

  .@{prefix}-@{style}-large {
    .spacing-styles(@style, @value-large);
  }

  .@{prefix}-@{style}-vertical-none {
    .spacing-vertical-styles(@style, 0);
  }

  .@{prefix}-@{style}-vertical-auto {
    .spacing-vertical-styles(@style, auto);
  }

  .@{prefix}-@{style}-vertical-base {
    .spacing-vertical-styles(@style, @value-base);
  }

  .@{prefix}-@{style}-vertical-small {
    .spacing-vertical-styles(@style, @value-small);
  }

  .@{prefix}-@{style}-vertical-large {
    .spacing-vertical-styles(@style, @value-large);
  }

  .@{prefix}-@{style}-horizontal-none {
    .spacing-horizontal-styles(@style, 0);
  }

  .@{prefix}-@{style}-horizontal-auto {
    .spacing-horizontal-styles(@style, auto);
  }

  .@{prefix}-@{style}-horizontal-base {
    .spacing-horizontal-styles(@style, @value-base);
  }

  .@{prefix}-@{style}-horizontal-small {
    .spacing-horizontal-styles(@style, @value-small);
  }

  .@{prefix}-@{style}-horizontal-large {
    .spacing-horizontal-styles(@style, @value-large);
  }

  .@{prefix}-@{style}-top-none {
    .spacing-directional-styles(@style, 0, top);
  }

  .@{prefix}-@{style}-top-auto {
    .spacing-directional-styles(@style, auto, top);
  }

  .@{prefix}-@{style}-top-base {
    .spacing-directional-styles(@style, @value-base, top);
  }

  .@{prefix}-@{style}-top-small {
    .spacing-directional-styles(@style, @value-small, top);
  }

  .@{prefix}-@{style}-top-large {
    .spacing-directional-styles(@style, @value-large, top);
  }

  .@{prefix}-@{style}-right-none {
    .spacing-directional-styles(@style, 0, right);
  }

  .@{prefix}-@{style}-right-auto {
    .spacing-directional-styles(@style, auto, right);
  }

  .@{prefix}-@{style}-right-base {
    .spacing-directional-styles(@style, @value-base, right);
  }

  .@{prefix}-@{style}-right-small {
    .spacing-directional-styles(@style, @value-small, right);
  }

  .@{prefix}-@{style}-right-large {
    .spacing-directional-styles(@style, @value-large, right);
  }

  .@{prefix}-@{style}-bottom-none {
    .spacing-directional-styles(@style, 0, bottom);
  }

  .@{prefix}-@{style}-bottom-auto {
    .spacing-directional-styles(@style, auto, bottom);
  }

  .@{prefix}-@{style}-bottom-base {
    .spacing-directional-styles(@style, @value-base, bottom);
  }

  .@{prefix}-@{style}-bottom-small {
    .spacing-directional-styles(@style, @value-small, bottom);
  }

  .@{prefix}-@{style}-bottom-large {
    .spacing-directional-styles(@style, @value-large, bottom);
  }

  .@{prefix}-@{style}-left-none {
    .spacing-directional-styles(@style, 0, left);
  }

  .@{prefix}-@{style}-left-auto {
    .spacing-directional-styles(@style, auto, left);
  }

  .@{prefix}-@{style}-left-base {
    .spacing-directional-styles(@style, @value-base, left);
  }

  .@{prefix}-@{style}-left-small {
    .spacing-directional-styles(@style, @value-small, left);
  }

  .@{prefix}-@{style}-left-large {
    .spacing-directional-styles(@style, @value-large, left);
  }

  .spacing-alias () when (@alias = true) {
    .@{style}-none {
      .spacing-styles(@style, 0);
    }

    .@{style}-auto {
      .spacing-styles(@style, auto);
    }

    .@{style}-base {
      .spacing-styles(@style, @value-base);
    }

    .@{style}-small {
      .spacing-styles(@style, @value-small);
    }

    .@{style}-large {
      .spacing-styles(@style, @value-large);
    }

    .@{style}-vertical-none {
      .spacing-vertical-styles(@style, 0);
    }

    .@{style}-vertical-auto {
      .spacing-vertical-styles(@style, auto);
    }

    .@{style}-vertical-base {
      .spacing-vertical-styles(@style, @value-base);
    }

    .@{style}-vertical-small {
      .spacing-vertical-styles(@style, @value-small);
    }

    .@{style}-vertical-large {
      .spacing-vertical-styles(@style, @value-large);
    }

    .@{style}-horizontal-none {
      .spacing-horizontal-styles(@style, 0);
    }

    .@{style}-horizontal-auto {
      .spacing-horizontal-styles(@style, auto);
    }

    .@{style}-horizontal-base {
      .spacing-horizontal-styles(@style, @value-base);
    }

    .@{style}-horizontal-small {
      .spacing-horizontal-styles(@style, @value-small);
    }

    .@{style}-horizontal-large {
      .spacing-horizontal-styles(@style, @value-large);
    }

    .@{style}-top-none {
      .spacing-directional-styles(@style, 0, top);
    }

    .@{style}-top-auto {
      .spacing-directional-styles(@style, auto, top);
    }

    .@{style}-top-base {
      .spacing-directional-styles(@style, @value-base, top);
    }

    .@{style}-top-small {
      .spacing-directional-styles(@style, @value-small, top);
    }

    .@{style}-top-large {
      .spacing-directional-styles(@style, @value-large, top);
    }

    .@{style}-right-base {
      .spacing-directional-styles(@style, @value-base, right);
    }

    .@{style}-right-none {
      .spacing-directional-styles(@style, 0, right);
    }

    .@{style}-right-auto {
      .spacing-directional-styles(@style, auto, right);
    }

    .@{style}-right-small {
      .spacing-directional-styles(@style, @value-small, right);
    }

    .@{style}-right-large {
      .spacing-directional-styles(@style, @value-large, right);
    }

    .@{style}-bottom-none {
      .spacing-directional-styles(@style, 0, bottom);
    }

    .@{style}-bottom-auto {
      .spacing-directional-styles(@style, auto, bottom);
    }

    .@{style}-bottom-base {
      .spacing-directional-styles(@style, @value-base, bottom);
    }

    .@{style}-bottom-small {
      .spacing-directional-styles(@style, @value-small, bottom);
    }

    .@{style}-bottom-large {
      .spacing-directional-styles(@style, @value-large, bottom);
    }

    .@{style}-left-none {
      .spacing-directional-styles(@style, 0, left);
    }

    .@{style}-left-auto {
      .spacing-directional-styles(@style, auto, left);
    }

    .@{style}-left-base {
      .spacing-directional-styles(@style, @value-base, left);
    }

    .@{style}-left-small {
      .spacing-directional-styles(@style, @value-small, left);
    }

    .@{style}-left-large {
      .spacing-directional-styles(@style, @value-large, left);
    }
  }

  .spacing-alias();
}

.create-spacings (@prefix, @alias: false) {
  .create-spacing(@prefix, @alias, padding, @padding-base, @padding-small, @padding-large);
  .create-spacing(@prefix, @alias, margin, @margin-base, @margin-small, @margin-large);
}

.create-spacings(xs, true);

@media all and (min-width: @screen-sm) {
  .create-spacings(sm);
}

@media all and (min-width: @screen-md) {
  .create-spacings(md);
}

@media all and (min-width: @screen-lg) {
  .create-spacings(lg);
}

@media all and (min-width: @screen-xl) {
  .create-spacings(xl);
}