tt-mp
Version:
一套组件化、可复用、易扩展的头条小程序 UI 组件库
161 lines (136 loc) • 4.16 kB
text/less
@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';
.button(@theme, @bg-color, @border-color, @active-bg-color, @color) {
&--@{theme},
&--@{theme}--disabled {
.button-style(@bg-color, @border-color, @color);
}
&--@{theme}&--hover {
.button-hover(@active-bg-color, @color);
}
&--@{theme}&--outline,
&--@{theme}&--outline&--disabled {
.button-outline(@bg-color);
}
&--@{theme}&--outline&--hover {
.button-hover(@bg-color, #fff);
}
&--@{theme}&--clear,
&--@{theme}&--clear&--disabled {
.button-clear(@active-bg-color);
}
&--@{theme}&--clear&--hover {
opacity: @button-opacity-hover ;
}
}
.@{wux-prefix}-button {
.button-reset();
position: relative;
display: inline-block;
// margin-left: auto;
// margin-right: auto;
// padding-left: 14px;
// padding-right: 14px;
box-sizing: border-box;
// font-size: 18px;
// text-align: center;
// text-decoration: none;
// line-height: 2.55555556;
// border-radius: 5px;
// -webkit-tap-highlight-color: transparent;
// overflow: hidden;
// color: #000000;
// background-color: #F8F8F8;
margin: 0;
padding: 0 @button-padding-base;
min-width: (@button-padding-base * 3) + @button-font-size-base;
min-height: @button-height-base ;
border: none;
border-radius: @button-border-radius;
vertical-align: middle;
text-align: center;
text-overflow: ellipsis;
font-size: @button-font-size-base;
line-height: @button-height-base - 2px;
cursor: pointer;
&::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
border: none;
transform: none;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 0;
}
&--bordered {
border: 1px solid transparent;
}
&--disabled {
opacity: @button-opacity-disabled ;
}
&--small {
padding: 2px @button-padding-sm 1px;
min-width: @button-height-sm - 2px;
min-height: @button-height-sm ;
font-size: @button-font-size-sm;
line-height: @button-height-sm - 4px;
}
&--large {
padding: 0 @button-padding-lg;
min-width: (@button-padding-lg * 3) + @button-font-size-lg;
min-height: @button-height-lg ;
font-size: @button-font-size-lg;
line-height: @button-height-lg - 6px;
}
&--block,
&--full {
width: 100% ;
margin-top: @button-block-margin;
margin-bottom: @button-block-margin;
}
&--block {
display: block;
clear: both;
&::after {
clear: both;
}
}
&--full {
display: block;
margin-right: 0 ;
margin-left: 0 ;
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
&--outline&--hover {
color: #fff ;
}
.button(light, @button-light-bg, @button-default-border, @button-light-active-bg, @button-light-text);
.button(stable, @button-stable-bg, @button-default-border, @button-stable-active-bg, @button-stable-text);
.button(primary, @button-primary-bg, @button-default-border, @button-primary-active-bg, @button-primary-text);
.button(info, @button-info-bg, @button-default-border, @button-info-active-bg, @button-info-text);
.button(error, @button-error-bg, @button-default-border, @button-error-active-bg, @button-error-text);
.button(success, @button-success-bg, @button-default-border, @button-success-active-bg, @button-success-text);
.button(warning, @button-warning-bg, @button-default-border, @button-warning-active-bg, @button-warning-text);
.button(royal, @button-royal-bg, @button-default-border, @button-royal-active-bg, @button-royal-text);
.button(dark, @button-dark-bg, @button-default-border, @button-dark-active-bg, @button-dark-text);
&--light&--outline {
.button-outline(@button-light-border);
}
&--light&--outline&--hover {
.button-hover(@button-light-border, #fff);
}
&--stable&--outline {
.button-outline(@button-stable-border);
}
&--stable&--outline&--hover {
.button-hover(@button-stable-border, #fff);
}
}