tooltip-popover.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. //tooltips and popovers
  2. .enable_tooltips() when(@enable-tooltips = true) {
  3. .tooltip.in {
  4. .opacity(1);
  5. }
  6. .tooltip-inner {
  7. background-color: @tooltip-color;
  8. color: #FFF;
  9. font-size: @font-size-tooltip;
  10. //white-space: nowrap;
  11. text-shadow: 1px 1px 0 rgba(42,45,50,0.5);
  12. .border-radius(0);
  13. padding: 5px 9px;
  14. }
  15. .tooltip.top .tooltip-arrow {
  16. border-bottom-width: 0;
  17. border-top-color: @tooltip-color;
  18. -moz-border-top-colors: @tooltip-color;
  19. }
  20. .tooltip.right .tooltip-arrow {
  21. border-left-width: 0;
  22. border-right-color: @tooltip-color;
  23. -moz-border-right-colors: @tooltip-color;
  24. }
  25. .tooltip.left .tooltip-arrow {
  26. border-right-width: 0;
  27. border-left-color: @tooltip-color;
  28. -moz-border-left-colors: @tooltip-color;
  29. }
  30. .tooltip.bottom .tooltip-arrow {
  31. border-top-width: 0;
  32. border-bottom-color: @tooltip-color;
  33. -moz-border-bottom-colors: @tooltip-color;
  34. }
  35. .tooltip(@color , @shadow) {
  36. @tooltip_name : ~`".tooltip-@{color}"`;
  37. @tooltip_color : ~`"tooltip-@{color}-color"`;
  38. @{tooltip_name} + .tooltip , .tooltip@{tooltip_name} {
  39. > .tooltip-inner {
  40. background-color: @@tooltip_color;
  41. text-shadow: @shadow;
  42. }
  43. &.top .tooltip-arrow {
  44. border-top-color: @@tooltip_color;
  45. -moz-border-top-colors: @@tooltip_color;
  46. }
  47. &.right .tooltip-arrow {
  48. border-right-color: @@tooltip_color;
  49. -moz-border-right-colors: @@tooltip_color;
  50. }
  51. &.left .tooltip-arrow {
  52. border-left-color: @@tooltip_color;
  53. -moz-border-left-colors: @@tooltip_color;
  54. }
  55. &.bottom .tooltip-arrow {
  56. border-bottom-color: @@tooltip_color;
  57. -moz-border-bottom-colors: @@tooltip_color;
  58. }
  59. }
  60. }
  61. .tooltip(error , ~"1px 1px 0 rgba(100,60,20,0.3)");
  62. .tooltip(success , ~"1px 1px 0 rgba(60,100,20,0.3)");
  63. .tooltip(warning , ~"1px 1px 0 rgba(100,90,10,0.3)");
  64. .tooltip(info , ~"1px 1px 0 rgba(40,50,100,0.3)");
  65. }
  66. .enable_tooltips();
  67. .enable_popovers() when(@enable-popovers = true) {
  68. @popover-color: #EFF3F8;
  69. @popover-error-color: #F7F0EF;
  70. @popover-warning-color: #F4EEE3;
  71. @popover-success-color: #E8F2E3;
  72. @popover-info-color: #E5EDF8;
  73. /* popover */
  74. .popover {
  75. .border-radius(0);
  76. padding:0;
  77. border-color: #ccc;
  78. border-width: 1px;
  79. .box-shadow(~"0 0 4px 2px rgba(0,0,0,0.2)");
  80. color: #4D6883;
  81. }
  82. .popover-title {
  83. border-radius: 0;
  84. background-color: @popover-color;
  85. color: #555;
  86. border-bottom: 1px solid darken(@popover-color, 5%);
  87. text-shadow: 1px 1px 1px rgba(220,220,220,0.2);
  88. }
  89. .popover.bottom > .arrow:after {
  90. top: 1px;
  91. margin-left: -10px;
  92. border-bottom-color: @popover-color;
  93. -moz-border-bottom-colors: @popover-color;
  94. border-top-width: 0;
  95. }
  96. .popover.left > .arrow:after {
  97. -moz-border-left-colors: #FFF;
  98. }
  99. .popover.right > .arrow:after {
  100. -moz-border-right-colors: #FFF;
  101. }
  102. .popover.top > .arrow:after {
  103. -moz-border-top-colors: #FFF;
  104. }
  105. .popover(@color , @text-color) {
  106. @popover_name : ~`".popover-@{color}"`;
  107. @popover_color : ~`"popover-@{color}-color"`;
  108. @{popover_name} + .popover , .popover@{popover_name} {
  109. border-color: @@popover_color;
  110. .popover-title {
  111. background-color: @@popover_color;
  112. border-bottom-color: darken(@@popover_color, 5%);
  113. color: @text-color;
  114. text-shadow: none;
  115. }
  116. &.top .arrow:after {
  117. border-top-color: @@popover_color;
  118. -moz-border-top-colors: @@popover_color;
  119. }
  120. &.bottom .arrow:after {
  121. border-bottom-color: @@popover_color;
  122. -moz-border-bottom-colors: @@popover_color;
  123. }
  124. &.right .arrow:after {
  125. border-right-color: @@popover_color;
  126. -moz-border-right-colors: @@popover_color;
  127. }
  128. &.left .arrow:after {
  129. border-left-color: @@popover_color;
  130. -moz-border-left-colors: @@popover_color;
  131. }
  132. }
  133. }
  134. .popover(error , #B75445);
  135. .popover(warning , #D67E31);
  136. .popover(success , @tooltip-success-color);
  137. .popover(info , #3F79B6);
  138. .popover-notitle + .popover , .popover.popover-notitle {
  139. .popover-title {
  140. display:none;
  141. }
  142. &.top .arrow:after {
  143. border-top-color: #FFF;
  144. -moz-border-top-colors: #FFF;
  145. }
  146. &.bottom .arrow:after {
  147. border-bottom-color: #FFF;
  148. -moz-border-bottom-colors: #FFF;
  149. }
  150. &.left .arrow:after {
  151. border-left-color: #FFF;
  152. -moz-border-left-colors: #FFF;
  153. }
  154. &.right .arrow:after {
  155. border-right-color: #FFF;
  156. -moz-border-right-colors: #FFF;
  157. }
  158. }
  159. }
  160. .enable_popovers();