layout-builder-twocol-section.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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 two-column layout section.
  10. */
  11. .layout--twocol-section {
  12. display: flex;
  13. flex-wrap: wrap;
  14. }
  15. .layout--twocol-section > .layout__region {
  16. flex: 1 0 100%;
  17. margin-bottom: 1.125rem;
  18. }
  19. @media (min-width: 43.75rem) {
  20. .layout--twocol-section > .layout__region {
  21. flex-grow: 0;
  22. flex-shrink: 0;
  23. margin-bottom: 0;
  24. }
  25. }
  26. @media (min-width: 43.75rem) {
  27. [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
  28. margin-right: 1.125rem;
  29. }
  30. [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
  31. margin-left: 1.125rem;
  32. }
  33. .layout--twocol-section--50-50 > .layout__region--first {
  34. flex-basis: calc(50% - 1.125rem);
  35. }
  36. [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
  37. margin-left: 1.125rem;
  38. }
  39. [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
  40. margin-right: 1.125rem;
  41. }
  42. .layout--twocol-section--50-50 > .layout__region--second {
  43. flex-basis: calc(50% - 1.125rem);
  44. }
  45. [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
  46. margin-right: 0.74993rem;
  47. }
  48. [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
  49. margin-left: 0.74993rem;
  50. }
  51. .layout--twocol-section--33-67 > .layout__region--first {
  52. flex-basis: calc(33.33% - 0.74993rem);
  53. }
  54. [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
  55. margin-left: 1.49985rem;
  56. }
  57. [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
  58. margin-right: 1.49985rem;
  59. }
  60. .layout--twocol-section--33-67 > .layout__region--second {
  61. flex-basis: calc(66.66% - 1.49985rem);
  62. }
  63. [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
  64. margin-right: 1.49985rem;
  65. }
  66. [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
  67. margin-left: 1.49985rem;
  68. }
  69. .layout--twocol-section--67-33 > .layout__region--first {
  70. flex-basis: calc(66.66% - 1.49985rem);
  71. }
  72. [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
  73. margin-left: 0.74993rem;
  74. }
  75. [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
  76. margin-right: 0.74993rem;
  77. }
  78. .layout--twocol-section--67-33 > .layout__region--second {
  79. flex-basis: calc(33.33% - 0.74993rem);
  80. }
  81. [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
  82. margin-right: 0.5625rem;
  83. }
  84. [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
  85. margin-left: 0.5625rem;
  86. }
  87. .layout--twocol-section--25-75 > .layout__region--first {
  88. flex-basis: calc(25% - 0.5625rem);
  89. }
  90. [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
  91. margin-left: 1.6875rem;
  92. }
  93. [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
  94. margin-right: 1.6875rem;
  95. }
  96. .layout--twocol-section--25-75 > .layout__region--second {
  97. flex-basis: calc(75% - 1.6875rem);
  98. }
  99. [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
  100. margin-right: 1.6875rem;
  101. }
  102. [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
  103. margin-left: 1.6875rem;
  104. }
  105. .layout--twocol-section--75-25 > .layout__region--first {
  106. flex-basis: calc(75% - 1.6875rem);
  107. }
  108. [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
  109. margin-left: 0.5625rem;
  110. }
  111. [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
  112. margin-right: 0.5625rem;
  113. }
  114. .layout--twocol-section--75-25 > .layout__region--second {
  115. flex-basis: calc(25% - 0.5625rem);
  116. }
  117. }