@pi0/framework7/src/components/statusbar/statusbar.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Statusbar === */
.statusbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
  box-sizing: border-box;
  display: none;

  html.device-ios &, html.ios:not(.device-ios):not(.device-android) & {
    height: 20px;
  }
  html.device-android &, html.md:not(.device-ios):not(.device-android) & {
    height: 24px;
  }
}
html.with-statusbar {
  .statusbar {
    display: block;
  }
  &.device-ios, &.ios:not(.device-ios):not(.device-android) {
    .framework7-root {
      padding-top: 20px;
    }
  }
  &.device-ios, &.ios:not(.device-ios):not(.device-android) {
    .panel {
      top: 20px;
      height: ~"calc(100% - 20px)";
    }
  }
  &.device-android, &.md:not(.device-ios):not(.device-android) {
    .framework7-root {
      padding-top: 24px;
    }
  }
  &.device-android, &.md:not(.device-ios):not(.device-android) {
    .panel {
      top: 24px;
      height: ~"calc(100% - 24px)";
    }
  }
}

& when (@include-ios-theme) {
  @import url('./statusbar-ios.less');
}
& when (@include-md-theme) {
  @import url('./statusbar-md.less');
}