You are here

Home » API reference » Drupal 10

layout-builder-fourcol-section.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/layout/layout-builder-fourcol-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 four-column layout section.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

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

.layout--fourcol-section > .layout__region {
    flex: 1 0 100%;
    margin-bottom: var(--grid-gap)
  }

@media (min-width: 43.75rem) {

.layout--fourcol-section > .layout__region {
      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
      flex-grow: 0;
      flex-shrink: 0;
      margin-bottom: 0
  }
    }

.layout--fourcol-section {

  /* Two column layout. */
}

@media (min-width: 43.75rem) {
    .layout--fourcol-section > .layout__region--first,
    .layout--fourcol-section > .layout__region--second {
      margin-bottom: var(--grid-gap);
    }

    [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"] 
    .layout--fourcol-section > .layout__region--third {
      margin-right: calc(var(--grid-gap) * 0.5)
  }

    [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"] 
    .layout--fourcol-section > .layout__region--third {
      margin-left: calc(var(--grid-gap) * 0.5)
  }

    [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"] 
    .layout--fourcol-section > .layout__region--fourth {
      margin-left: calc(var(--grid-gap) * 0.5)
  }

    [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"] 
    .layout--fourcol-section > .layout__region--fourth {
      margin-right: calc(var(--grid-gap) * 0.5)
  }
  }

.layout--fourcol-section {

  /* Four column layout. */
}

@media (min-width: 62.5rem) {
    .layout--fourcol-section > .layout__region {
      flex-basis: calc(25% - (var(--grid-gap) * 0.75));
    }

    .layout--fourcol-section > .layout__region--first,
    .layout--fourcol-section > .layout__region--second {
      margin-bottom: 0;
    }

    [dir="ltr"] .layout--fourcol-section > .layout__region--first {
      margin-right: calc(var(--grid-gap) * 0.5)
  }

    [dir="rtl"] .layout--fourcol-section > .layout__region--first {
      margin-left: calc(var(--grid-gap) * 0.5)
  }

    .layout--fourcol-section > .layout__region--second,
    .layout--fourcol-section > .layout__region--third {
      margin-left: calc(var(--grid-gap) * 0.5);
      margin-right: calc(var(--grid-gap) * 0.5);
    }

    [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
      margin-left: calc(var(--grid-gap) * 0.5)
  }

    [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
      margin-right: calc(var(--grid-gap) * 0.5)
  }
  }

File

core/themes/olivero/css/layout/layout-builder-fourcol-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 four-column layout section.

  11.  */

  12. 

  13. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

  26. .layout--fourcol-section {

  27.   display: flex;

  28.   flex-wrap: wrap

  29. }

  30. 

  31. .layout--fourcol-section > .layout__region {

  32.     flex: 1 0 100%;

  33.     margin-bottom: var(--grid-gap)

  34.   }

  35. 

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

  37. 

  38. .layout--fourcol-section > .layout__region {

  39.       flex-basis: calc(50% - (var(--grid-gap) * 0.5));

  40.       flex-grow: 0;

  41.       flex-shrink: 0;

  42.       margin-bottom: 0

  43.   }

  44.     }

  45. 

  46. .layout--fourcol-section {

  47. 

  48.   /* Two column layout. */

  49. }

  50. 

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

  52.     .layout--fourcol-section > .layout__region--first,

  53.     .layout--fourcol-section > .layout__region--second {

  54.       margin-bottom: var(--grid-gap);

  55.     }

  56. 

  57.     [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"] 

  58.     .layout--fourcol-section > .layout__region--third {

  59.       margin-right: calc(var(--grid-gap) * 0.5)

  60.   }

  61. 

  62.     [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"] 

  63.     .layout--fourcol-section > .layout__region--third {

  64.       margin-left: calc(var(--grid-gap) * 0.5)

  65.   }

  66. 

  67.     [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"] 

  68.     .layout--fourcol-section > .layout__region--fourth {

  69.       margin-left: calc(var(--grid-gap) * 0.5)

  70.   }

  71. 

  72.     [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"] 

  73.     .layout--fourcol-section > .layout__region--fourth {

  74.       margin-right: calc(var(--grid-gap) * 0.5)

  75.   }

  76.   }

  77. 

  78. .layout--fourcol-section {

  79. 

  80.   /* Four column layout. */

  81. }

  82. 

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

  84.     .layout--fourcol-section > .layout__region {

  85.       flex-basis: calc(25% - (var(--grid-gap) * 0.75));

  86.     }

  87. 

  88.     .layout--fourcol-section > .layout__region--first,

  89.     .layout--fourcol-section > .layout__region--second {

  90.       margin-bottom: 0;

  91.     }

  92. 

  93.     [dir="ltr"] .layout--fourcol-section > .layout__region--first {

  94.       margin-right: calc(var(--grid-gap) * 0.5)

  95.   }

  96. 

  97.     [dir="rtl"] .layout--fourcol-section > .layout__region--first {

  98.       margin-left: calc(var(--grid-gap) * 0.5)

  99.   }

  100. 

  101.     .layout--fourcol-section > .layout__region--second,

  102.     .layout--fourcol-section > .layout__region--third {

  103.       margin-left: calc(var(--grid-gap) * 0.5);

  104.       margin-right: calc(var(--grid-gap) * 0.5);

  105.     }

  106. 

  107.     [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {

  108.       margin-left: calc(var(--grid-gap) * 0.5)

  109.   }

  110. 

  111.     [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {

  112.       margin-right: calc(var(--grid-gap) * 0.5)

  113.   }

  114.   }