_vbFile.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .vb-file {
  2. width: 100%;
  3. position: relative;
  4. display: inline-block;
  5. margin-bottom: 0;
  6. .vb-file-input {
  7. opacity: 0;
  8. }
  9. .vb-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: "\f093 浏览文件";
  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: $vb-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: "Font Awesome 5 Free";
  45. border-radius: 0 .25rem .25rem 0;
  46. font-weight: 900;
  47. }
  48. }
  49. .vb-file-input:lang(en) ~ .vb-file-label::after {
  50. content: "Browse";
  51. }
  52. .clean {
  53. color: $white;
  54. border-left: 1px solid $border-color;
  55. background-color: $vb-color;
  56. width: 35px;
  57. height: calc( 1.8125rem + 2px);
  58. cursor: pointer;
  59. position: absolute;
  60. top: 0;
  61. right: 100px;
  62. z-index: 1;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. }
  67. . &.file-error {
  68. .vb-file-label {
  69. border: 1px solid $red !important;
  70. }
  71. }
  72. &.file-success {
  73. .vb-file-label {
  74. color: $gray-700 !important;
  75. //border: 1px solid #28a745 !important;
  76. }
  77. }
  78. }