weui
Version:
A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
160 lines (154 loc) • 4.49 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";
@weuiActionSheetAndroidBorderRadius: 2px;
.weui-actionsheet {
position: fixed;
left: 0;
bottom: 0;
transform: translate(0, 100%);
backface-visibility: hidden;
z-index: 5000;
width: 100%;
background-color: @weuiBgColorPrimary;
//slide up animation
transition: transform 0.3s;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
outline: 0;
}
.weui-actionsheet__title {
position: relative;
height: 56px;
padding: 8px 24px;
padding: 8px calc(24px ~"+ constant(safe-area-inset-right)") 8px calc(24px ~"+ constant(safe-area-inset-left)");
padding: 8px calc(24px ~"+ env(safe-area-inset-right)") 8px calc(24px ~"+ env(safe-area-inset-left)");
box-sizing: border-box;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
font-size: 12px;
color: @weuiTextColorDesc;
line-height: 1.4;
background: var(--weui-BG-2);
&::before {
.setBottomLine(@weuiCellBorderColor);
}
.weui-actionsheet__title-text {
.ellipsisLn(2);
}
}
.weui-actionsheet__menu {
color: @weuiTextColorTitle;
background-color: var(--weui-BG-2);
}
.weui-actionsheet__action {
margin-top: 8px;
color: @weuiTextColorTitle;
background-color: var(--weui-BG-2);
.weui-actionsheet__cell {
&:last-child {
padding-bottom: calc(@weuiCellGapV ~"+ constant(safe-area-inset-bottom)");
padding-bottom: calc(@weuiCellGapV ~"+ env(safe-area-inset-bottom)");
}
&.weui-actionsheet__cell_tips {
&:last-child {
padding-bottom: calc(12px ~"+ constant(safe-area-inset-bottom)");
padding-bottom: calc(12px ~"+ env(safe-area-inset-bottom)");
}
}
}
}
.weui-actionsheet__cell {
position: relative;
padding: @weuiCellGapV;
padding: @weuiCellGapV calc(@weuiCellGapV ~"+ constant(safe-area-inset-right)") @weuiCellGapV calc(@weuiCellGapV ~"+ constant(safe-area-inset-left)");
padding: @weuiCellGapV calc(@weuiCellGapV ~"+ env(safe-area-inset-right)") @weuiCellGapV calc(@weuiCellGapV ~"+ env(safe-area-inset-left)");
text-align: center;
font-size: 17px;
line-height: @weuiCellLineHeight;
overflow: hidden;
&::before {
.setTopLine(@weuiCellBorderColor);
}
&:active {
background-color: @weuiBgColorActive;
}
&:first-child {
&::before {
display: none;
}
}
}
.weui-actionsheet__cell__tips {
display: block;
font-size: 12px;
color: var(--weui-FG-1);
}
.weui-actionsheet__cell_tips {
padding-top: 12px;
padding-bottom: 12px;
}
.weui-actionsheet__cell_warn {
color: @weuiColorWarn;
}
//android actionSheet
.weui-skin_android {
.weui-actionsheet {
position: fixed;
left: 50%;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
//padding: 0 40px;
width: 274px;
box-sizing: border-box;
backface-visibility: hidden;
background: transparent;
//slide up animation
transition: transform 0.3s;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.weui-actionsheet__action {
display: none;
}
.weui-actionsheet__menu {
border-radius: @weuiActionSheetAndroidBorderRadius;
box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
}
.weui-actionsheet__cell {
padding: @weuiCellGapV;
font-size: 17px;
line-height: @weuiCellLineHeight;
color: @weuiTextColorTitle;
text-align: left;
&:first-child {
border-top-left-radius: @weuiActionSheetAndroidBorderRadius;
border-top-right-radius: @weuiActionSheetAndroidBorderRadius;
}
&:last-child {
border-bottom-left-radius: @weuiActionSheetAndroidBorderRadius;
border-bottom-right-radius: @weuiActionSheetAndroidBorderRadius;
}
}
}
//actionSheet aniamtion
.weui-actionsheet_toggle {
transform: translate(0, 0);
}