weui-uploader.less 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. @import "../../base/fn.less";
  2. .weui-uploader{}
  3. .weui-uploader__hd{
  4. display: flex;
  5. padding-bottom: @weuiCellGapV;
  6. align-items: center;
  7. }
  8. .weui-uploader__title{
  9. flex: 1;
  10. }
  11. .weui-uploader__info{
  12. color: @weuiTextColorTips;
  13. }
  14. .weui-uploader__bd{
  15. margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
  16. margin-right: -@weuiUploaderFileSpacing;
  17. overflow: hidden;
  18. }
  19. .weui-uploader__file{
  20. float: left;
  21. margin-right: @weuiUploaderFileSpacing;
  22. margin-bottom: @weuiUploaderFileSpacing;
  23. }
  24. .weui-uploader__img{
  25. display: block;
  26. width: @weuiUploaderSize;
  27. height: @weuiUploaderSize;
  28. }
  29. .weui-uploader__file_status{
  30. position: relative;
  31. &:before{
  32. content: " ";
  33. position: absolute;
  34. top: 0;
  35. right: 0;
  36. bottom: 0;
  37. left: 0;
  38. background-color: rgba(0, 0, 0, .5);
  39. }
  40. }
  41. .weui-uploader__file-content{
  42. position: absolute;
  43. top: 50%;
  44. left: 50%;
  45. transform: translate(-50%, -50%);
  46. color: #FFFFFF;
  47. }
  48. .weui-uploader__input-box{
  49. float:left;
  50. position: relative;
  51. margin-right: @weuiUploaderFileSpacing;
  52. margin-bottom: @weuiUploaderFileSpacing;
  53. width: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
  54. height: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
  55. border: @weuiUploaderBorderWidth solid @weuiUploaderBorderColor;
  56. &:before, &:after{
  57. content: " ";
  58. position: absolute;
  59. top: 50%;
  60. left: 50%;
  61. transform: translate(-50%, -50%);
  62. background-color: @weuiUploaderBorderColor;
  63. }
  64. &:before{
  65. width: @weuiUploaderBorderWidth + 1;
  66. height: @weuiUploaderSize / 2;
  67. }
  68. &:after{
  69. width: @weuiUploaderSize / 2;
  70. height: @weuiUploaderBorderWidth + 1;
  71. }
  72. &:active{
  73. border-color: @weuiUploaderActiveBorderColor;
  74. &:before, &:after{
  75. background-color: @weuiUploaderActiveBorderColor;
  76. }
  77. }
  78. }
  79. .weui-uploader__input{
  80. position: absolute;
  81. z-index: 1;
  82. top: 0;
  83. left: 0;
  84. width: 100%;
  85. height: 100%;
  86. opacity: 0;
  87. }