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

skin beta

Browse Source
This commit is contained in:
xushengni
2019-03-08 18:19:50 +08:00
parent 0225488ef0
commit c9344f9486
22 changed files with 265 additions and 317 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

300
dist/style/weui.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

12
src/example/example.less
View File

@@ -22,7 +22,7 @@ body, .page {
/* lib */
.link{
color: #1AAD19;
color: #07C160;
}
@@ -59,7 +59,7 @@ body, .page {
.page__bd {}
.page__bd_spacing {
padding: 0 15px;
padding: 0 16px;
}
.page__ft{
@@ -84,8 +84,8 @@ body, .page {
}
.page__desc {
margin-top: 5px;
color: #888888;
margin-top: 4px;
color: rgba(0,0,0,.5);
text-align: left;
font-size: 14px;
}
@@ -112,14 +112,14 @@ body, .page {
height: 30px;
}
li{
margin: 10px 0;
margin: 8px 0;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 2px;
cursor: pointer;
&.js_show{
.weui-flex{
opacity: .4;
opacity: .5;
}
.page__category{
height: auto;

5
src/style/base/reset.less
View File

@@ -38,4 +38,7 @@ a img {
a {
text-decoration: none;
.setTapColor();
}
}
input,textarea{
caret-color:@weuiColorPrimary;
}

6
src/style/base/variable/weui-dialog.less
View File

@@ -15,7 +15,7 @@
*/
@weuiDialogBackgroundColor: #FFFFFF;
@weuiDialogLineColor: #D5D5D6;
@weuiDialogLineColor: rgba(0,0,0,.1);
@weuiDialogLinkColor: @weuiLinkColorDefault;
@weuiDialogLinkActiveBc: #EEEEEE;
@weuiDialogGapWidth: 1.6em;
@weuiDialogLinkActiveBc: @weuiBgColorActive;
@weuiDialogGapWidth: 24px;

14
src/style/base/variable/weui-msg.less
View File

@@ -14,10 +14,10 @@
* limitations under the License.
*/
@weuiMsgPaddingTop:36px;
@weuiMsgIconGap:30px;
@weuiMsgTitleGap:5px;
@weuiMsgTextGap:25px;
@weuiMsgOprGap:25px;
@weuiMsgExtraAreaGap:15px;
@weuiMsgExtraAreaOfMinHeight:438px;
@weuiMsgPaddingTop:48px;
@weuiMsgIconGap:32px;
@weuiMsgTitleGap:16px;
@weuiMsgTextGap:32px;
@weuiMsgOprGap:56px;
@weuiMsgExtraAreaGap:24px;
@weuiMsgExtraAreaOfMinHeight:438px;

22
src/style/icon/weui-icon_font.less
View File

@@ -21,7 +21,7 @@
}
.weui-icon-success {
font-size: 23px;
color: #09BB07;
color: @weuiColorPrimary;
}
.weui-icon-waiting {
font-size: 23px;
@@ -29,7 +29,7 @@
}
.weui-icon-warn {
font-size: 23px;
color: #F43530;
color: @weuiColorWarn;
}
.weui-icon-info {
font-size: 23px;
@@ -38,11 +38,11 @@
.weui-icon-success-circle {
font-size: 23px;
color: #09BB07;
color: @weuiColorPrimary;
}
.weui-icon-success-no-circle {
font-size: 23px;
color: #09BB07;
color: @weuiColorPrimary;
}
.weui-icon-waiting-circle {
font-size: 23px;
@@ -54,29 +54,29 @@
}
.weui-icon-download {
font-size: 23px;
color: #09BB07;
color: @weuiColorPrimary;
}
.weui-icon-info-circle {
font-size: 23px;
color: #09BB07;
color: @weuiColorPrimary;
}
.weui-icon-safe-success {
color: #09BB07;
color: @weuiColorPrimary;
}
.weui-icon-safe-warn {
color: #FFBE00;
}
.weui-icon-cancel {
color: #F43530;
color: @weuiColorWarn;
font-size: 22px;
}
.weui-icon-search {
color: #B2B2B2;
font-size: 14px;
color: @weuiTextColorDesc;
font-size: 13px;
}
.weui-icon-clear {
@@ -94,7 +94,7 @@
.weui-icon_msg {
font-size: 93px;
&.weui-icon-warn {
color: #F76260;
color: @weuiColorWarn;
}
}
.weui-icon_msg-primary {

2
src/style/widget/weui-agree/weui-agree.less
View File

@@ -33,7 +33,7 @@
outline: 0;
font-size: 0;
border: 1px solid #D1D1D1;
border: 1px solid @weuiLineColorDark;
background-color: #FFFFFF;
border-radius: 3px;
width: 13px;

3
src/style/widget/weui-button/weui-btn_cell.less
View File

@@ -35,6 +35,9 @@
& + &{
margin-top:@weuiBtnDefaultGap;
}
&:active{
background-color:@weuiBgColorActive;
}
}
.weui-btn_cell__icon{
display:inline-block;

6
src/style/widget/weui-cell/weui-cell_swiped.less
View File

@@ -40,8 +40,8 @@
color: inherit;
}
.weui-swiped-btn_default {
background-color: #C7C7CC;
background-color: @weuiBgColorDefault;
}
.weui-swiped-btn_warn {
background-color: #FF3B30;
}
background-color: @weuiColorWarn;
}

6
src/style/widget/weui-cell/weui-check/weui-checkbox.less
View File

@@ -23,7 +23,7 @@
.weui-icon-checked {
&:before {
content: '\EA01';
color: #C9C9C9;
color: @weuiLineColorDark;
font-size: 23px;
display: block;
}
@@ -38,9 +38,9 @@
& + .weui-icon-checked {
&:before {
content: '\EA06';
color: #09BB07;
color: @weuiColorPrimary;
}
}
}
}
}
}

2
src/style/widget/weui-cell/weui-check/weui-radio.less
View File

@@ -33,7 +33,7 @@
&:before {
display: block;
content: '\EA08';
color: #09BB07;
color: @weuiColorPrimary;
font-size: 16px;
}
}

11
src/style/widget/weui-footer/weui-footer.less
View File

@@ -17,8 +17,9 @@
@import "../../base/fn";
.weui-footer {
color: @weuiTextColorDesc;
color: @weuiTextColorTips;
font-size: 14px;
line-height:1.4;
text-align: center;
a{
color: @weuiLinkColorDefault;
@@ -26,7 +27,7 @@
}
.weui-footer_fixed-bottom{
position: fixed;
bottom: .52em;
bottom: 16px;
left: 0;
right: 0;
}
@@ -36,12 +37,12 @@
.weui-footer__link{
display: inline-block;
vertical-align: top;
margin: 0 .62em;
margin: 0 8px;
position: relative;
font-size: 14px;
&:before{
.setLeftLine();
left: -.65em;
left: -8px;
top: .36em;
bottom: .36em;
}
@@ -52,6 +53,6 @@
}
}
.weui-footer__text{
padding: 0 .34em;
padding: 0 16px;
font-size: 12px;
}

1
src/style/widget/weui-page/weui-article.less
View File

@@ -19,6 +19,7 @@
.weui-article {
padding: 24px 16px;
font-size: 17px;
color:rgba(0,0,0,.9);
section {
margin-bottom: 1.5em;
}

11
src/style/widget/weui-page/weui-msg.less
View File

@@ -20,6 +20,7 @@
.weui-msg {
padding-top: @weuiMsgPaddingTop;
text-align: center;
line-height:1.4;
}
.weui-msg__icon-area {
margin-bottom: @weuiMsgIconGap;
@@ -33,14 +34,14 @@
}
.weui-msg__title {
margin-bottom: @weuiMsgTitleGap;
font-weight: 400;
font-size: 20px;
font-weight: 700;
font-size: 22px;
word-wrap:break-word;
word-break:break-all;
}
.weui-msg__desc {
font-size: 14px;
color: @weuiTextColorDesc;
font-size: 17px;
color: @weuiTextColorTitle;
word-wrap:break-word;
word-break:break-all;
}
@@ -50,7 +51,7 @@
.weui-msg__extra-area {
margin-bottom: @weuiMsgExtraAreaGap;
font-size: 14px;
color: @weuiTextColorDesc;
color: @weuiTextColorTips;
a{color: @weuiLinkColorDefault;}
}
@media screen and (min-height: @weuiMsgExtraAreaOfMinHeight) {

11
src/style/widget/weui-picker/weui-picker.less
View File

@@ -31,11 +31,12 @@
.weui-picker__hd {
display: flex;
padding: 9px 15px;
padding: 16px;
background-color: #fff;
position: relative;
text-align: center;
font-size: 17px;
line-height:1.4;
&:after {
.setBottomLine(@weuiLineColorLight);
}
@@ -44,11 +45,11 @@
.weui-picker__action {
display: block;
flex: 1;
color: @weuiColorPrimary;
color: @weuiLinkColorDefault;
&:first-child {
text-align: left;
color: #888;
color: @weuiTextColorTitle;
}
&:last-child {
text-align: right;
@@ -59,7 +60,7 @@
display: flex;
position: relative;
background-color: #fff;
height: 238px;
height: 240px;
overflow: hidden;
}
@@ -112,7 +113,7 @@
height: @pickerItemHeight;
line-height: @pickerItemHeight;
text-align: center;
color: #000;
color: @weuiTextColorTitle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

68
src/style/widget/weui-searchbar/weui-searchbar.less
View File

@@ -14,21 +14,17 @@
* limitations under the License.
*/
@weuiSearchInputHeight:32px;
@import "../../base/fn";
.weui-search-bar {
position: relative;
padding: 8px 10px;
padding: 8px;
display: flex;
box-sizing: border-box;
background-color: #EFEFF4;
background-color: @weuiBgColorDefault;
-webkit-text-size-adjust: 100%;
align-items: center;
&:before {
.setTopLine(#D7D6DC);
}
&:after {
.setBottomLine(#D7D6DC);
}
&.weui-search-bar_focusing{
.weui-search-bar__cancel-btn{
display: block;
@@ -41,39 +37,27 @@
.weui-search-bar__form {
position: relative;
flex: auto;
background-color: #EFEFF4;
&:after{
content: '';
position: absolute;
left: 0;
top:0;
width: 200%;
height: 200%;
transform: scale(.5);
transform-origin: 0 0;
border-radius: 10px;
border: 1px solid #E6E6EA;
box-sizing: border-box;
background: #FFFFFF;
}
background-color: #FFFFFF;
border-radius:4px;
}
.weui-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
padding-left: 32px;
padding-right: 32px;
height: 100%;
width: 100%;
box-sizing: border-box;
z-index: 1;
.weui-search-bar__input {
padding: 4px 0;
padding: 8px 0;
width: 100%;
height: 20/14em;
height: unit(@weuiSearchInputHeight - 16px)/14em;
border: 0;
font-size: 14px;
line-height: 20/14em;
box-sizing: content-box;
line-height: unit(@weuiSearchInputHeight - 16px)/14em;
box-sizing:content-box;
background: transparent;
caret-color:@weuiColorPrimary;
&:focus {
outline: none;
}
@@ -81,7 +65,7 @@
.weui-icon-search {
position: absolute;
top: 50%;
left: 10px;
left: 8px;
margin-top: -14px;
line-height: 28px;
}
@@ -90,20 +74,22 @@
top: 50%;
right: 0;
margin-top: -14px;
padding: 0 10px;
padding: 0 8px;
line-height: 28px;
}
}
.weui-search-bar__label {
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border-radius: 3px;
font-size:0;
border-radius: 4px;
line-height:32px;
text-align: center;
color: #9B9B9B;
color: @weuiTextColorDesc;
background: #FFFFFF;
span {
display: inline-block;
@@ -111,14 +97,14 @@
vertical-align: middle;
}
.weui-icon-search {
margin-right: 5px;
margin-right: 4px;
}
}
.weui-search-bar__cancel-btn {
display: none;
margin-left: 10px;
margin-left: 8px;
line-height: 28px;
color: #09BB07;
color: @weuiLinkColorDefault;
white-space: nowrap;
}
.weui-search-bar__input:not(:valid) ~ .weui-icon-clear {
@@ -131,4 +117,4 @@ input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
}

18
src/style/widget/weui-tab/weui-navbar.less
View File

@@ -22,14 +22,14 @@
z-index: 500;
top: 0;
width: 100%;
background-color: #FAFAFA;
background-color: #FFFFFF;
&:after {
.setBottomLine(#CCCCCC);
.setBottomLine(@weuiLineColorLight);
}
& + .weui-tab__panel {
padding-top: 50px;
padding-top: 48px;
padding-bottom: 0;
}
}
@@ -38,21 +38,21 @@
position: relative;
display: block;
flex: 1;
padding: 13px 0;
padding: 16px 0;
text-align: center;
font-size: 15px;
font-size: 17px;
.setTapColor();
&:active {
background-color: #EDEDED;
background-color: @weuiBgColorActive;
}
&.weui-bar__item_on {
background-color: #EAEAEA;
background-color: @weuiBgColorActive;
}
&:after {
.setRightLine(#CCCCCC);
.setRightLine(@weuiLineColorLight);
}
&:last-child {
@@ -60,4 +60,4 @@
display: none;
}
}
}
}

18
src/style/widget/weui-tab/weui-tabbar.less
View File

@@ -22,17 +22,17 @@
z-index: 500;
bottom: 0;
width: 100%;
background-color: #F7F7FA;
background-color: @weuiBgColorPrimary;
&:before {
.setTopLine(#C0BFC4);
.setTopLine(@weuiLineColorLight);
}
}
.weui-tabbar__item {
display: block;
flex: 1;
padding: 5px 0 0;
padding: 8px 0;
font-size: 0;
color: @weuiTextColorDesc;
text-align: center;
@@ -42,15 +42,16 @@
.weui-tabbar__icon,
.weui-tabbar__icon > i,
.weui-tabbar__label {
color: #09BB07;
color: @weuiColorPrimary;
}
}
}
.weui-tabbar__icon {
display: inline-block;
width: 27px;
height: 27px;
width: 28px;
height: 28px;
margin-bottom:2px;
i&,
> i {
@@ -65,8 +66,7 @@
}
.weui-tabbar__label {
text-align: center;
color: @weuiTextColorDesc;
color: @weuiTextColorTitle;
font-size: 10px;
line-height: 1.8;
line-height: 1.4;
}

55
src/style/widget/weui-tips/weui-dialog.less
View File

@@ -19,11 +19,10 @@
.weui-dialog {
position: fixed;
z-index: 5000;
width: 80%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
left: 16px;
right: 16px;
transform: translate(0, -50%);
background-color: @weuiDialogBackgroundColor;
text-align: center;
@@ -31,29 +30,30 @@
overflow: hidden;
}
.weui-dialog__hd {
padding: 1.3em @weuiDialogGapWidth .5em;
padding: 32px @weuiDialogGapWidth 16px;
}
.weui-dialog__title {
font-weight: 400;
font-size: 18px;
font-weight: 700;
font-size: 17px;
line-height:1.4;
}
.weui-dialog__bd {
padding: 0 @weuiDialogGapWidth .8em;
padding: 0 @weuiDialogGapWidth 32px;
min-height: 40px;
font-size: 15px;
line-height: 1.3;
font-size: 17px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
color: @weuiTextColorDesc;
&:first-child{
padding:2.7em 20px 1.7em;
color:#353535;
padding:32px @weuiDialogGapWidth;
color:@weuiTextColorTitle;
}
}
.weui-dialog__ft {
position: relative;
line-height: 48px;
font-size: 18px;
line-height: 64px;
font-size: 17px;
display: flex;
&:after {
content: " ";
@@ -64,6 +64,7 @@
display: block;
flex: 1;
color: @weuiDialogLinkColor;
font-weight:700;
text-decoration: none;
.setTapColor();
&:active {
@@ -82,10 +83,7 @@
}
}
.weui-dialog__btn_default {
color: #353535;
}
.weui-dialog__btn_primary {
color: #0BB20C;
color: @weuiTextColorTitle;
}
.weui-skin_android{
@@ -94,27 +92,25 @@
box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .1);
}
.weui-dialog__title{
font-size: 21px;
font-size:22px;
line-height:1.4;
}
.weui-dialog__hd{
text-align: left;
}
.weui-dialog__bd{
color:@weuiTextColorDesc;
padding:.25em @weuiDialogGapWidth 2em;
font-size: 17px;
text-align: left;
&:first-child{
padding:1.6em @weuiDialogGapWidth 2em;
color:#353535;
color:@weuiTextColorTitle;
}
}
.weui-dialog__ft{
display: block;
text-align: right;
line-height: 42px;
font-size: 16px;
padding:0 @weuiDialogGapWidth .7em;
line-height: 40px;
padding:0 @weuiDialogGapWidth 16px;
&:after{
display: none;
}
@@ -126,19 +122,12 @@
&:after{
display: none;
}
&:active{
background-color: rgba(0,0,0,.06);
}
&:visited{
background-color: rgba(0,0,0,.06);
}
&:last-child{
margin-right: -.8em;
}
}
.weui-dialog__btn_default {
color: #808080;
color: @weuiTextColorTitle;
}
}

7
src/style/widget/weui-tips/weui-toast.less
View File

@@ -30,7 +30,7 @@
color: #FFFFFF;
}
.weui-icon_toast {
margin: 22px 0 0;
margin: 24px 0 0;
display: block;
&.weui-icon-success-no-circle{
&:before {
@@ -39,7 +39,7 @@
}
}
&.weui-loading{
margin:30px 0 0;
margin:32px 0 0;
width:38px;
height:38px;
vertical-align: baseline;
@@ -47,5 +47,6 @@
}
.weui-toast__content {
margin: 0 0 15px;
margin: 0 0 16px;
font-size:14px;
}