BoxLabelable.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /**
  2. * @class Ext.field.BoxLabelable
  3. */
  4. /**
  5. * @var {color}
  6. * {@link #boxLabel} text color
  7. */
  8. $field-box-label-color: dynamic($field-label-color);
  9. /**
  10. * @var {string/number}
  11. * {@link #boxLabel} font-weight
  12. */
  13. $field-box-label-font-weight: dynamic($field-label-font-weight);
  14. /**
  15. * @var {number}
  16. * {@link #boxLabel} font-size
  17. */
  18. $field-box-label-font-size: dynamic($field-label-font-size);
  19. /**
  20. * @var {number}
  21. * {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  22. */
  23. $field-box-label-font-size-big: dynamic($field-label-font-size-big);
  24. /**
  25. * @var {number}
  26. * {@link #boxLabel} line-height
  27. */
  28. $field-box-label-line-height: dynamic($field-label-line-height);
  29. /**
  30. * @var {number}
  31. * {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme
  32. */
  33. $field-box-label-line-height-big: dynamic($field-label-line-height-big);
  34. /**
  35. * @var {string}
  36. * {@link #boxLabel} font-family
  37. */
  38. $field-box-label-font-family: dynamic($field-label-font-family);
  39. /**
  40. * @var {number/list}
  41. * {@link #boxLabel} padding
  42. * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
  43. */
  44. $field-box-label-padding: dynamic(top($field-label-padding) 0 bottom($field-label-padding) 4px);
  45. /**
  46. * @var {number/list}
  47. * {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme
  48. * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
  49. */
  50. $field-box-label-padding-big: dynamic(top($field-label-padding-big) 0 bottom($field-label-padding-big) 5px);
  51. /**
  52. * @private
  53. */
  54. @mixin box-label-ui(
  55. $box-label-color: null,
  56. $box-label-font-weight: null,
  57. $box-label-font-size: null,
  58. $box-label-font-size-big: null,
  59. $box-label-line-height: null,
  60. $box-label-line-height-big: null,
  61. $box-label-font-family: null,
  62. $box-label-padding: null,
  63. $box-label-padding-big: null
  64. ) {
  65. .#{$prefix}box-label-el {
  66. color: $box-label-color;
  67. padding: $box-label-padding;
  68. @include font(
  69. $box-label-font-weight,
  70. $box-label-font-size,
  71. $box-label-line-height,
  72. $box-label-font-family
  73. );
  74. @if $enable-big {
  75. .#{$prefix}big & {
  76. font-size: $box-label-font-size-big;
  77. line-height: $box-label-line-height-big;
  78. padding: $box-label-padding-big;
  79. }
  80. }
  81. }
  82. &.#{$prefix}box-label-align-before .#{$prefix}box-label-el {
  83. padding: flip-horizontal($box-label-padding);
  84. @if $enable-big {
  85. .#{$prefix}big & {
  86. padding: flip-horizontal($box-label-padding-big);
  87. }
  88. }
  89. }
  90. }