8
0

result.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/var' as *;
  3. @use 'common/var' as *;
  4. @include b(result) {
  5. @include set-component-css-var('result', $result);
  6. }
  7. @include b(result) {
  8. display: flex;
  9. justify-content: center;
  10. align-items: center;
  11. flex-direction: column;
  12. text-align: center;
  13. box-sizing: border-box;
  14. padding: getCssVar('result-padding');
  15. @include e(icon) {
  16. svg {
  17. width: getCssVar('result-icon-font-size');
  18. height: getCssVar('result-icon-font-size');
  19. }
  20. }
  21. @include e(title) {
  22. margin-top: getCssVar('result-title-margin-top');
  23. p {
  24. margin: 0;
  25. font-size: getCssVar('result-title-font-size');
  26. color: getCssVar('text-color', 'primary');
  27. line-height: 1.3;
  28. }
  29. }
  30. @include e(subtitle) {
  31. margin-top: getCssVar('result-subtitle-margin-top');
  32. p {
  33. margin: 0;
  34. font-size: getCssVar('font-size', 'base');
  35. color: getCssVar('text-color', 'regular');
  36. line-height: 1.3;
  37. }
  38. }
  39. @include e(extra) {
  40. margin-top: getCssVar('result-extra-margin-top');
  41. }
  42. @each $type in $types {
  43. .icon-#{$type} {
  44. @include css-var-from-global(('result', 'color'), ('color', $type));
  45. color: getCssVar('result-color');
  46. }
  47. }
  48. }