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