_popover.scss 3.0 KB

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