diff --git a/dist/android-theme.css b/dist/android-theme.css index de573fb..2607a9b 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -56,15 +56,18 @@ body { text-align: left; } -.popover .bar-nav { - border-bottom: 1px solid #b1b1b1; -} - .card { border-color: #d9d9d9; border-radius: 2px; } +.popover .bar { + border-radius: 0; +} +.popover .bar ~ .table-view { + padding-top: 50px; +} + .table-view .table-view-cell { border-bottom: 1px solid #d9d9d9; } @@ -321,10 +324,15 @@ textarea, } .popover { - border-radius: 12px; -} -.popover:after { - border-bottom: 15px solid #dddddd; + top: 100px; + 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; + transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; +} +.popover:before { + display: none; } .toggle .toggle-handle { diff --git a/dist/ios-theme.css b/dist/ios-theme.css index fbfa846..17e9ab3 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -44,13 +44,6 @@ a { color: #007aff; } -.popover:before { - border-bottom: 15px solid rgba(247, 247, 247, 0.98); -} -.popover .bar { - -webkit-box-shadow: none; - box-shadow: none; -} .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } @@ -359,9 +352,16 @@ textarea, -webkit-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; } -.popover:after { +.popover:before { border-bottom: 15px solid rgba(247, 247, 247, 0.98); } +.popover .bar { + -webkit-box-shadow: none; + box-shadow: none; +} +.popover .bar-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); diff --git a/dist/ratchet.css b/dist/ratchet.css index 3ba5f3f..039f4c7 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -963,7 +963,6 @@ input[type="button"] { z-index: 20; display: none; width: 280px; - padding-top: 44px; margin-left: -140px; background-color: white; border-radius: 6px; @@ -989,6 +988,9 @@ input[type="button"] { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } +.popover .bar ~ .table-view { + padding-top: 44px; +} .backdrop { position: fixed; diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 4cb526a..f1bfb66 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -828,13 +828,6 @@ hr { .platform-ios .tab-item:active .icon { color: #007aff; } -.platform-ios .popover:before { - border-bottom: 15px solid rgba(247, 247, 247, 0.98); -} -.platform-ios .popover .bar { - -webkit-box-shadow: none; - box-shadow: none; -} .platform-ios .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } @@ -1114,9 +1107,16 @@ hr { -webkit-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; } -.platform-ios .popover:after { +.platform-ios .popover:before { border-bottom: 15px solid rgba(247, 247, 247, 0.98); } +.platform-ios .popover .bar { + -webkit-box-shadow: none; + box-shadow: none; +} +.platform-ios .popover .bar-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} .platform-ios .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); @@ -1237,13 +1237,16 @@ hr { line-height: 50px; text-align: left; } -.platform-android .popover .bar-nav { - border-bottom: 1px solid #b1b1b1; -} .platform-android .card { border-color: #d9d9d9; border-radius: 2px; } +.platform-android .popover .bar { + border-radius: 0; +} +.platform-android .popover .bar ~ .table-view { + padding-top: 50px; +} .platform-android .table-view .table-view-cell { border-bottom: 1px solid #d9d9d9; } @@ -1476,10 +1479,15 @@ hr { background-color: #33b5e5; } .platform-android .popover { - border-radius: 12px; + top: 100px; + 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; + transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } -.platform-android .popover:after { - border-bottom: 15px solid #dddddd; +.platform-android .popover:before { + display: none; } .platform-android .toggle .toggle-handle { border: 1px solid #b1b1b1; diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index 3ca92c9..cd40f6b 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -9,7 +9,6 @@ z-index: 20; display: none; width: 280px; - padding-top: $bar-base-height; margin-left: -140px; background-color: $chrome-color; border-radius: $border-radius; @@ -38,6 +37,10 @@ opacity: 1; @include transform(translate3d(0, 0, 0)); } + + .bar ~ .table-view { + padding-top: $bar-base-height; + } } // Backdrop (used as invisible touch escape) diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 2f0e081..d2fbd76 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -94,13 +94,6 @@ body { } -// Nav bar in popovers -// -------------------------------------------------- - -.popover .bar-nav { - border-bottom: $border-default; -} - // // Cards // -------------------------------------------------- @@ -110,6 +103,16 @@ body { border-radius: $border-radius; } +// `bar-nav` in popovers +.popover { + .bar { + border-radius: 0; + } + .bar ~ .table-view { + padding-top: $bar-base-height; + } +} + // Table views // -------------------------------------------------- @@ -460,10 +463,14 @@ textarea, // -------------------------------------------------- .popover { - border-radius: 12px; - - &:after { - border-bottom: 15px solid $chrome-color; + top: 100px; + 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); + + &:before { + display: none; } } diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 6d0b581..bc29fd2 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -77,19 +77,9 @@ a { } } - -// Nav bar in popovers -// -------------------------------------------------- -.popover { - &:before { - border-bottom: 15px solid $chrome-color; - } - .bar { - @include box-shadow(none); - } - .bar-nav { - border-bottom: 1px solid rgba(0,0,0,.15); - } +// `bar-nav` in popovers +.popover .bar-nav { + border-bottom: 1px solid rgba(0,0,0,.15); } @@ -487,9 +477,15 @@ textarea, border-radius: 12px; @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); - &:after { + &:before { border-bottom: 15px solid $chrome-color; } + .bar { + @include box-shadow(none); + } + .bar-nav { + border-bottom: 1px solid rgba(0,0,0,.15); + } }