@dabapps/roe/src/less/display.less

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

.hidden-styles (@display) {
  display: @display !important; // lesshint importantRule: false
}

.create-hidden (@prefix, @name, @display, @alias) {
  .@{prefix}-@{name} {
    .hidden-styles(@display);
  }

  .hidden-alias () when (@alias = true) {
    .@{name} {
      .hidden-styles(@display);
    }
  }

  .hidden-alias();
}

.create-hiddens (@prefix, @alias: false) {
  .create-hidden(@prefix, display-none, none, @alias);
  .create-hidden(@prefix, display-flex, flex, @alias);
  .create-hidden(@prefix, display-inline, inline, @alias);
  .create-hidden(@prefix, display-block, block, @alias);
  .create-hidden(@prefix, display-inline-block, inline-block, @alias);
}

.create-hiddens(xs, true);

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

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

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

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