dropzone.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // Core variables and mixins
  2. @import "../../bootstrap/functions";
  3. @import "../../bootstrap/mixins";
  4. // Core variables and mixins overrides
  5. @import "../../core/variables/variables";
  6. @import "../../bootstrap/variables";
  7. // Overrides user variable
  8. @import "../../core/variables/components-variables";
  9. .dropzone{
  10. min-height: 350px;
  11. border: 2px dashed $primary;
  12. background: $body-bg;
  13. // dropzone message customization
  14. .dz-message{
  15. font-size: 2rem;
  16. position: absolute;
  17. top: 50%;
  18. left: 0;
  19. width: 100%;
  20. height: 300px;
  21. margin-top: -30px;
  22. color: $primary;
  23. text-align: center;
  24. }
  25. // dropzone message icon
  26. .dz-message:before{
  27. content: "\e864";
  28. font-family: 'feather';
  29. font-size: 80px;
  30. position: absolute;
  31. top: 48px;
  32. width: 80px;
  33. height: 80px;
  34. display: inline-block;
  35. left: 50%;
  36. margin-left: -40px;
  37. line-height: 1;
  38. z-index: 2;
  39. color: $primary;
  40. text-indent: 0px;
  41. font-weight: normal;
  42. -webkit-font-smoothing: antialiased;
  43. }
  44. // for preview of files
  45. .dz-preview{
  46. background: transparent;
  47. .dz-error-mark,.dz-success-mark{
  48. background-image: url("../images/dropzone/spritemap.png")
  49. }
  50. .dz-error-message{
  51. min-width: 113px;
  52. top: 0;
  53. left: 0;
  54. }
  55. }
  56. // for dropzone preview and remove icon
  57. .dz-preview .dz-remove{
  58. font-size: 1.1rem;
  59. color: $danger;
  60. line-height: 2rem;
  61. &:before{
  62. content: "\e8f6";
  63. font-family: 'feather';
  64. display: inline-block;
  65. line-height: 1;
  66. z-index: 2;
  67. text-indent: 0px;
  68. font-weight: normal;
  69. -webkit-font-smoothing: antialiased;
  70. }
  71. &:hover{
  72. text-decoration: none;
  73. color: darken($danger, 10%);
  74. }
  75. }
  76. }
  77. // For Small Screen drop Logo
  78. @media(max-width: 576px){
  79. .dropzone{
  80. .dz-message{
  81. &:before{
  82. top: 7.14rem;
  83. }
  84. }
  85. }
  86. }