Display.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /**
  2. * @class Ext.field.Display
  3. */
  4. /**
  5. * @var {color}
  6. * Display Field input color
  7. */
  8. $displayfield-input-color: dynamic($color);
  9. /**
  10. * @var {number/list}
  11. * Display Field input border width
  12. */
  13. $displayfield-input-border-width: dynamic($textfield-input-border-width);
  14. /**
  15. * @var {string/list}
  16. * Display Field input border style
  17. */
  18. $displayfield-input-border-style: dynamic($textfield-input-border-style);
  19. /**
  20. * @var {color/list}
  21. * Display Field input border color
  22. */
  23. $displayfield-input-border-color: dynamic(transparent);
  24. /**
  25. * @var {color}
  26. * Display Field body background-color
  27. */
  28. $displayfield-input-background-color: dynamic(null);
  29. /**
  30. * @var {number/list}
  31. * Display Field input padding
  32. */
  33. $displayfield-input-padding: dynamic($textfield-input-padding);
  34. /**
  35. * @var {number/list}
  36. * Display Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
  37. */
  38. $displayfield-input-padding-big: dynamic($textfield-input-padding-big);
  39. /**
  40. * @var {string/number}
  41. * Display Field input font-weight
  42. */
  43. $displayfield-input-font-weight: dynamic($textfield-input-font-weight);
  44. /**
  45. * @var {number}
  46. * Display Field input font-size
  47. */
  48. $displayfield-input-font-size: dynamic($textfield-input-font-size);
  49. /**
  50. * @var {number}
  51. * Display Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  52. */
  53. $displayfield-input-font-size-big: dynamic($textfield-input-font-size-big);
  54. /**
  55. * @var {number}
  56. * Display Field input line-height
  57. */
  58. $displayfield-input-line-height: dynamic($textfield-input-line-height);
  59. /**
  60. * @var {number}
  61. * Display Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
  62. */
  63. $displayfield-input-line-height-big: dynamic($textfield-input-line-height-big);
  64. /**
  65. * @var {string}
  66. * Display Field input font-family
  67. */
  68. $displayfield-input-font-family: dynamic($textfield-input-font-family);
  69. /**
  70. * @var {number}
  71. * Display Field input border-radius
  72. */
  73. $displayfield-input-border-radius: dynamic(null);
  74. /**
  75. * Creates a visual theme for a Display Field
  76. *
  77. * @param {string} $ui
  78. * The name of the UI being created. Can not included spaces or special punctuation
  79. * (used in CSS class names).
  80. *
  81. * @param {String} [$xtype=displayfield] (protected) The {@link Ext.Class#xtype} to use
  82. * in CSS selectors. For use by UI mixins of derived classes.
  83. *
  84. * @param {color} $input-color
  85. * Display field input color
  86. *
  87. * @param {number/list} $input-border-width
  88. * Display Field input border width
  89. *
  90. * @param {string/list} $input-border-style
  91. * Display Field input border style
  92. *
  93. * @param {color/list} $input-border-color
  94. * Display Field input border color
  95. *
  96. * @param {color} $input-background-color
  97. * Display Field input background-color
  98. *
  99. * @param {color} $input-padding
  100. * Display Field input padding
  101. *
  102. * @param {color} $input-padding-big
  103. * Display Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
  104. *
  105. * @param {string/number} $input-font-weight
  106. * Display Field input font-weight
  107. *
  108. * @param {number} $input-font-size
  109. * Display Field input font-size
  110. *
  111. * @param {number} $input-font-size-big
  112. * Display Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  113. *
  114. * @param {number} $input-line-height
  115. * Display Field input line-height
  116. *
  117. * @param {number} $input-line-height-big
  118. * Display Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
  119. *
  120. * @param {string} $input-font-family
  121. * Display Field input font-family
  122. *
  123. * @param {number} $input-border-radius
  124. * The border radius of the text field
  125. */
  126. @mixin displayfield-ui(
  127. $ui: null,
  128. $xtype: displayfield,
  129. $input-color: null,
  130. $input-border-width: null,
  131. $input-border-style: null,
  132. $input-border-color: null,
  133. $input-background-color: null,
  134. $input-padding: null,
  135. $input-padding-big: null,
  136. $input-font-weight: null,
  137. $input-font-size: null,
  138. $input-font-size-big: null,
  139. $input-line-height: null,
  140. $input-line-height-big: null,
  141. $input-font-family: null,
  142. $input-border-radius: null
  143. ) {
  144. $ui-suffix: ui-suffix($ui);
  145. .#{$prefix}#{$xtype}#{$ui-suffix} {
  146. .#{$prefix}body-el {
  147. @include border($input-border-width, $input-border-style, $input-border-color);
  148. background-color: $input-background-color;
  149. border-radius: $input-border-radius
  150. }
  151. .#{$prefix}input-el {
  152. @include font($input-font-weight, $input-font-size, $input-line-height, $input-font-family);
  153. @include padding($input-padding);
  154. color: $input-color;
  155. @if $enable-big {
  156. .#{$prefix}big & {
  157. padding: $input-padding-big;
  158. font-size: $input-font-size-big;
  159. line-height: $input-line-height-big;
  160. }
  161. }
  162. }
  163. }
  164. }