diff options
Diffstat (limited to 'www/lib/ionic/scss/_popover.scss')
| -rw-r--r-- | www/lib/ionic/scss/_popover.scss | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/www/lib/ionic/scss/_popover.scss b/www/lib/ionic/scss/_popover.scss new file mode 100644 index 00000000..00c15086 --- /dev/null +++ b/www/lib/ionic/scss/_popover.scss @@ -0,0 +1,168 @@ + +/** + * Popovers + * -------------------------------------------------- + * Popovers are independent views which float over content + */ + +.popover-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: $z-index-popover; + width: 100%; + height: 100%; + background-color: $popover-backdrop-bg-inactive; + + &.active { + background-color: $popover-backdrop-bg-active; + } +} + +.popover { + position: absolute; + top: 25%; + left: 50%; + z-index: $z-index-popover; + display: block; + margin-top: 12px; + margin-left: -$popover-width / 2; + height: $popover-height; + width: $popover-width; + background-color: $popover-bg-color; + box-shadow: $popover-box-shadow; + opacity: 0; + + .item:first-child { + border-top: 0; + } + + .item:last-child { + border-bottom: 0; + } + + &.popover-bottom { + margin-top: -12px; + } +} + + +// Set popover border-radius +.popover, +.popover .bar-header { + border-radius: $popover-border-radius; +} +.popover .scroll-content { + z-index: 1; + margin: 2px 0; +} +.popover .bar-header { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.popover .has-header { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.popover-arrow { + display: none; +} + + +// iOS Popover +.platform-ios { + + .popover { + box-shadow: $popover-box-shadow-ios; + border-radius: $popover-border-radius-ios; + } + .popover .bar-header { + @include border-top-radius($popover-border-radius-ios); + } + .popover .scroll-content { + margin: 8px 0; + border-radius: $popover-border-radius-ios; + } + .popover .scroll-content.has-header { + margin-top: 0; + } + .popover-arrow { + position: absolute; + display: block; + top: -17px; + width: 30px; + height: 19px; + overflow: hidden; + + &:after { + position: absolute; + top: 12px; + left: 5px; + width: 20px; + height: 20px; + background-color: $popover-bg-color; + border-radius: 3px; + content: ''; + @include rotate(-45deg); + } + } + .popover-bottom .popover-arrow { + top: auto; + bottom: -10px; + &:after { + top: -6px; + } + } +} + + +// Android Popover +.platform-android { + + .popover { + margin-top: -32px; + background-color: $popover-bg-color-android; + box-shadow: $popover-box-shadow-android; + + .item { + border-color: $popover-bg-color-android; + background-color: $popover-bg-color-android; + color: #4d4d4d; + } + &.popover-bottom { + margin-top: 32px; + } + } + + .popover-backdrop, + .popover-backdrop.active { + background-color: transparent; + } +} + + +// disable clicks on all but the popover +.popover-open { + pointer-events: none; + + .popover, + .popover-backdrop { + pointer-events: auto; + } + // prevent clicks on popover when loading overlay is active though + &.loading-active { + .popover, + .popover-backdrop { + pointer-events: none; + } + } +} + + +// wider popover on larger viewports +@media (min-width: $popover-large-break-point) { + .popover { + width: $popover-large-width; + margin-left: -$popover-large-width / 2; + } +} |
