index.less 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. @import '../style/var';
  2. .van-popover {
  3. position: absolute;
  4. overflow: visible;
  5. background-color: transparent;
  6. transition: opacity 0.15s, transform 0.15s;
  7. &__wrapper {
  8. display: inline-block;
  9. }
  10. &__arrow {
  11. position: absolute;
  12. width: 0;
  13. height: 0;
  14. border-color: transparent;
  15. border-style: solid;
  16. border-width: @popover-arrow-size;
  17. }
  18. &__content {
  19. overflow: hidden;
  20. border-radius: @popover-border-radius;
  21. }
  22. &__action {
  23. position: relative;
  24. display: flex;
  25. align-items: center;
  26. box-sizing: border-box;
  27. width: @popover-action-width;
  28. height: @popover-action-height;
  29. padding: 0 @padding-md;
  30. font-size: @popover-action-font-size;
  31. line-height: @line-height-md;
  32. cursor: pointer;
  33. &:last-child {
  34. .van-popover__action-text::after {
  35. display: none;
  36. }
  37. }
  38. &-text {
  39. display: flex;
  40. flex: 1;
  41. align-items: center;
  42. justify-content: center;
  43. height: 100%;
  44. }
  45. &-icon {
  46. margin-right: @padding-xs;
  47. font-size: @popover-action-icon-size;
  48. }
  49. &--with-icon {
  50. .van-popover__action-text {
  51. justify-content: flex-start;
  52. }
  53. }
  54. }
  55. &[data-popper-placement^='top'] {
  56. .van-popover__arrow {
  57. bottom: 0;
  58. border-top-color: currentColor;
  59. border-bottom-width: 0;
  60. transform: translate(-50%, 100%);
  61. }
  62. }
  63. &[data-popper-placement='top'] {
  64. transform-origin: 50% 100%;
  65. .van-popover__arrow {
  66. left: 50%;
  67. }
  68. }
  69. &[data-popper-placement='top-start'] {
  70. transform-origin: 0 100%;
  71. .van-popover__arrow {
  72. left: @padding-md;
  73. }
  74. }
  75. &[data-popper-placement='top-end'] {
  76. transform-origin: 100% 100%;
  77. .van-popover__arrow {
  78. right: @padding-md;
  79. }
  80. }
  81. &[data-popper-placement^='left'] {
  82. .van-popover__arrow {
  83. right: 0;
  84. border-right-width: 0;
  85. border-left-color: currentColor;
  86. transform: translate(100%, -50%);
  87. }
  88. }
  89. &[data-popper-placement='left'] {
  90. transform-origin: 100% 50%;
  91. .van-popover__arrow {
  92. top: 50%;
  93. }
  94. }
  95. &[data-popper-placement='left-start'] {
  96. transform-origin: 100% 0;
  97. .van-popover__arrow {
  98. top: @padding-md;
  99. }
  100. }
  101. &[data-popper-placement='left-end'] {
  102. transform-origin: 100% 100%;
  103. .van-popover__arrow {
  104. bottom: @padding-md;
  105. }
  106. }
  107. &[data-popper-placement^='right'] {
  108. .van-popover__arrow {
  109. left: 0;
  110. border-right-color: currentColor;
  111. border-left-width: 0;
  112. transform: translate(-100%, -50%);
  113. }
  114. }
  115. &[data-popper-placement='right'] {
  116. transform-origin: 0 50%;
  117. .van-popover__arrow {
  118. top: 50%;
  119. }
  120. }
  121. &[data-popper-placement='right-start'] {
  122. transform-origin: 0 0;
  123. .van-popover__arrow {
  124. top: @padding-md;
  125. }
  126. }
  127. &[data-popper-placement='right-end'] {
  128. transform-origin: 0 100%;
  129. .van-popover__arrow {
  130. bottom: @padding-md;
  131. }
  132. }
  133. &[data-popper-placement^='bottom'] {
  134. .van-popover__arrow {
  135. top: 0;
  136. border-top-width: 0;
  137. border-bottom-color: currentColor;
  138. transform: translate(-50%, -100%);
  139. }
  140. }
  141. &[data-popper-placement='bottom'] {
  142. transform-origin: 50% 0;
  143. .van-popover__arrow {
  144. left: 50%;
  145. }
  146. }
  147. &[data-popper-placement='bottom-start'] {
  148. transform-origin: 0 0;
  149. .van-popover__arrow {
  150. left: @padding-md;
  151. }
  152. }
  153. &[data-popper-placement='bottom-end'] {
  154. transform-origin: 100% 0;
  155. .van-popover__arrow {
  156. right: @padding-md;
  157. }
  158. }
  159. &--light {
  160. color: @popover-light-text-color;
  161. .van-popover__content {
  162. background-color: @popover-light-background-color;
  163. box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
  164. }
  165. .van-popover__arrow {
  166. color: @popover-light-background-color;
  167. }
  168. .van-popover__action {
  169. &:active {
  170. background-color: @active-color;
  171. }
  172. &--disabled {
  173. color: @popover-light-action-disabled-text-color;
  174. cursor: not-allowed;
  175. &:active {
  176. background-color: transparent;
  177. }
  178. }
  179. }
  180. }
  181. &--dark {
  182. color: @popover-dark-text-color;
  183. .van-popover__content {
  184. background-color: @popover-dark-background-color;
  185. }
  186. .van-popover__arrow {
  187. color: @popover-dark-background-color;
  188. }
  189. .van-popover__action {
  190. &:active {
  191. background-color: rgba(0, 0, 0, 0.2);
  192. }
  193. &--disabled {
  194. color: @popover-dark-action-disabled-text-color;
  195. &:active {
  196. background-color: transparent;
  197. }
  198. }
  199. }
  200. .van-popover__action-text {
  201. &::after {
  202. border-color: @gray-7;
  203. }
  204. }
  205. }
  206. &-zoom-enter,
  207. &-zoom-leave-active {
  208. transform: scale(0.8);
  209. opacity: 0;
  210. }
  211. &-zoom-enter-active {
  212. transition-timing-function: @animation-timing-function-enter;
  213. }
  214. &-zoom-leave-active {
  215. transition-timing-function: @animation-timing-function-leave;
  216. }
  217. }