teaser.css

Same filename and directory in other branches
  1. 10 core/themes/olivero/components/teaser/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);

  &::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) {
    padding-block-end: var(--sp3);
  }
}
.teaser__content {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--sp);

  .field:not(:last-child) {
    margin-block-end: 0;
  }

  @media (min-width: 62.5rem) {
    gap: var(--sp2);
  }
}
.teaser__image {
  flex-shrink: 0;
  margin: 0;

  &:empty {
    display: none;

    & + .teaser__title {
      flex-basis: auto;
    }
  }

  & a {
    display: block;
  }

  & img {
    width: var(--sp3-5);
    height: var(--sp3-5);
    object-fit: cover;
    border-radius: 50%;

    @media (min-width: 62.5rem) {
      width: var(--grid-col-width);
      height: var(--grid-col-width);
    }
  }

  @media (min-width: 62.5rem) {
    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) {
    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) {
    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.   &::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. 

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

  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.   .field:not(:last-child) {

  31.     margin-block-end: 0;

  32.   }

  33. 

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

  35.     gap: var(--sp2);

  36.   }

  37. }

  38. .teaser__image {

  39.   flex-shrink: 0;

  40.   margin: 0;

  41. 

  42.   &:empty {

  43.     display: none;

  44. 

  45.     & + .teaser__title {

  46.       flex-basis: auto;

  47.     }

  48.   }

  49. 

  50.   & a {

  51.     display: block;

  52.   }

  53. 

  54.   & img {

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

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

  57.     object-fit: cover;

  58.     border-radius: 50%;

  59. 

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

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

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

  63.     }

  64.   }

  65. 

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

  67.     position: absolute;

  68.     inset-block-start: 0;

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

  70.     margin: 0;

  71.   }

  72. }

  73. .teaser__meta {

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

  75. }

  76. .teaser__title {

  77.   margin-block: 0;

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

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

  80.   font-size: 1.5rem;

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

  82. 

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

  84.     flex-basis: auto;

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

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

  87.   }

  88. }

  89. .teaser__top {

  90.   display: flex;

  91.   flex-wrap: nowrap;

  92.   align-items: center;

  93.   margin: 0;

  94.   gap: var(--sp1);

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

  96. 

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

  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.