layout-views-grid-horizontal.css

Responsive styles for views grid horizontal layout.

File

core/themes/olivero/css/layout/layout-views-grid-horizontal.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. /**

  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. /* 3 column layout. */

  105. 

  106. @media (min-width: 62.5rem) {

  107. 

  108.   .views-view-grid--horizontal.cols-3 > * {

  109.     flex-basis: calc(33.33333% - 0.75rem);

  110.   }

  111. 

  112.   [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {

  113.     margin-right: 1.125rem;

  114.   }

  115. 

  116.   [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {

  117.     margin-left: 1.125rem;

  118.   }

  119. 

  120.   [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {

  121.     margin-right: 0;

  122.   }

  123. 

  124.   [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {

  125.     margin-left: 0;

  126.   }

  127. }

  128. 

  129. [dir="ltr"] .views-view-grid--horizontal.cols-4 > * {

  130.   margin-right: 0;

  131. }

  132. 

  133. [dir="rtl"] .views-view-grid--horizontal.cols-4 > * {

  134.   margin-left: 0;

  135. }

  136. 

  137. .views-view-grid--horizontal.cols-4 > * {

  138.   flex-basis: 100%;

  139. 

  140.   /* 2 column layout. */

  141. }

  142. 

  143. @media (min-width: 43.75rem) {

  144. 

  145.   [dir="ltr"] .views-view-grid--horizontal.cols-4 > * {

  146.     margin-right: 1.125rem;

  147.   }

  148. 

  149.   [dir="rtl"] .views-view-grid--horizontal.cols-4 > * {

  150.     margin-left: 1.125rem;

  151.   }

  152. 

  153.   .views-view-grid--horizontal.cols-4 > * {

  154.     flex-basis: calc(50% - 0.5625rem);

  155.   }

  156. 

  157.   [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {

  158.     margin-right: 0;

  159.   }

  160. 

  161.   [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {

  162.     margin-left: 0;

  163.   }

  164. }

  165. 

  166. /* 4 column layout. */

  167. 

  168. @media (min-width: 62.5rem) {

  169. 

  170.   .views-view-grid--horizontal.cols-4 > * {

  171.     flex-basis: calc(25% - 0.84375rem);

  172.   }

  173. 

  174.   [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {

  175.     margin-right: 1.125rem;

  176.   }

  177. 

  178.   [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {

  179.     margin-left: 1.125rem;

  180.   }

  181. 

  182.   [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {

  183.     margin-right: 0;

  184.   }

  185. 

  186.   [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {

  187.     margin-left: 0;

  188.   }

  189. }

  190. 

  191. [dir="ltr"] .views-view-grid--horizontal.cols-5 > * {

  192.   margin-right: 0;

  193. }

  194. 

  195. [dir="rtl"] .views-view-grid--horizontal.cols-5 > * {

  196.   margin-left: 0;

  197. }

  198. 

  199. .views-view-grid--horizontal.cols-5 > * {

  200.   flex-basis: 100%;

  201. 

  202.   /* 2 column layout. */

  203. }

  204. 

  205. @media (min-width: 31.25rem) {

  206. 

  207.   [dir="ltr"] .views-view-grid--horizontal.cols-5 > * {

  208.     margin-right: 1.125rem;

  209.   }

  210. 

  211.   [dir="rtl"] .views-view-grid--horizontal.cols-5 > * {

  212.     margin-left: 1.125rem;

  213.   }

  214. 

  215.   .views-view-grid--horizontal.cols-5 > * {

  216.     flex-basis: calc(50% - 0.5625rem);

  217.   }

  218. 

  219.   [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {

  220.     margin-right: 0;

  221.   }

  222. 

  223.   [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {

  224.     margin-left: 0;

  225.   }

  226. }

  227. 

  228. /* 3 column layout. */

  229. 

  230. @media (min-width: 43.75rem) {

  231. 

  232.   .views-view-grid--horizontal.cols-5 > * {

  233.     flex-basis: calc(33.33333% - 0.75rem);

  234.   }

  235. 

  236.   [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {

  237.     margin-right: 1.125rem;

  238.   }

  239. 

  240.   [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {

  241.     margin-left: 1.125rem;

  242.   }

  243. 

  244.   [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {

  245.     margin-right: 0;

  246.   }

  247. 

  248.   [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {

  249.     margin-left: 0;

  250.   }

  251. }

  252. 

  253. /* 5 column layout. */

  254. 

  255. @media (min-width: 62.5rem) {

  256. 

  257.   .views-view-grid--horizontal.cols-5 > * {

  258.     flex-basis: calc(20% - 0.9rem);

  259.   }

  260. 

  261.   [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {

  262.     margin-right: 1.125rem;

  263.   }

  264. 

  265.   [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {

  266.     margin-left: 1.125rem;

  267.   }

  268. 

  269.   [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {

  270.     margin-right: 0;

  271.   }

  272. 

  273.   [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {

  274.     margin-left: 0;

  275.   }

  276. }

  277. 

  278. [dir="ltr"] .views-view-grid--horizontal.cols-6 > * {

  279.   margin-right: 0;

  280. }

  281. 

  282. [dir="rtl"] .views-view-grid--horizontal.cols-6 > * {

  283.   margin-left: 0;

  284. }

  285. 

  286. .views-view-grid--horizontal.cols-6 > * {

  287.   flex-basis: 100%;

  288. 

  289.   /* 2 column layout. */

  290. }

  291. 

  292. @media (min-width: 31.25rem) {

  293. 

  294.   [dir="ltr"] .views-view-grid--horizontal.cols-6 > * {

  295.     margin-right: 1.125rem;

  296.   }

  297. 

  298.   [dir="rtl"] .views-view-grid--horizontal.cols-6 > * {

  299.     margin-left: 1.125rem;

  300.   }

  301. 

  302.   .views-view-grid--horizontal.cols-6 > * {

  303.     flex-basis: calc(50% - 0.5625rem);

  304.   }

  305. 

  306.   [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {

  307.     margin-right: 0;

  308.   }

  309. 

  310.   [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {

  311.     margin-left: 0;

  312.   }

  313. }

  314. 

  315. /* 3 column layout. */

  316. 

  317. @media (min-width: 43.75rem) {

  318. 

  319.   .views-view-grid--horizontal.cols-6 > * {

  320.     flex-basis: calc(33.33333% - 0.75rem);

  321.   }

  322. 

  323.   [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {

  324.     margin-right: 1.125rem;

  325.   }

  326. 

  327.   [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {

  328.     margin-left: 1.125rem;

  329.   }

  330. 

  331.   [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {

  332.     margin-right: 0;

  333.   }

  334. 

  335.   [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {

  336.     margin-left: 0;

  337.   }

  338. }

  339. 

  340. /* 6 column layout. */

  341. 

  342. @media (min-width: 62.5rem) {

  343. 

  344.   .views-view-grid--horizontal.cols-6 > * {

  345.     flex-basis: calc(16.66667% - 0.9375rem);

  346.   }

  347. 

  348.   [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {

  349.     margin-right: 1.125rem;

  350.   }

  351. 

  352.   [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {

  353.     margin-left: 1.125rem;

  354.   }

  355. 

  356.   [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {

  357.     margin-right: 0;

  358.   }

  359. 

  360.   [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {

  361.     margin-left: 0;

  362.   }

  363. }

  364. 

  365. [dir="ltr"] .views-view-grid--horizontal.cols-7 > * {

  366.   margin-right: 0;

  367. }

  368. 

  369. [dir="rtl"] .views-view-grid--horizontal.cols-7 > * {

  370.   margin-left: 0;

  371. }

  372. 

  373. .views-view-grid--horizontal.cols-7 > * {

  374.   flex-basis: 100%;

  375. 

  376.   /* 2 column layout. */

  377. }

  378. 

  379. @media (min-width: 31.25rem) {

  380. 

  381.   [dir="ltr"] .views-view-grid--horizontal.cols-7 > * {

  382.     margin-right: 1.125rem;

  383.   }

  384. 

  385.   [dir="rtl"] .views-view-grid--horizontal.cols-7 > * {

  386.     margin-left: 1.125rem;

  387.   }

  388. 

  389.   .views-view-grid--horizontal.cols-7 > * {

  390.     flex-basis: calc(50% - 0.5625rem);

  391.   }

  392. 

  393.   [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {

  394.     margin-right: 0;

  395.   }

  396. 

  397.   [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {

  398.     margin-left: 0;

  399.   }

  400. }

  401. 

  402. /* 3 column layout. */

  403. 

  404. @media (min-width: 43.75rem) {

  405. 

  406.   .views-view-grid--horizontal.cols-7 > * {

  407.     flex-basis: calc(33.33333% - 0.75rem);

  408.   }

  409. 

  410.   [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {

  411.     margin-right: 1.125rem;

  412.   }

  413. 

  414.   [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {

  415.     margin-left: 1.125rem;

  416.   }

  417. 

  418.   [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {

  419.     margin-right: 0;

  420.   }

  421. 

  422.   [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {

  423.     margin-left: 0;

  424.   }

  425. }

  426. 

  427. /* 7 column layout. */

  428. 

  429. @media (min-width: 62.5rem) {

  430. 

  431.   .views-view-grid--horizontal.cols-7 > * {

  432.     flex-basis: calc(14.28571% - 0.96429rem);

  433.   }

  434. 

  435.   [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {

  436.     margin-right: 1.125rem;

  437.   }

  438. 

  439.   [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {

  440.     margin-left: 1.125rem;

  441.   }

  442. 

  443.   [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {

  444.     margin-right: 0;

  445.   }

  446. 

  447.   [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {

  448.     margin-left: 0;

  449.   }

  450. }

  451. 

  452. [dir="ltr"] .views-view-grid--horizontal.cols-8 > * {

  453.   margin-right: 0;

  454. }

  455. 

  456. [dir="rtl"] .views-view-grid--horizontal.cols-8 > * {

  457.   margin-left: 0;

  458. }

  459. 

  460. .views-view-grid--horizontal.cols-8 > * {

  461.   flex-basis: 100%;

  462. 

  463.   /* 2 column layout. */

  464. }

  465. 

  466. @media (min-width: 31.25rem) {

  467. 

  468.   [dir="ltr"] .views-view-grid--horizontal.cols-8 > * {

  469.     margin-right: 1.125rem;

  470.   }

  471. 

  472.   [dir="rtl"] .views-view-grid--horizontal.cols-8 > * {

  473.     margin-left: 1.125rem;

  474.   }

  475. 

  476.   .views-view-grid--horizontal.cols-8 > * {

  477.     flex-basis: calc(50% - 0.5625rem);

  478.   }

  479. 

  480.   [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {

  481.     margin-right: 0;

  482.   }

  483. 

  484.   [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {

  485.     margin-left: 0;

  486.   }

  487. }

  488. 

  489. /* 4 column layout. */

  490. 

  491. @media (min-width: 43.75rem) {

  492. 

  493.   .views-view-grid--horizontal.cols-8 > * {

  494.     flex-basis: calc(25% - 0.84375rem);

  495.   }

  496. 

  497.   [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {

  498.     margin-right: 1.125rem;

  499.   }

  500. 

  501.   [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {

  502.     margin-left: 1.125rem;

  503.   }

  504. 

  505.   [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {

  506.     margin-right: 0;

  507.   }

  508. 

  509.   [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {

  510.     margin-left: 0;

  511.   }

  512. }

  513. 

  514. /* 8 column layout. */

  515. 

  516. @media (min-width: 62.5rem) {

  517. 

  518.   .views-view-grid--horizontal.cols-8 > * {

  519.     flex-basis: calc(12.5% - 0.98438rem);

  520.   }

  521. 

  522.   [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {

  523.     margin-right: 1.125rem;

  524.   }

  525. 

  526.   [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {

  527.     margin-left: 1.125rem;

  528.   }

  529. 

  530.   [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {

  531.     margin-right: 0;

  532.   }

  533. 

  534.   [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {

  535.     margin-left: 0;

  536.   }

  537. }

  538. 

  539. .views-view-grid--horizontal > * {

  540.   flex-grow: 0;

  541.   flex-shrink: 0;

  542.   margin-bottom: 1.125rem;

  543. }

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