tether-theme-arrows.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content {
  41. margin-top: 16px; }
  42. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content:before {
  43. bottom: 100%;
  44. left: 50%;
  45. margin-left: -16px;
  46. border-bottom-color: #fff; }
  47. .tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content {
  48. margin-right: 16px; }
  49. .tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
  50. left: 100%;
  51. top: 50%;
  52. margin-top: -16px;
  53. border-left-color: #fff; }
  54. .tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content {
  55. margin-left: 16px; }
  56. .tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
  57. right: 100%;
  58. top: 50%;
  59. margin-top: -16px;
  60. border-right-color: #fff; }
  61. .tether-element.tether-theme-arrows.tether-element-attached-left.tether-target-attached-center .tether-content {
  62. left: -32px; }
  63. .tether-element.tether-theme-arrows.tether-element-attached-right.tether-target-attached-center .tether-content {
  64. left: 32px; }
  65. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
  66. margin-top: 16px; }
  67. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
  68. bottom: 100%;
  69. left: 16px;
  70. border-bottom-color: #fff; }
  71. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
  72. margin-top: 16px; }
  73. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
  74. bottom: 100%;
  75. right: 16px;
  76. border-bottom-color: #fff; }
  77. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
  78. margin-bottom: 16px; }
  79. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
  80. top: 100%;
  81. left: 16px;
  82. border-top-color: #fff; }
  83. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
  84. margin-bottom: 16px; }
  85. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
  86. top: 100%;
  87. right: 16px;
  88. border-top-color: #fff; }
  89. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
  90. margin-top: 16px; }
  91. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
  92. bottom: 100%;
  93. left: 16px;
  94. border-bottom-color: #fff; }
  95. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
  96. margin-top: 16px; }
  97. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
  98. bottom: 100%;
  99. right: 16px;
  100. border-bottom-color: #fff; }
  101. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
  102. margin-bottom: 16px; }
  103. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
  104. top: 100%;
  105. left: 16px;
  106. border-top-color: #fff; }
  107. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
  108. margin-bottom: 16px; }
  109. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
  110. top: 100%;
  111. right: 16px;
  112. border-top-color: #fff; }
  113. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
  114. margin-right: 16px; }
  115. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
  116. top: 16px;
  117. left: 100%;
  118. border-left-color: #fff; }
  119. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
  120. margin-left: 16px; }
  121. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  122. top: 16px;
  123. right: 100%;
  124. border-right-color: #fff; }
  125. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
  126. margin-right: 16px; }
  127. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
  128. bottom: 16px;
  129. left: 100%;
  130. border-left-color: #fff; }
  131. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
  132. margin-left: 16px; }
  133. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  134. bottom: 16px;
  135. right: 100%;
  136. border-right-color: #fff; }