PSI Software SE Design Library

Contact Link

No notes defined.

<!-- Default -->
<div class="contactLink">
    <span class="contactLink-title">Titel</span> <a class="contactLink-link" href="#"><span class="contactLink-label">Label</span></a>
</div>


<!-- Web -->
<div class="contactLink" data-type="web">
    <span class="contactLink-title">Homepage</span> <a class="contactLink-link" href="#"><span class="contactLink-label">website.com</span></a>
</div>


<!-- Mail -->
<div class="contactLink" data-type="mail">
    <span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>


<!-- Phone -->
<div class="contactLink" data-type="phone">
    <span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>


<!-- Mobile -->
<div class="contactLink" data-type="mobile">
    <span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>


<!-- Fax -->
<div class="contactLink" data-type="fax">
    <span class="contactLink-title">Fax</span> <a class="contactLink-link" href="#"><span class="contactLink-label">+49 123 456789</span></a>
</div>


<!-- Location -->
<div class="contactLink" data-type="location">
    <span class="contactLink-title">Location</span> <a class="contactLink-link" href="https://maps.app.goo.gl/8SJxLW5jYD7ob4mG9"><span class="contactLink-label">Google Maps</span></a>
</div>


<!-- Linkedin -->
<div class="contactLink" data-type="linkedin">
    <span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>


<!-- X -->
<div class="contactLink" data-type="x">
    <span class="contactLink-title">X</span> <a class="contactLink-link" href="https://twitter.com/psiag/"><span class="contactLink-label">@psi-se</span></a>
</div>


<!-- Multiline -->
<div class="contactLink" data-type="web">
    <span class="contactLink-title">Multiline</span> <a class="contactLink-link" href="#"><span class="contactLink-label">Dies ist ein<br>mehrzeiliges Label</span></a>
</div>


<!-- Large -->
<div class="contactLink is-large">
    <span class="contactLink-title">Titel</span> <a class="contactLink-link" href="#"><span class="contactLink-label">Label</span></a>
</div>


<!-- Web Large -->
<div class="contactLink is-large" data-type="web">
    <span class="contactLink-title">Homepage</span> <a class="contactLink-link" href="#"><span class="contactLink-label">website.com</span></a>
</div>


<!-- Documenation only -->
<section class="doc-section">

    <h2 class="doc-section-title">Medium (Default)</h2>

    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Default</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <div class="contactLink">
            <span class="contactLink-title">Titel</span> <a class="contactLink-link" href="#"><span class="contactLink-label">Label</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Web</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="web"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="web">
            <span class="contactLink-title">Homepage</span> <a class="contactLink-link" href="#"><span class="contactLink-label">website.com</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Mail</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="mail"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="mail">
            <span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Phone</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="phone"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="phone">
            <span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Mobile</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="mobile"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="mobile">
            <span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Fax</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="fax"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="fax">
            <span class="contactLink-title">Fax</span> <a class="contactLink-link" href="#"><span class="contactLink-label">+49 123 456789</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Location</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="location"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="location">
            <span class="contactLink-title">Location</span> <a class="contactLink-link" href="https://maps.app.goo.gl/8SJxLW5jYD7ob4mG9"><span class="contactLink-label">Google Maps</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type LinkedIn</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="linkedin"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="linkedin">
            <span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type X (Twitter)</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="x"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="x">
            <span class="contactLink-title">X</span> <a class="contactLink-link" href="https://twitter.com/psiag/"><span class="contactLink-label">@psi-se</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Multiline</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="web"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink" data-type="web">
            <span class="contactLink-title">Multiline</span> <a class="contactLink-link" href="#"><span class="contactLink-label">Dies ist ein<br>mehrzeiliges Label</span></a>
        </div>

    </div>
</section>
<section class="doc-section">

    <h2 class="doc-section-title">Large</h2>

    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Default</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <div class="contactLink is-large">
            <span class="contactLink-title">Titel</span> <a class="contactLink-link" href="#"><span class="contactLink-label">Label</span></a>
        </div>

    </div>
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Type Web</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[data-type="web"]</li>
                </ul>
            </div>

        </header>

        <div class="contactLink is-large" data-type="web">
            <span class="contactLink-title">Homepage</span> <a class="contactLink-link" href="#"><span class="contactLink-label">website.com</span></a>
        </div>

    </div>
</section>


