1
  2/**
  3 * Popovers
  4 * --------------------------------------------------
  5 * Popovers are independent views which float over content
  6 */
  7
  8.popover-backdrop {
  9  position: fixed;
 10  top: 0;
 11  left: 0;
 12  z-index: $z-index-popover;
 13  width: 100%;
 14  height: 100%;
 15  background-color: $popover-backdrop-bg-inactive;
 16
 17  &.active {
 18    background-color: $popover-backdrop-bg-active;
 19  }
 20}
 21
 22.popover {
 23  position: absolute;
 24  top: 25%;
 25  left: 50%;
 26  z-index: $z-index-popover;
 27  display: block;
 28  margin-top: 12px;
 29  margin-left: -$popover-width / 2;
 30  height: $popover-height;
 31  width: $popover-width;
 32  background-color: $popover-bg-color;
 33  box-shadow: $popover-box-shadow;
 34  opacity: 0;
 35
 36  .item:first-child {
 37    border-top: 0;
 38  }
 39
 40  .item:last-child {
 41    border-bottom: 0;
 42  }
 43
 44  &.popover-bottom {
 45    margin-top: -12px;
 46  }
 47}
 48
 49
 50// Set popover border-radius
 51.popover,
 52.popover .bar-header {
 53  border-radius: $popover-border-radius;
 54}
 55.popover .scroll-content {
 56  z-index: 1;
 57  margin: 2px 0;
 58}
 59.popover .bar-header {
 60  border-bottom-right-radius: 0;
 61  border-bottom-left-radius: 0;
 62}
 63.popover .has-header {
 64  border-top-right-radius: 0;
 65  border-top-left-radius: 0;
 66}
 67.popover-arrow {
 68  display: none;
 69}
 70
 71
 72// iOS Popover
 73.platform-ios {
 74
 75  .popover {
 76    box-shadow: $popover-box-shadow-ios;
 77    border-radius: $popover-border-radius-ios;
 78  }
 79  .popover .bar-header {
 80    @include border-top-radius($popover-border-radius-ios);
 81  }
 82  .popover .scroll-content {
 83    margin: 8px 0;
 84    border-radius: $popover-border-radius-ios;
 85  }
 86  .popover .scroll-content.has-header {
 87    margin-top: 0;
 88  }
 89  .popover-arrow {
 90    position: absolute;
 91    display: block;
 92    top: -17px;
 93    width: 30px;
 94    height: 19px;
 95    overflow: hidden;
 96
 97    &:after {
 98      position: absolute;
 99      top: 12px;
100      left: 5px;
101      width: 20px;
102      height: 20px;
103      background-color: $popover-bg-color;
104      border-radius: 3px;
105      content: '';
106      @include rotate(-45deg);
107    }
108  }
109  .popover-bottom .popover-arrow {
110    top: auto;
111    bottom: -10px;
112    &:after {
113      top: -6px;
114    }
115  }
116}
117
118
119// Android Popover
120.platform-android {
121
122  .popover {
123    margin-top: -32px;
124    background-color: $popover-bg-color-android;
125    box-shadow: $popover-box-shadow-android;
126
127    .item {
128      border-color: $popover-bg-color-android;
129      background-color: $popover-bg-color-android;
130      color: #4d4d4d;
131    }
132    &.popover-bottom {
133      margin-top: 32px;
134    }
135  }
136
137  .popover-backdrop,
138  .popover-backdrop.active {
139    background-color: transparent;
140  }
141}
142
143
144// disable clicks on all but the popover
145.popover-open {
146  pointer-events: none;
147
148  .popover,
149  .popover-backdrop {
150    pointer-events: auto;
151  }
152  // prevent clicks on popover when loading overlay is active though
153  &.loading-active {
154    .popover,
155    .popover-backdrop {
156      pointer-events: none;
157    }
158  }
159}
160
161
162// wider popover on larger viewports
163@media (min-width: $popover-large-break-point) {
164  .popover {
165    width: $popover-large-width;
166    margin-left: -$popover-large-width / 2;
167  }
168}