WeUI v2.3.0 解读 39 cell_global
返回
1 cell_global
weui-cells__title
weui-cells
weui-cell
weui-cell_active 选中被激活
weui-cell__bd
weui-cell_primary
weui-cell__ft
weui-cells__tips
// file: src/style/widget/weui-cell/weui-cell_global.less
@import "../../base/fn";
/*
z-index:
0: .weui-swiped-btn
1: .weui-cell_swiped .weui-cell__bd
2: .weui-cells和.weui-cell的1px线
*/
.weui-cells {
margin-top: @weuiCellsMarginTop;
background-color: @weuiCellBg;
line-height: @weuiCellLineHeight;
font-size: @weuiCellFontSize; //cell中间有效高度23px,跟客户端默认图标尺寸一致
overflow: hidden; //因为每个cell的border使用before元素left搞的,ie下伪元素的containing block估计跟标准不同,在cell上用oh不生效
// onepx
position: relative;
&:before {
.setTopLine(@weuiCellBorderColor);
z-index: 2;
}
&:after {
.setBottomLine(@weuiCellBorderColor);
z-index: 2;
}
}
.weui-cells__title {
margin-top: 16px;
margin-bottom: 3px;
padding-left: @weuiCellGapH;
padding-right: @weuiCellGapH;
color: @weuiTextColorDesc;
font-size: @weuiCellTipsFontSize;
line-height: 1.4;
& + .weui-cells {
margin-top: 0;
}
}
.weui-cells__tips {
margin-top: 8px;
color: @weuiTextColorDesc;
padding-left: @weuiCellGapH;
padding-right: @weuiCellGapH;
font-size: @weuiCellTipsFontSize;
line-height: 1.4;
a,
navigator {
color: @weuiLinkColorDefault;
}
navigator {
display: inline;
}
}
.weui-cell {
padding: @weuiCellGapV;
position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
display: flex;
align-items: center;
&:before {
.setTopLine(@weuiCellBorderColor);
left: @weuiCellGapH;
z-index: 2;
}
&:first-child {
&:before {
display: none;
}
}
}
.weui-cell_active {
&:active {
background-color: @weuiBgColorActive;
}
}
.weui-cell_primary {
align-items: flex-start;
}
.weui-cell__bd {
flex: 1;
}
.weui-cell__ft {
text-align: right;
color: @weuiTextColorDesc;
}