<!-- Default -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Web -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Mail -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Phone -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Mobile -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Fax -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Location -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Linkedin -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- X -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Multiline -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Large -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Web Large -->
<div class="contactLink{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    <span class="contactLink-title">{{{title}}}</span> <a class="contactLink-link" href="{{url}}"><span class="contactLink-label">{{{label}}}</span></a>
</div>

<!-- Documenation only -->
{{#sections}}
<section class="doc-section">

        {{#title}}
    <h2 class="doc-section-title">{{{.}}}</h2>
        {{/title}}

        {{#variants}}
    <div class="doc-variant" style="margin-bottom: var(--sp)">

        <header class="doc-variant-header">

                {{#title}}
            <h2 class="doc-variant-title">{{{.}}}</h2>
                {{/title}}

            <div class="doc-variant-configuration">
                    {{#if modifiers}}
                <ul data-label="Modifier">
                        {{#modifiers}}
                    <li>{{{.}}}</li>
                        {{/modifiers}}
                </ul>
                    {{/if}}
            </div>

        </header>

        {{#samples}}
            {{render '@contactlink' (contextData '@contactlink' this) merge=true}}
        {{/samples}}
    </div>
        {{/variants}}
</section>
    {{/sections}}
 
/* Default */
{
  "title": "Titel",
  "label": "Label",
  "url": "#"
}


/* Web */
{
  "title": "Homepage",
  "label": "website.com",
  "url": "#",
  "type": "web"
}


/* Mail */
{
  "title": "E-Mail",
  "label": "mail@domain.com",
  "url": "mailto:mail@domain.com",
  "type": "mail"
}


/* Phone */
{
  "title": "Telefon",
  "label": "+49 123 456789",
  "url": "tel:+49123456789",
  "type": "phone"
}


/* Mobile */
{
  "title": "Telefon",
  "label": "+49 123 456789",
  "url": "tel:+49123456789",
  "type": "mobile"
}


/* Fax */
{
  "title": "Fax",
  "label": "+49 123 456789",
  "url": "#",
  "type": "fax"
}


/* Location */
{
  "title": "Location",
  "label": "Google Maps",
  "url": "https://maps.app.goo.gl/8SJxLW5jYD7ob4mG9",
  "type": "location"
}


/* Linkedin */
{
  "title": "LinkedIn",
  "label": "@psi-se",
  "url": "https://de.linkedin.com/company/psi-se",
  "type": "linkedin"
}


/* X */
{
  "title": "X",
  "label": "@psi-se",
  "url": "https://twitter.com/psiag/",
  "type": "x"
}


/* Multiline */
{
  "title": "Multiline",
  "label": "Dies ist ein<br>mehrzeiliges Label",
  "url": "#",
  "type": "web"
}


/* Large */
{
  "title": "Titel",
  "label": "Label",
  "url": "#",
  "modifier": "is-large"
}


/* Web Large */
{
  "title": "Homepage",
  "label": "website.com",
  "url": "#",
  "modifier": "is-large",
  "type": "web"
}


/* Documenation only */
{
  "title": "Titel",
  "label": "Label",
  "url": "#",
  "sections": [
    {
      "title": "Medium (Default)",
      "variants": [
        {
          "title": "Default",
          "samples": {
            "title": "Titel",
            "label": "Label",
            "url": "#"
          }
        },
        {
          "title": "Type Web",
          "modifiers": "[data-type=\"web\"]",
          "samples": {
            "title": "Homepage",
            "label": "website.com",
            "url": "#",
            "type": "web"
          }
        },
        {
          "title": "Type Mail",
          "modifiers": "[data-type=\"mail\"]",
          "samples": {
            "title": "E-Mail",
            "label": "mail@domain.com",
            "url": "mailto:mail@domain.com",
            "type": "mail"
          }
        },
        {
          "title": "Type Phone",
          "modifiers": "[data-type=\"phone\"]",
          "samples": {
            "title": "Telefon",
            "label": "+49 123 456789",
            "url": "tel:+49123456789",
            "type": "phone"
          }
        },
        {
          "title": "Type Mobile",
          "modifiers": "[data-type=\"mobile\"]",
          "samples": {
            "title": "Telefon",
            "label": "+49 123 456789",
            "url": "tel:+49123456789",
            "type": "mobile"
          }
        },
        {
          "title": "Type Fax",
          "modifiers": "[data-type=\"fax\"]",
          "samples": {
            "title": "Fax",
            "label": "+49 123 456789",
            "url": "#",
            "type": "fax"
          }
        },
        {
          "title": "Type Location",
          "modifiers": "[data-type=\"location\"]",
          "samples": {
            "title": "Location",
            "label": "Google Maps",
            "url": "https://maps.app.goo.gl/8SJxLW5jYD7ob4mG9",
            "type": "location"
          }
        },
        {
          "title": "Type LinkedIn",
          "modifiers": "[data-type=\"linkedin\"]",
          "samples": {
            "title": "LinkedIn",
            "label": "@psi-se",
            "url": "https://de.linkedin.com/company/psi-se",
            "type": "linkedin"
          }
        },
        {
          "title": "Type X (Twitter)",
          "modifiers": "[data-type=\"x\"]",
          "samples": {
            "title": "X",
            "label": "@psi-se",
            "url": "https://twitter.com/psiag/",
            "type": "x"
          }
        },
        {
          "title": "Multiline",
          "modifiers": "[data-type=\"web\"]",
          "samples": {
            "title": "Multiline",
            "label": "Dies ist ein<br>mehrzeiliges Label",
            "url": "#",
            "type": "web"
          }
        }
      ]
    },
    {
      "title": "Large",
      "variants": [
        {
          "title": "Default",
          "samples": {
            "title": "Titel",
            "label": "Label",
            "url": "#",
            "modifier": "is-large"
          }
        },
        {
          "title": "Type Web",
          "modifiers": "[data-type=\"web\"]",
          "samples": {
            "title": "Homepage",
            "label": "website.com",
            "url": "#",
            "modifier": "is-large",
            "type": "web"
          }
        }
      ]
    }
  ]
}
  • Content: 
    $contactLink_icon_size: var(--icon-size) !default;

@import "_contactLink.settings";
@import "_contactLink.styles";

%contactLink {
    --icon-size: 24px;
}

%contactLink--large {

    & + & {
        @include stack-spacing(small);
    }

    %contactLink-link {
        @extend %link--stand-alone;
        @include stack-spacing(0);

        &::before {
            margin-right: .25em;
        }

        > span {
            background-image: linear-gradient(to left, transparent, transparent 50%, $link_text-decoration-color--hover 50%, $link_text-decoration-color--hover);
        }

    }

}

.contactLink.is-large {
    @extend %contactLink--large;
}
  • URL: /components/raw/contactlink/_contactLink.scss
  • Filesystem Path: components/03-fragments/contactLink/_contactLink.scss
  • Size: 658 Bytes
  • Content: 
    $contactLink_icon_size: 24px !default;

$contactLink_title_styles: (
) !default;

$contactLink_icon_stroke-width: 3 !default;

$contactLink_icons: (
    fax: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 15V7.5H36V15M12 33H4.5V18C4.5 16.3425 5.955 15 7.74938 15H40.2506C42.045 15 43.5 16.3425 43.5 18V33H36"/><circle cx="35" cy="22" r="0.75"/><rect x="12" y="28.5" width="24" height="12"/></svg>',
    linkedin: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="1.5"/><path d="M16.5 21V33"/><path d="M22.5 21V33M22.5 26.25C22.5 24.8576 23.0531 23.5223 24.0377 22.5377C25.0223 21.5531 26.3576 21 27.75 21C29.1424 21 30.4777 21.5531 31.4623 22.5377C32.4469 23.5223 33 24.8576 33 26.25V33"/><circle cx="16.5" cy="15.75" r="0.75"/></svg>',
    location: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M39 19.5C39 33 24 43.5 24 43.5C24 43.5 9 33 9 19.5C9 15.5218 10.5804 11.7064 13.3934 8.8934C16.2064 6.08035 20.0218 4.5 24 4.5C27.9782 4.5 31.7936 6.08035 34.6066 8.8934C37.4196 11.7064 39 15.5218 39 19.5Z"/><circle cx="24" cy="19.5" r="6"/></svg>',
    mail: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M41 11.5L24 27L7 11.5"/><path d="M6 10.5H42V36C42 36.8284 41.3284 37.5 40.5 37.5H7.5C6.67157 37.5 6 36.8284 6 36V10.5Z"/></svg>',
    mobile: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M36 40.5V7.5C36 5.84315 34.6569 4.5 33 4.5L15 4.5C13.3431 4.5 12 5.84315 12 7.5L12 40.5C12 42.1569 13.3431 43.5 15 43.5H33C34.6569 43.5 36 42.1569 36 40.5Z"/><circle cx="24" cy="10.75" r="0.75"/></svg>',
    phone: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M29.8231 28.2515C30.0309 28.1132 30.2698 28.029 30.5183 28.0064C30.7668 27.9838 31.017 28.0236 31.2463 28.1221L40.0888 32.084C40.3867 32.2113 40.6355 32.4318 40.7977 32.7123C40.96 32.9929 41.027 33.3184 40.9888 33.6402C40.6974 35.8172 39.6254 37.8142 37.972 39.26C36.3186 40.7058 34.1964 41.5019 32 41.5002C25.237 41.5002 18.751 38.8136 13.9688 34.0314C9.1866 29.2492 6.5 22.7632 6.5 16.0002C6.49832 13.8038 7.2944 11.6816 8.74018 10.0282C10.186 8.3748 12.183 7.30276 14.36 7.01145C14.6818 6.97322 15.0074 7.04024 15.2879 7.20248C15.5684 7.36472 15.7889 7.61346 15.9163 7.91145L19.8781 16.7615C19.9755 16.9888 20.0151 17.2366 19.9935 17.4829C19.9719 17.7293 19.8898 17.9664 19.7544 18.1733L15.7475 22.9377C15.6054 23.1522 15.5213 23.3998 15.5036 23.6565C15.4858 23.9132 15.535 24.1701 15.6463 24.4021C17.1969 27.5765 20.4781 30.8183 23.6619 32.354C23.8951 32.4647 24.1532 32.5128 24.4106 32.4934C24.6681 32.474 24.916 32.3878 25.13 32.2433L29.8231 28.2515Z"/></svg>',
    web: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M40.5 19.5L40.4981 7.50187L28.5 7.5M25.5 22.5L40.5 7.5M34.5 25.5V39C34.5 39.3978 34.342 39.7794 34.0607 40.0607C33.7794 40.342 33.3978 40.5 33 40.5H9C8.60218 40.5 8.22064 40.342 7.93934 40.0607C7.65804 39.7794 7.5 39.3978 7.5 39V15C7.5 14.6022 7.65804 14.2206 7.93934 13.9393C8.22064 13.658 8.60218 13.5 9 13.5H22.5"/></svg>',
    x: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$contactLink_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M26.3104 21.54L39.0004 40H31.0004L21.6904 26.46M26.3104 21.54L17 8H9L21.6904 26.46M26.3104 21.54L38.9996 8M21.6904 26.46L9 40"/></svg>'
) !default;
  • URL: /components/raw/contactlink/_contactLink.settings.scss
  • Filesystem Path: components/03-fragments/contactLink/_contactLink.settings.scss
  • Size: 4.5 KB
  • Content: 
    %contactLink {
    @include stack-spacing();

    & + & {
        @include stack-spacing(0);
    }

    &-title {
        @include styles($contactLink_title_styles);

        &::after {
            content: ":";
        }

    }

    &-link {
        @extend %link;
        @include stack-spacing(0);

        display: inline-flex;

        &:link,
        &:visited {
            text-decoration-color: transparent,
        }

    }

        //***** Variants with type *****//

    &[data-type] &-title {
        @extend %visually-hidden;
    }

    &[data-type] &-link {
        align-items: flex-start;

        &:not([disabled]):not([aria-disabled=true]):focus-visible {
            padding-left: .2em;

            &::before {
                left: .2em;
            }

        }

        &::before {
            content: "";

            flex-shrink: 0;

            display: inline-block;
            width: $contactLink_icon_size;
            height: (1rem * $_line-height);
            height: 1lh;

            vertical-align: middle;

            background-repeat: no-repeat;
            background-position: center;
            background-size: $contactLink_icon_size $contactLink_icon_size;
        }

    }

    @each $type in map.keys($contactLink_icons) {

        &[data-type="#{$type}"] &-link::before {
            background-image: svg-url(map.get($contactLink_icons, $type));
        }

        [data-theme="dark"] &[data-type="#{$type}"] &-link::before {
            background-image: svg-url(map.get($contactLink_icons, $type), $_PAGE-COLOR);
        }

    }


}

.contactLink {
    @extend %contactLink;

    &-title {
        @extend %contactLink-title;
    }

    &-link {
        @extend %contactLink-link;
    }

}
  • URL: /components/raw/contactlink/_contactLink.styles.scss
  • Filesystem Path: components/03-fragments/contactLink/_contactLink.styles.scss
  • Size: 1.7 KB