diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ea59718..3f44abb1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +### v2.6.12 (2024-03-20) + +#### Features +* feat: searchbar组件升级，分为filled(默认)、outlined和homepage三种变体 +* feat: weui-agree组件对齐方式调整为顶对齐 +* feat: weui-agree组件去掉摆动动画 + +#### Bugfixes +* fix: 修复weui-select标题折行后的样式问题 +* fix: 修复表单里验证码按钮disabled态被覆盖的问题 + + + ### v2.6.11 (2024-01-12) #### Bugfixes diff --git a/dist/example/example.css b/dist/example/example.css index c3939fa1..3fe84fa3 100644 --- a/dist/example/example.css +++ b/dist/example/example.css @@ -1 +1 @@ -body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:system-ui,-apple-system,Helvetica Neue,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.steps,.page.steps_horizonal,.page.steps_vertical,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page{outline:0}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:32px;padding-bottom:calc(32px + constant(safe-area-inset-bottom));padding-bottom:calc(32px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}.wx-root[data-weui-theme=dark] .page__ft img,body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page__ft img,body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__ft .weui-footer{display:none;padding:16px 0 0}.page__ft .weui-footer__text{margin-bottom:8px}.page__ft .weui-footer__text:last-child{margin-bottom:0}.page__ft .weui-footer__text__meta{margin:0 6px}.page__ft a.weui-footer__text__meta{color:rgba(0,0,0,.2)}.wx-root[data-weui-theme=dark] .page__ft a.weui-footer__text__meta,body[data-weui-theme=dark] .page__ft a.weui-footer__text__meta{color:hsla(0,0%,100%,.2)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta,body:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta{color:hsla(0,0%,100%,.2)}}.page__ft a.weui-footer__text__meta:active{opacity:.5}.page__ft .gongan_meta{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;vertical-align:bottom;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page__ft .gongan_meta img{margin-right:2px;width:18px;height:18px}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=button_] .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}.wx-root[data-weui-theme=dark] .page.home .page__title,body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page.home .page__title,body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}.wx-root[data-weui-theme=dark] .page.home .page__bd img,body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page.home .page__bd img,body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:default}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.steps_horizonal .weui-steps,.page.steps_vertical .weui-steps{margin:40px auto 80px;max-width:50%}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{display:block;font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.14em}.page.form_page .weui-label{width:4.2em}.page.form_primary .weui-cell_select-before .weui-select,.page.form_primary .weui-label,.page.form_select .weui-cell_select-before .weui-select,.page.form_select .weui-label,.page.form_select_primary .weui-cell_select-before .weui-select,.page.form_select_primary .weui-label{width:3.14em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_vcode .weui-label{width:3.14em}.page.button,.page.button_default{background-color:var(--weui-BG-0)}.page.button .weui-btn_mini,.page.button_default .weui-btn_mini{vertical-align:middle;margin:0 12px}.page.button .page__bd,.page.button_default .page__bd{padding:0}.page.button .button-sp-area,.page.button_default .button-sp-area{margin:15px auto;padding:15px;text-align:center}.page.button .button-sp-area.cell,.page.button_default .button-sp-area.cell{padding:15px 0;display:none}.page.button .button-sp-area.overlay,.page.button_default .button-sp-area.overlay{padding:15px 0;background:var(--weui-BRAND)}.page.button .button-sp-area.overlay .weui-btn_mini,.page.button_default .button-sp-area.overlay .weui-btn_mini{margin-top:16px}.page.button_bottom_fixed{background-color:var(--weui-BG-2)}.page.button_bottom_fixed .weui-bottom-fixed-opr-demo{padding:32px 32px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.information-bar .weui-information-bar{position:static;margin-bottom:20px}.page.gallery{overflow:hidden}.page.navbar .weui-tab__panel,.page.tabbar .weui-tab__panel{padding:32px}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;margin:10px 40px}.loading_demo .weui-loading,.loading_demo .weui-mask-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes slideIn{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slideIn{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes slideOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes slideOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards}.page_logo_wrp{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.page_logo_wrp>a{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;vertical-align:bottom}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}}@media (min-device-width:768px){.page__ft{padding-bottom:48px}.page__ft .weui-footer{display:block}} \ No newline at end of file +body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:system-ui,-apple-system,Helvetica Neue,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.steps,.page.steps_horizonal,.page.steps_vertical,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page{outline:0}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:32px;padding-bottom:calc(32px + constant(safe-area-inset-bottom));padding-bottom:calc(32px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}.wx-root[data-weui-theme=dark] .page__ft img,body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page__ft img,body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__ft .weui-footer{display:none;padding:16px 0 0}.page__ft .weui-footer__text{margin-bottom:8px}.page__ft .weui-footer__text:last-child{margin-bottom:0}.page__ft .weui-footer__text__meta{margin:0 6px}.page__ft a.weui-footer__text__meta{color:rgba(0,0,0,.2)}.wx-root[data-weui-theme=dark] .page__ft a.weui-footer__text__meta,body[data-weui-theme=dark] .page__ft a.weui-footer__text__meta{color:hsla(0,0%,100%,.2)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta,body:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta{color:hsla(0,0%,100%,.2)}}.page__ft a.weui-footer__text__meta:active{opacity:.5}.page__ft .gongan_meta{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;vertical-align:bottom;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page__ft .gongan_meta img{margin-right:2px;width:18px;height:18px}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=button_] .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}.wx-root[data-weui-theme=dark] .page.home .page__title,body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page.home .page__title,body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}.wx-root[data-weui-theme=dark] .page.home .page__bd img,body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page.home .page__bd img,body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:default}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.steps_horizonal .weui-steps,.page.steps_vertical .weui-steps{margin:40px auto 80px;max-width:50%}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{display:block;font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.14em}.page.form_page .weui-label{width:4.2em}.page.form_primary .weui-cell_select-before .weui-select,.page.form_primary .weui-label,.page.form_select .weui-cell_select-before .weui-select,.page.form_select .weui-label,.page.form_select_primary .weui-cell_select-before .weui-select,.page.form_select_primary .weui-label{width:3.14em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_vcode .weui-label{width:3.14em}.page.button,.page.button_default{background-color:var(--weui-BG-0)}.page.button .weui-btn_mini,.page.button_default .weui-btn_mini{vertical-align:middle;margin:0 12px}.page.button .page__bd,.page.button_default .page__bd{padding:0}.page.button .button-sp-area,.page.button_default .button-sp-area{margin:15px auto;padding:15px;text-align:center}.page.button .button-sp-area.cell,.page.button_default .button-sp-area.cell{padding:15px 0;display:none}.page.button .button-sp-area.overlay,.page.button_default .button-sp-area.overlay{padding:15px 0;background:var(--weui-BRAND)}.page.button .button-sp-area.overlay .weui-btn_mini,.page.button_default .button-sp-area.overlay .weui-btn_mini{margin-top:16px}.page.button_bottom_fixed{background-color:var(--weui-BG-2)}.page.button_bottom_fixed .weui-bottom-fixed-opr-demo{padding:32px 32px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar_filled,.page.searchbar_homepage{background:var(--weui-BG-3)}.page.searchbar_filled .searchbar-result,.page.searchbar_homepage .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar_filled .searchbar-result .weui-cell__bd,.page.searchbar_homepage .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.information-bar .weui-information-bar{position:static;margin-bottom:20px}.page.gallery{overflow:hidden}.page.navbar .weui-tab__panel,.page.tabbar .weui-tab__panel{padding:32px}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;margin:10px 40px}.loading_demo .weui-loading,.loading_demo .weui-mask-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes slideIn{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slideIn{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes slideOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes slideOut{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards}.page_logo_wrp{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.page_logo_wrp>a{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;vertical-align:bottom}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}}@media (min-device-width:768px){.page__ft{padding-bottom:48px}.page__ft .weui-footer{display:block}} \ No newline at end of file diff --git a/dist/example/index.html b/dist/example/index.html index d4aa9602..d84af495 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -1562,6 +1562,7 @@

