You are here

Home » API reference » Drupal 10

wide-image.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/wide-image.css

Wide image component.

File

core/themes/olivero/css/components/wide-image.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.  * Wide image component.

  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. [dir="ltr"] .wide-image {

  27.   margin-left: 0

  28. }

  29. 

  30. [dir="rtl"] .wide-image {

  31.   margin-right: 0

  32. }

  33. 

  34. [dir="ltr"] .wide-image {

  35.   margin-right: 0

  36. }

  37. 

  38. [dir="rtl"] .wide-image {

  39.   margin-left: 0

  40. }

  41. 

  42. .wide-image {

  43.   margin-top: var(--sp0-5);

  44.   margin-bottom: var(--sp2)

  45. }

  46. 

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

  48. 

  49. [dir="ltr"] .wide-image {

  50.     margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))

  51.   }

  52. 

  53. [dir="rtl"] .wide-image {

  54.     margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))

  55.   }

  56. 

  57. .wide-image {

  58.     width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));

  59.     margin-top: var(--sp2);

  60.     margin-bottom: var(--sp4)

  61. }

  62.   }

  63. 

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

  65. 

  66. [dir="ltr"] .wide-image {

  67.     margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))

  68.   }

  69. 

  70. [dir="rtl"] .wide-image {

  71.     margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))

  72.   }

  73. 

  74. .wide-image {

  75.     width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))

  76. }

  77.   }

  78. 

  79. /* Ensure that image doesn't overlap sidebar. */

  80. 

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

  82. 

  83. .sidebar-grid .wide-image {

  84.     width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap))

  85. }

  86.   }

  87. 

  88. @media (min-width: 81.25rem) {

  89. 

  90. .sidebar-grid .wide-image {

  91.     width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap))

  92. }

  93.   }

  94. 

  95. /* Ensure that image doesn't overlap layout builder sections when editing layouts. */

  96. 

  97. [dir="ltr"] .layout-builder .wide-image {

  98.   margin-left: 0

  99. }

  100. 

  101. [dir="rtl"] .layout-builder .wide-image {

  102.   margin-right: 0

  103. }

  104. 

  105. [dir="ltr"] .layout-builder .wide-image {

  106.   margin-right: 0

  107. }

  108. 

  109. [dir="rtl"] .layout-builder .wide-image {

  110.   margin-left: 0

  111. }

  112. 

  113. .layout-builder .wide-image {

  114.   max-width: 100%;

  115. }