image.scss 881 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. @use 'mixins/mixins' as *;
  2. @use 'common/var' as *;
  3. %size {
  4. width: 100%;
  5. height: 100%;
  6. }
  7. @include b(image) {
  8. position: relative;
  9. display: inline-block;
  10. overflow: hidden;
  11. @include e(inner) {
  12. @extend %size !optional;
  13. vertical-align: top;
  14. opacity: 1;
  15. @include when(loading) {
  16. opacity: 0;
  17. }
  18. }
  19. @include e(wrapper) {
  20. @extend %size !optional;
  21. position: absolute;
  22. top: 0;
  23. left: 0;
  24. }
  25. @include e(placeholder) {
  26. @extend %size !optional;
  27. background: getCssVar('fill-color', 'light');
  28. }
  29. @include e(error) {
  30. @extend %size !optional;
  31. display: flex;
  32. justify-content: center;
  33. align-items: center;
  34. font-size: 14px;
  35. background: getCssVar('fill-color', 'light');
  36. color: getCssVar('text-color', 'placeholder');
  37. vertical-align: middle;
  38. }
  39. @include e(preview) {
  40. cursor: pointer;
  41. }
  42. }