V6 Clearleft Patterns

Contact Modal 

<div class="Contact-modal" id="modal_form-footer" data-modal="true" data-modal-close="Close" data-modal-close-class="Contact-modal__close">
    <div data-modal-document="true" class="Contact-modal__modal constrain pad-after-m">
        <header class="Contact-modal__header">
            <a href="/" class="Contact-modal__logo focus">
                <svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 154 54">
                    <title id="clearleft-logo">Clearleft</title>
                    <style>
                        .Logo-streak {
                            mask-repeat: no-repeat;
                            stroke-dasharray: 150% 150%;
                            stroke-dashoffset: 150%;
                        }

                        .animateLogo-streak {
                            animation: swipe 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s forwards;
                        }

                        @keyframes swipe {
                            from {
                                stroke-dashoffset: 150%;
                            }

                            to {
                                stroke-dashoffset: 0;
                            }
                        }
                    </style>
                    <path class="Logo-text" fill="currentColor" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" />
                    <clippath id="contactMask">
                        <path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2" />
                    </clippath>
                    <path class="Logo-streak animateLogo-streak" clip-path="url(#contactMask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" />
                </svg> </a>
        </header>

        <div class="Contact-modal__inner pad-before-m">
            <div class="Contact-modal__intro flow">
                <h2 class="h h-3"></h2>
                <div class="body flow">
                    <p></p>
                </div>
                <svg class="Contact-modal__arrow" width="112px" viewbox="0 0 122 76">
                    <clippath id="arrowClip1">
                        <path d="M110.26,43.62s-23.75-7.29-30.33-9.08A163.57,163.57,0,0,1,57.5,26.31c-15-6.85-29.58-14.51-44.43-21.67-1.15-.57-3.05-1.16-4.52.19s-.3,3.75.56,4.58c5.58,5.44,11,11.15,17.27,15.71,13.15,9.54,27.7,16.49,43,22.31h.21s5.63,3,21.4,6.47,16.5.54,20.06-1C113.93,49.12,114.18,45.88,110.26,43.62Z" />
                    </clippath>

                    <clippath id="arrowClip2">
                        <path d="M113.16,43.39c-10.5-5-17.7-13.78-26.2-21.06a30.51,30.51,0,0,0-5.28-3.83c-3.6-1.94-6.68,0-5.77,3.92a42.59,42.59,0,0,0,5.5,11.87c1.69,2.44,8,8.91,9.14,10.23s2.53,1.77,1.12,3.18-18.58,2-20.27,1.69c-.15,0-.63-.07-1.34-.13-2.2.09-4.39.19-6.58.35-4.55.36-7.31,3.1-7.1,7.18.08,3.67,2.87,6.21,7.26,6.44,17,.89,33.09-3.35,48.63-10.31C117,50.81,117.62,45.51,113.16,43.39Z" />
                    </clippath>

                    <path class="anim-arrow__path" pathlength="1" clip-path="url(#arrowClip1)" d="M5.2,2.66S31.57,24.48,61,35.88,113.5,50,113.5,50" fill="none" stroke="#23d8a0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="17" />
                    <path class="anim-arrow__path" pathlength="1" clip-path="url(#arrowClip2)" d="M74.51,15.61S106.25,43,105.83,48.48s-34.14,9.79-52.16,9.08" fill="none" stroke="#23d8a0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="21" />
                </svg>
            </div>

            [object Object]

            <button class="Button focus" type="submit"><span>Send</span></button>

        </div>
    </div>
</div>
 
