From 81f92d98df0cc51b010a8c3e6d2603590d3e6cca Mon Sep 17 00:00:00 2001 From: wind-stone Date: Fri, 15 Dec 2017 12:33:48 +0800 Subject: [PATCH] =?UTF-8?q?iPhone=20X=20compatible:=20ActionSheet=E3=80=81?= =?UTF-8?q?Picker=20(#47)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/index.html | 2 +- src/common/stylus/base.styl | 4 ++++ src/common/stylus/mixin.styl | 7 +++++++ src/common/stylus/theme/default.styl | 1 + src/components/action-sheet/action-sheet.vue | 4 +++- src/components/picker/picker.vue | 2 +- 6 files changed, 17 insertions(+), 3 deletions(-) diff --git a/example/index.html b/example/index.html index 151f92e3..4251068d 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 f5a15a75..9d674ac1 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 e213cade..84055b2c 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 4fa229cf..50b9d180 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 d56e3ff2..436b36c1 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 9ac20c6c..fc078c6e 100644 --- a/src/components/picker/picker.vue +++ b/src/components/picker/picker.vue @@ -8,7 +8,7 @@ @touchmove.prevent @mask-click="cancel"> -
    +
    {{cancelTxt}} {{confirmTxt}} -- GitLab