framework7/components/statusbar/statusbar.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Statusbar === */
@import url('./statusbar-vars.less');
.device-ios {
  --f7-statusbar-height: var(--f7-safe-area-top, 20px);
}
.device-android {
  --f7-statusbar-height: var(--f7-safe-area-top, 24px);
}
.with-statusbar {
  &.ios:not(.device-ios):not(.device-android) {
    --f7-statusbar-height: 20px;
  }
  &.md:not(.device-ios):not(.device-android) {
    --f7-statusbar-height: 24px;
  }
  &.device-ios {
    @supports not (top: env(safe-area-inset-top)) {
      --f7-statusbar-height: 20px;
    }
  }
  &.device-android {
    @supports not (top: env(safe-area-inset-top)) {
      --f7-statusbar-height: 24px;
    }
  }
}
.statusbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
  box-sizing: border-box;
  display: block;
  height: var(--f7-statusbar-height);
  background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
}
.framework7-root {
  padding-top: var(--f7-statusbar-height);
}

.if-ios-theme({
  @import url('./statusbar-ios.less');
});
.if-md-theme({
  @import url('./statusbar-md.less');
});
.if-aurora-theme({
  @import url('./statusbar-aurora.less');
});