zoro-cli
Version:
https://github.com/vuejs/vue-cli
117 lines (86 loc) • 2.44 kB
CSS
/* padding for status bar & nav bar via safe-area-inset */
.safe-area {
/* iOS < 11, status bar is 20, nav bar is 44 */
padding: 64px 0 0;
/* iOS 11 */
padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
constant(safe-area-inset-bottom) constant(safe-area-inset-left);
/* iOS 11.2+ */
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.safe-area-padding-top {
/* iOS < 11, status bar is 20, nav bar is 44 */
padding-top: 64px;
/* iOS 11 */
padding-top: constant(safe-area-inset-top);
/* iOS 11.2+ */
padding-top: env(safe-area-inset-top);
}
.safe-area-padding-bottom {
/* iOS 11 */
padding-bottom: constant(safe-area-inset-bottom);
/* iOS 11.2+ */
padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-margin-top {
/* iOS < 11, status bar is 20, nav bar is 44 */
margin-top: 64px;
/* iOS 11 */
margin-top: constant(safe-area-inset-top);
/* iOS 11.2+ */
margin-top: env(safe-area-inset-top);
}
.safe-area-margin-bottom {
/* iOS 11 */
margin-bottom: constant(safe-area-inset-bottom);
/* iOS 11.2+ */
margin-bottom: env(safe-area-inset-bottom);
}
/* align to the bottom of nav bar, for position: fixed */
.safe-area-fixed-top {
position: fixed;
/* iOS < 11, status bar is 20, nav bar is 44 */
top: 64px;
/* iOS 11 */
top: constant(safe-area-inset-top);
/* iOS 11.2+ */
top: env(safe-area-inset-top);
}
/* align to the top of safe-area-inset-bottom, for position: fixed */
.safe-area-fixed-bottom {
position: fixed;
/* iOS < 11 */
bottom: 0;
/* iOS 11 */
bottom: constant(safe-area-inset-bottom);
/* iOS 11.2+ */
bottom: env(safe-area-inset-bottom);
}
/* for position: absolute */
.safe-area-attached-top {
position: absolute;
/* iOS < 11, status bar is 20, nav bar is 44 */
top: 64px;
/* iOS 11 */
top: constant(safe-area-inset-top);
/* iOS 11.2+ */
top: env(safe-area-inset-top);
}
/* for position: absolute */
.safe-area-attached-bottom {
position: absolute;
/* iOS < 11 */
bottom: 0;
/* iOS 11 */
bottom: constant(safe-area-inset-bottom);
/* iOS 11.2+ */
bottom: env(safe-area-inset-bottom);
}
/* align to the top of nav bar, only ios < 11 and android, more digging here */
.safe-area-fixed-nav-top {
top: 20px;
}
.no-safe-area-padding-top .safe-area-padding-top {
padding-top: 0 ;
}