layout-builder-twocol-section.css

Same filename in other branches
  1. 10 core/themes/olivero/css/layout/layout-builder-twocol-section.css
  2. 11.x core/themes/olivero/css/layout/layout-builder-twocol-section.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
}

.layout--twocol-section > .layout__region {
  flex: 1 0 100%;
  margin-bottom: 1.125rem;
}

@media (min-width: 43.75rem) {

  .layout--twocol-section > .layout__region {
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 43.75rem) {
  [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
    margin-right: 1.125rem;
  }
  [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
    margin-left: 1.125rem;
  }
  .layout--twocol-section--50-50 > .layout__region--first {
    flex-basis: calc(50% - 1.125rem);
  }

  [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
    margin-left: 1.125rem;
  }

  [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
    margin-right: 1.125rem;
  }

  .layout--twocol-section--50-50 > .layout__region--second {
    flex-basis: calc(50% - 1.125rem);
  }
  [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
    margin-right: 0.74993rem;
  }
  [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
    margin-left: 0.74993rem;
  }
  .layout--twocol-section--33-67 > .layout__region--first {
    flex-basis: calc(33.33% - 0.74993rem);
  }

  [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
    margin-left: 1.49985rem;
  }

  [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
    margin-right: 1.49985rem;
  }

  .layout--twocol-section--33-67 > .layout__region--second {
    flex-basis: calc(66.66% - 1.49985rem);
  }
  [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
    margin-right: 1.49985rem;
  }
  [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
    margin-left: 1.49985rem;
  }
  .layout--twocol-section--67-33 > .layout__region--first {
    flex-basis: calc(66.66% - 1.49985rem);
  }

  [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
    margin-left: 0.74993rem;
  }

  [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
    margin-right: 0.74993rem;
  }

  .layout--twocol-section--67-33 > .layout__region--second {
    flex-basis: calc(33.33% - 0.74993rem);
  }
  [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
    margin-right: 0.5625rem;
  }
  [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
    margin-left: 0.5625rem;
  }
  .layout--twocol-section--25-75 > .layout__region--first {
    flex-basis: calc(25% - 0.5625rem);
  }

  [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
    margin-left: 1.6875rem;
  }

  [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
    margin-right: 1.6875rem;
  }

  .layout--twocol-section--25-75 > .layout__region--second {
    flex-basis: calc(75% - 1.6875rem);
  }
  [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
    margin-right: 1.6875rem;
  }
  [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
    margin-left: 1.6875rem;
  }
  .layout--twocol-section--75-25 > .layout__region--first {
    flex-basis: calc(75% - 1.6875rem);
  }

  [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
    margin-left: 0.5625rem;
  }

  [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
    margin-right: 0.5625rem;
  }

  .layout--twocol-section--75-25 > .layout__region--second {
    flex-basis: calc(25% - 0.5625rem);
  }
}

File

core/themes/olivero/css/layout/layout-builder-twocol-section.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.  * Provides the layout styles for two-column layout section.

  11.  */

  12. 

  13. .layout--twocol-section {

  14.   display: flex;

  15.   flex-wrap: wrap;

  16. }

  17. 

  18. .layout--twocol-section > .layout__region {

  19.   flex: 1 0 100%;

  20.   margin-bottom: 1.125rem;

  21. }

  22. 

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

  24. 

  25.   .layout--twocol-section > .layout__region {

  26.     flex-grow: 0;

  27.     flex-shrink: 0;

  28.     margin-bottom: 0;

  29.   }

  30. }

  31. 

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

  33.   [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {

  34.     margin-right: 1.125rem;

  35.   }

  36.   [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {

  37.     margin-left: 1.125rem;

  38.   }

  39.   .layout--twocol-section--50-50 > .layout__region--first {

  40.     flex-basis: calc(50% - 1.125rem);

  41.   }

  42. 

  43.   [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {

  44.     margin-left: 1.125rem;

  45.   }

  46. 

  47.   [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {

  48.     margin-right: 1.125rem;

  49.   }

  50. 

  51.   .layout--twocol-section--50-50 > .layout__region--second {

  52.     flex-basis: calc(50% - 1.125rem);

  53.   }

  54.   [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {

  55.     margin-right: 0.74993rem;

  56.   }

  57.   [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {

  58.     margin-left: 0.74993rem;

  59.   }

  60.   .layout--twocol-section--33-67 > .layout__region--first {

  61.     flex-basis: calc(33.33% - 0.74993rem);

  62.   }

  63. 

  64.   [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {

  65.     margin-left: 1.49985rem;

  66.   }

  67. 

  68.   [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {

  69.     margin-right: 1.49985rem;

  70.   }

  71. 

  72.   .layout--twocol-section--33-67 > .layout__region--second {

  73.     flex-basis: calc(66.66% - 1.49985rem);

  74.   }

  75.   [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {

  76.     margin-right: 1.49985rem;

  77.   }

  78.   [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {

  79.     margin-left: 1.49985rem;

  80.   }

  81.   .layout--twocol-section--67-33 > .layout__region--first {

  82.     flex-basis: calc(66.66% - 1.49985rem);

  83.   }

  84. 

  85.   [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {

  86.     margin-left: 0.74993rem;

  87.   }

  88. 

  89.   [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {

  90.     margin-right: 0.74993rem;

  91.   }

  92. 

  93.   .layout--twocol-section--67-33 > .layout__region--second {

  94.     flex-basis: calc(33.33% - 0.74993rem);

  95.   }

  96.   [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {

  97.     margin-right: 0.5625rem;

  98.   }

  99.   [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {

  100.     margin-left: 0.5625rem;

  101.   }

  102.   .layout--twocol-section--25-75 > .layout__region--first {

  103.     flex-basis: calc(25% - 0.5625rem);

  104.   }

  105. 

  106.   [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {

  107.     margin-left: 1.6875rem;

  108.   }

  109. 

  110.   [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {

  111.     margin-right: 1.6875rem;

  112.   }

  113. 

  114.   .layout--twocol-section--25-75 > .layout__region--second {

  115.     flex-basis: calc(75% - 1.6875rem);

  116.   }

  117.   [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {

  118.     margin-right: 1.6875rem;

  119.   }

  120.   [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {

  121.     margin-left: 1.6875rem;

  122.   }

  123.   .layout--twocol-section--75-25 > .layout__region--first {

  124.     flex-basis: calc(75% - 1.6875rem);

  125.   }

  126. 

  127.   [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {

  128.     margin-left: 0.5625rem;

  129.   }

  130. 

  131.   [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {

  132.     margin-right: 0.5625rem;

  133.   }

  134. 

  135.   .layout--twocol-section--75-25 > .layout__region--second {

  136.     flex-basis: calc(25% - 0.5625rem);

  137.   }

  138. }

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