card.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. .vxe-card {
  2. position: relative;
  3. display: inline-flex;
  4. flex-direction: column;
  5. font-size: var(--vxe-ui-font-size-default);
  6. color: var(--vxe-ui-font-color);
  7. font-family: var(--vxe-ui-font-family);
  8. background-color: var(--vxe-ui-layout-background-color);
  9. border-radius: var(--vxe-ui-base-border-radius);
  10. &.is--shadow {
  11. box-shadow: var(--vxe-ui-base-popup-box-shadow);
  12. }
  13. &.is--border {
  14. border: 1px solid var(--vxe-ui-input-border-color);
  15. .vxe-card--header {
  16. border-bottom: 1px solid var(--vxe-ui-input-border-color);
  17. }
  18. .vxe-card--footer {
  19. border-top: 1px solid var(--vxe-ui-input-border-color);
  20. }
  21. }
  22. }
  23. .vxe-card--header,
  24. .vxe-card--body {
  25. display: flex;
  26. flex-direction: row;
  27. }
  28. .vxe-card--header {
  29. flex-shrink: 0;
  30. }
  31. .vxe-card--body {
  32. overflow: hidden;
  33. flex-grow: 1;
  34. }
  35. .vxe-card--body-left,
  36. .vxe-card--body-right,
  37. .vxe-card--body-content {
  38. overflow: auto;
  39. }
  40. .vxe-card--header,
  41. .vxe-card--header-extra,
  42. .vxe-card--footer,
  43. .vxe-card--body-left,
  44. .vxe-card--body-right {
  45. flex-shrink: 0;
  46. }
  47. .vxe-card--header-title,
  48. .vxe-card--body-content {
  49. flex-grow: 1;
  50. }
  51. .vxe-card--header-title {
  52. &.is--ellipsis {
  53. overflow: hidden;
  54. text-overflow: ellipsis;
  55. white-space: nowrap;
  56. }
  57. }
  58. .vxe-card {
  59. font-size: var(--vxe-ui-font-size-default);
  60. & > .vxe-card--header,
  61. & > .vxe-card--footer {
  62. padding: var(--vxe-ui-card-padding-default);
  63. }
  64. &.is--padding {
  65. & > .vxe-card--body {
  66. .vxe-card--body-content,
  67. .vxe-card--body-left,
  68. .vxe-card--body-right {
  69. padding: var(--vxe-ui-card-padding-default);
  70. }
  71. }
  72. }
  73. &.size--medium {
  74. font-size: var(--vxe-ui-font-size-medium);
  75. & > .vxe-card--header,
  76. & > .vxe-card--footer {
  77. padding: var(--vxe-ui-card-padding-medium);
  78. }
  79. &.is--padding {
  80. & > .vxe-card--body {
  81. .vxe-card--body-content,
  82. .vxe-card--body-left,
  83. .vxe-card--body-right {
  84. padding: var(--vxe-ui-card-padding-medium);
  85. }
  86. }
  87. }
  88. }
  89. &.size--small {
  90. font-size: var(--vxe-ui-font-size-small);
  91. & > .vxe-card--header,
  92. & > .vxe-card--footer {
  93. padding: var(--vxe-ui-card-padding-small);
  94. }
  95. &.is--padding {
  96. & > .vxe-card--body {
  97. .vxe-card--body-content,
  98. .vxe-card--body-left,
  99. .vxe-card--body-right {
  100. padding: var(--vxe-ui-card-padding-small);
  101. }
  102. }
  103. }
  104. }
  105. &.size--mini {
  106. font-size: var(--vxe-ui-font-size-mini);
  107. & > .vxe-card--header,
  108. & > .vxe-card--footer {
  109. padding: var(--vxe-ui-card-padding-mini);
  110. }
  111. &.is--padding {
  112. & > .vxe-card--body {
  113. .vxe-card--body-content,
  114. .vxe-card--body-left,
  115. .vxe-card--body-right {
  116. padding: var(--vxe-ui-card-padding-mini);
  117. }
  118. }
  119. }
  120. }
  121. }