twocol_section.css

Same filename in this branch
  1. 11.1.x core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css
  2. 11.1.x core/modules/layout_builder/layouts/twocol_section/twocol_section.css
/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

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

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

@media screen and (min-width: 40em) {
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    flex: 0 1 50%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 33%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 67%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 1 25%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
    flex: 0 1 75%;
  }
}

File

core/themes/stable9/layouts/layout_builder/twocol_section/twocol_section.css

View source 
  1. /*

  2.  * @file

  3.  * Provides the layout styles for two-column layout section.

  4.  */

  5. 

  6. .layout--twocol-section {

  7.   display: flex;

  8.   flex-wrap: wrap;

  9. }

  10. 

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

  12.   flex: 0 1 100%;

  13. }

  14. 

  15. @media screen and (min-width: 40em) {

  16.   .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,

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

  18.     flex: 0 1 50%;

  19.   }

  20. 

  21.   .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,

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

  23.     flex: 0 1 33%;

  24.   }

  25. 

  26.   .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,

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

  28.     flex: 0 1 67%;

  29.   }

  30. 

  31.   .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,

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

  33.     flex: 0 1 25%;

  34.   }

  35. 

  36.   .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,

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

  38.     flex: 0 1 75%;

  39.   }

  40. }