feat(popover): add popover component

references #5420

src/components.core.scss

@@ -21,6 +21,7 @@
   "components/loading/loading",
   "components/menu/menu",
   "components/modal/modal",
+  "components/popover/popover",
   "components/refresher/refresher",
   "components/scroll/scroll",
   "components/show-hide-when/show-hide-when",

src/components.ios.scss

@@ -23,6 +23,7 @@
   "components/menu/menu.ios",
   "components/modal/modal.ios",
   "components/picker/picker.ios",
+  "components/popover/popover.ios",
   "components/radio/radio.ios",
   "components/searchbar/searchbar.ios",
   "components/segment/segment.ios",

src/components.md.scss

@@ -22,6 +22,7 @@
   "components/menu/menu.md",
   "components/modal/modal.md",
   "components/picker/picker.md",
+  "components/popover/popover.md",
   "components/radio/radio.md",
   "components/searchbar/searchbar.md",
   "components/segment/segment.md",

src/components.ts

@@ -31,6 +31,7 @@ export * from './components/nav/nav-router';
 export * from './components/navbar/navbar';
 export * from './components/option/option';
 export * from './components/picker/picker';
+export * from './components/popover/popover';
 export * from './components/radio/radio-button';
 export * from './components/radio/radio-group';
 export * from './components/refresher/refresher';

src/components.wp.scss

@@ -22,6 +22,7 @@
   "components/menu/menu.wp",
   "components/modal/modal.wp",
   "components/picker/picker.wp",
+  "components/popover/popover.wp",
   "components/radio/radio.wp",
   "components/searchbar/searchbar.wp",
   "components/segment/segment.wp",

src/components/popover/popover.ios.scss

@@ -0,0 +1,63 @@
+@import "../../globals.core";
+@import "./popover";
+
+// iOS Popover
+// --------------------------------------------------
+
+$popover-ios-padding:                   24px 34px !default;
+$popover-ios-min-width:                 150px !default;
+$popover-ios-max-width:                 270px !default;
+$popover-ios-max-height:                90% !default;
+$popover-ios-border-radius:             10px !default;
+$popover-ios-text-color:                #000 !default;
+$popover-ios-background:                #f3f3f3 !default;
+
+
+.popover-wrapper {
+  padding: $popover-ios-padding;
+
+  min-width: $popover-ios-min-width;
+  max-width: $popover-ios-max-width;
+
+  max-height: $popover-ios-max-height;
+
+  border-radius: $popover-ios-border-radius;
+  color: $popover-ios-text-color;
+  background: $popover-ios-background;
+}
+
+
+// Popover Arrow
+// -----------------------------------------
+
+.popover-arrow {
+  position: absolute;
+  display: block;
+  top: -20px;
+  width: 30px;
+  height: 19px;
+  overflow: hidden;
+
+  &:after {
+    position: absolute;
+
+    z-index: $z-index-overlay-wrapper;
+
+    top: 12px;
+    left: 5px;
+    width: 20px;
+    height: 20px;
+    background-color: $popover-ios-background;
+    border-radius: 3px;
+    content: '';
+    transform: rotate(-45deg);
+  }
+}
+
+.popover-bottom .popover-arrow {
+  top: auto;
+  bottom: -10px;
+  &:after {
+    top: -6px;
+  }
+}

src/components/popover/popover.md.scss

@@ -0,0 +1,35 @@
+@import "../../globals.core";
+@import "./popover";
+
+// Material Design Popover
+// --------------------------------------------------
+
+$popover-md-padding:                   24px 34px !default;
+$popover-md-min-width:                 150px !default;
+$popover-md-max-width:                 270px !default;
+$popover-md-max-height:                90% !default;
+$popover-md-border-radius:             2px !default;
+$popover-md-text-color:                #000 !default;
+$popover-md-background:                #fafafa !default;
+
+
+.popover-wrapper {
+  padding: $popover-md-padding;
+
+  min-width: $popover-md-min-width;
+  max-width: $popover-md-max-width;
+
+  max-height: $popover-md-max-height;
+
+  border-radius: $popover-md-border-radius;
+  color: $popover-md-text-color;
+  background: $popover-md-background;
+}
+
+
+// Material Design Popover Template
+// -----------------------------------------
+
+.popover-template {
+
+}

src/components/popover/popover.scss

@@ -0,0 +1,44 @@
+@import "../../globals.core";
+
+// Popover
+// --------------------------------------------------
+
+$popover-min-width:                 150px !default;
+$popover-max-height:                90% !default;
+
+
+ion-popover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+}
+
+.popover-wrapper {
+  position: absolute;
+
+  z-index: $z-index-overlay-wrapper;
+  display: flex;
+
+  flex-direction: column;
+
+  min-width: $popover-min-width;
+  max-height: $popover-max-height;
+
+  opacity: 0;
+}
+
+
+// Popover Backdrop
+// -----------------------------------------
+
+.hide-backdrop {
+  display: none;
+}