1 weui-text
MDN -webkit-tap-highlight-color
-webkit-tap-highlight-color 能够设置点击链接的时候出现的高亮颜色。(浏览器兼容)
// file: src/style/widget/weui-text/weui-link.less
@import "../../base/fn";
.weui-link {
color: @weuiLinkColorDefault;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:visited {
color: @weuiLinkColorDefault;
}
}
2 weui-button/weui-btn_cell
& + & => .weui-btn_cell .weui-btn_cell
// file: src/style/widget/weui-button/weui-btn_cell.less
.weui-btn_cell {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
font-size: @weuiBtnFontSize;
text-align: center;
text-decoration: none;
color: @weuiBtnFontColor;
line-height: @weuiBtnCellLineHeight;
padding: @weuiBtnCellGap;
.setTapColor();
overflow: hidden;
background-color: var(--weui-BG-5);
& + & {
margin-top: @weuiBtnDefaultGap;
}
&:active {
background-color: @weuiBgColorActive;
}
}
.weui-btn_cell__icon {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin: -0.2em 0.34em 0 0;
}
.weui-btn_cell-default {
color: var(--weui-FG-0);
}
.weui-btn_cell-primary {
color: @weuiLinkColorDefault;
}
.weui-btn_cell-warn {
color: @weuiColorWarn;
}
3 weui-button/weui-btn_default
:visited 选择器用于选取已被访问的链接
:active 选择器用于选择活动链接。
// file: src/style/widget/weui-button/weui-btn_default.less
@import "../../base/fn";
.weui-btn_default {
color: @weuiBtnDefaultFontColor;
background-color: @weuiBtnDefaultBg;
&:not(.weui-btn_disabled):visited {
color: @weuiBtnDefaultFontColor;
}
&:not(.weui-btn_disabled):active {
background-color: @weuiBtnDefaultActiveBg;
}
}
4 weui-button/weui-btn_disabled
// file: src/style/widget/weui-button/weui-btn_disabled.less
@import "../../base/fn";
.weui-btn_disabled {
color: @weuiBtnDisabledFontColor;
background-color: @weuiBtnDisabledBg;
}
5 weui-button/weui-btn_global
// file: src/style/widget/weui-button/weui-btn_global.less
@import "../../base/fn";
.weui-btn {
position: relative;
display: block;
width: @weuiBtnWidth;
margin-left: auto;
margin-right: auto;
padding: 8px 24px;
box-sizing: border-box;
font-weight: 700;
font-size: @weuiBtnFontSize;
text-align: center;
text-decoration: none;
color: @weuiBtnFontColor;
line-height: unit((@weuiBtnHeight - 16) / @weuiBtnFontSize);
border-radius: @weuiBtnBorderRadius;
overflow: hidden;
.setTapColor();
}
.weui-btn_block {
width: auto;
}
.weui-btn_inline {
display: inline-block;
}
6 weui-button/weui-btn_loading
// file: src/style/widget/weui-button/weui-btn_loading.less
@import "../../base/fn";
.weui-btn_loading {
.weui-loading {
margin: -0.2em 0.34em 0 0;
}
&.weui-btn_primary {
background-color: @weuiBtnPrimaryActiveBg;
color: var(--weui-WHITE);
}
&.weui-btn_default {
background-color: @weuiBtnDefaultActiveBg;
}
&.weui-btn_warn {
background-color: @weuiBtnWarnActiveBg;
}
}
7 weui-button/weui-btn_primary
// file: src/style/widget/weui-button/weui-btn_primary.less
@import "../../base/fn";
.weui-btn_primary {
background-color: @weuiBtnPrimaryBg;
&:not(.weui-btn_disabled):visited {
color: @weuiBtnPrimaryFontColor;
}
&:not(.weui-btn_disabled):active {
background-color: @weuiBtnPrimaryActiveBg;
}
}
8 weui-button/weui-btn_warn
// file: src/style/widget/weui-button/weui-btn_warn.less
@import "../../base/fn";
.weui-btn_warn {
color: @weuiBtnWarnFontColor;
background-color: @weuiBtnWarnBg;
&:not(.weui-btn_disabled):visited {
color: @weuiBtnWarnFontColor;
}
&:not(.weui-btn_disabled):active {
background-color: @weuiBtnWarnActiveBg;
}
}
9 weui-button/weui-button
// file: src/style/widget/weui-button/weui-button.less
@import "../../base/fn";
@import "weui-btn_global";
@import "weui-btn_default";
@import "weui-btn_primary";
@import "weui-btn_warn";
@import "weui-btn_disabled";
@import "weui-btn_loading";
@import "weui-btn_cell";
button,
input {
&.weui-btn {
border-width: 0;
outline: 0;
-webkit-appearance: none;
&:focus {
outline: 0;
}
}
&.weui-btn_inline,
&.weui-btn_mini {
width: auto;
}
}
.weui-btn_mini {
display: inline-block;
width: auto;
padding: 0 unit(12px/@weuiBtnMiniFontSize, em);
line-height: unit(@weuiBtnMiniHeight/@weuiBtnMiniFontSize);
font-size: @weuiBtnMiniFontSize;
}
/* gap between btn */
.weui-btn:not(.weui-btn_mini) + .weui-btn:not(.weui-btn_mini) {
margin-top: @weuiBtnDefaultGap;
}
.weui-btn.weui-btn_inline + .weui-btn.weui-btn_inline {
margin-top: auto;
margin-left: @weuiBtnDefaultGap;
}
.weui-btn-area {
margin: 48px @weuiBtnDefaultGap 8px;
}
.weui-btn-area_inline {
display: flex;
.weui-btn {
margin-top: auto;
margin-right: @weuiBtnDefaultGap;
width: 100%;
flex: 1;
&:last-child {
margin-right: 0;
}
}
}
.weui-btn_reset {
background: transparent;
border: 0;
padding: 0;
outline: 0;
}
.weui-btn_icon {
font-size: 0;
&:active {
[class*="weui-icon-"] {
color: var(--weui-FG-1);
}
}
}