Responsive visibility utilities for reflex-grid

ReflexVisibility.less

// Responsive visibility utilities
// reflex-grid
// based on Twitter bootstrap 4
// http://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

@reflex-xs: 480px;
@reflex-sm: 768px;
@reflex-md: 992px;
@reflex-lg: 1200px;
@reflex-xlg: 1600px;

.hidden() {
    display: none !important;
}

.hidden-xs-up {
  @media (min-width: @reflex-xs) {
    .hidden;
  }
}

.hidden-xs-down {
  @media (max-width: @reflex-xs) {
    .hidden;
  }
}

.hidden-sm-up {
  @media (min-width: @reflex-sm) {
    .hidden;
  }
}

.hidden-sm-down {
  @media (max-width: @reflex-sm) {
    .hidden;
  }
}

.hidden-md-up {
  @media (min-width: @reflex-md) {
    .hidden;
  }
}

.hidden-md-down {
  @media (max-width: @reflex-md) {
    .hidden;
  }
}

.hidden-lg-up {
  @media (min-width: @reflex-lg) {
    .hidden;
  }
}

.hidden-lg-down {
  @media (max-width: @reflex-lg) {
    .hidden;
  }
}

.hidden-lgx-up {
  @media (min-width: @reflex-xlg) {
    .hidden;
  }
}

.hidden-lgx-down {
  @media (max-width: @reflex-xlg) {
    .hidden;
  }
}