| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- @import "../../base/fn.less";
- .weui-uploader{}
- .weui-uploader__hd{
- display: flex;
- padding-bottom: @weuiCellGapV;
- align-items: center;
- }
- .weui-uploader__title{
- flex: 1;
- }
- .weui-uploader__info{
- color: @weuiTextColorTips;
- }
- .weui-uploader__bd{
- margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
- margin-right: -@weuiUploaderFileSpacing;
- overflow: hidden;
- }
- .weui-uploader__file{
- float: left;
- margin-right: @weuiUploaderFileSpacing;
- margin-bottom: @weuiUploaderFileSpacing;
- }
- .weui-uploader__img{
- display: block;
- width: @weuiUploaderSize;
- height: @weuiUploaderSize;
- }
- .weui-uploader__file_status{
- position: relative;
- &:before{
- content: " ";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: rgba(0, 0, 0, .5);
- }
- }
- .weui-uploader__file-content{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: #FFFFFF;
- }
- .weui-uploader__input-box{
- float:left;
- position: relative;
- margin-right: @weuiUploaderFileSpacing;
- margin-bottom: @weuiUploaderFileSpacing;
- width: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
- height: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
- border: @weuiUploaderBorderWidth solid @weuiUploaderBorderColor;
- &:before, &:after{
- content: " ";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: @weuiUploaderBorderColor;
- }
- &:before{
- width: @weuiUploaderBorderWidth + 1;
- height: @weuiUploaderSize / 2;
- }
- &:after{
- width: @weuiUploaderSize / 2;
- height: @weuiUploaderBorderWidth + 1;
- }
- &:active{
- border-color: @weuiUploaderActiveBorderColor;
- &:before, &:after{
- background-color: @weuiUploaderActiveBorderColor;
- }
- }
- }
- .weui-uploader__input{
- position: absolute;
- z-index: 1;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
|