_iwb-file.scss 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .iwb-file {
  2. width: 100%;
  3. position: relative;
  4. display: inline-block;
  5. margin-bottom: 0;
  6. .iwb-file-input {
  7. opacity: 0;
  8. }
  9. .iwb-file-label {
  10. background-color: $white;
  11. border: 1px solid $input-border-color;
  12. color: $gray-600 !important;
  13. text-align: left;
  14. position: absolute;
  15. top: 0;
  16. right: 0;
  17. left: 0;
  18. z-index: 1;
  19. width: 100%;
  20. height: calc( 1.8125rem + 2px);
  21. padding: 7px 150px 7px 8px;
  22. line-height: 1.25;
  23. font-size: .875rem;
  24. font-weight: 400 !important;
  25. border-radius: .25rem;
  26. &.choice {
  27. color: #e9ecef;
  28. }
  29. &:after {
  30. content: "\e81c 浏览文件";
  31. width: 99px;
  32. display: flex;
  33. align-items: center;
  34. justify-content: center;
  35. color: $white;
  36. border-left: 1px solid $border-color;
  37. background-color: $iwb-color;
  38. position: absolute;
  39. top: -1px;
  40. right: 0;
  41. bottom: 0;
  42. z-index: 3;
  43. height: calc( 1.8125rem + 2px);
  44. font-family: "iconfont";
  45. border-radius: 0 .25rem .25rem 0;
  46. }
  47. }
  48. .iwb-file-input:lang(en) ~ .iwb-file-label::after {
  49. content: "Browse";
  50. }
  51. .clear {
  52. color: $white;
  53. border-left: 1px solid $border-color;
  54. background-color: $iwb-color;
  55. width: 35px;
  56. height: calc( 1.8125rem + 2px);
  57. cursor: pointer;
  58. position: absolute;
  59. top: 0;
  60. right: 100px;
  61. z-index: 1;
  62. display: flex;
  63. align-items: center;
  64. justify-content: center;
  65. }
  66. &.file-error {
  67. .iwb-file-label {
  68. border: 1px solid $red !important;
  69. }
  70. }
  71. &.file-success {
  72. .iwb-file-label {
  73. color: $gray-700 !important;
  74. //border: 1px solid #28a745 !important;
  75. }
  76. }
  77. }