zui/src/less/basic/utilities.responsive.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// Bootstrap: utilities.responsive.less
/// https://github.com/twbs/bootstrap/blob/master/less/utilities.responsive.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://openzui.com
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================


// Visibility utilities

.visible-xs {
  .responsive-invisibility();
  @media (max-width: @screen-xs-max) {
    .responsive-visibility();
  }
  &.visible-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .responsive-visibility();
    }
  }
  &.visible-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .responsive-visibility();
    }
  }
  &.visible-lg {
    @media (min-width: @screen-lg-min) {
      .responsive-visibility();
    }
  }
}

.visible-sm {
  .responsive-invisibility();
  &.visible-xs {
    @media (max-width: @screen-xs-max) {
      .responsive-visibility();
    }
  }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-visibility();
  }
  &.visible-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .responsive-visibility();
    }
  }
  &.visible-lg {
    @media (min-width: @screen-lg-min) {
      .responsive-visibility();
    }
  }
}

.visible-md {
  .responsive-invisibility();
  &.visible-xs {
    @media (max-width: @screen-xs-max) {
      .responsive-visibility();
    }
  }
  &.visible-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .responsive-visibility();
    }
  }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-visibility();
  }
  &.visible-lg {
    @media (min-width: @screen-lg-min) {
      .responsive-visibility();
    }
  }
}

.visible-lg {
  .responsive-invisibility();
  &.visible-xs {
    @media (max-width: @screen-xs-max) {
      .responsive-visibility();
    }
  }
  &.visible-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .responsive-visibility();
    }
  }
  &.visible-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .responsive-visibility();
    }
  }
  @media (min-width: @screen-lg-min) {
    .responsive-visibility();
  }
}

.hidden-xs {
  .responsive-visibility();
  @media (max-width: @screen-xs-max) {
    .responsive-invisibility();
  }
  &.hidden-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .responsive-invisibility();
    }
  }
  &.hidden-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .responsive-invisibility();
    }
  }
  &.hidden-lg {
    @media (min-width: @screen-lg-min) {
      .responsive-invisibility();
    }
  }
}

.hidden-sm {
  .responsive-visibility();
  &.hidden-xs {
    @media (max-width: @screen-xs-max) {
      .responsive-invisibility();
    }
  }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-invisibility();
  }
  &.hidden-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .responsive-invisibility();
    }
  }
  &.hidden-lg {
    @media (min-width: @screen-lg-min) {
      .responsive-invisibility();
    }
  }
}

.hidden-md {
  .responsive-visibility();
  &.hidden-xs {
    @media (max-width: @screen-xs-max) {
      .responsive-invisibility();
    }
  }
  &.hidden-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .responsive-invisibility();
    }
  }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-invisibility();
  }
  &.hidden-lg {
    @media (min-width: @screen-lg-min) {
      .responsive-invisibility();
    }
  }
}

.hidden-lg {
  .responsive-visibility();
  &.hidden-xs {
    @media (max-width: @screen-xs-max) {
      .responsive-invisibility();
    }
  }
  &.hidden-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .responsive-invisibility();
    }
  }
  &.hidden-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .responsive-invisibility();
    }
  }
  @media (min-width: @screen-lg-min) {
    .responsive-invisibility();
  }
}


// Print utilities

.visible-print {
  .responsive-invisibility();
}

@media print {
  .visible-print {
    .responsive-visibility();
  }
  .hidden-print {
    .responsive-invisibility();
  }
}