_qtip.scss2.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-tip-QuickTip-css_mixin-extjs-qtip'>/**
  19. </span> * Creates the base structure of QuickTip.
  20. * @member Ext.tip.QuickTip
  21. */
  22. @mixin extjs-qtip {
  23. .#{$prefix}tip {
  24. position: absolute;
  25. overflow: visible; /*pointer needs to be able to stick out*/
  26. border-color: $tip-border-color;
  27. .#{$prefix}tip-header {
  28. .#{$prefix}box-item {
  29. padding: $tip-header-padding;
  30. }
  31. .#{$prefix}tool {
  32. padding: 0px 1px 0 0 !important;
  33. }
  34. }
  35. }
  36. @include x-frame(
  37. $cls: 'tip',
  38. $border-radius: $tip-border-radius,
  39. $border-width: $tip-border-width,
  40. $background-color: $tip-background-color,
  41. $background-gradient: $tip-background-gradient,
  42. $table: true
  43. );
  44. .#{$prefix}tip-header-text {
  45. @include no-select;
  46. color: $tip-header-color;
  47. font-size: $tip-header-font-size;
  48. font-weight: $tip-header-font-weight;
  49. }
  50. .#{$prefix}tip-header-draggable {
  51. .#{$prefix}tip-header-text {
  52. cursor: move;
  53. }
  54. }
  55. // Tip is a Panel. It uses dock layout. Body style must be the same
  56. .#{$prefix}tip-body,
  57. .#{$prefix}form-invalid-tip-body {
  58. overflow: hidden;
  59. position: relative;
  60. padding: $tip-body-padding;
  61. }
  62. .#{$prefix}tip-header,
  63. .#{$prefix}tip-body,
  64. .#{$prefix}form-invalid-tip-body {
  65. color: $tip-body-color;
  66. font-size: $tip-body-font-size;
  67. font-weight: $tip-body-font-weight;
  68. a {
  69. color: $tip-body-link-color;
  70. }
  71. }
  72. .#{$prefix}tip-anchor {
  73. position: absolute;
  74. overflow: hidden;
  75. height: 0;
  76. width: 0;
  77. border-style: solid;
  78. border-width: 5px;
  79. border-color: $tip-border-color;
  80. zoom: 1;
  81. }
  82. .#{$prefix}border-box .#{$prefix}tip-anchor {
  83. width: 10px;
  84. height: 10px;
  85. }
  86. .#{$prefix}tip-anchor-top {
  87. border-top-color: transparent;
  88. border-left-color: transparent;
  89. border-right-color: transparent;
  90. @if $include_ie {
  91. _border-top-color: pink;
  92. _border-left-color: pink;
  93. _border-right-color: pink;
  94. _filter: chroma(color=pink);
  95. }
  96. }
  97. .#{$prefix}tip-anchor-bottom {
  98. border-bottom-color: transparent;
  99. border-left-color: transparent;
  100. border-right-color: transparent;
  101. @if $include_ie {
  102. _border-bottom-color: pink;
  103. _border-left-color: pink;
  104. _border-right-color: pink;
  105. _filter: chroma(color=pink);
  106. }
  107. }
  108. .#{$prefix}tip-anchor-left {
  109. border-top-color: transparent;
  110. border-bottom-color: transparent;
  111. border-left-color: transparent;
  112. @if $include-ie {
  113. _border-top-color: pink;
  114. _border-bottom-color: pink;
  115. _border-left-color: pink;
  116. _filter: chroma(color=pink);
  117. }
  118. }
  119. .#{$prefix}tip-anchor-right {
  120. border-top-color: transparent;
  121. border-bottom-color: transparent;
  122. border-right-color: transparent;
  123. @if $include-ie {
  124. _border-top-color: pink;
  125. _border-bottom-color: pink;
  126. _border-right-color: pink;
  127. _filter: chroma(color=pink);
  128. }
  129. }
  130. //error qtip
  131. .#{$prefix}form-invalid-tip {
  132. border-color: $tip-error-border-color;
  133. @include inner-border(
  134. $width: 1px,
  135. $color: $tip-error-inner-border-color
  136. );
  137. }
  138. .#{$prefix}form-invalid-tip-body {
  139. background: 1px 1px no-repeat;
  140. background-image: theme-background-image($theme-name, 'form/exclamation.gif');
  141. padding-left: 22px;
  142. li {
  143. margin-bottom: 4px;
  144. &amp;.last {
  145. margin-bottom: 0;
  146. }
  147. }
  148. }
  149. @include x-frame(
  150. $cls: 'form-invalid-tip',
  151. $ui: 'default',
  152. $border-radius: $tip-error-border-radius,
  153. $border-width: $tip-error-border-width,
  154. $background-color: $tip-error-background-color,
  155. $background-gradient: $tip-background-gradient,
  156. $table: true
  157. );
  158. }</pre>
  159. </body>
  160. </html>