From e4291bc32d3eda783ebba03b367ad6979146e989 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 15 Feb 2014 13:17:41 -0800 Subject: [PATCH] android popovers --- dist/android-theme.css | 19 +++++++++++++++---- dist/ratchet.css | 4 ++-- docs-assets/css/docs.css | 24 ++++++++++++++++++++---- examples/app-android-notes/index.html | 2 +- lib/sass/docs.scss | 3 +++ lib/sass/popovers.scss | 6 +++--- lib/sass/theme-android.scss | 13 +++++++++++-- 7 files changed, 55 insertions(+), 16 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index 59ffd5d..32ee2be 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -413,17 +413,28 @@ textarea, } .popover { - top: 90px; + top: 47px; + left: 15px; + width: 200px; + margin-left: 0; border: 1px solid #9b9b9b; border-radius: 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -webkit-transform: scale(0.75); + -ms-transform: scale(0.75); + transform: scale(0.75); + -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .popover:before { display: none; } +.popover.visible { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} .popover .bar { border-radius: 0; diff --git a/dist/ratchet.css b/dist/ratchet.css index 3dc64fe..a629230 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1029,8 +1029,8 @@ select { right: 0; bottom: 0; left: 0; - z-index: 10; - background-color: rgba(0, 0, 0, 0.3); + z-index: 15; + background-color: none; } .popover .btn-block { diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index e04e675..3dd64bb 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -1567,17 +1567,28 @@ hr { background-color: #ff4444; } .platform-android .popover { - top: 90px; + top: 47px; + left: 15px; + width: 200px; + margin-left: 0; border: 1px solid #9b9b9b; border-radius: 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -webkit-transform: scale(0.75); + -ms-transform: scale(0.75); + transform: scale(0.75); + -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .platform-android .popover:before { display: none; } +.platform-android .popover.visible { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} .platform-android .popover .bar { border-radius: 0; } @@ -1681,6 +1692,11 @@ hr { .platform-android .device .content { top: 50px; } +.platform-android .device .popover { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} .platform-android .bar ~ .content { padding: 0; } diff --git a/examples/app-android-notes/index.html b/examples/app-android-notes/index.html index 364bb50..da486ef 100644 --- a/examples/app-android-notes/index.html +++ b/examples/app-android-notes/index.html @@ -8,7 +8,7 @@ - + diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss index 3931ce2..7987378 100644 --- a/lib/sass/docs.scss +++ b/lib/sass/docs.scss @@ -775,6 +775,9 @@ hr { .content { top: 50px; } + .popover { + @include transform(scale(1)); + } } .bar ~ .content { padding: 0; diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index e8d8161..e6daade 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -31,7 +31,7 @@ content: ''; } - // Popover animation + // Popover transition // -------------------------------------------------- &.visible { @@ -53,8 +53,8 @@ right: 0; bottom: 0; left: 0; - z-index: 10; - background-color: rgba(0,0,0,.3); + z-index: 15; + background-color: none; } // Block level buttons in popovers diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index efad2a4..7d540bb 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -587,15 +587,24 @@ textarea, // -------------------------------------------------- .popover { - top: 90px; + top: 47px; + left: 15px; + width: 200px; + margin-left: 0; border: 1px solid #9b9b9b; border-radius: 0; box-shadow: 0 0 3px rgba(0,0,0,.2); - @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); + @include transform(scale(.75)); + @include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); &:before { display: none; } + + + &.visible { + @include transform(scale(1)); + } } // Popovers with bars