weui
Version:
A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
304 lines (277 loc) • 8.39 kB
text/less
/*
* Tencent is pleased to support the open source community by making WeUI available.
*
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://opensource.org/licenses/MIT
*
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../base/fn";
.weui-half-screen-dialog {
position: fixed;
left: 0;
right: 0;
bottom: 0;
min-height: 255px;
max-height: 75%;
z-index: 5000;
line-height: 1.4;
background-color: var(--weui-BG-2);
color: var(--weui-FG-0);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
padding: 0 24px;
padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") constant(safe-area-inset-bottom) calc(24px ~"+ constant(safe-area-inset-left)");
padding: 0 calc(24px ~"+ env(safe-area-inset-right)") env(safe-area-inset-bottom) calc(24px ~"+ env(safe-area-inset-left)");
box-sizing: border-box;
display: flex;
flex-direction: column;
outline: 0;
@media only screen and (max-device-height: 558px) {
max-height: ~"calc(100% - 16px)";
}
}
.weui-half-screen-dialog__hd {
min-height: 64px;
display: flex;
align-items: center;
flex-shrink: 0;
.weui-btn_icon {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: inherit;
&:active { opacity: 0.5; }
}
.weui-half-screen-dialog__hd__action-group {
position: absolute;
top: 50%;
white-space: nowrap;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: flex;
align-items: center;
}
.weui-half-screen-dialog__hd__action {
margin-right: 16px;
position: static;
transform: none;
&.weui-wa-hotarea {
position: relative;
}
&.weui-link {
font-size: 15px;
}
}
}
.weui-half-screen-dialog__hd__side {
position: relative;
left: -8px;
}
.weui-half-screen-dialog__hd__main {
flex: 1;
.weui-half-screen-dialog__hd__side + & {
text-align: center;
padding: 0 40px;
}
& + .weui-half-screen-dialog__hd__side {
right: -8px;
left: auto;
.weui-half-screen-dialog__hd__action-group {
right: 0;
}
.weui-half-screen-dialog__hd__action {
margin-right: 0;
margin-left: 16px;
}
//兼容老版本
.weui-icon-btn,
.weui-btn_icon {
right: 0;
}
}
}
.weui-half-screen-dialog__title {
display: block;
color: var(--weui-FG-0);
font-weight: 500;
font-size: 15px;
}
.weui-half-screen-dialog__subtitle {
display: block;
color: var(--weui-FG-1);
font-size: 10px;
}
.weui-half-screen-dialog__bd {
flex: 1;
min-height: 0;
overflow-y: auto;
.hyphens();
padding-bottom: 56px;
font-size: 14px;
color: var(--weui-FG-0);
}
.weui-half-screen-dialog__desc {
font-size: 17px;
font-weight: 500;
color: var(--weui-FG-0);
line-height: 1.4;
}
.weui-half-screen-dialog__tips {
padding-top: 16px;
font-size: 14px;
color: var(--weui-FG-2);
line-height: 1.4;
}
.weui-half-screen-dialog__ft {
padding: 0 0 64px;
text-align: center;
// 兼容旧版没有.weui-half-screen-dialog__btn-area的场景
.weui-btn:nth-last-child(n+2),
.weui-btn:nth-last-child(n+2) + .weui-btn {
display: inline-block;
vertical-align: top;
margin: 0 8px;
width: 120px;
}
}
.weui-half-screen-dialog__btn-area {
& + .weui-half-screen-dialog__attachment-area {
margin-top: 24px;
margin-bottom: -34px;
}
}
.weui-half-screen-dialog_large {
max-height: none;
top: 16px;
}
// 按住下拉
.weui-half-screen-dialog__slide-icon {
position: absolute;
top: 12px;
display: flex;
width: 40px;
height: 4px;
border-radius: 2px;
background: var(--weui-BG-0);
.dark({
background:var(--weui-FG-3);
});
justify-content: center;
align-items: center;
.weui-icon-arrow {
transform: rotate(90deg);
width: 0.8em;
height: 1.6em;
opacity: 0;
}
}
.weui-half-screen-dialog_grab {
.weui-half-screen-dialog__hd {
box-sizing: border-box;
min-height: 0;
flex-direction: column;
}
.weui-half-screen-dialog__hd__grab {
padding: 12px 16px 16px;
display: flex;
justify-content: center;
}
.weui-half-screen-dialog__hd__grab,
.weui-half-screen-dialog__hd__nav {
width: 100%;
}
.weui-half-screen-dialog__hd__nav {
display: flex;
align-items: center;
min-height: 64px;
}
}
// 兼容老版本
.weui-half-screen-dialog_slide {
.weui-half-screen-dialog__hd {
min-height: 0;
padding: 12px 16px 16px;
justify-content: center;
}
}
// 按钮组水平布局与垂直布局切换
.weui-half-screen-dialog__btn-area {
.weuiBtnWrapLayoutDefault();
}
.weui-half-screen-dialog_btn-wrap {
.weui-half-screen-dialog__btn-area {
.weuiBtnWrapLayoutWrap();
}
}
.weui-icon-more {
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
.weui-icon-slide-down {
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E %3Cdefs%3E %3Crect id='dda90263-a290-4594-926f-6aba8cb4779f-a' width='24' height='24' x='0' y='0' rx='12'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cmask id='dda90263-a290-4594-926f-6aba8cb4779f-b' fill='%23fff'%3E %3Cuse xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E %3C/mask%3E %3Cuse fill='%23000' fill-opacity='.05' xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E %3Cg fill-opacity='.9' mask='url(%23dda90263-a290-4594-926f-6aba8cb4779f-b)'%3E %3Cpath fill='%23000' d='M11.407 15.464L6.693 10.75l1.179-1.179 4.125 4.125 4.124-4.125L17.3 10.75l-4.714 4.714a.833.833 0 0 1-1.179 0z'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
}
// 下面是兼容旧版本用的
.weui-half-screen-dialog__hd {
.weui-icon-btn {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: inherit;
&:active { opacity: 0.5; }
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 44px;
min-height: 44px;
width: 100%;
height: 100%;
}
}
}
.weui-icon-btn {
&& {
outline: 0;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
border-width: 0;
background-color: transparent;
color: var(--weui-FG-0);
font-size: 0;
width: auto;
height: auto;
}
}
.weui-icon-btn_goback {
&& {
color: @weuiTextColorTitle;
background-color: currentColor;
width: 0.71rem; // 字号17px下的12px
height: 1.42rem;
mask: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
mask-size: 100%;
}
}
.weui-icon-btn_close {
&& {
color: @weuiTextColorTitle;
background-color: currentColor;
width: 1.42rem;
height: 1.42rem;
mask: 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.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
mask-size: 100%;
}
}