tether-theme-arrows.css 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. .tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
  2. box-sizing: border-box; }
  3. .tether-element {
  4. position: absolute;
  5. display: none; }
  6. .tether-element.tether-open {
  7. display: block; }
  8. .tether-element.tether-theme-arrows {
  9. max-width: 100%;
  10. max-height: 100%; }
  11. .tether-element.tether-theme-arrows .tether-content {
  12. border-radius: 5px;
  13. position: relative;
  14. font-family: inherit;
  15. background: #fff;
  16. color: inherit;
  17. padding: 1em;
  18. font-size: 1.1em;
  19. line-height: 1.5em;
  20. -webkit-transform: translateZ(0);
  21. transform: translateZ(0);
  22. -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  23. filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
  24. .tether-element.tether-theme-arrows .tether-content:before {
  25. content: "";
  26. display: block;
  27. position: absolute;
  28. width: 0;
  29. height: 0;
  30. border-color: transparent;
  31. border-width: 16px;
  32. border-style: solid; }
  33. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content {
  34. margin-bottom: 16px; }
  35. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
  36. top: 100%;
  37. left: 50%;
  38. margin-left: -16px;
  39. border-top-color: #fff;
  40. border-bottom: 0; }
  41. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content {
  42. margin-top: 16px; }
  43. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content:before {
  44. bottom: 100%;
  45. left: 50%;
  46. margin-left: -16px;
  47. border-bottom-color: #fff;
  48. border-top: 0; }
  49. .tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content {
  50. margin-right: 16px; }
  51. .tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
  52. left: 100%;
  53. top: 50%;
  54. margin-top: -16px;
  55. border-left-color: #fff;
  56. border-right: 0; }
  57. .tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content {
  58. margin-left: 16px; }
  59. .tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
  60. right: 100%;
  61. top: 50%;
  62. margin-top: -16px;
  63. border-right-color: #fff;
  64. border-left: 0; }
  65. .tether-element.tether-theme-arrows.tether-element-attached-left.tether-target-attached-center .tether-content {
  66. left: -32px; }
  67. .tether-element.tether-theme-arrows.tether-element-attached-right.tether-target-attached-center .tether-content {
  68. left: 32px; }
  69. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
  70. margin-top: 16px; }
  71. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
  72. bottom: 100%;
  73. left: 16px;
  74. border-bottom-color: #fff;
  75. border-top: 0; }
  76. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
  77. margin-top: 16px; }
  78. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
  79. bottom: 100%;
  80. right: 16px;
  81. border-bottom-color: #fff;
  82. border-top: 0; }
  83. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
  84. margin-bottom: 16px; }
  85. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
  86. top: 100%;
  87. left: 16px;
  88. border-top-color: #fff;
  89. border-bottom: 0; }
  90. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
  91. margin-bottom: 16px; }
  92. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
  93. top: 100%;
  94. right: 16px;
  95. border-top-color: #fff;
  96. border-bottom: 0; }
  97. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
  98. margin-top: 16px; }
  99. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
  100. bottom: 100%;
  101. left: 16px;
  102. border-bottom-color: #fff;
  103. border-top: 0; }
  104. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
  105. margin-top: 16px; }
  106. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
  107. bottom: 100%;
  108. right: 16px;
  109. border-bottom-color: #fff;
  110. border-top: 0; }
  111. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
  112. margin-bottom: 16px; }
  113. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
  114. top: 100%;
  115. left: 16px;
  116. border-top-color: #fff;
  117. border-bottom: 0; }
  118. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
  119. margin-bottom: 16px; }
  120. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
  121. top: 100%;
  122. right: 16px;
  123. border-top-color: #fff;
  124. border-bottom: 0; }
  125. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
  126. margin-right: 16px; }
  127. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
  128. top: 16px;
  129. left: 100%;
  130. border-left-color: #fff;
  131. border-right: 0; }
  132. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
  133. margin-left: 16px; }
  134. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  135. top: 16px;
  136. right: 100%;
  137. border-right-color: #fff;
  138. border-left: 0; }
  139. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
  140. margin-right: 16px; }
  141. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
  142. bottom: 16px;
  143. left: 100%;
  144. border-left-color: #fff;
  145. border-right: 0; }
  146. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
  147. margin-left: 16px; }
  148. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  149. bottom: 16px;
  150. right: 100%;
  151. border-right-color: #fff;
  152. border-left: 0; }