card.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/var' as *;
  3. @use 'common/var' as *;
  4. @include b(card) {
  5. @include set-component-css-var('card', $card);
  6. }
  7. @include b(card) {
  8. border-radius: getCssVar('card', 'border-radius');
  9. border: 1px solid getCssVar('card', 'border-color');
  10. background-color: getCssVar('card', 'bg-color');
  11. overflow: hidden;
  12. color: getCssVar('text-color', 'primary');
  13. transition: getCssVar('transition-duration');
  14. @include when(always-shadow) {
  15. box-shadow: getCssVar('box-shadow', 'light');
  16. }
  17. @include when(hover-shadow) {
  18. &:hover,
  19. &:focus {
  20. box-shadow: getCssVar('box-shadow', 'light');
  21. }
  22. }
  23. @include e(header) {
  24. padding: calc(#{getCssVar('card', 'padding')} - 2px)
  25. getCssVar('card', 'padding');
  26. border-bottom: 1px solid getCssVar('card', 'border-color');
  27. box-sizing: border-box;
  28. }
  29. @include e(body) {
  30. padding: getCssVar('card', 'padding');
  31. }
  32. @include e(footer) {
  33. padding: calc(#{getCssVar('card', 'padding')} - 2px)
  34. getCssVar('card', 'padding');
  35. border-top: 1px solid getCssVar('card', 'border-color');
  36. box-sizing: border-box;
  37. }
  38. }