javascript/weui
1
0
Fork 0
mirror of https://github.com/Tencent/weui.git synced 2026-03-13 08:02:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

btn

Browse Source
This commit is contained in:
xushengni
2019-03-04 18:13:16 +08:00
parent 612a04e1d4
commit 67e2d8136f
11 changed files with 83 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/example/example.css vendored
View File

File diff suppressed because one or more lines are too long

82
dist/style/weui.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/style/weui.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
src/example/example.less
View File

@@ -168,6 +168,7 @@ body, .page {
}
.page.button {
background-color:#FFFFFF;
.page__bd {
padding: 0 15px;
}
@@ -460,4 +461,4 @@ body, .page {
padding-left:constant(safe-area-inset-left);
padding-right:constant(safe-area-inset-right);
}
}
}

56
src/style/base/variable/weui-button.less
View File

@@ -14,40 +14,50 @@
* limitations under the License.
*/
@weuiBtnHeight:46px;
@weuiBtnFontSize:18px;
@weuiBtnFontColor:#FFFFFF;
@weuiBtnActiveFontColor:rgba(255,255,255,.6);
@weuiBtnDisabledFontColor:rgba(255,255,255,.6);
@weuiBtnBorderRadius:5px;
@weuiBtnHeight:40px;
@weuiBtnFontSize:17px;
@weuiBtnBorderRadius:4px;
@weuiBtnDefaultGap:15px;
@weuiBtnMiniFontSize:13px;
@weuiBtnMiniHeight:2.3;
@weuiBtnMiniFontSize:16px;
@weuiBtnMiniHeight:32px;
@weuiBtnDefaultFontColor:#000000;
@weuiBtnDefaultActiveFontColor:rgba(0,0,0,.6);
@weuiBtnDefaultDisabledFontColor:rgba(0,0,0,.3);
@weuiBtnFontColor:#FFFFFF;
@weuiBtnActiveFontColor:#FFFFFF;
@weuiBtnDisabledFontColor:rgba(0,0,0,.18);
@weuiBtnDisabledBg:overlay(rgba(0,0,0,.02),#FFFFFF);
@weuiBtnHoverDefaultMask:rgba(0,0,0,.05);
@weuiBtnHoverPrimaryMask:rgba(0,0,0,.1);
@weuiBtnDefaultBg:#F8F8F8;
@weuiBtnDefaultActiveBg:#DEDEDE;
@weuiBtnDefaultDisabledBg:#F7F7F7;
@weuiBtnDefaultFontColor:#06AE56;
@weuiBtnDefaultActiveFontColor:#06AE56;
@weuiBtnDefaultDisabledFontColor:@weuiBtnDisabledFontColor;
@weuiBtnDefaultBg:#F2F2F2;
@weuiBtnDefaultActiveBg:overlay(@weuiBtnHoverDefaultMask,@weuiBtnDefaultBg);
@weuiBtnDefaultDisabledBg:@weuiBtnDisabledBg;
@weuiBtnPrimaryFontColor:#FFFFFF;
@weuiBtnPrimaryActiveFontColor:#FFFFFF;
@weuiBtnPrimaryDisabledFontColor:@weuiBtnDisabledFontColor;
@weuiBtnPrimaryBg:#07C160;
@weuiBtnPrimaryActiveBg:overlay(@weuiBtnHoverPrimaryMask,@weuiBtnPrimaryBg);
@weuiBtnPrimaryDisabledBg:@weuiBtnDisabledBg;
@weuiBtnPrimaryBg:#1AAD19;
@weuiBtnPrimaryActiveBg:#179B16;
@weuiBtnPrimaryDisabledBg:#9ED99D;
@weuiBtnWarnBg:#E64340;
@weuiBtnWarnActiveBg:#CE3C39;
@weuiBtnwarnDisabledBg:#EC8B89;
@weuiBtnWarnActiveBg:overlay(@weuiBtnHoverPrimaryMask ,@weuiBtnWarnBg);
@weuiBtnwarnDisabledBg:@weuiBtnDisabledBg;
@weuiBtnPlainPrimaryColor:rgba(26,173,25,1);
@weuiBtnPlainPrimaryBorderColor:rgba(26,173,25,1);
@weuiBtnPlainPrimaryActiveColor:rgba(26,173,25,.6);
@weuiBtnPlainPrimaryActiveBorderColor:rgba(26,173,25,.6);
@weuiBtnPlainPrimaryActiveColor:overlay(@weuiBtnHoverPrimaryMask,@weuiBtnPlainPrimaryColor);
@weuiBtnPlainPrimaryActiveBorderColor:overlay(@weuiBtnHoverPrimaryMask,@weuiBtnPlainPrimaryBorderColor);
@weuiBtnPlainDefaultColor:rgba(53,53,53,1);
@weuiBtnPlainDefaultBorderColor:rgba(53,53,53,1);
@weuiBtnPlainDefaultActiveColor:rgba(53,53,53,.6);
@weuiBtnPlainDefaultActiveBorderColor:rgba(53,53,53,.6);
@weuiBtnPlainDefaultActiveColor:overlay(@weuiBtnHoverDefaultMask,@weuiBtnPlainDefaultColor);
@weuiBtnPlainDefaultActiveBorderColor:overlay(@weuiBtnHoverDefaultMask,@weuiBtnPlainDefaultBorderColor);

2
src/style/widget/weui-button/weui-btn_default.less
View File

@@ -26,4 +26,4 @@
color: @weuiBtnDefaultActiveFontColor;
background-color: @weuiBtnDefaultActiveBg;
}
}
}

