You are here

Home » API reference » Drupal 9

layout-content-narrow.css in Drupal 9

Same filename and directory in other branches
  1. 10 core/themes/olivero/css/layout/layout-content-narrow.css

Grid system definition for the content narrow layout.

File

core/themes/olivero/css/layout/layout-content-narrow.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.  * Grid system definition for the content narrow layout.

  11.  */

  12. 

  13. .layout--content-narrow,

  14. .layout--pass--content-narrow > * {

  15.   -ms-grid-column: 1;

  16.   -ms-grid-column-span: 6;

  17.   grid-column: 1 / 7;

  18.   width: 100%

  19. }

  20. 

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

  22. 

  23. .layout--content-narrow,

  24. .layout--pass--content-narrow > * {

  25.     -ms-grid-column: 2;

  26.     -ms-grid-column-span: 12;

  27.     grid-column: 2 / 14

  28. }

  29.   }

  30. 

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

  32. 

  33. .layout--content-narrow,

  34. .layout--pass--content-narrow > * {

  35.     -ms-grid-column: 3;

  36.     -ms-grid-column-span: 8;

  37.     grid-column: 3 / 11

  38. }

  39.   }

  40. 

  41. /*

  42.   If .layout--content-narrow is nested within any of the following, allocate the appropriate

  43.   amount of columns within its parent .grid-full.

  44.     - .layout--content-narrow class.

  45.     - Element that's inheriting the layout--content-narrow styles from its parent region.

  46.     - .layout--content-medium class.

  47.     - Element that's inheriting the layout--content-medium styles from its parent region.

  48. */

  49. 

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

  51. 

  52. .layout--content-narrow .layout--content-narrow,

  53.   .layout--content-narrow .layout--pass--content-narrow > *,

  54.   .layout--pass--content-narrow > * .layout--content-narrow,

  55.   .layout--pass--content-narrow > * .layout--pass--content-narrow > *,

  56.   .layout--content-medium .layout--content-narrow,

  57.   .layout--content-medium .layout--pass--content-narrow > *,

  58.   .layout--pass--content-medium > * .layout--content-narrow,

  59.   .layout--pass--content-medium > * .layout--pass--content-narrow > * {

  60.       -ms-grid-column: 1;

  61.       -ms-grid-column-span: 12;

  62.       grid-column: 1 / 13

  63.   }

  64.     }

  65. 

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

  67. 

  68. .layout--content-narrow .layout--content-narrow,

  69.   .layout--content-narrow .layout--pass--content-narrow > *,

  70.   .layout--pass--content-narrow > * .layout--content-narrow,

  71.   .layout--pass--content-narrow > * .layout--pass--content-narrow > *,

  72.   .layout--content-medium .layout--content-narrow,

  73.   .layout--content-medium .layout--pass--content-narrow > *,

  74.   .layout--pass--content-medium > * .layout--content-narrow,

  75.   .layout--pass--content-medium > * .layout--pass--content-narrow > * {

  76.       -ms-grid-column: 1;

  77.       -ms-grid-column-span: 8;

  78.       grid-column: 1 / 9

  79.   }

  80.     }

  81. 

  82. /*

  83.   Special grid-breaking treatment for text-content elements that

  84.   reside in a content-narrow layout.

  85. */

  86. 

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

  88. 

  89. [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  90.           left: -7.14286vw

  91.   }

  92. 

  93. [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  94.           right: -7.14286vw

  95.   }

  96.         }

  97. 

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

  99. 

  100. [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  101.           left: calc(-7.14286vw - -1.07143px)

  102.   }

  103. 

  104. [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  105.           right: calc(-7.14286vw - -1.07143px)

  106.   }

  107.         }

  108. 

  109. @media (min-width: 75rem) {

  110. 

  111. [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  112.           left: calc(-7.14286vw - -0.62946rem)

  113.   }

  114. 

  115. [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  116.           right: calc(-7.14286vw - -0.62946rem)

  117.   }

  118.         }

  119. 

  120. @media (min-width: 90rem) {

  121. 

  122. [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  123.           left: -5.86607rem

  124.   }

  125. 

  126. [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {

  127.           right: -5.86607rem

  128.   }

  129.         }

  130. 

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

  132. 

  133. [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  134.           left: -7.14286vw

  135.   }

  136. 

  137. [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  138.           right: -7.14286vw

  139.   }

  140. 

  141. [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  142.           margin-left: 2px

  143.   }

  144. 

  145. [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  146.           margin-right: 2px

  147.   }

  148. 

  149. .layout--content-narrow.text-content blockquote:after, .layout--content-narrow .text-content blockquote:after, .layout--pass--content-narrow > *.text-content blockquote:after, .layout--pass--content-narrow > * .text-content blockquote:after {

  150.           width: 1.125rem;

  151.           height: calc(100% - 2.8125rem)

  152.       }

  153.         }

  154. 

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

  156. 

  157. [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  158.           left: calc(-7.14286vw - -1.07143px)

  159.   }

  160. 

  161. [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  162.           right: calc(-7.14286vw - -1.07143px)

  163.   }

  164.         }

  165. 

  166. @media (min-width: 75rem) {

  167. 

  168. [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  169.           left: calc(-7.14286vw - -0.62946rem)

  170.   }

  171. 

  172. [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  173.           right: calc(-7.14286vw - -0.62946rem)

  174.   }

  175.         }

  176. 

  177. @media (min-width: 90rem) {

  178. 

  179. [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  180.           left: -5.86607rem

  181.   }

  182. 

  183. [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {

  184.           right: -5.86607rem

  185.   }

  186.         }

  187. 

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

  189. 

  190. [dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"]  .layout--content-narrow .text-content blockquote,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote {

  191.         padding-left: 0

  192.   }

  193. 

  194. [dir="rtl"] .layout--content-narrow.text-content blockquote,[dir="rtl"]  .layout--content-narrow .text-content blockquote,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote {

  195.         padding-right: 0

  196.   }

  197. 

  198. .layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {

  199.         width: calc(71.42857vw - 2.25rem);

  200.         margin-top: 3.375rem;

  201.         margin-bottom: 3.375rem

  202.     }

  203.       }

  204. 

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

  206. 

  207. .layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {

  208.         width: calc(71.42857vw - 2.91964rem)

  209.     }

  210.       }

  211. 

  212. @media (min-width: 75rem) {

  213. 

  214. .layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {

  215.         width: calc(71.42857vw - 8.54464rem)

  216.     }

  217.       }

  218. 

  219. @media (min-width: 90rem) {

  220. 

  221. .layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {

  222.         width: 56.41071rem

  223.     }

  224.       }

  225. 

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

  227. 

  228. .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

  229.         width: calc(71.42857vw - 2.25rem);

  230.         margin-top: 3.375rem;

  231.         margin-bottom: 3.375rem

  232.     }

  233.       }

  234. 

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

  236. 

  237. [dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"]  .layout--content-narrow .text-content pre,[dir="ltr"]  .layout--pass--content-narrow > *.text-content pre,[dir="ltr"]  .layout--pass--content-narrow > * .text-content pre {

  238.         margin-left: calc(-7.14286vw - -1.07143px)

  239.   }

  240. 

  241. [dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"]  .layout--content-narrow .text-content pre,[dir="rtl"]  .layout--pass--content-narrow > *.text-content pre,[dir="rtl"]  .layout--pass--content-narrow > * .text-content pre {

  242.         margin-right: calc(-7.14286vw - -1.07143px)

  243.   }

  244. 

  245. .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

  246.         width: calc(85.71429vw - 3.05357rem)

  247.     }

  248.       }

  249. 

  250. @media (min-width: 75rem) {

  251. 

  252. .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

  253.         width: calc(85.71429vw - 9.80357rem)

  254.     }

  255.       }

  256. 

  257. @media (min-width: 90rem) {

  258. 

  259. .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {

  260.         width: 68.14286rem

  261.     }

  262.       }

  263. 

  264. /**

  265.  * 
     and 
     elements should not break containers and overflow

  266.  * into sidebar region when present.

  267.  */

  268. 

  269. .sidebar-grid .layout--content-narrow.text-content blockquote,

  270.       .sidebar-grid .layout--content-narrow.text-content pre,

  271.       .sidebar-grid .layout--content-narrow .text-content blockquote,

  272.       .sidebar-grid .layout--content-narrow .text-content pre,

  273.       .sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,

  274.       .sidebar-grid .layout--pass--content-narrow > *.text-content pre,

  275.       .sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,

  276.       .sidebar-grid .layout--pass--content-narrow > * .text-content pre {

  277.         width: auto;

  278.       }