<div class="Contact-modal" id="modal_form-footer" data-modal="true" data-modal-close="Close" data-modal-close-class="Contact-modal__close">
  <div data-modal-document="true" class="Contact-modal__modal constrain pad-after-m">
    <header class="Contact-modal__header">
      <a href="/" class="Contact-modal__logo focus">
        {% include '@logo' with {
          mask : 'contactMask'
        } %}
      </a>
    </header>

    <div class="Contact-modal__inner pad-before-m">
      <div class="Contact-modal__intro flow">
        <h2 class="h h-3">{{ form.name }}</h2>
        <div class="body flow">
          <p>{{ form.description }}</p>
        </div>
        <svg class="Contact-modal__arrow" width="112px" viewbox="0 0 122 76">
          <clippath id="arrowClip1">
            <path d="M110.26,43.62s-23.75-7.29-30.33-9.08A163.57,163.57,0,0,1,57.5,26.31c-15-6.85-29.58-14.51-44.43-21.67-1.15-.57-3.05-1.16-4.52.19s-.3,3.75.56,4.58c5.58,5.44,11,11.15,17.27,15.71,13.15,9.54,27.7,16.49,43,22.31h.21s5.63,3,21.4,6.47,16.5.54,20.06-1C113.93,49.12,114.18,45.88,110.26,43.62Z"/>
          </clippath>

          <clippath id="arrowClip2">
            <path d="M113.16,43.39c-10.5-5-17.7-13.78-26.2-21.06a30.51,30.51,0,0,0-5.28-3.83c-3.6-1.94-6.68,0-5.77,3.92a42.59,42.59,0,0,0,5.5,11.87c1.69,2.44,8,8.91,9.14,10.23s2.53,1.77,1.12,3.18-18.58,2-20.27,1.69c-.15,0-.63-.07-1.34-.13-2.2.09-4.39.19-6.58.35-4.55.36-7.31,3.1-7.1,7.18.08,3.67,2.87,6.21,7.26,6.44,17,.89,33.09-3.35,48.63-10.31C117,50.81,117.62,45.51,113.16,43.39Z"/>
          </clippath>

          <path class="anim-arrow__path" pathlength="1" clip-path="url(#arrowClip1)" d="M5.2,2.66S31.57,24.48,61,35.88,113.5,50,113.5,50" fill="none" stroke="#23d8a0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="17"/>
          <path class="anim-arrow__path" pathlength="1" clip-path="url(#arrowClip2)" d="M74.51,15.61S106.25,43,105.83,48.48s-34.14,9.79-52.16,9.08" fill="none" stroke="#23d8a0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="21"/>
        </svg>
      </div>

      {% set testTags = form.testTags is defined and form.testTags %}
      {% if testTags %}
        <form class="Contact-modal__form flow">
      {% else %}
        {{ form.openTag({
          attributes: {
            class: 'Contact-modal__form flow',
            novalidate: true
          }
        }) }}
      {% endif %}

        {% if form.submittedSuccessfully %}
        {% else %}
          {% for field in form.fields %}
            {% if field.handle == 'help' %}
              {% include '@checkboxes' with {
                title: field.label,
                name: field.handle ~ '[]',
                required: field.required,
                checkboxes: [
                  {
                    label: 'User research and human insight',
                    id: 'user-research-and-human-insight',
                  },
                  {
                    label: 'Internal service design',
                    id: 'internal-service-design',
                  },
                  {
                    label: 'Product design and design systems',
                    id: 'product-design-and-design-systems',
                  },
                ]
              } %}
            {% elseif field.handle == 'budget' %}
              {% include '@radio-buttons' with {
                title: field.label,
                name: field.handle,
                required: field.required,
                buttons: [
                  {
                    label: 'N/A',
                    id: 'na',
                    checked: true,
                  },
                  {
                    label: 'up to £50k',
                    id: '50k'
                  },
                  {
                    label: '£50 - £100k',
                    id: '100k'
                  },
                  {
                    label: '£100 - £250k',
                    id: '250k'
                  },
                  {
                    label: '£250k+',
                    id: 'plus'
                  },
                ]
              } %}
          {% elseif field.handle == 'message' %}
            {% include '@textarea' with {
              id : field.handle,
              name: field.handle,
              label: field.label,
              required: field.required,
              errors: field.errors,
              value: field.value
            } %}
          {% elseif field.handle == 'email' %}
            {% include '@text-input' with {
                label: field.label,
                name: field.handle,
                id: field.handle,
                required: field.required,
                errors: field.errors,
                type: 'email',
                value: field.value
              } %}
          {% else %}
            {% include '@text-input' with {
                label: field.label,
                name: field.handle,
                id: field.handle,
                required: field.required,
                errors: field.errors,
                type: 'text',
                value: field.value
              } %}
          {% endif %}
        {% endfor %}

        {% include "@button" with {
          text: "Send",
          attributes: {
            type: "submit",
          }
        } %}
      {% endif %}

      
      {% if testTags %}
        </form>
      {% else %}
        {{ form.closeTag() }}
      {% endif %}
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .Contact-modal {
  background-color: var(--transparent);
  &__modal {
    position: relative;
  }

  /* green swipe block */
  &:before {
    position: fixed;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: var(--green);
    width: 120%;
    height: 100%;
    transform: translateX(-120%);
    transform-origin: right;
    z-index: 2;
  }

  &__header {
    /* default hide - show if JS is enabled & it is in a modal */
    display: none;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  &__close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: var(--step--1);
    font-weight: bold;
    padding: 0.5rem;
    padding-right: 1.7rem;
    background-color: var(--white);

    &:after {
      position: absolute;
      content: '';
      width: 13px;
      height: 100%;
      top: 0;
      right: 0.5rem;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L1 11' stroke='%2325333a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1L11 11' stroke='%2325333a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    &:focus {
      outline: 2px solid var(--orange);
      outline-offset: 2px;
    }
  }

  &__logo {
    display: block;
    width: var(--logo-width);
    color: var(--dark);
  }

  &__intro {
    display: flex;
    flex-direction: column;

    p {
      padding-right: 7rem;
    }
  }

  &__arrow {
    transform: rotate(260deg) scale(-0.8, 0.8) translateX(-3rem);
    margin-left: auto;
  }

  &__form {
    --flow: 1.5rem;
    margin-top: 1rem;
  }
}

.has-js .Contact {
  &__modal {
    opacity: 0;
  }
  &:before {
    transform: translateX(-120%);
  }
}

.Contact[active-modal='true'] {
  background-color: var(--white);
  transition: background-color 0.1s 0.5s;
  .Contact__modal {
    transition: opacity 1.5s ease-out 0.4s;
    opacity: 1;
  }
  &:before {
    transition: transform 1.6s ease-out;
    transform: translateX(120%);
  }

  .Contact__header {
    display: block;
  }

  .animateLogo-streak {
    animation-delay: 1.5s;
  }

  .anim-arrow__path {
    stroke-dasharray: 1 1.5;
    stroke-dashoffset: 1;
    animation: draw 0.4s ease-out both;
    animation-delay: 2.2s;
  }

  .anim-arrow__path:last-of-type {
    animation-delay: 2.6s;
  }
}

/* petit swipey on lil screens */
@media screen and (max-width: 1000px) {
  .Contact[active-modal='true'] {
    background-color: var(--white);
    transition: background-color 0.1s 0.3s;
    .Contact__modal {
      transition-delay: 0.4s;
    }
    &:before {
      transition-duration: 1s;
    }

    .animateLogo-streak {
      animation-delay: 1.2s;
    }

    .anim-arrow__path {
      animation-delay: 1.5s;
    }

    .anim-arrow__path:last-of-type {
      animation-delay: 1.8s;
    }
  }
}

/* no swipey on big screens - such swipey - much headache */
@media screen and (min-width: 125rem) {
  .Contact[active-modal='true'] {
    background-color: var(--white);
    transition-duration: 0.001s;
    transition-delay: 0.001s;
    .Contact__modal {
      transition-duration: 0.001s;
      transition-delay: 0.001s;
    }
    &:before {
      transition-duration: 0.001s;
    }
  }
}

/* media */

@media screen and (min-width: 62.5rem) {
  .Contact {
    &__arrow {
      display: block;
      transform: rotate(0deg) scale(1) translate(0);
      margin-left: auto;
      margin-top: 3rem;
      margin-right: 7rem;
    }

    &__inner {
      display: flex;
    }

    &__form {
      width: 80%;
    }

    &__intro {
      margin-right: 3rem;
    }
  }
}

/* keyframes */

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
  • URL: /components/raw/contact-modal/contact-modal.css
  • Filesystem Path: src/templates/components/_deprecated/contact-modal/contact-modal.css
  • Size: 3.9 KB

No notes defined.