card-list.css

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

Cards list.

File

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

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