index.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. @import "./mixins/index.less";
  2. @import "./themes/index.less";
  3. // Alignment
  4. .textAlign(@type) {
  5. .@{wux-prefix}-text--@{type} {
  6. text-align: @type !important;
  7. }
  8. }
  9. .textAlign(left);
  10. .textAlign(right);
  11. .textAlign(center);
  12. .textAlign(justify);
  13. .textAlign(nowrap);
  14. // Transformation
  15. .textTransform(@type) {
  16. .@{wux-prefix}-text--@{type} {
  17. text-transform: @type !important;
  18. }
  19. }
  20. .textTransform(lowercase);
  21. .textTransform(uppercase);
  22. .textTransform(capitalize);
  23. // Colors
  24. .color(@type, @color) {
  25. .@{wux-prefix}-@{type} {
  26. color: @color !important;
  27. &--bg {
  28. background-color: @color !important;
  29. }
  30. &--border {
  31. border-color: @color !important;
  32. }
  33. }
  34. }
  35. .color(light, @light);
  36. .color(stable, @stable);
  37. .color(positive, @positive);
  38. .color(calm, @calm);
  39. .color(balanced, @balanced);
  40. .color(energized, @energized);
  41. .color(assertive, @assertive);
  42. .color(royal, @royal);
  43. .color(dark, @dark);
  44. // Margin and padding
  45. .spacing(@count)when(@count >= 0) {
  46. @margin: @count * 2rpx;
  47. .@{wux-prefix}-m--@{count},
  48. .@{wux-prefix}-margin--@{count} {
  49. margin: @margin !important;
  50. }
  51. .@{wux-prefix}-mt--@{count},
  52. .@{wux-prefix}-margin-top--@{count} {
  53. margin-top: @margin !important;
  54. }
  55. .@{wux-prefix}-mr--@{count},
  56. .@{wux-prefix}-margin-right--@{count} {
  57. margin-right: @margin !important;
  58. }
  59. .@{wux-prefix}-mb--@{count},
  60. .@{wux-prefix}-margin-bottom--@{count} {
  61. margin-bottom: @margin !important;
  62. }
  63. .@{wux-prefix}-ml--@{count},
  64. .@{wux-prefix}-margin-left--@{count} {
  65. margin-left: @margin !important;
  66. }
  67. .@{wux-prefix}-mv--@{count},
  68. .@{wux-prefix}-margin-vertical--@{count} {
  69. margin: @margin 0 !important;
  70. }
  71. .@{wux-prefix}-mh--@{count},
  72. .@{wux-prefix}-margin-horizontal--@{count} {
  73. margin: 0 @margin !important;
  74. }
  75. .@{wux-prefix}-p--@{count},
  76. .@{wux-prefix}-padding--@{count} {
  77. padding: @margin !important;
  78. }
  79. .@{wux-prefix}-pt--@{count},
  80. .@{wux-prefix}-padding-top--@{count} {
  81. padding-top: @margin !important;
  82. }
  83. .@{wux-prefix}-pr--@{count},
  84. .@{wux-prefix}-padding-right--@{count} {
  85. padding-right: @margin !important;
  86. }
  87. .@{wux-prefix}-pb--@{count},
  88. .@{wux-prefix}-padding-bottom--@{count} {
  89. padding-bottom: @margin !important;
  90. }
  91. .@{wux-prefix}-pl--@{count},
  92. .@{wux-prefix}-padding-left--@{count} {
  93. padding-left: @margin !important;
  94. }
  95. .@{wux-prefix}-pv--@{count},
  96. .@{wux-prefix}-padding-vertical--@{count} {
  97. padding: @margin 0 !important;
  98. }
  99. .@{wux-prefix}-ph--@{count},
  100. .@{wux-prefix}-padding-horizontal--@{count} {
  101. padding: 0 @margin !important;
  102. }
  103. .spacing((@count - 5));
  104. }
  105. .spacing(30);
  106. // Floats
  107. .@{wux-prefix}-clearfix {
  108. .clearfix();
  109. }
  110. .@{wux-prefix}-pull-right {
  111. float: right !important;
  112. }
  113. .@{wux-prefix}-pull-left {
  114. float: left !important;
  115. }
  116. // Ellipsis
  117. .@{wux-prefix}-ellipsis {
  118. .ellipsis();
  119. &--l2 {
  120. .ellipsisLn(2);
  121. }
  122. &--l3 {
  123. .ellipsisLn(3);
  124. }
  125. }
  126. // Hairline
  127. .@{wux-prefix}-hairline {
  128. &,
  129. &--top,
  130. &--right,
  131. &--bottom,
  132. &--left,
  133. &--horizontal,
  134. &--vertical,
  135. &--surrounded {
  136. position: relative;
  137. &::after {
  138. .hairline();
  139. }
  140. }
  141. &--top::after {
  142. border-top-width: 1PX;
  143. }
  144. &--right::after {
  145. border-right-width: 1PX;
  146. }
  147. &--bottom::after {
  148. border-bottom-width: 1PX;
  149. }
  150. &--left::after {
  151. border-left-width: 1PX;
  152. }
  153. &--horizontal::after {
  154. border-width: 1PX 0;
  155. }
  156. &--vertical::after {
  157. border-width: 0 1PX;
  158. }
  159. &--surrounded::after {
  160. border-width: 1PX;
  161. }
  162. }