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/** 9 * @file 10 * Responsive styles for views grid horizontal layout. 11 */ 12 13.views-view-grid--horizontal { 14 display: flex; 15 flex-wrap: wrap 16} 17 18[dir="ltr"] .views-view-grid--horizontal.cols-1 > * { 19 margin-right: 0 20} 21 22[dir="rtl"] .views-view-grid--horizontal.cols-1 > * { 23 margin-left: 0 24} 25 26.views-view-grid--horizontal.cols-1 > * { 27 flex-basis: 100%; 28 } 29 30[dir="ltr"] .views-view-grid--horizontal.cols-2 > * { 31 margin-right: 0 32} 33 34[dir="rtl"] .views-view-grid--horizontal.cols-2 > * { 35 margin-left: 0 36} 37 38.views-view-grid--horizontal.cols-2 > * { 39 flex-basis: 100% 40 41 /* 2 column layout. */ 42 } 43 44@media (min-width: 43.75rem) { 45 46[dir="ltr"] .views-view-grid--horizontal.cols-2 > * { 47 margin-right: 1.125rem 48 } 49 50[dir="rtl"] .views-view-grid--horizontal.cols-2 > * { 51 margin-left: 1.125rem 52 } 53 54.views-view-grid--horizontal.cols-2 > * { 55 flex-basis: calc(50% - 0.5625rem) 56 } 57 58 [dir="ltr"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) { 59 margin-right: 0 60 } 61 62 [dir="rtl"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) { 63 margin-left: 0 64 } 65 } 66 67[dir="ltr"] .views-view-grid--horizontal.cols-3 > * { 68 margin-right: 0 69} 70 71[dir="rtl"] .views-view-grid--horizontal.cols-3 > * { 72 margin-left: 0 73} 74 75.views-view-grid--horizontal.cols-3 > * { 76 flex-basis: 100% 77 78 /* 2 column layout. */ 79 } 80 81@media (min-width: 43.75rem) { 82 83[dir="ltr"] .views-view-grid--horizontal.cols-3 > * { 84 margin-right: 1.125rem 85 } 86 87[dir="rtl"] .views-view-grid--horizontal.cols-3 > * { 88 margin-left: 1.125rem 89 } 90 91.views-view-grid--horizontal.cols-3 > * { 92 flex-basis: calc(50% - 0.5625rem) 93 } 94 95 [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) { 96 margin-right: 0 97 } 98 99 [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) { 100 margin-left: 0 101 } 102 } 103 104.views-view-grid--horizontal.cols-3 > * { 105 106 /* 3 column layout. */ 107 } 108 109@media (min-width: 62.5rem) { 110 111.views-view-grid--horizontal.cols-3 > * { 112 flex-basis: calc(33.33333% - 0.75rem) 113 } 114 115 [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) { 116 margin-right: 1.125rem 117 } 118 119 [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) { 120 margin-left: 1.125rem 121 } 122 123 [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) { 124 margin-right: 0 125 } 126 127 [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) { 128 margin-left: 0 129 } 130 } 131 132[dir="ltr"] .views-view-grid--horizontal.cols-4 > * { 133 margin-right: 0 134} 135 136[dir="rtl"] .views-view-grid--horizontal.cols-4 > * { 137 margin-left: 0 138} 139 140.views-view-grid--horizontal.cols-4 > * { 141 flex-basis: 100% 142 143 /* 2 column layout. */ 144 } 145 146@media (min-width: 43.75rem) { 147 148[dir="ltr"] .views-view-grid--horizontal.cols-4 > * { 149 margin-right: 1.125rem 150 } 151 152[dir="rtl"] .views-view-grid--horizontal.cols-4 > * { 153 margin-left: 1.125rem 154 } 155 156.views-view-grid--horizontal.cols-4 > * { 157 flex-basis: calc(50% - 0.5625rem) 158 } 159 160 [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) { 161 margin-right: 0 162 } 163 164 [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) { 165 margin-left: 0 166 } 167 } 168 169.views-view-grid--horizontal.cols-4 > * { 170 171 /* 4 column layout. */ 172 } 173 174@media (min-width: 62.5rem) { 175 176.views-view-grid--horizontal.cols-4 > * { 177 flex-basis: calc(25% - 0.84375rem) 178 } 179 180 [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) { 181 margin-right: 1.125rem 182 } 183 184 [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) { 185 margin-left: 1.125rem 186 } 187 188 [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) { 189 margin-right: 0 190 } 191 192 [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) { 193 margin-left: 0 194 } 195 } 196 197[dir="ltr"] .views-view-grid--horizontal.cols-5 > * { 198 margin-right: 0 199} 200 201[dir="rtl"] .views-view-grid--horizontal.cols-5 > * { 202 margin-left: 0 203} 204 205.views-view-grid--horizontal.cols-5 > * { 206 flex-basis: 100% 207 208 /* 2 column layout. */ 209 } 210 211@media (min-width: 31.25rem) { 212 213[dir="ltr"] .views-view-grid--horizontal.cols-5 > * { 214 margin-right: 1.125rem 215 } 216 217[dir="rtl"] .views-view-grid--horizontal.cols-5 > * { 218 margin-left: 1.125rem 219 } 220 221.views-view-grid--horizontal.cols-5 > * { 222 flex-basis: calc(50% - 0.5625rem) 223 } 224 225 [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) { 226 margin-right: 0 227 } 228 229 [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) { 230 margin-left: 0 231 } 232 } 233 234.views-view-grid--horizontal.cols-5 > * { 235 236 /* 3 column layout. */ 237 } 238 239@media (min-width: 43.75rem) { 240 241.views-view-grid--horizontal.cols-5 > * { 242 flex-basis: calc(33.33333% - 0.75rem) 243 } 244 245 [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) { 246 margin-right: 1.125rem 247 } 248 249 [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) { 250 margin-left: 1.125rem 251 } 252 253 [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) { 254 margin-right: 0 255 } 256 257 [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) { 258 margin-left: 0 259 } 260 } 261 262.views-view-grid--horizontal.cols-5 > * { 263 264 /* 5 column layout. */ 265 } 266 267@media (min-width: 62.5rem) { 268 269.views-view-grid--horizontal.cols-5 > * { 270 flex-basis: calc(20% - 0.9rem) 271 } 272 273 [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) { 274 margin-right: 1.125rem 275 } 276 277 [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) { 278 margin-left: 1.125rem 279 } 280 281 [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) { 282 margin-right: 0 283 } 284 285 [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) { 286 margin-left: 0 287 } 288 } 289 290[dir="ltr"] .views-view-grid--horizontal.cols-6 > * { 291 margin-right: 0 292} 293 294[dir="rtl"] .views-view-grid--horizontal.cols-6 > * { 295 margin-left: 0 296} 297 298.views-view-grid--horizontal.cols-6 > * { 299 flex-basis: 100% 300 301 /* 2 column layout. */ 302 } 303 304@media (min-width: 31.25rem) { 305 306[dir="ltr"] .views-view-grid--horizontal.cols-6 > * { 307 margin-right: 1.125rem 308 } 309 310[dir="rtl"] .views-view-grid--horizontal.cols-6 > * { 311 margin-left: 1.125rem 312 } 313 314.views-view-grid--horizontal.cols-6 > * { 315 flex-basis: calc(50% - 0.5625rem) 316 } 317 318 [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) { 319 margin-right: 0 320 } 321 322 [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) { 323 margin-left: 0 324 } 325 } 326 327.views-view-grid--horizontal.cols-6 > * { 328 329 /* 3 column layout. */ 330 } 331 332@media (min-width: 43.75rem) { 333 334.views-view-grid--horizontal.cols-6 > * { 335 flex-basis: calc(33.33333% - 0.75rem) 336 } 337 338 [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) { 339 margin-right: 1.125rem 340 } 341 342 [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) { 343 margin-left: 1.125rem 344 } 345 346 [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) { 347 margin-right: 0 348 } 349 350 [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) { 351 margin-left: 0 352 } 353 } 354 355.views-view-grid--horizontal.cols-6 > * { 356 357 /* 6 column layout. */ 358 } 359 360@media (min-width: 62.5rem) { 361 362.views-view-grid--horizontal.cols-6 > * { 363 flex-basis: calc(16.66667% - 0.9375rem) 364 } 365 366 [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) { 367 margin-right: 1.125rem 368 } 369 370 [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) { 371 margin-left: 1.125rem 372 } 373 374 [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) { 375 margin-right: 0 376 } 377 378 [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) { 379 margin-left: 0 380 } 381 } 382 383[dir="ltr"] .views-view-grid--horizontal.cols-7 > * { 384 margin-right: 0 385} 386 387[dir="rtl"] .views-view-grid--horizontal.cols-7 > * { 388 margin-left: 0 389} 390 391.views-view-grid--horizontal.cols-7 > * { 392 flex-basis: 100% 393 394 /* 2 column layout. */ 395 } 396 397@media (min-width: 31.25rem) { 398 399[dir="ltr"] .views-view-grid--horizontal.cols-7 > * { 400 margin-right: 1.125rem 401 } 402 403[dir="rtl"] .views-view-grid--horizontal.cols-7 > * { 404 margin-left: 1.125rem 405 } 406 407.views-view-grid--horizontal.cols-7 > * { 408 flex-basis: calc(50% - 0.5625rem) 409 } 410 411 [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) { 412 margin-right: 0 413 } 414 415 [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) { 416 margin-left: 0 417 } 418 } 419 420.views-view-grid--horizontal.cols-7 > * { 421 422 /* 3 column layout. */ 423 } 424 425@media (min-width: 43.75rem) { 426 427.views-view-grid--horizontal.cols-7 > * { 428 flex-basis: calc(33.33333% - 0.75rem) 429 } 430 431 [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) { 432 margin-right: 1.125rem 433 } 434 435 [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) { 436 margin-left: 1.125rem 437 } 438 439 [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) { 440 margin-right: 0 441 } 442 443 [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) { 444 margin-left: 0 445 } 446 } 447 448.views-view-grid--horizontal.cols-7 > * { 449 450 /* 7 column layout. */ 451 } 452 453@media (min-width: 62.5rem) { 454 455.views-view-grid--horizontal.cols-7 > * { 456 flex-basis: calc(14.28571% - 0.96429rem) 457 } 458 459 [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) { 460 margin-right: 1.125rem 461 } 462 463 [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) { 464 margin-left: 1.125rem 465 } 466 467 [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) { 468 margin-right: 0 469 } 470 471 [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) { 472 margin-left: 0 473 } 474 } 475 476[dir="ltr"] .views-view-grid--horizontal.cols-8 > * { 477 margin-right: 0 478} 479 480[dir="rtl"] .views-view-grid--horizontal.cols-8 > * { 481 margin-left: 0 482} 483 484.views-view-grid--horizontal.cols-8 > * { 485 flex-basis: 100% 486 487 /* 2 column layout. */ 488 } 489 490@media (min-width: 31.25rem) { 491 492[dir="ltr"] .views-view-grid--horizontal.cols-8 > * { 493 margin-right: 1.125rem 494 } 495 496[dir="rtl"] .views-view-grid--horizontal.cols-8 > * { 497 margin-left: 1.125rem 498 } 499 500.views-view-grid--horizontal.cols-8 > * { 501 flex-basis: calc(50% - 0.5625rem) 502 } 503 504 [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) { 505 margin-right: 0 506 } 507 508 [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) { 509 margin-left: 0 510 } 511 } 512 513.views-view-grid--horizontal.cols-8 > * { 514 515 /* 4 column layout. */ 516 } 517 518@media (min-width: 43.75rem) { 519 520.views-view-grid--horizontal.cols-8 > * { 521 flex-basis: calc(25% - 0.84375rem) 522 } 523 524 [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) { 525 margin-right: 1.125rem 526 } 527 528 [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) { 529 margin-left: 1.125rem 530 } 531 532 [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) { 533 margin-right: 0 534 } 535 536 [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) { 537 margin-left: 0 538 } 539 } 540 541.views-view-grid--horizontal.cols-8 > * { 542 543 /* 8 column layout. */ 544 } 545 546@media (min-width: 62.5rem) { 547 548.views-view-grid--horizontal.cols-8 > * { 549 flex-basis: calc(12.5% - 0.98438rem) 550 } 551 552 [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) { 553 margin-right: 1.125rem 554 } 555 556 [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) { 557 margin-left: 1.125rem 558 } 559 560 [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) { 561 margin-right: 0 562 } 563 564 [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) { 565 margin-left: 0 566 } 567 } 568 569.views-view-grid--horizontal > * { 570 flex-grow: 0; 571 flex-shrink: 0; 572 margin-bottom: 1.125rem; 573 } 574