智慧水务管理系统 - 精河县供水工程综合管理平台

card.scss 1.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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. display: flex;
  9. flex-direction: column;
  10. border-radius: getCssVar('card', 'border-radius');
  11. border: 1px solid getCssVar('card', 'border-color');
  12. background-color: getCssVar('card', 'bg-color');
  13. overflow: hidden;
  14. color: getCssVar('text-color', 'primary');
  15. transition: getCssVar('transition-duration');
  16. @include when(always-shadow) {
  17. box-shadow: getCssVar('box-shadow', 'light');
  18. }
  19. @include when(hover-shadow) {
  20. &:hover,
  21. &:focus {
  22. box-shadow: getCssVar('box-shadow', 'light');
  23. }
  24. }
  25. @include e(header) {
  26. padding: calc(#{getCssVar('card', 'padding')} - 2px)
  27. getCssVar('card', 'padding');
  28. border-bottom: 1px solid getCssVar('card', 'border-color');
  29. box-sizing: border-box;
  30. }
  31. @include e(body) {
  32. flex-grow: 1; // #23538
  33. overflow: auto;
  34. padding: getCssVar('card', 'padding');
  35. }
  36. @include e(footer) {
  37. padding: calc(#{getCssVar('card', 'padding')} - 2px)
  38. getCssVar('card', 'padding');
  39. border-top: 1px solid getCssVar('card', 'border-color');
  40. box-sizing: border-box;
  41. }
  42. }