feat(Style): add van-safe-area-bottom util class (#9205)

* feat(Style): add van-safe-area-bottom class

* chore: update test cases

src/style/README.md

@@ -49,6 +49,14 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <div class="van-hairline--surround"></div>
 ```
 
+### Safe Area Bottom
+
+Enable safe area inset bottom.
+
+```html
+<div class="van-safe-area-bottom"></div>
+```
+
 ### Animation
 
 ```html

src/style/README.zh-CN.md

@@ -47,6 +47,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```
 
+### 底部安全区
+
+为元素添加底部安全区适配。
+
+```html
+<div class="van-safe-area-bottom"></div>
+```
+
 ### 动画
 
 可以通过 `transition` 组件使用内置的动画类。

src/style/base.less

@@ -5,7 +5,73 @@
 @import './var.less';
 @import './css-variables.less';
 @import './normalize.less';
-@import './ellipsis.less';
-@import './clearfix.less';
-@import './hairline.less';
 @import './animation.less';
+@import './mixins/clearfix.less';
+@import './mixins/ellipsis.less';
+@import './mixins/hairline.less';
+
+.van-clearfix {
+  .clearfix();
+}
+
+.van-ellipsis {
+  .ellipsis();
+}
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}
+
+.van-safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+[class*='van-hairline'] {
+  &::after {
+    .hairline();
+  }
+}
+
+.van-hairline {
+  &,
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--surround,
+  &--top-bottom {
+    position: relative;
+  }
+
+  &--top::after {
+    border-top-width: @border-width-base;
+  }
+
+  &--left::after {
+    border-left-width: @border-width-base;
+  }
+
+  &--right::after {
+    border-right-width: @border-width-base;
+  }
+
+  &--bottom::after {
+    border-bottom-width: @border-width-base;
+  }
+
+  &,
+  &-unset {
+    &--top-bottom::after {
+      border-width: @border-width-base 0;
+    }
+  }
+
+  &--surround::after {
+    border-width: @border-width-base;
+  }
+}

src/style/clearfix.less

@@ -1,5 +0,0 @@
-@import './mixins/clearfix';
-
-.van-clearfix {
-  .clearfix();
-}

src/style/ellipsis.less

@@ -1,13 +0,0 @@
-@import './mixins/ellipsis';
-
-.van-ellipsis {
-  .ellipsis();
-}
-
-.van-multi-ellipsis--l2 {
-  .multi-ellipsis(2);
-}
-
-.van-multi-ellipsis--l3 {
-  .multi-ellipsis(3);
-}

src/style/hairline.less

@@ -1,47 +0,0 @@
-@import './var';
-@import './mixins/hairline';
-
-[class*='van-hairline'] {
-  &::after {
-    .hairline();
-  }
-}
-
-.van-hairline {
-  &,
-  &--top,
-  &--left,
-  &--right,
-  &--bottom,
-  &--surround,
-  &--top-bottom {
-    position: relative;
-  }
-
-  &--top::after {
-    border-top-width: @border-width-base;
-  }
-
-  &--left::after {
-    border-left-width: @border-width-base;
-  }
-
-  &--right::after {
-    border-right-width: @border-width-base;
-  }
-
-  &--bottom::after {
-    border-bottom-width: @border-width-base;
-  }
-
-  &,
-  &-unset {
-    &--top-bottom::after {
-      border-width: @border-width-base 0;
-    }
-  }
-
-  &--surround::after {
-    border-width: @border-width-base;
-  }
-}

src/style/mixins/safe-area.less

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