验证码

$('.page.cell').removeClass('slideIn'); if($agreeCheckbox.prop("checked")){ + $agree.removeClass('weui-agree_warn'); $toast.fadeIn(100); $toast.attr('aria-live','assertive'); setTimeout(function () { @@ -1569,10 +1570,11 @@

验证码

$toast.attr('aria-live','off'); }, 2000); }else{ - $agree.addClass('weui-agree_animate'); + // $agree.addClass('weui-agree_animate'); + $agree.addClass('weui-agree_warn'); $agreeMsg.show(); setTimeout(function () { - $agree.removeClass('weui-agree_animate'); + // $agree.removeClass('weui-agree_animate'); $agreeMsg.hide(); }, 200); } @@ -4025,22 +4027,40 @@

等待

SearchBar

搜索栏

+
+ Filled (default) + Filled Grey + Outlined + Homepage +
+ + + + + + + + + + + diff --git a/src/example/searchbar/searchbar_filled.html b/src/example/searchbar/searchbar_filled.html new file mode 100644 index 00000000..6f3ccc9f --- /dev/null +++ b/src/example/searchbar/searchbar_filled.html @@ -0,0 +1,100 @@ +
+
+

SearchBar

+

搜索栏 Filled

+
+
+ + +
+
+ diff --git a/src/example/searchbar/searchbar_grey.html b/src/example/searchbar/searchbar_grey.html new file mode 100644 index 00000000..52d25968 --- /dev/null +++ b/src/example/searchbar/searchbar_grey.html @@ -0,0 +1,69 @@ +
+
+

SearchBar

+

搜索栏 Grey

+
+
+ +
+
+ diff --git a/src/example/searchbar/searchbar_homepage.html b/src/example/searchbar/searchbar_homepage.html new file mode 100644 index 00000000..bd6d6648 --- /dev/null +++ b/src/example/searchbar/searchbar_homepage.html @@ -0,0 +1,19 @@ +
+
+

SearchBar

+

搜索栏 Homepage

+
+
+ +
+
+ diff --git a/src/example/searchbar/searchbar_outlined.html b/src/example/searchbar/searchbar_outlined.html new file mode 100644 index 00000000..7d9fd5f2 --- /dev/null +++ b/src/example/searchbar/searchbar_outlined.html @@ -0,0 +1,20 @@ +
+
+

SearchBar

+

搜索栏 Outlined

+
+
+ +
+
diff --git a/src/style/base/mixin/setOnepx.less b/src/style/base/mixin/setOnepx.less index 01ca0f17..1b037d8a 100644 --- a/src/style/base/mixin/setOnepx.less +++ b/src/style/base/mixin/setOnepx.less @@ -67,3 +67,16 @@ transform-origin: 100% 0; transform: scaleX(0.5); } + +.setLines(@c: @weuiLineColorLight) { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 200%; + bottom: -100%; + border: 1px solid @c; + color: @c; + transform-origin: 0 0; + transform: scale(0.5); +} diff --git a/src/style/icon/weui-icon.less b/src/style/icon/weui-icon.less index 91101197..e46f5519 100644 --- a/src/style/icon/weui-icon.less +++ b/src/style/icon/weui-icon.less @@ -113,6 +113,9 @@ .weui-icon-back-circle { mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E); } +.weui-icon-camera { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13ZM14.8 13C14.8 14.5464 13.5464 15.8 12 15.8C10.4536 15.8 9.2 14.5464 9.2 13C9.2 11.4536 10.4536 10.2 12 10.2C13.5464 10.2 14.8 11.4536 14.8 13Z' fill='black' style='fill:black;fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1484 4.22265C15.0557 4.08355 14.8996 4 14.7324 4H9.26759C9.10042 4 8.9443 4.08355 8.85157 4.22265L7 7H3C2.44772 7 2 7.44772 2 8V19C2 19.5523 2.44772 20 3 20H21C21.5523 20 22 19.5523 22 19V8C22 7.44772 21.5523 7 21 7H17L15.1484 4.22265ZM3.2 8.2H7.64222L9.64222 5.2H14.3578L16.3578 8.2H20.8V18.8H3.2V8.2Z' fill='black' style='fill:black;fill-opacity:1;'/%3E%3C/svg%3E%0A"); +} // icon setting .weui-icon-success { diff --git a/src/style/widget/weui-agree/weui-agree.less b/src/style/widget/weui-agree/weui-agree.less index 06e97e0b..8f5652ef 100644 --- a/src/style/widget/weui-agree/weui-agree.less +++ b/src/style/widget/weui-agree/weui-agree.less @@ -20,11 +20,10 @@ display: inline-flex; vertical-align: bottom; max-width: 100%; - align-items: center; text-align: justify; .hyphens; - line-height: 1.6; + line-height: 1.4; font-size: 14px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -48,13 +47,13 @@ outline: 0; vertical-align: middle; background-color: currentColor; - mask-position: 0 0; + mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: 100%; mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E); color: @weuiLineColorDark; width: 1em; - height: 1em; + height: calc(1em * (14 * 1.4 / 17)); font-size: 17px; flex-shrink: 0; margin-top: 0; @@ -71,6 +70,11 @@ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); color: @weuiColorPrimary; } +.weui-agree_warn { + .weui-agree__text { + color: var(--weui-RED); + } +} .weui-agree_animate { animation: weuiAgree 0.3s 1; } diff --git a/src/style/widget/weui-cell/weui-cells__group.less b/src/style/widget/weui-cell/weui-cells__group.less index ff0c1bad..3adde159 100644 --- a/src/style/widget/weui-cell/weui-cells__group.less +++ b/src/style/widget/weui-cell/weui-cells__group.less @@ -159,6 +159,7 @@ body { } .weui-label { margin-top: 8px; + margin-bottom: 8px; } .weui-cell__bd { display: flex; @@ -185,9 +186,17 @@ body { border-radius: 6px; color: @weuiBtnDefaultFontColor; background-color: @weuiBtnDefaultBg; - &::before { + &::after { display: none; } + + &.weui-btn_disabled, + &[disabled] { + color: rgba(0, 0, 0, 0.15); + color: var(--weui-FG-4); + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--weui-FG-5); + } } // 验证码cell适老化：由于小按钮高度32px大于默认内容高度，所以需要把cell的padding改小以保持cell默认高度56px的规范 diff --git a/src/style/widget/weui-cell/weui-form/weui-select.less b/src/style/widget/weui-cell/weui-form/weui-select.less index bf8f6f44..49e01901 100644 --- a/src/style/widget/weui-cell/weui-form/weui-select.less +++ b/src/style/widget/weui-cell/weui-form/weui-select.less @@ -18,6 +18,12 @@ .weui-cell_select { padding: 0; + + .weui-cell__hd { + padding-top: 16px; + padding-bottom: 16px; + } + .weui-cell__bd { &::after { content: " "; @@ -53,6 +59,10 @@ color: var(--weui-FG-0); vertical-align: bottom; box-sizing: border-box; + + div& { + .ellipsis; + } } .weui-cell_select-before { diff --git a/src/style/widget/weui-cell/weui-form/weui-vcode.less b/src/style/widget/weui-cell/weui-form/weui-vcode.less index 28e3848b..8feac982 100644 --- a/src/style/widget/weui-cell/weui-form/weui-vcode.less +++ b/src/style/widget/weui-cell/weui-form/weui-vcode.less @@ -37,7 +37,7 @@ font-size: @weuiCellFontSize; color: @weuiDialogLinkColor; position: relative; - &::before { + &::after { .setLeftLine(@weuiLineColorLight); } button& { diff --git a/src/style/widget/weui-searchbar/weui-searchbar.less b/src/style/widget/weui-searchbar/weui-searchbar.less index 606337af..ac6edd70 100644 --- a/src/style/widget/weui-searchbar/weui-searchbar.less +++ b/src/style/widget/weui-searchbar/weui-searchbar.less @@ -14,80 +14,138 @@ * limitations under the License. */ -@weuiSearchInputHeight:32px; +@weuiSearchInputHeight:36px; +@weuiSearchInputGapY:6px; +@weuiSearchInputFontSize:17px; +@weuiSearchInputBorderRadius:6px; + +@weuiSearchBarGapY:10px; @import "../../base/fn"; .weui-search-bar { position: relative; - padding: 8px; + padding: @weuiSearchBarGapY 12px @weuiSearchBarGapY 16px; display: flex; box-sizing: border-box; - background-color: @weuiBgColorDefault; - align-items: center; - &.weui-search-bar_focusing { - .weui-search-bar__cancel-btn { - display: block; - } - .weui-search-bar__label { - display: none; - } - } + background-color: var(--weui-BG-0); .weui-icon-search { font-size: 10px; - width: 1.6em; - height: 1.6em; - margin-left: 8px; + width: 2.4em; + height: 2.4em; margin-right: 4px; flex-shrink: 0; + color: var(--weui-FG-2); + } + + &.weui-search-bar_focusing { + .weui-search-bar__box { + visibility: visible; + } + .weui-search-bar__label { + display: none; + } + .weui-search-bar__back-btn, + .weui-search-bar__cancel-btn { + display: flex; + align-items: center; + } } } .weui-search-bar__form { position: relative; - flex: 1; min-width: 0; background-color: var(--weui-BG-2); - border-radius: 4px; + border-radius: @weuiSearchInputBorderRadius; + display: flex; + align-items: center; + flex: 1; + min-width: 0; } .weui-search-bar__box { + visibility: hidden; position: relative; z-index: 1; display: flex; align-items: center; + flex: 1; + min-width: 0; .weui-search-bar__input { - padding: 8px 0; - width: 100%; - height: unit((@weuiSearchInputHeight - 16px))/14em; + padding: @weuiSearchInputGapY 0; border: 0; - font-size: 14px; - line-height: unit((@weuiSearchInputHeight - 16px))/14em; + width: 100%; + font-size: @weuiSearchInputFontSize; + height: unit((@weuiSearchInputHeight - 2 * @weuiSearchInputGapY) / @weuiSearchInputFontSize, em); + line-height: unit((@weuiSearchInputHeight - 2 * @weuiSearchInputGapY) / @weuiSearchInputFontSize); box-sizing: content-box; background: transparent; caret-color: @weuiColorPrimary; color: @weuiTextColorTitle; + &:focus { outline: none; + + & + .weui-search-bar__mask { + display: none; + } + } + + &:placeholder-shown { + & + .weui-search-bar__mask { + display: none; + + & + .weui-icon-clear { + display: none; + } + } } } + .weui-icon-search { + margin-left: 8px; + } .weui-icon-clear { flex-shrink: 0; - font-size: 10px; - width: 2em; - height: 2em; margin-left: 8px; - mask-size: 2em; - mask-position: ~"calc(100% - 8px)" 0; - min-width: 44px; + margin-right: 12px; + display: flex; + align-items: center; + width: auto; + height: auto; + background: none; + mask: none; + position: relative; + + &::before { + content: ""; + display: block; + width: 2em; + height: 2em; + font-size: 10px; + mask-position: 0 0; + mask-position: 50% 50%; + mask-repeat: no-repeat; + mask-size: 100%; + background-color: currentColor; + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E); + } &::after { content: ""; position: absolute; - top: 0; - bottom: 0; + top: 50%; + left: 0; width: 44px; + height: ~"calc(" unit((@weuiSearchInputHeight - 2 * @weuiSearchInputGapY) / @weuiSearchInputFontSize, em) ~" + 12px)"; + transform: translate(-50%, -50%); } } } +.weui-search-bar__words { + flex-shrink: 0; + margin-right: 8px; + color: var(--weui-BRAND); + font-size: 17px; +} .weui-search-bar__label { position: absolute; top: 0; @@ -96,27 +154,50 @@ left: 0; z-index: 2; font-size: 0; - border-radius: 4px; + border-radius: @weuiSearchInputBorderRadius; display: flex; align-items: center; justify-content: center; - color: @weuiTextColorDesc; + color: var(--weui-FG-2); + font-size: @weuiSearchInputFontSize; background: var(--weui-BG-2); - span { + + .weui-search-bar__label__text { display: inline-block; - font-size: 14px; vertical-align: middle; } } +.weui-search-bar__back-btn, .weui-search-bar__cancel-btn { - flex-shrink: 0; display: none; - margin-left: 8px; - line-height: 28px; +} +.weui-search-bar__back-btn { + margin-right: 12px; +} +.weui-search-bar__cancel-btn { + font-size: 17px; + flex-shrink: 0; + margin-left: 12px; color: @weuiLinkColorDefault; } -.weui-search-bar__input:not(:valid) + .weui-icon-clear { - display: none; +.weui-search-bar__mask { + position: relative; + z-index: 5; + pointer-events: none; + position: relative; + font-size: 17px; + height: ~"calc(" unit((@weuiSearchInputHeight - 2 * @weuiSearchInputGapY) / @weuiSearchInputFontSize, em) ~" + 12px - 2px)"; + + &::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 40px; + border-radius: @weuiSearchInputBorderRadius; + background: linear-gradient(270deg, var(--weui-BG-2) 0, var(--weui-BG-2) 17%, rgba(255, 255, 255, 0) 100%); + } } //干掉input[search]默认的clear button @@ -126,3 +207,87 @@ input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } + +.weui-search-bar_outlined { + background: var(--weui-BG-2); + + .weui-search-bar__back-btn, + .weui-search-bar__cancel-btn { + display: flex; + align-items: center; + } + .weui-search-bar__cancel-btn { + font-size: 15px; + } + .weui-search-bar__form { + background: transparent; + &::before { + .setLines(var(--weui-FG-3)); + + border-right: 0; + border-radius: @weuiSearchInputBorderRadius * 2; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + .weui-search-bar__box { + visibility: visible; + padding-left: 12px; + } + .weui-search-bar__search-btn { + display: flex; + align-items: center; + width: auto; + padding: 8px 12px; + font-size: 15px; + font-weight: 400; + line-height: calc((36 - 8 * 2) / 15); + border-radius: @weuiSearchInputBorderRadius; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} + +.weui-search-bar_homepage { + padding: 12px 20px; + + .weui-search-bar__input { + padding: 12px 0; + } + + .weui-search-bar__form { + border-radius: 8px; + } + .weui-search-bar__box { + visibility: visible; + padding-left: 16px; + padding-right: 16px; + } + .weui-icon-camera.weui-icon-camera { + width: 2em; + height: 2em; + color: var(--weui-FG-0); + } + .weui-search-bar__input_text { + color: var(--weui-FG-2); + } +} + +.weui-search-bar_filled-grey { + background-color: var(--weui-BG-2); + .weui-search-bar__label, + .weui-search-bar__form { + background-color: @LIGHT_BG_0; + .dark({ + background-color: #383838; + }); + } + .weui-search-bar__mask { + &::after { + background: linear-gradient(270deg, @LIGHT_BG_0 0, @LIGHT_BG_0 17%, rgba(255, 255, 255, 0) 100%); + .dark({ + background: linear-gradient(270deg, #383838 0, #383838 17%, rgba(255, 255, 255, 0) 100%); + }); + } + } +}