123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- @import "./mixins/index.less";
- @import "./themes/index.less";
- // Alignment
- .textAlign(@type) {
- .@{wux-prefix}-text--@{type} {
- text-align: @type !important;
- }
- }
- .textAlign(left);
- .textAlign(right);
- .textAlign(center);
- .textAlign(justify);
- .textAlign(nowrap);
- // Transformation
- .textTransform(@type) {
- .@{wux-prefix}-text--@{type} {
- text-transform: @type !important;
- }
- }
- .textTransform(lowercase);
- .textTransform(uppercase);
- .textTransform(capitalize);
- // Colors
- .color(@type, @color) {
- .@{wux-prefix}-@{type} {
- color: @color !important;
- &--bg {
- background-color: @color !important;
- }
- &--border {
- border-color: @color !important;
- }
- }
- }
- .color(light, @light);
- .color(stable, @stable);
- .color(positive, @positive);
- .color(calm, @calm);
- .color(balanced, @balanced);
- .color(energized, @energized);
- .color(assertive, @assertive);
- .color(royal, @royal);
- .color(dark, @dark);
- // Margin and padding
- .spacing(@count)when(@count >= 0) {
- @margin: @count * 2rpx;
- .@{wux-prefix}-m--@{count},
- .@{wux-prefix}-margin--@{count} {
- margin: @margin !important;
- }
- .@{wux-prefix}-mt--@{count},
- .@{wux-prefix}-margin-top--@{count} {
- margin-top: @margin !important;
- }
- .@{wux-prefix}-mr--@{count},
- .@{wux-prefix}-margin-right--@{count} {
- margin-right: @margin !important;
- }
- .@{wux-prefix}-mb--@{count},
- .@{wux-prefix}-margin-bottom--@{count} {
- margin-bottom: @margin !important;
- }
- .@{wux-prefix}-ml--@{count},
- .@{wux-prefix}-margin-left--@{count} {
- margin-left: @margin !important;
- }
- .@{wux-prefix}-mv--@{count},
- .@{wux-prefix}-margin-vertical--@{count} {
- margin: @margin 0 !important;
- }
- .@{wux-prefix}-mh--@{count},
- .@{wux-prefix}-margin-horizontal--@{count} {
- margin: 0 @margin !important;
- }
- .@{wux-prefix}-p--@{count},
- .@{wux-prefix}-padding--@{count} {
- padding: @margin !important;
- }
- .@{wux-prefix}-pt--@{count},
- .@{wux-prefix}-padding-top--@{count} {
- padding-top: @margin !important;
- }
- .@{wux-prefix}-pr--@{count},
- .@{wux-prefix}-padding-right--@{count} {
- padding-right: @margin !important;
- }
- .@{wux-prefix}-pb--@{count},
- .@{wux-prefix}-padding-bottom--@{count} {
- padding-bottom: @margin !important;
- }
- .@{wux-prefix}-pl--@{count},
- .@{wux-prefix}-padding-left--@{count} {
- padding-left: @margin !important;
- }
- .@{wux-prefix}-pv--@{count},
- .@{wux-prefix}-padding-vertical--@{count} {
- padding: @margin 0 !important;
- }
- .@{wux-prefix}-ph--@{count},
- .@{wux-prefix}-padding-horizontal--@{count} {
- padding: 0 @margin !important;
- }
- .spacing((@count - 5));
- }
- .spacing(30);
- // Floats
- .@{wux-prefix}-clearfix {
- .clearfix();
- }
- .@{wux-prefix}-pull-right {
- float: right !important;
- }
- .@{wux-prefix}-pull-left {
- float: left !important;
- }
- // Ellipsis
- .@{wux-prefix}-ellipsis {
- .ellipsis();
- &--l2 {
- .ellipsisLn(2);
- }
- &--l3 {
- .ellipsisLn(3);
- }
- }
- // Hairline
- .@{wux-prefix}-hairline {
- &,
- &--top,
- &--right,
- &--bottom,
- &--left,
- &--horizontal,
- &--vertical,
- &--surrounded {
- position: relative;
- &::after {
- .hairline();
- }
- }
- &--top::after {
- border-top-width: 1PX;
- }
- &--right::after {
- border-right-width: 1PX;
- }
- &--bottom::after {
- border-bottom-width: 1PX;
- }
- &--left::after {
- border-left-width: 1PX;
- }
- &--horizontal::after {
- border-width: 1PX 0;
- }
- &--vertical::after {
- border-width: 0 1PX;
- }
- &--surrounded::after {
- border-width: 1PX;
- }
- }
|