index.less 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. @import '../style/var';
  2. .van-uploader {
  3. position: relative;
  4. display: inline-block;
  5. &__wrapper {
  6. display: flex;
  7. flex-wrap: wrap;
  8. &--disabled {
  9. opacity: @uploader-disabled-opacity;
  10. }
  11. }
  12. &__input {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 100%;
  18. overflow: hidden; // to clip file-upload-button
  19. cursor: pointer;
  20. opacity: 0;
  21. &-wrapper {
  22. position: relative;
  23. }
  24. &:disabled {
  25. cursor: not-allowed;
  26. }
  27. }
  28. &__upload {
  29. position: relative;
  30. display: flex;
  31. flex-direction: column;
  32. align-items: center;
  33. justify-content: center;
  34. box-sizing: border-box;
  35. width: @uploader-size;
  36. height: @uploader-size;
  37. margin: 0 @padding-xs @padding-xs 0;
  38. background-color: @uploader-upload-background-color;
  39. &:active {
  40. background-color: @uploader-upload-active-color;
  41. }
  42. &-icon {
  43. color: @uploader-icon-color;
  44. font-size: @uploader-icon-size;
  45. }
  46. &-text {
  47. margin-top: @padding-xs;
  48. color: @uploader-text-color;
  49. font-size: @uploader-text-font-size;
  50. }
  51. }
  52. &__preview {
  53. position: relative;
  54. margin: 0 @padding-xs @padding-xs 0;
  55. cursor: pointer;
  56. &-image {
  57. display: block;
  58. width: @uploader-size;
  59. height: @uploader-size;
  60. overflow: hidden;
  61. }
  62. &-delete {
  63. position: absolute;
  64. top: 0;
  65. right: 0;
  66. width: @uploader-delete-icon-size;
  67. height: @uploader-delete-icon-size;
  68. background-color: @uploader-delete-background-color;
  69. border-radius: 0 0 0 12px;
  70. &-icon {
  71. position: absolute;
  72. top: -2px;
  73. right: -2px;
  74. color: #fff;
  75. color: @uploader-delete-color;
  76. font-size: 16px;
  77. transform: scale(0.5);
  78. }
  79. }
  80. &-cover {
  81. position: absolute;
  82. top: 0;
  83. right: 0;
  84. bottom: 0;
  85. left: 0;
  86. }
  87. }
  88. &__mask {
  89. position: absolute;
  90. top: 0;
  91. right: 0;
  92. bottom: 0;
  93. left: 0;
  94. display: flex;
  95. flex-direction: column;
  96. align-items: center;
  97. justify-content: center;
  98. color: @white;
  99. background-color: @uploader-mask-background-color;
  100. &-icon {
  101. font-size: @uploader-mask-icon-size;
  102. }
  103. &-message {
  104. margin-top: 6px;
  105. padding: 0 @padding-base;
  106. font-size: @uploader-mask-message-font-size;
  107. line-height: @uploader-mask-message-line-height;
  108. }
  109. }
  110. &__loading {
  111. width: @uploader-loading-icon-size;
  112. height: @uploader-loading-icon-size;
  113. color: @uploader-loading-icon-color;
  114. }
  115. &__file {
  116. display: flex;
  117. flex-direction: column;
  118. align-items: center;
  119. justify-content: center;
  120. width: @uploader-size;
  121. height: @uploader-size;
  122. background-color: @uploader-file-background-color;
  123. &-icon {
  124. color: @uploader-file-icon-color;
  125. font-size: @uploader-file-icon-size;
  126. }
  127. &-name {
  128. box-sizing: border-box;
  129. width: 100%;
  130. margin-top: @uploader-file-name-margin-top;
  131. padding: @uploader-file-name-padding;
  132. color: @uploader-file-name-text-color;
  133. font-size: @uploader-file-name-font-size;
  134. text-align: center;
  135. }
  136. }
  137. }