card.pcss.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/card.pcss.css
  2. 10 core/themes/claro/css/components/card.pcss.css
  3. 11.x core/themes/claro/css/components/card.pcss.css

Card.

File

core/themes/claro/css/components/card.pcss.css

View source
  1. /**
  2. * @file
  3. * Card.
  4. */
  5. @import "../base/variables.pcss.css";
  6. :root {
  7. --card-bg-color: var(--color-white);
  8. --card-border-size: 1px;
  9. --card-border-color: var(--color-gray-200-o-80);
  10. --card-border-radius-size: var(--base-border-radius);
  11. --card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
  12. --card-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  13. }
  14. .card {
  15. display: flex;
  16. flex-direction: column;
  17. align-items: stretch;
  18. justify-items: flex-start;
  19. padding: 0;
  20. border: var(--card-border-size) solid var(--card-border-color);
  21. border-radius: var(--card-border-radius-size);
  22. background-color: var(--card-bg-color);
  23. box-shadow: var(--card-box-shadow);
  24. }
  25. /* 588px theme screenshot width */
  26. @media screen and (min-width: 36.75rem) {
  27. .card--horizontal {
  28. flex-direction: row;
  29. }
  30. .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
  31. flex-direction: column;
  32. }
  33. }
  34. /* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
  35. @media screen and (min-width: 53.75rem) {
  36. .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
  37. flex-direction: row;
  38. }
  39. }
  40. /**
  41. * Card image.
  42. */
  43. .card__image {
  44. overflow: hidden;
  45. border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
  46. line-height: 0;
  47. }
  48. @media screen and (min-width: 36.75rem) {
  49. .card--horizontal .card__image {
  50. flex-basis: 35%;
  51. border-radius: var(--card-image-border-radius-size) 0 0 var(--card-image-border-radius-size); /* LTR */
  52. }
  53. [dir="rtl"] .card--horizontal .card__image {
  54. border-radius: 0 var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0;
  55. }
  56. }
  57. /* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
  58. @media screen and (max-width: 53.75rem) {
  59. .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
  60. flex-basis: auto;
  61. }
  62. }
  63. @media screen and (min-width: 85.375rem) {
  64. .card--horizontal .card__image {
  65. flex-basis: 45%;
  66. }
  67. /* .card--vertical .card__image {
  68. flex-basis: auto;
  69. } */
  70. }
  71. /**
  72. * Card content.
  73. */
  74. .card__content-wrapper {
  75. display: flex;
  76. flex-direction: column;
  77. flex-grow: 1;
  78. flex-shrink: 0;
  79. box-sizing: border-box;
  80. padding: var(--space-l);
  81. }
  82. @media screen and (min-width: 36.75rem) {
  83. .card--horizontal .card__content-wrapper {
  84. flex-basis: 65%;
  85. }
  86. /* Card content with image. */
  87. .card--horizontal .card__image ~ .card__content-wrapper {
  88. padding-left: var(--space-m);
  89. }
  90. [dir="rtl"] .card--horizontal .card__image ~ .card__content-wrapper {
  91. padding-right: var(--space-m);
  92. padding-left: var(--space-l);
  93. }
  94. }
  95. @media screen and (max-width: 53.75rem) {
  96. .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
  97. flex-basis: auto;
  98. }
  99. }
  100. @media screen and (min-width: 85.375rem) {
  101. .card--horizontal .card__content-wrapper {
  102. flex-basis: 55%;
  103. }
  104. }
  105. /**
  106. * Card content.
  107. */
  108. .card__content {
  109. flex-grow: 1;
  110. }
  111. /**
  112. * Card content items (title, description).
  113. */
  114. .card__content-item {
  115. margin-top: 0;
  116. margin-bottom: var(--space-m);
  117. }
  118. .card__content-item:last-child {
  119. margin-bottom: 0;
  120. }
  121. /**
  122. * Card footer.
  123. */
  124. .card__footer {
  125. /**
  126. * Without specifying flex-shrink, IE11 will increase footer height if an
  127. * interactive element inside is hovered or focused.
  128. */
  129. flex-shrink: 0;
  130. order: 100;
  131. margin-top: var(--space-l);
  132. }
  133. .card__footer .action-links,
  134. [dir="rtl"] .card__footer .action-links {
  135. margin-top: 0;
  136. margin-bottom: 0;
  137. text-align: right; /* LTR */
  138. }
  139. [dir="rtl"] .card__footer .action-links {
  140. text-align: left;
  141. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.