diff --git a/example/index.html b/example/index.html index 151f92e398ca15fc4c2abcf9feafab3f3ebb4758..4251068d6cd406264087c23ec6cc561ff6ec5f1a 100644 --- a/example/index.html +++ b/example/index.html @@ -4,7 +4,7 @@ cube-ui lib + content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
diff --git a/src/common/stylus/base.styl b/src/common/stylus/base.styl index f5a15a75eb175be84c3d93760c875958fb5c3072..9d674ac1a64b7c2706f46e5f7d891c1633b59c7e 100644 --- a/src/common/stylus/base.styl +++ b/src/common/stylus/base.styl @@ -1,4 +1,5 @@ @require "./variable.styl" +@require "./mixin.styl" body, html line-height: 1 @@ -52,6 +53,9 @@ body, html height: 100% transform-origin: left 0 +.cube-safe-area-pb + safe-area-mixin(padding-bottom, bottom, true) + @media (min-resolution: 2dppx) .border-top-1px &::before diff --git a/src/common/stylus/mixin.styl b/src/common/stylus/mixin.styl index e213cadedebeea0ccf8b762318d545fb286c5c89..84055b2c3a8ab807339960dbc074ca6ad9d4e44a 100644 --- a/src/common/stylus/mixin.styl +++ b/src/common/stylus/mixin.styl @@ -54,3 +54,10 @@ bg-image($url, $ext = ".png") background-image: url($url + "@2x" + $ext) @media (min-resolution: 3dppx) background-image: url($url + "@3x" + $ext) + +functions = constant env +safe-area-fn(fn, position) + s("%s(safe-area-inset-%s)", fn, position) +safe-area-mixin(property, position, important = false) + for fn in functions + {property} safe-area-fn(fn, position) important == true ? !important : unquote("") diff --git a/src/common/stylus/theme/default.styl b/src/common/stylus/theme/default.styl index 4fa229cf1fdb9ca3ee3af7bcc5a0c6dd4adeee32..50b9d180ba3d25e1bc6f2c745def0fb011309d72 100644 --- a/src/common/stylus/theme/default.styl +++ b/src/common/stylus/theme/default.styl @@ -6,6 +6,7 @@ $action-sheet-active-color := $color-orange $action-sheet-bgc := $color-white $action-sheet-active-bgc := $color-light-grey-opacity $action-sheet-title-color := $color-dark-grey +$action-sheet-space-bgc := $color-mask-bg /// picker style $action-sheet-picker-cancel-color := $color-light-grey $action-sheet-picker-cancel-active-color := $color-light-grey-s diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue index d56e3ff25cb7deeea9d62d3035d20bcb74bf215f..436b36c15c8e56ea0c2126e67ebdccd4d71c6cc7 100644 --- a/src/components/action-sheet/action-sheet.vue +++ b/src/components/action-sheet/action-sheet.vue @@ -9,7 +9,7 @@ @touchmove.prevent="noop" @click="cancel"> -
+

{{title}}

    @@ -94,6 +94,7 @@ .cube-action-sheet-panel text-align: center font-size: $fontsize-medium + background-color: $action-sheet-bgc .cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active transform: translate3d(0, 100%, 0) .cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active @@ -142,6 +143,7 @@ .cube-action-sheet-space height: 6px + background-color: $action-sheet-space-bgc .cube-action-sheet-item_active color: $action-sheet-active-color diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue index 9ac20c6ca0752eedfaeabc1161577e1e0d3f3ee5..fc078c6eff0e5907bde6a1a0097c2d977b986cc6 100644 --- a/src/components/picker/picker.vue +++ b/src/components/picker/picker.vue @@ -8,7 +8,7 @@ @touchmove.prevent @mask-click="cancel"> -
    +
    {{cancelTxt}} {{confirmTxt}}