Copy environment

Module Handle 

<span class="module-handle module-handle--no-img">
    <span class="module-handle__content">
        <span class="module-handle__text">
        </span>
    </span>
</span>
 
<span class="module-handle{% if not data.screenshot %} module-handle--no-img{% endif %}">
    {% if data.screenshot %}
        <img class="module-handle__img" src="{{ data.screenshot }}" data-layout="{{ data.layout }}" alt="Module preview">
    {% endif %}
    <span class="module-handle__content">
        <span class="module-handle__text">
            {{ data.title }}{% if data.sectionTitle %}: <strong>{{ data.sectionTitle }}</strong>{% endif %}
        </span>
        {% if data.url %}
            <a class="module-handle__button" href="{{ data.url }}" aria-label="Open module's styleguide example" target="_blank" rel="noopener">
                {% include '@icon' with { name: 'module-handle', class: 'module-handle__button-icon' } %}
            </a>
        {% endif %}
    </span>
</span>

{
  "language": "en-US"
}
  • Content: 
    .module-handle {
    position: absolute;
    display: inline-block;
    bottom: -1px;
    height: 37px;
    padding: 5px;
    margin-left: 5px;
    background-color: #ffffff;
    border: 1px solid #ccd0d4;
}

.module-handle--no-img {
    bottom: 0;
    height: auto;
    padding: 0;
    background-color: transparent;
    border: none;
}

.module-handle__img {
    display: block;
    width: auto;
    height: 100%;

    .block-editor-page & {
        width: auto !important;
        height: 100% !important;
    }
}

.module-handle__content {
    position: absolute;
    bottom: 8px;
    left: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
}

.module-handle__text {
    white-space: nowrap;
}

.module-handle-hover__img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.module-handle-hover {
    bottom: 0;
    position: absolute;
    right: 100%;
}

.module-handle-hover__inner {
    background: #ffffff;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #2f353e;
    bottom: 0;
    display: block;
    width: 500px;
    position: absolute;
    right: 5px;
}

.module-handle__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    font-size: 12px;
    line-height: 12px;
    border: transparent solid 1px;
    border-radius: 100%;
    background-color: #f5f5f5;

    &:hover {
        border-color: #2271b1;
    }
}

.module-handle__button-icon {
    width: 1em;
    height: 1em;
    fill: #444444;

    .module-handle__button:hover & {
        fill: #2271b1;
    }
}
  • URL: /components/raw/module-handle/module-handle.scss
  • Filesystem Path: src/patterns/components/module-handle/module-handle.scss
  • Size: 1.6 KB
  • Content: 
    import './module-handle.scss';

jQuery(($: JQueryStatic): void => {
    $(document).on('mouseenter', 'a[data-layout]', (event: JQuery.MouseEnterEvent): void => {
        const target: JQuery = $(event.currentTarget);
        const screenshot: string | undefined = $('.module-handle__img[data-layout="' + target.data('layout') + '"]').attr('src');

        if (screenshot) {
            $('<div class="module-handle-hover"><div class="module-handle-hover__inner"><img class="module-handle-hover__img" src="' + screenshot + '"></div></div>').appendTo(target.closest('.acf-fc-popup'));
        }
    });

    $(document).on('mouseleave', 'a[data-layout]', (): void => {
        $('.module-handle-hover').remove();
    });
});
  • URL: /components/raw/module-handle/module-handle.ts
  • Filesystem Path: src/patterns/components/module-handle/module-handle.ts
  • Size: 723 Bytes
  • Handle: @module-handle--default
  • Filesystem Path: src/patterns/components/module-handle/module-handle.twig
  • References (1): @icon