index.less 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-upload {
  4. position: relative;
  5. display: block;
  6. .clearfix();
  7. &--disabled {
  8. opacity: @disabled-opacity;
  9. }
  10. &--picture-card {
  11. .@{wux-prefix}-upload__select {
  12. .square(@upload-size);
  13. border: @border-width-base @upload-normal-border-style @upload-normal-border-color;
  14. border-radius: @upload-border-radius;
  15. margin: 0 8px 8px 0;
  16. background-color: @upload-bg;
  17. transition: border-color .3s ease;
  18. box-sizing: border-box;
  19. float: left;
  20. }
  21. .@{wux-prefix}-upload__button {
  22. width: 100%;
  23. height: 100%;
  24. display: flex;
  25. text-align: center;
  26. justify-content: center;
  27. align-items: center;
  28. vertical-align: middle;
  29. padding: 4px;
  30. box-sizing: border-box;
  31. image {
  32. width: 100%;
  33. height: 100%;
  34. display: inline-block;
  35. overflow: hidden;
  36. }
  37. }
  38. .@{wux-prefix}-upload__files {
  39. position: relative;
  40. display: block;
  41. float: left;
  42. .clearfix();
  43. }
  44. .@{wux-prefix}-upload__file {
  45. .square(@upload-size);
  46. float: left;
  47. margin: 0 8px 8px 0;
  48. padding: 4px;
  49. border-radius: @upload-border-radius;
  50. border: @border-width-base @upload-success-border-style @upload-normal-border-color;
  51. position: relative;
  52. box-sizing: border-box;
  53. &--uploading {
  54. border-style: @upload-normal-border-style;
  55. }
  56. &--error {
  57. border-color: @upload-error-border-color;
  58. }
  59. }
  60. .@{wux-prefix}-upload__thumb {
  61. width: 100%;
  62. height: 100%;
  63. display: inline-block;
  64. overflow: hidden;
  65. }
  66. .@{wux-prefix}-upload__remove {
  67. .square(@upload-icon-size);
  68. position: absolute;
  69. right: 6px;
  70. top: 6px;
  71. text-align: right;
  72. vertical-align: top;
  73. z-index: 2;
  74. background-repeat: no-repeat;
  75. background-size: @upload-icon-size auto;
  76. .encoded-svg-background(upload_delete);
  77. }
  78. }
  79. }