layout-builder-fourcol-section.css 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. * Provides the layout styles for four-column layout section.
  10. */
  11. .layout--fourcol-section {
  12. display: flex;
  13. flex-wrap: wrap;
  14. }
  15. .layout--fourcol-section > .layout__region {
  16. flex: 1 0 100%;
  17. margin-bottom: 1.125rem;
  18. }
  19. @media (min-width: 43.75rem) {
  20. .layout--fourcol-section > .layout__region {
  21. flex-basis: calc(50% - 1.125rem);
  22. flex-grow: 0;
  23. flex-shrink: 0;
  24. margin-bottom: 0;
  25. }
  26. }
  27. /* Two column layout. */
  28. @media (min-width: 43.75rem) {
  29. .layout--fourcol-section > .layout__region--first,
  30. .layout--fourcol-section > .layout__region--second {
  31. margin-bottom: 2.25rem;
  32. }
  33. [dir="ltr"] .layout--fourcol-section > .layout__region--first,
  34. [dir="ltr"] .layout--fourcol-section > .layout__region--third {
  35. margin-right: 1.125rem;
  36. }
  37. [dir="rtl"] .layout--fourcol-section > .layout__region--first,
  38. [dir="rtl"] .layout--fourcol-section > .layout__region--third {
  39. margin-left: 1.125rem;
  40. }
  41. [dir="ltr"] .layout--fourcol-section > .layout__region--second,
  42. [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
  43. margin-left: 1.125rem;
  44. }
  45. [dir="rtl"] .layout--fourcol-section > .layout__region--second,
  46. [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
  47. margin-right: 1.125rem;
  48. }
  49. }
  50. /* Four column layout. */
  51. @media (min-width: 62.5rem) {
  52. .layout--fourcol-section > .layout__region {
  53. flex-basis: calc(25% - 1.6875rem);
  54. }
  55. .layout--fourcol-section > .layout__region--first,
  56. .layout--fourcol-section > .layout__region--second {
  57. margin-bottom: 0;
  58. }
  59. [dir="ltr"] .layout--fourcol-section > .layout__region--first {
  60. margin-right: 1.125rem;
  61. }
  62. [dir="rtl"] .layout--fourcol-section > .layout__region--first {
  63. margin-left: 1.125rem;
  64. }
  65. .layout--fourcol-section > .layout__region--second,
  66. .layout--fourcol-section > .layout__region--third {
  67. margin-right: 1.125rem;
  68. margin-left: 1.125rem;
  69. }
  70. [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
  71. margin-left: 1.125rem;
  72. }
  73. [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
  74. margin-right: 1.125rem;
  75. }
  76. }