teaser.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
.teaser {
  position: relative; /* Anchor after pseudo-element. */
  padding-block-end: var(--sp1-5);
}
.teaser::after {
  position: absolute;
  inset-block-end: 0;
  width: var(--sp3);
  height: 0;
  content: "";
  /* Intentionally not using CSS logical properties. */
  border-top: solid 2px var(--color--gray-95);
}
@media (min-width: 62.5rem) {
  .teaser {
    padding-block-end: var(--sp3);
  }
}
.teaser__content {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--sp);
}
.teaser__content .field:not(:last-child) {
  margin-block-end: 0;
}
@media (min-width: 62.5rem) {
  .teaser__content {
    gap: var(--sp2);
  }
}
.teaser__image {
  flex-shrink: 0;
  margin: 0;
}
.teaser__image:empty {
  display: none;
}
.teaser__image:empty + .teaser__title {
  flex-basis: auto;
}
.teaser__image a {
  display: block;
}
.teaser__image img {
  width: var(--sp3-5);
  height: var(--sp3-5);
  object-fit: cover;
  border-radius: 50%;
}
@media (min-width: 62.5rem) {
  .teaser__image img {
    width: var(--grid-col-width);
    height: var(--grid-col-width);
  }
}
@media (min-width: 62.5rem) {
  .teaser__image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
    margin: 0;
  }
}
.teaser__meta {
  margin-block-end: var(--sp);
}
.teaser__title {
  margin-block: 0;
  flex-basis: calc(100% - var(--sp4-5));
  color: var(--color-text-neutral-loud);
  font-size: 1.5rem;
  line-height: var(--line-height-base);
}
@media (min-width: 62.5rem) {
  .teaser__title {
    flex-basis: auto;
    font-size: var(--sp2);
    line-height: var(--sp3);
  }
}
.teaser__top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  gap: var(--sp1);
  margin-block-end: var(--sp1);
}
@media (min-width: 62.5rem) {
  .teaser__top {
    position: relative; /* Anchor the image */
  }
}

File

View on git.drupalcode.org

core/themes/olivero/components/teaser/teaser.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. .teaser {

  8.   position: relative; /* Anchor after pseudo-element. */

  9.   padding-block-end: var(--sp1-5);

  10. }

  11. .teaser::after {

  12.   position: absolute;

  13.   inset-block-end: 0;

  14.   width: var(--sp3);

  15.   height: 0;

  16.   content: "";

  17.   /* Intentionally not using CSS logical properties. */

  18.   border-top: solid 2px var(--color--gray-95);

  19. }

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

  21.   .teaser {

  22.     padding-block-end: var(--sp3);

  23.   }

  24. }

  25. .teaser__content {

  26.   display: grid;

  27.   grid-auto-rows: max-content;

  28.   gap: var(--sp);

  29. }

  30. .teaser__content .field:not(:last-child) {

  31.   margin-block-end: 0;

  32. }

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

  34.   .teaser__content {

  35.     gap: var(--sp2);

  36.   }

  37. }

  38. .teaser__image {

  39.   flex-shrink: 0;

  40.   margin: 0;

  41. }

  42. .teaser__image:empty {

  43.   display: none;

  44. }

  45. .teaser__image:empty + .teaser__title {

  46.   flex-basis: auto;

  47. }

  48. .teaser__image a {

  49.   display: block;

  50. }

  51. .teaser__image img {

  52.   width: var(--sp3-5);

  53.   height: var(--sp3-5);

  54.   object-fit: cover;

  55.   border-radius: 50%;

  56. }

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

  58.   .teaser__image img {

  59.     width: var(--grid-col-width);

  60.     height: var(--grid-col-width);

  61.   }

  62. }

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

  64.   .teaser__image {

  65.     position: absolute;

  66.     inset-block-start: 0;

  67.     inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));

  68.     margin: 0;

  69.   }

  70. }

  71. .teaser__meta {

  72.   margin-block-end: var(--sp);

  73. }

  74. .teaser__title {

  75.   margin-block: 0;

  76.   flex-basis: calc(100% - var(--sp4-5));

  77.   color: var(--color-text-neutral-loud);

  78.   font-size: 1.5rem;

  79.   line-height: var(--line-height-base);

  80. }

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

  82.   .teaser__title {

  83.     flex-basis: auto;

  84.     font-size: var(--sp2);

  85.     line-height: var(--sp3);

  86.   }

  87. }

  88. .teaser__top {

  89.   display: flex;

  90.   flex-wrap: nowrap;

  91.   align-items: center;

  92.   margin: 0;

  93.   gap: var(--sp1);

  94.   margin-block-end: var(--sp1);

  95. }

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

  97.   .teaser__top {

  98.     position: relative; /* Anchor the image */

  99.   }

  100. }

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