Issue #3365367 by bernardm28, finnsky, smustgrave, mherchel: Convert Olivero's...

# This is so your IDE knows about the syntax for fixes and autocomplete.

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json

# The human readable name.

name: Teaser

# Status can be: "experimental", "stable", "deprecated", "obsolete".

status: stable

# Schema for the props. We support www.json-schema.org. Learn more about the

# syntax there.

props:

  type: object

  properties:

    attributes:

      type: Drupal\Core\Template\Attribute

      title: Attributes

      description: Wrapper attributes.

# Slots always hold arbitrary markup. We know that beforehand, so no need for

# a schema for slots.

slots:

  # The key is the name of the slot. In your template you will use

  # {% block content %}.

  content:

    title: Content

    required: true

    description: The teaser content

  image:

    title: Image

    required: false

    description: Teaser image

  meta:

    title: Meta

    required: false

    description: Teaser meta

  prefix:

    title: Prefix

    required: false

    description: Contextual links slot

  title:

    title: Title content

    required: false

    description: Teaser title

/*

 * 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 */

  }

}

@import "../../css/base/media-queries.pcss.css";

.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 (--lg) {

    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 (--lg) {

    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 (--lg) {

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

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

    }

  }

  @media (--lg) {

    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: 24px;

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

  @media (--lg) {

    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 (--lg) {

    position: relative; /* Anchor the image */

  }

}

<article{{ attributes.addClass('teaser') }}>

  <header>

    {% block prefix %}{% endblock %}

    <div class="teaser__meta">

      {% block meta %}{% endblock %}

    </div>

    <div class="teaser__top">

      <div class="teaser__image">{% block image %}{% endblock %}</div>

      {% block title %}{% endblock %}

    </div>

  </header>

  <div class="teaser__content">

    {% block content %}{% endblock %}

  </div>

</article>

  margin-block-end: var(--sp2);

}

.node--view-mode-teaser .field {

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

}

.node--view-mode-teaser .field:last-child {

  margin-block-end: 0;

}

@media (min-width: 62.5rem) {

  .node--view-mode-teaser .field {

    margin-block-end: var(--sp2);

  }

}

.field__label {

  font-weight: bold;

}