11
src/style/widget/weui-button/weui-btn_disabled.less
View File

@@ -18,14 +18,5 @@
.weui-btn_disabled {
color: @weuiBtnDisabledFontColor;
&.weui-btn_default {
color: @weuiBtnDefaultDisabledFontColor;
background-color: @weuiBtnDefaultDisabledBg;
}
&.weui-btn_primary {
background-color: @weuiBtnPrimaryDisabledBg;
}
&.weui-btn_warn {
background-color: @weuiBtnwarnDisabledBg;
}
background-color: @weuiBtnDisabledBg;
}

16
src/style/widget/weui-button/weui-btn_global.less
View File

@@ -24,6 +24,7 @@
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-weight:700;
font-size: @weuiBtnFontSize;
text-align: center;
text-decoration: none;
@@ -32,20 +33,7 @@
border-radius: @weuiBtnBorderRadius;
.setTapColor();
overflow: hidden;
&:after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, .2);
transform: scale(.5);
transform-origin: 0 0;
box-sizing: border-box;
border-radius: @weuiBtnBorderRadius*2;
}
}
.weui-btn_inline {
display: inline-block;
}
}

9
src/style/widget/weui-button/weui-btn_loading.less
View File

@@ -20,9 +20,12 @@
.weui-loading{
margin:-.2em .34em 0 0;
}
&.weui-btn_primary, &.weui-btn_warn {
color: @weuiBtnActiveFontColor;
}
&.weui-btn_primary, &.weui-btn_warn {
color: #FFFFFF;
}
&.weui-btn_default{
background-color: @weuiBtnDefaultActiveBg;
}
&.weui-btn_primary{
background-color: @weuiBtnPrimaryActiveBg;
}

4
src/style/widget/weui-button/weui-btn_primary.less
View File

@@ -19,10 +19,10 @@
.weui-btn_primary {
background-color: @weuiBtnPrimaryBg;
&:not(.weui-btn_disabled):visited {
color: @weuiBtnFontColor;
color: @weuiBtnPrimaryFontColor;
}
&:not(.weui-btn_disabled):active {
color: @weuiBtnActiveFontColor;
color: @weuiBtnPrimaryActiveFontColor;
background-color: @weuiBtnPrimaryActiveBg;
}
}

4
src/style/widget/weui-button/weui-button.less
View File

@@ -44,8 +44,8 @@ button, input {
.weui-btn_mini {
display: inline-block;
padding: 0 1.32em;
line-height: @weuiBtnMiniHeight;
padding: 0 unit(12px/@weuiBtnMiniFontSize,em);
line-height: unit(@weuiBtnMiniHeight/@weuiBtnMiniFontSize);
font-size: @weuiBtnMiniFontSize;
}