UNPKG

tt-mp

Version:

一套组件化、可复用、易扩展的头条小程序 UI 组件库

161 lines (136 loc) 4.16 kB
@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 !important; } } .@{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 !important; 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 !important; } &--small { padding: 2px @button-padding-sm 1px; min-width: @button-height-sm - 2px; min-height: @button-height-sm !important; 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 !important; font-size: @button-font-size-lg; line-height: @button-height-lg - 6px; } &--block, &--full { width: 100% !important; margin-top: @button-block-margin; margin-bottom: @button-block-margin; } &--block { display: block; clear: both; &::after { clear: both; } } &--full { display: block; margin-right: 0 !important; margin-left: 0 !important; border-right-width: 0; border-left-width: 0; border-radius: 0; } &--outline&--hover { color: #fff !important; } .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); } }