layout-content-narrow.css

Same filename in other branches
  1. 10 core/themes/olivero/css/layout/layout-content-narrow.css
  2. 11.x 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--pass--content-narrow > * .layout--content-narrow,

  54.   .layout--content-medium .layout--content-narrow,

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

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

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

  58.   .layout--content-medium .layout--pass--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--pass--content-narrow > * .layout--content-narrow,

  70.   .layout--content-medium .layout--content-narrow,

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

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

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

  74.   .layout--content-medium .layout--pass--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,

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

  91.   [dir="ltr"] .layout--content-narrow .text-content blockquote:before,

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

  93.     left: -7.14286vw;

  94.   }

  95. 

  96.   [dir="rtl"] .layout--content-narrow.text-content blockquote:before,

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

  98.   [dir="rtl"] .layout--content-narrow .text-content blockquote:before,

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

  100.     right: -7.14286vw;

  101.   }

  102. }

  103. 

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

  105. 

  106.   [dir="ltr"] .layout--content-narrow.text-content blockquote:before,

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

  108.   [dir="ltr"] .layout--content-narrow .text-content blockquote:before,

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

  110.     left: calc(-7.14286vw - -0.06696rem);

  111.   }

  112. 

  113.   [dir="rtl"] .layout--content-narrow.text-content blockquote:before,

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

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

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

  117.     right: calc(-7.14286vw - -0.06696rem);

  118.   }

  119. }

  120. 

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

  122. 

  123.   [dir="ltr"] .layout--content-narrow.text-content blockquote:before,

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

  125.   [dir="ltr"] .layout--content-narrow .text-content blockquote:before,

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

  127.     left: calc(-7.14286vw - -0.62946rem);

  128.   }

  129. 

  130.   [dir="rtl"] .layout--content-narrow.text-content blockquote:before,

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

  132.   [dir="rtl"] .layout--content-narrow .text-content blockquote:before,

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

  134.     right: calc(-7.14286vw - -0.62946rem);

  135.   }

  136. }

  137. 

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

  139. 

  140.   [dir="ltr"] .layout--content-narrow.text-content blockquote:before,

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

  142.   [dir="ltr"] .layout--content-narrow .text-content blockquote:before,

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

  144.     left: -5.86607rem;

  145.   }

  146. 

  147.   [dir="rtl"] .layout--content-narrow.text-content blockquote:before,

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

  149.   [dir="rtl"] .layout--content-narrow .text-content blockquote:before,

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

  151.     right: -5.86607rem;

  152.   }

  153. }

  154. 

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

  156. 

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

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

  159.   [dir="ltr"] .layout--content-narrow .text-content blockquote:after,

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

  161.     left: -7.14286vw;

  162.   }

  163. 

  164.   [dir="rtl"] .layout--content-narrow.text-content blockquote:after,

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

  166.   [dir="rtl"] .layout--content-narrow .text-content blockquote:after,

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

  168.     right: -7.14286vw;

  169.   }

  170. 

  171.   [dir="ltr"] .layout--content-narrow.text-content blockquote:after,

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

  173.   [dir="ltr"] .layout--content-narrow .text-content blockquote:after,

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

  175.     margin-left: 2px;

  176.   }

  177. 

  178.   [dir="rtl"] .layout--content-narrow.text-content blockquote:after,

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

  180.   [dir="rtl"] .layout--content-narrow .text-content blockquote:after,

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

  182.     margin-right: 2px;

  183.   }

  184. 

  185.   .layout--content-narrow.text-content blockquote:after,

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

  187.   .layout--content-narrow .text-content blockquote:after,

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

  189.     width: 1.125rem;

  190.     height: calc(100% - 2.8125rem);

  191.   }

  192. }

  193. 

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

  195. 

  196.   [dir="ltr"] .layout--content-narrow.text-content blockquote:after,

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

  198.   [dir="ltr"] .layout--content-narrow .text-content blockquote:after,

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

  200.     left: calc(-7.14286vw - -0.06696rem);

  201.   }

  202. 

  203.   [dir="rtl"] .layout--content-narrow.text-content blockquote:after,

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

  205.   [dir="rtl"] .layout--content-narrow .text-content blockquote:after,

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

  207.     right: calc(-7.14286vw - -0.06696rem);

  208.   }

  209. }

  210. 

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

  212. 

  213.   [dir="ltr"] .layout--content-narrow.text-content blockquote:after,

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

  215.   [dir="ltr"] .layout--content-narrow .text-content blockquote:after,

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

  217.     left: calc(-7.14286vw - -0.62946rem);

  218.   }

  219. 

  220.   [dir="rtl"] .layout--content-narrow.text-content blockquote:after,

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

  222.   [dir="rtl"] .layout--content-narrow .text-content blockquote:after,

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

  224.     right: calc(-7.14286vw - -0.62946rem);

  225.   }

  226. }

  227. 

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

  229. 

  230.   [dir="ltr"] .layout--content-narrow.text-content blockquote:after,

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

  232.   [dir="ltr"] .layout--content-narrow .text-content blockquote:after,

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

  234.     left: -5.86607rem;

  235.   }

  236. 

  237.   [dir="rtl"] .layout--content-narrow.text-content blockquote:after,

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

  239.   [dir="rtl"] .layout--content-narrow .text-content blockquote:after,

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

  241.     right: -5.86607rem;

  242.   }

  243. }

  244. 

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

  246. 

  247.   [dir="ltr"] .layout--content-narrow.text-content blockquote,

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

  249.   [dir="ltr"] .layout--content-narrow .text-content blockquote,

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

  251.     padding-left: 0;

  252.   }

  253. 

  254.   [dir="rtl"] .layout--content-narrow.text-content blockquote,

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

  256.   [dir="rtl"] .layout--content-narrow .text-content blockquote,

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

  258.     padding-right: 0;

  259.   }

  260. 

  261.   .layout--content-narrow.text-content blockquote,

  262.   .layout--pass--content-narrow > *.text-content blockquote,

  263.   .layout--content-narrow .text-content blockquote,

  264.   .layout--pass--content-narrow > * .text-content blockquote {

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

  266.     margin-top: 3.375rem;

  267.     margin-bottom: 3.375rem;

  268.   }

  269. }

  270. 

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

  272. 

  273.   .layout--content-narrow.text-content blockquote,

  274.   .layout--pass--content-narrow > *.text-content blockquote,

  275.   .layout--content-narrow .text-content blockquote,

  276.   .layout--pass--content-narrow > * .text-content blockquote {

  277.     width: calc(71.42857vw - 2.91964rem);

  278.   }

  279. }

  280. 

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

  282. 

  283.   .layout--content-narrow.text-content blockquote,

  284.   .layout--pass--content-narrow > *.text-content blockquote,

  285.   .layout--content-narrow .text-content blockquote,

  286.   .layout--pass--content-narrow > * .text-content blockquote {

  287.     width: calc(71.42857vw - 8.54464rem);

  288.   }

  289. }

  290. 

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

  292. 

  293.   .layout--content-narrow.text-content blockquote,

  294.   .layout--pass--content-narrow > *.text-content blockquote,

  295.   .layout--content-narrow .text-content blockquote,

  296.   .layout--pass--content-narrow > * .text-content blockquote {

  297.     width: 56.41071rem;

  298.   }

  299. }

  300. 

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

  302. 

  303.   .layout--content-narrow.text-content pre,

  304.   .layout--pass--content-narrow > *.text-content pre,

  305.   .layout--content-narrow .text-content pre,

  306.   .layout--pass--content-narrow > * .text-content pre {

  307.     margin-top: 3.375rem;

  308.     margin-bottom: 3.375rem;

  309.   }

  310. }

  311. 

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

  313. 

  314.   [dir="ltr"] .layout--content-narrow.text-content pre,

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

  316.   [dir="ltr"] .layout--content-narrow .text-content pre,

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

  318.     margin-left: calc(-7.14286vw - -0.06696rem);

  319.   }

  320. 

  321.   [dir="rtl"] .layout--content-narrow.text-content pre,

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

  323.   [dir="rtl"] .layout--content-narrow .text-content pre,

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

  325.     margin-right: calc(-7.14286vw - -0.06696rem);

  326.   }

  327. 

  328.   .layout--content-narrow.text-content pre,

  329.   .layout--pass--content-narrow > *.text-content pre,

  330.   .layout--content-narrow .text-content pre,

  331.   .layout--pass--content-narrow > * .text-content pre {

  332.     width: calc(85.71429vw - 3.05357rem);

  333.   }

  334. }

  335. 

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

  337. 

  338.   [dir="ltr"] .layout--content-narrow.text-content pre,

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

  340.   [dir="ltr"] .layout--content-narrow .text-content pre,

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

  342.     margin-left: calc(-7.14286vw - -0.62946rem);

  343.   }

  344. 

  345.   [dir="rtl"] .layout--content-narrow.text-content pre,

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

  347.   [dir="rtl"] .layout--content-narrow .text-content pre,

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

  349.     margin-right: calc(-7.14286vw - -0.62946rem);

  350.   }

  351. 

  352.   .layout--content-narrow.text-content pre,

  353.   .layout--pass--content-narrow > *.text-content pre,

  354.   .layout--content-narrow .text-content pre,

  355.   .layout--pass--content-narrow > * .text-content pre {

  356.     width: calc(85.71429vw - 9.80357rem);

  357.   }

  358. }

  359. 

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

  361. 

  362.   [dir="ltr"] .layout--content-narrow.text-content pre,

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

  364.   [dir="ltr"] .layout--content-narrow .text-content pre,

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

  366.     margin-left: -5.86607rem;

  367.   }

  368. 

  369.   [dir="rtl"] .layout--content-narrow.text-content pre,

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

  371.   [dir="rtl"] .layout--content-narrow .text-content pre,

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

  373.     margin-right: -5.86607rem;

  374.   }

  375. 

  376.   .layout--content-narrow.text-content pre,

  377.   .layout--pass--content-narrow > *.text-content pre,

  378.   .layout--content-narrow .text-content pre,

  379.   .layout--pass--content-narrow > * .text-content pre {

  380.     width: 68.14286rem;

  381.   }

  382. }

  383. 

  384. /**

  385.  * 
     and 
     elements should not break containers and overflow

  386.  * into sidebar region when present.

  387.  */

  388. 

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

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

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

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

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

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

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

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

  397.   width: auto;

  398. }

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