mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style: add safe-area mixin (#8062)
This commit is contained in:
parent
8ac3f43189
commit
f630e7515b
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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,
|
||||||
|
4
src/style/mixins/safe-area.less
Normal file
4
src/style/mixins/safe-area.less
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.safe-area-inset-bottom() {
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user