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. [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 - -0.06696rem);

  55.   }

  56. 

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

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

  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. }

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