_fieldset.scss.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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-form-FieldSet-css_mixin-extjs-form-fieldset'>/**
  19. </span> * Creates the base structure of FieldSet.
  20. * @member Ext.form.FieldSet
  21. */
  22. @mixin extjs-form-fieldset {
  23. .#{$prefix}fieldset {
  24. border: $fieldset-border;
  25. padding: $fieldset-padding;
  26. margin-bottom: $fieldset-padding;
  27. display: block; /* preserve margins in IE */
  28. position: relative;
  29. }
  30. // Insane IE bug: Fieldset padding-top is rendered *outside* the border!
  31. // So we transfer the padding-top to the body element.
  32. .#{$prefix}ie .#{$prefix}fieldset {
  33. padding-top: 0;
  34. .#{$prefix}fieldset-body {
  35. padding-top: $fieldset-padding;
  36. }
  37. }
  38. .#{$prefix}fieldset-header-checkbox {
  39. line-height: $fieldset-header-line-height;
  40. }
  41. .#{$prefix}fieldset-header {
  42. font: $fieldset-header-font;
  43. color: $fieldset-header-color;
  44. padding: $fieldset-header-padding;
  45. overflow: hidden; // fixes a webkit bug where legend elements that have floated children are not displayed
  46. .#{$prefix}fieldset-header-text {
  47. float: left;
  48. padding: 1px 0;
  49. }
  50. .#{$prefix}fieldset-header-text-collapsible {
  51. cursor: pointer;
  52. }
  53. .#{$prefix}form-item,
  54. .#{$prefix}tool {
  55. float: left;
  56. margin: 1px 0 0 0;
  57. }
  58. .#{$prefix}form-cb-wrap {
  59. padding: 1px 0;
  60. font-size: 0;
  61. line-height: 0;
  62. }
  63. }
  64. .#{$prefix}fieldset-with-title {
  65. .#{$prefix}fieldset-header-checkbox,
  66. .#{$prefix}tool {
  67. margin-right: 3px;
  68. }
  69. }
  70. // Use Webkit's built-in fieldset legend padding which takes precedence over padding-left/right
  71. .#{$prefix}webkit {
  72. .#{$prefix}fieldset-header {
  73. -webkit-padding-start: #{left($fieldset-header-padding)};
  74. -webkit-padding-end: #{right($fieldset-header-padding)};
  75. }
  76. }
  77. // opera renders an invisible border above the fieldset in addition to the normal border when the fieldset has a legend.
  78. // To compensate for this, give the fieldset a negative top margin equal to the top border width.
  79. @if $include-opera {
  80. .#{$prefix}opera {
  81. .#{$prefix}fieldset-with-legend {
  82. margin-top: -#{top($fieldset-border-width)};
  83. }
  84. &amp;.#{$prefix}mac .#{$prefix}fieldset-header-text {
  85. padding: 2px 0 0;
  86. }
  87. }
  88. }
  89. // IE8 strict has a problem similar to opera's, except the invisible top border only changes the position of
  90. // the legend element, so we have to adjust the position of the legend using a negative top margin.
  91. @if $include-ie {
  92. .#{$prefix}strict .#{$prefix}ie8 .#{$prefix}fieldset-header {
  93. margin-bottom: -#{top($fieldset-border-width)};
  94. .#{$prefix}tool,
  95. .#{$prefix}fieldset-header-text,
  96. .#{$prefix}fieldset-header-checkbox {
  97. position: relative;
  98. top: -#{top($fieldset-border-width)};
  99. }
  100. }
  101. }
  102. @if $include-ie {
  103. .#{$prefix}quirks .#{$prefix}ie,
  104. .#{$prefix}ie8m {
  105. .#{$prefix}fieldset-header {
  106. padding-left: #{left($fieldset-header-padding) - 2};
  107. padding-right: #{right($fieldset-header-padding) - 2};
  108. }
  109. }
  110. }
  111. .#{$prefix}fieldset-collapsed {
  112. .#{$prefix}fieldset-body {
  113. display: none;
  114. }
  115. }
  116. .#{$prefix}fieldset-collapsed {
  117. padding-bottom: 0 !important;
  118. border-width: 1px 1px 0 1px !important;
  119. border-left-color: transparent !important;
  120. border-right-color: transparent !important;
  121. }
  122. @if $include-ie {
  123. .#{$prefix}ie6 .#{$prefix}fieldset-collapsed {
  124. border-width: 1px 0 0 0 !important;
  125. padding-bottom: 0 !important;
  126. margin-left: 1px;
  127. margin-right: 1px;
  128. }
  129. .#{$prefix}ie .#{$prefix}fieldset-bwrap {
  130. zoom: 1;
  131. }
  132. }
  133. @if $include-ie {
  134. /* IE legend positioning bug */
  135. .#{$prefix}ie .#{$prefix}fieldset-noborder legend {
  136. position: relative;
  137. margin-bottom: 23px;
  138. }
  139. .#{$prefix}ie .#{$prefix}fieldset-noborder legend span {
  140. position: absolute;
  141. left: 16px;
  142. }
  143. }
  144. .#{$prefix}fieldset {
  145. overflow: hidden;
  146. }
  147. .#{$prefix}fieldset-bwrap {
  148. overflow: hidden;
  149. zoom: 1;
  150. }
  151. .#{$prefix}fieldset-body {
  152. overflow: hidden;
  153. }
  154. }</pre>
  155. </body>
  156. </html>