tether-theme-arrows.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
  62. margin-top: 16px; }
  63. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
  64. bottom: 100%;
  65. left: 16px;
  66. border-bottom-color: #fff; }
  67. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
  68. margin-top: 16px; }
  69. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
  70. bottom: 100%;
  71. right: 16px;
  72. border-bottom-color: #fff; }
  73. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
  74. margin-bottom: 16px; }
  75. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
  76. top: 100%;
  77. left: 16px;
  78. border-top-color: #fff; }
  79. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
  80. margin-bottom: 16px; }
  81. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
  82. top: 100%;
  83. right: 16px;
  84. border-top-color: #fff; }
  85. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
  86. margin-right: 16px; }
  87. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
  88. top: 16px;
  89. left: 100%;
  90. border-left-color: #fff; }
  91. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
  92. margin-left: 16px; }
  93. .tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  94. top: 16px;
  95. right: 100%;
  96. border-right-color: #fff; }
  97. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
  98. margin-right: 16px; }
  99. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
  100. bottom: 16px;
  101. left: 100%;
  102. border-left-color: #fff; }
  103. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
  104. margin-left: 16px; }
  105. .tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  106. bottom: 16px;
  107. right: 100%;
  108. border-right-color: #fff; }