card-list.pcss.css

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

Cards list.

File

core/themes/claro/css/layout/card-list.pcss.css

View source
  1. /**
  2. * @file
  3. * Cards list.
  4. */
  5. @import "../base/variables.pcss.css";
  6. :root {
  7. --card-list-spacing: var(--space-m);
  8. /* Using 100% as base causes issues in IE11. */
  9. --cards-two-cols-width: calc(((99.9% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
  10. --cards-three-cols-width: calc(((99.9% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
  11. --cards-four-cols-width: calc(((99.9% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
  12. }
  13. .card-list {
  14. display: flex;
  15. flex-direction: column;
  16. }
  17. .card-list--two-cols,
  18. .card-list--four-cols {
  19. flex-direction: row;
  20. flex-wrap: wrap;
  21. align-items: stretch;
  22. justify-content: flex-start;
  23. }
  24. .card-list__item {
  25. box-sizing: border-box;
  26. margin-bottom: var(--card-list-spacing);
  27. }
  28. .card-list--two-cols .card-list__item,
  29. .card-list--four-cols .card-list__item {
  30. flex-basis: 100%;
  31. }
  32. /* 36.75rem theme screenshot width */
  33. @media screen and (min-width: 36.75rem) {
  34. .card-list--four-cols .card-list__item {
  35. flex-basis: var(--cards-two-cols-width);
  36. max-width: var(--cards-two-cols-width);
  37. }
  38. .card-list--four-cols .card-list__item {
  39. margin-right: var(--card-list-spacing);
  40. }
  41. [dir="rtl"] .card-list--four-cols .card-list__item {
  42. margin-right: 0;
  43. margin-left: var(--card-list-spacing);
  44. }
  45. .card-list--four-cols .card-list__item:nth-child(even) {
  46. margin-right: 0;
  47. }
  48. [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
  49. margin-right: 0;
  50. margin-left: 0;
  51. }
  52. }
  53. /* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
  54. @media screen and (max-width: 53.75rem) {
  55. .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
  56. flex-basis: 100%;
  57. max-width: 100%;
  58. margin-right: 0;
  59. margin-left: 0;
  60. }
  61. }
  62. @media screen and (min-width: 70rem) {
  63. .card-list--four-cols .card-list__item {
  64. flex-basis: var(--cards-three-cols-width);
  65. max-width: var(--cards-three-cols-width);
  66. }
  67. .card-list--four-cols .card-list__item:nth-child(even) {
  68. margin-right: var(--card-list-spacing);
  69. }
  70. [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
  71. margin-right: 0;
  72. margin-left: var(--card-list-spacing);
  73. }
  74. .card-list--four-cols .card-list__item:nth-child(3n) {
  75. margin-right: 0;
  76. }
  77. [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
  78. margin-right: 0;
  79. margin-left: 0;
  80. }
  81. }
  82. @media screen and (min-width: 85.375rem) {
  83. .card-list--two-cols .card-list__item {
  84. flex-basis: var(--cards-two-cols-width);
  85. max-width: var(--cards-two-cols-width);
  86. margin-right: var(--card-list-spacing);
  87. }
  88. [dir="rtl"] .card-list--two-cols .card-list__item {
  89. margin-right: 0;
  90. margin-left: var(--card-list-spacing);
  91. }
  92. .card-list--two-cols .card-list__item:nth-child(even) {
  93. margin-right: 0;
  94. }
  95. [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
  96. margin-right: 0;
  97. margin-left: 0;
  98. }
  99. .card-list--four-cols .card-list__item {
  100. flex-basis: var(--cards-four-cols-width);
  101. max-width: var(--cards-four-cols-width);
  102. }
  103. .card-list--four-cols .card-list__item:nth-child(even) {
  104. margin-right: var(--card-list-spacing);
  105. }
  106. [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
  107. margin-right: 0;
  108. margin-left: var(--card-list-spacing);
  109. }
  110. .card-list--four-cols .card-list__item:nth-child(3n) {
  111. margin-right: var(--card-list-spacing);
  112. }
  113. [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
  114. margin-right: 0;
  115. margin-left: var(--card-list-spacing);
  116. }
  117. .card-list--four-cols .card-list__item:nth-child(4n) {
  118. margin-right: 0;
  119. }
  120. [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
  121. margin-right: 0;
  122. margin-left: 0;
  123. }
  124. }

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