You are here

Home » API reference » Drupal 9

wide-image.css in Drupal 9

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

  14.   margin-left: 0

  15. }

  16. 

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

  18.   margin-right: 0

  19. }

  20. 

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

  22.   margin-right: 0

  23. }

  24. 

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

  26.   margin-left: 0

  27. }

  28. 

  29. .wide-image {

  30.   margin-top: 0.5625rem;

  31.   margin-bottom: 2.25rem

  32. }

  33. 

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

  35. 

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

  37.     margin-left: -7.14286vw

  38.   }

  39. 

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

  41.     margin-right: -7.14286vw

  42.   }

  43. 

  44. .wide-image {

  45.     width: calc(100vw - 2.25rem);

  46.     margin-top: 2.25rem;

  47.     margin-bottom: 4.5rem

  48. }

  49.   }

  50. 

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

  52. 

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

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

  55.   }

  56. 

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

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

  59.   }

  60. 

  61. .wide-image {

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

  63. }

  64.   }

  65. 

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

  67. 

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

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

  70.   }

  71. 

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

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

  74.   }

  75. 

  76. .wide-image {

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

  78. }

  79.   }

  80. 

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

  82. 

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

  84.     margin-left: -5.86607rem

  85.   }

  86. 

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

  88.     margin-right: -5.86607rem

  89.   }

  90. 

  91. .wide-image {

  92.     width: 68.14286rem

  93. }

  94.   }

  95. 

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

  97. 

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

  99. 

  100. .sidebar-grid .wide-image {

  101.     width: calc(64.28571vw - 2.85268rem)

  102. }

  103.   }

  104. 

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

  106. 

  107. .sidebar-grid .wide-image {

  108.     width: calc(64.28571vw - 7.91518rem)

  109. }

  110.   }

  111. 

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

  113. 

  114. .sidebar-grid .wide-image {

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

  116. }

  117.   }

  118. 

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

  120. 

  121. .sidebar-grid .wide-image {

  122.     width: 56.41071rem

  123. }

  124.   }

  125. 

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

  127. 

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

  129.   margin-left: 0

  130. }

  131. 

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

  133.   margin-right: 0

  134. }

  135. 

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

  137.   margin-right: 0

  138. }

  139. 

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

  141.   margin-left: 0

  142. }

  143. 

  144. .layout-builder .wide-image {

  145.   max-width: 100%;

  146. }