app.arrow.less 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. .arrow {
  2. border-width: @arrow-outer-width;
  3. z-index: 10;
  4. &,
  5. &:after {
  6. position: absolute;
  7. display: block;
  8. width: 0;
  9. height: 0;
  10. border-color: transparent;
  11. border-style: solid;
  12. }
  13. &:after{
  14. border-width: @arrow-width;
  15. content: "";
  16. }
  17. &.top {
  18. left: 50%;
  19. margin-left: -@arrow-outer-width;
  20. border-top-width: 0;
  21. border-bottom-color: @arrow-outer-color;
  22. top: -@arrow-outer-width;
  23. &:after {
  24. top: 1px;
  25. margin-left: -@arrow-width;
  26. border-top-width: 0;
  27. border-bottom-color: @arrow-color;
  28. }
  29. &.arrow-primary{
  30. &:after{
  31. border-bottom-color: @brand-primary;
  32. }
  33. }
  34. &.arrow-info{
  35. &:after{
  36. border-bottom-color: @brand-info;
  37. }
  38. }
  39. &.arrow-success{
  40. &:after{
  41. border-bottom-color: @brand-success;
  42. }
  43. }
  44. &.arrow-danger{
  45. &:after{
  46. border-bottom-color: @brand-danger;
  47. }
  48. }
  49. &.arrow-warning{
  50. &:after{
  51. border-bottom-color: @brand-warning;
  52. }
  53. }
  54. &.arrow-light{
  55. &:after{
  56. border-bottom-color: @brand-light;
  57. }
  58. }
  59. &.arrow-dark{
  60. &:after{
  61. border-bottom-color: @brand-dark;
  62. }
  63. }
  64. &.arrow-black{
  65. &:after{
  66. border-bottom-color: @brand-black;
  67. }
  68. }
  69. }
  70. &.right {
  71. top: 50%;
  72. right: -@arrow-outer-width;
  73. margin-top: -@arrow-outer-width;
  74. border-right-width: 0;
  75. border-left-color: @arrow-outer-color;
  76. &:after {
  77. right: 1px;
  78. bottom: -@arrow-width;
  79. border-right-width: 0;
  80. border-left-color: @arrow-color;
  81. }
  82. &.arrow-primary{
  83. &:after{
  84. border-left-color: @brand-primary;
  85. }
  86. }
  87. &.arrow-info{
  88. &:after{
  89. border-left-color: @brand-info;
  90. }
  91. }
  92. &.arrow-success{
  93. &:after{
  94. border-left-color: @brand-success;
  95. }
  96. }
  97. &.arrow-danger{
  98. &:after{
  99. border-left-color: @brand-danger;
  100. }
  101. }
  102. &.arrow-warning{
  103. &:after{
  104. border-left-color: @brand-warning;
  105. }
  106. }
  107. &.arrow-light{
  108. &:after{
  109. border-left-color: @brand-light;
  110. }
  111. }
  112. &.arrow-dark{
  113. &:after{
  114. border-left-color: @brand-dark;
  115. }
  116. }
  117. &.arrow-black{
  118. &:after{
  119. border-left-color: @brand-black;
  120. }
  121. }
  122. }
  123. &.bottom {
  124. left: 50%;
  125. bottom: -@arrow-outer-width;
  126. margin-left: -@arrow-outer-width;
  127. border-bottom-width: 0;
  128. border-top-color: @arrow-outer-color;
  129. &:after {
  130. bottom: 1px;
  131. margin-left: -@arrow-width;
  132. border-bottom-width: 0;
  133. border-top-color: @arrow-color;
  134. }
  135. &.arrow-primary{
  136. &:after{
  137. border-top-color: @brand-primary;
  138. }
  139. }
  140. &.arrow-info{
  141. &:after{
  142. border-top-color: @brand-info;
  143. }
  144. }
  145. &.arrow-success{
  146. &:after{
  147. border-top-color: @brand-success;
  148. }
  149. }
  150. &.arrow-danger{
  151. &:after{
  152. border-top-color: @brand-danger;
  153. }
  154. }
  155. &.arrow-warning{
  156. &:after{
  157. border-top-color: @brand-warning;
  158. }
  159. }
  160. &.arrow-light{
  161. &:after{
  162. border-top-color: @brand-light;
  163. }
  164. }
  165. &.arrow-dark{
  166. &:after{
  167. border-top-color: @brand-dark;
  168. }
  169. }
  170. &.arrow-black{
  171. &:after{
  172. border-top-color: @brand-black;
  173. }
  174. }
  175. }
  176. &.left {
  177. top: 50%;
  178. left: -@arrow-outer-width;
  179. margin-top: -@arrow-outer-width;
  180. border-left-width: 0;
  181. border-right-color: @arrow-outer-color;
  182. &:after {
  183. left: 1px;
  184. bottom: -@arrow-width;
  185. border-left-width: 0;
  186. border-right-color: @arrow-color;
  187. }
  188. &.arrow-primary{
  189. &:after{
  190. border-right-color: @brand-primary;
  191. }
  192. }
  193. &.arrow-info{
  194. &:after{
  195. border-right-color: @brand-info;
  196. }
  197. }
  198. &.arrow-success{
  199. &:after{
  200. border-right-color: @brand-success;
  201. }
  202. }
  203. &.arrow-danger{
  204. &:after{
  205. border-right-color: @brand-danger;
  206. }
  207. }
  208. &.arrow-warning{
  209. &:after{
  210. border-right-color: @brand-warning;
  211. }
  212. }
  213. &.arrow-light{
  214. &:after{
  215. border-right-color: @brand-light;
  216. }
  217. }
  218. &.arrow-dark{
  219. &:after{
  220. border-right-color: @brand-dark;
  221. }
  222. }
  223. &.arrow-black{
  224. &:after{
  225. border-right-color: @brand-black;
  226. }
  227. }
  228. }
  229. &.pull-left{
  230. left: @arrow-outer-width + 10;
  231. }
  232. &.pull-right{
  233. left: auto;
  234. right: @arrow-outer-width + 10;
  235. }
  236. &.pull-up{
  237. top: @arrow-outer-width + 10;
  238. }
  239. &.pull-down{
  240. top: auto;
  241. bottom: @arrow-outer-width + 10;
  242. }
  243. }