<div id="modal-" class="person-modal modal" aria-hidden>
    <div class="modal__overlay modal__trigger" data-id="modal-"></div>
    <div class="modal__window">
        <button class="modal__close modal__trigger" data-id="modal-"></button>
        <div class="modal__content">
            <aside class="person-modal__aside stack-l">
                <div class="person-item person-item--">
                    <figure>
                        <img src="/images/team/.png" alt="">
                    </figure>
                    <h3></h3>
                    <h4></h4>
                </div>
                <div class="person-modal__links">

                </div>
            </aside>
            <div class="person-modal__bio stack-l">

            </div>
        </div>
    </div>
</div>
<div id="modal-{{loop.index}}" class="person-modal modal" aria-hidden>
  <div class="modal__overlay modal__trigger" data-id="modal-{{loop.index}}"></div>
  <div class="modal__window">
    <button class="modal__close modal__trigger" data-id="modal-{{loop.index}}"></button>
    <div class="modal__content">
      <aside class="person-modal__aside stack-l">
        {% include '@person-item' %}
        <div class="person-modal__links">
          {% if person.links.email %}
            <a href={{ person.links.email }} target="_blank" class="profile__icon"><img src="/images/icon/email.svg"></a>
          {% endif %}
          {% if person.links.linkedin %}
            <a href={{ person.links.linkedin }} target="_blank" class="profile__icon"><img src="/images/icon/linkedin.svg"></a>
          {% endif %}
          {% if person.links.twitter %}
            <a href={{ person.links.twitter }} target="_blank" class="profile__icon"><img src="/images/icon/twitter.svg"></a>
          {% endif %}
        </div>
      </aside>
      <div class="person-modal__bio stack-l">
        {{person.bio}}
      </div>
    </div>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    /* Structural Styles */
    .person-modal .modal__content {
      display: flex;
      flex-direction: column;
      @include breakpoint($large) { flex-direction: row; }
    }
    
    /* Visual Styles */
    .person-modal .modal__content {
      background-color: var(--colors-white);
      box-shadow: 8px 8px 32px hsla(var(--black-hsl), .2);
      padding: var(--s2);
    }
    
    .person-modal__aside {
      flex: 5;
      text-align: center;
      @include breakpoint($large) { max-width: 40ch; }
    }
    
    .person-modal__bio {
      max-width: 70ch;
      flex: 8;
      @include breakpoint($large) { padding-left: var(--s2); }
    }
    
    .person-modal__links > * {
      vertical-align: top;
    }
    
    .person-modal__links > * + * {
      margin-left: var(--s1);
    }
    
    @include breakpoint($small-only) { 
      .person-modal .modal__window {
        max-width: 96vw;
      }
    
      .person-modal .person-item figure {
        --n: 1;
        --d: 1;
        // width: 300px;
        margin-left: auto;
        margin-right: auto;
      } 
    }
  • URL: /components/raw/person-modal/person-modal.scss
  • Filesystem Path: src/components/04-modules/person-modal/person-modal.scss
  • Size: 897 Bytes

There are no notes for this item.