style: add safe-area mixin (#8062)

This commit is contained in:
neverland 2021-02-02 20:28:26 +08:00 committed by GitHub
parent 8ac3f43189
commit f630e7515b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 18 additions and 14 deletions

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van-action-bar { .van-action-bar {
position: fixed; position: fixed;
@ -9,9 +10,8 @@
align-items: center; align-items: center;
box-sizing: content-box; box-sizing: content-box;
height: @action-bar-height; height: @action-bar-height;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @action-bar-background-color; background-color: @action-bar-background-color;
.safe-area-inset-bottom();
&--unfit { &--unfit {
padding-bottom: 0; padding-bottom: 0;

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van-address-list { .van-address-list {
box-sizing: border-box; box-sizing: border-box;
@ -13,9 +14,8 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 0 @padding-md; padding: 0 @padding-md;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @white; background-color: @white;
.safe-area-inset-bottom();
} }
&__add { &__add {

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van-calendar { .van-calendar {
display: flex; display: flex;
@ -173,8 +174,7 @@
&__footer { &__footer {
flex-shrink: 0; flex-shrink: 0;
padding: 0 @padding-md; padding: 0 @padding-md;
padding-bottom: constant(safe-area-inset-bottom); .safe-area-inset-bottom();
padding-bottom: env(safe-area-inset-bottom);
&--unfit { &--unfit {
padding-bottom: 0; padding-bottom: 0;

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van-contact-list { .van-contact-list {
box-sizing: border-box; box-sizing: border-box;
@ -42,9 +43,8 @@
left: 0; left: 0;
z-index: @contact-list-add-button-z-index; z-index: @contact-list-add-button-z-index;
padding: 0 @padding-md; padding: 0 @padding-md;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @white; background-color: @white;
.safe-area-inset-bottom();
} }
&__add { &__add {

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van { .van {
&-overflow-hidden { &-overflow-hidden {
@ -64,8 +65,7 @@
} }
&--safe-area-inset-bottom { &--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom); .safe-area-inset-bottom();
padding-bottom: env(safe-area-inset-bottom);
} }
&-slide-top-enter-active, &-slide-top-enter-active,

View File

@ -0,0 +1,4 @@
.safe-area-inset-bottom() {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van-submit-bar { .van-submit-bar {
position: fixed; position: fixed;
@ -6,10 +7,9 @@
left: 0; left: 0;
z-index: @submit-bar-z-index; z-index: @submit-bar-z-index;
width: 100%; width: 100%;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @submit-bar-background-color; background-color: @submit-bar-background-color;
user-select: none; user-select: none;
.safe-area-inset-bottom();
&__tip { &__tip {
padding: @submit-bar-tip-padding; padding: @submit-bar-tip-padding;

View File

@ -1,4 +1,5 @@
@import '../style/var'; @import '../style/var';
@import '../style/mixins/safe-area.less';
.van-tabbar { .van-tabbar {
z-index: @tabbar-z-index; z-index: @tabbar-z-index;
@ -6,9 +7,8 @@
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
height: @tabbar-height; height: @tabbar-height;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @tabbar-background-color; background-color: @tabbar-background-color;
.safe-area-inset-bottom();
&--fixed { &--fixed {
position: fixed; position: fixed;