From 91bcafcd3a978dcd988bd9e4e4e1b762cddd3cb8 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 15 Feb 2014 13:06:24 -0800 Subject: [PATCH] popovers --- dist/android-theme.css | 12 ++++----- dist/ios-theme.css | 1 + dist/ratchet.css | 20 +++++++++----- dist/ratchet.js | 2 +- docs-assets/css/docs.css | 13 ++++----- examples/app-android-notes/index.html | 32 +++++++++++++++++----- lib/js/popovers.js | 2 +- lib/sass/bars.scss | 39 ++++++++++++++------------- lib/sass/popovers.scss | 5 +++- lib/sass/theme-android.scss | 16 ++++++----- lib/sass/theme-ios.scss | 1 + 11 files changed, 90 insertions(+), 53 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index 83ef250..59ffd5d 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -189,10 +189,6 @@ a:active { line-height: 49px; text-align: left; } -.title .icon-caret { - top: 5px; - margin-top: 0; -} .bar .btn { padding-top: 9px; @@ -227,9 +223,13 @@ a:active { top: 7px; } -.bar .icon { +.bar > .icon { top: 13px; } +.bar .title .icon-caret { + top: 10px; + color: #777; +} .bar input[type="search"] { height: 35px; @@ -465,7 +465,7 @@ textarea, background-color: #d7d7d7; } .toggle.active .toggle-handle { - right: 2px; + margin-right: 2px; background-color: #33b5e5; border-color: #33b5e5; -webkit-transform: translate3d(50px, 0, 0); diff --git a/dist/ios-theme.css b/dist/ios-theme.css index 205e5d1..c21ec25 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -370,6 +370,7 @@ textarea, .popover .table-view { border-radius: 12px; + background-image: none; } .modal { diff --git a/dist/ratchet.css b/dist/ratchet.css index d80c9d3..3dc64fe 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -509,11 +509,6 @@ input[type="button"] { text-align: center; white-space: nowrap; } -.title .icon-caret { - top: 3px; - margin-top: 0; - margin-left: -5px; -} > a:not(.btn) { display: block; @@ -619,7 +614,6 @@ input[type="button"] { .bar .icon { position: relative; - top: 10px; z-index: 20; font-size: 24px; } @@ -629,6 +623,13 @@ input[type="button"] { .bar .icon.pull-right { margin-right: -3px; } +.bar > .icon { + top: 10px; +} +.bar .title .icon-caret { + top: 4px; + margin-left: -5px; +} .badge { display: inline-block; @@ -996,6 +997,9 @@ select { -webkit-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; } .popover:before { position: absolute; @@ -1026,7 +1030,7 @@ select { bottom: 0; left: 0; z-index: 10; - background-color: rgba(0, 0, 0, 0.15); + background-color: rgba(0, 0, 0, 0.3); } .popover .btn-block { @@ -1051,6 +1055,8 @@ select { margin-left: 0; overflow: auto; background-color: #fff; + border-top: 0; + border-bottom: 0; border-radius: 6px; -webkit-overflow-scrolling: touch; } diff --git a/dist/ratchet.js b/dist/ratchet.js index c381fb3..d5936cd 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -53,7 +53,6 @@ }; var onPopoverHidden = function () { - popover.parentNode.removeChild(backdrop); popover.style.display = 'none'; popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); } @@ -66,6 +65,7 @@ element.addEventListener('touchend', function () { popover.addEventListener('webkitTransitionEnd', onPopoverHidden); popover.classList.remove('visible'); + popover.parentNode.removeChild(backdrop); }); return element; diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 032047c..e04e675 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -1118,6 +1118,7 @@ hr { } .platform-ios .popover .table-view { border-radius: 12px; + background-image: none; } .platform-ios .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); @@ -1366,10 +1367,6 @@ hr { line-height: 49px; text-align: left; } -.platform-android .title .icon-caret { - top: 5px; - margin-top: 0; -} .platform-android .bar .btn { padding-top: 9px; padding-bottom: 9px; @@ -1400,9 +1397,13 @@ hr { .platform-android .bar .segmented-control { top: 7px; } -.platform-android .bar .icon { +.platform-android .bar > .icon { top: 13px; } +.platform-android .bar .title .icon-caret { + top: 10px; + color: #777; +} .platform-android .bar input[type="search"] { height: 35px; } @@ -1615,7 +1616,7 @@ hr { background-color: #d7d7d7; } .platform-android .toggle.active .toggle-handle { - right: 2px; + margin-right: 2px; background-color: #33b5e5; border-color: #33b5e5; -webkit-transform: translate3d(50px, 0, 0); diff --git a/examples/app-android-notes/index.html b/examples/app-android-notes/index.html index 9e980cf..364bb50 100644 --- a/examples/app-android-notes/index.html +++ b/examples/app-android-notes/index.html @@ -8,20 +8,24 @@ - + - +
- -

- Notes -

+ + +

+ + Notes + +

+
@@ -148,5 +152,21 @@
+ + + diff --git a/lib/js/popovers.js b/lib/js/popovers.js index 502899c..b62a483 100644 --- a/lib/js/popovers.js +++ b/lib/js/popovers.js @@ -16,7 +16,6 @@ }; var onPopoverHidden = function () { - popover.parentNode.removeChild(backdrop); popover.style.display = 'none'; popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); } @@ -29,6 +28,7 @@ element.addEventListener('touchend', function () { popover.addEventListener('webkitTransitionEnd', onPopoverHidden); popover.classList.remove('visible'); + popover.parentNode.removeChild(backdrop); }); return element; diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index f4d0ff4..38e8ccc 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -60,12 +60,6 @@ color: #000; text-align: center; white-space: nowrap; - - .icon-caret { - top: 3px; - margin-top: 0; - margin-left: -5px; - } } > a:not(.btn) { @@ -193,7 +187,7 @@ } -// Search forms in standard bar +// Bars for search forms // -------------------------------------------------- // Position/size search bar within the bar @@ -203,7 +197,7 @@ } -// Segmented controller in all bars +// Bars with segmented controls // -------------------------------------------------- // Remove standard segmented bottom margin @@ -213,19 +207,28 @@ } -// Nav bars with Ratchicons +// Bars with Ratchicons // -------------------------------------------------- -.bar .icon { - position: relative; - top: 10px; - z-index: 20; // Position the buttons on top of .title - font-size: 24px; +.bar { + .icon { + position: relative; + z-index: 20; // Position the buttons on top of .title + font-size: 24px; - &.pull-left { - margin-left: -3px; + &.pull-left { + margin-left: -3px; + } + &.pull-right { + margin-right: -3px; + } } - &.pull-right { - margin-right: -3px; + > .icon { + top: 10px; + } + // Handle carets in the titles + .title .icon-caret { + top: 4px; + margin-left: -5px; } } diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index ee8d40f..e8d8161 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -15,6 +15,7 @@ opacity: 0; box-shadow: 0 0 15px rgba(0, 0, 0, .1); @include transform(translate3d(0, -15px, 0)); + @include transition(all .25s linear); // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) &:before { @@ -53,7 +54,7 @@ bottom: 0; left: 0; z-index: 10; - background-color: rgba(0,0,0,.15); + background-color: rgba(0,0,0,.3); } // Block level buttons in popovers @@ -90,6 +91,8 @@ margin-left: 0; overflow: auto; background-color: #fff; + border-top: 0; + border-bottom: 0; border-radius: $border-radius; -webkit-overflow-scrolling: touch; } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 84d0f4d..efad2a4 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -277,11 +277,6 @@ a { font-size: $font-size-default; line-height: 49px; text-align: left; - - .icon-caret { - top: 5px; - margin-top: 0; - } } // Bars with buttons @@ -331,8 +326,15 @@ a { } // Bars with Ratchicons -.bar .icon { - top: 13px; +.bar { + > .icon { + top: 13px; + } + // Handle carets in the titles + .title .icon-caret { + top: 10px; + color: #777; + } } // Standard bars with search forms diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 97dae49..ac3de5b 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -490,6 +490,7 @@ textarea, // Popovers with `table-views1 .popover .table-view { border-radius: 12px; + background-image: none; }