card.css

Same filename in this branch
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
  2. 9 core/themes/claro/css/components/card.css
  3. 10 core/profiles/demo_umami/themes/umami/components/card/card.css
  4. 10 core/themes/claro/css/components/card.css
  5. 11.x core/profiles/demo_umami/themes/umami/components/card/card.css
  6. 11.x core/themes/claro/css/components/card.css

Card.

File

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

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

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