<div class="social-link  ">
    <a href="#" title="Social link" target="_blank">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#facebook-icon"></use>
        </svg>
    </a>
</div>
<div class="social-link {{ modifier }} {{ class }}">
    <a href="{{ url }}" title="{{ title }}" target="{{ target }}">
        <svg class="social-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ path '/dist/icons/icons.svg' }}#{{ icon }}"></use>
        </svg>
    </a>
</div>
{
  "url": "#",
  "title": "Social link",
  "target": "_blank",
  "icon": "facebook-icon"
}
  • Content:
    /*
     * Element: Link Social
     */
    
    /*Setting document variables*/
    :root {
        --social-background-color: var(--color-gray);
        --icon-color: var(--color-white);
        --facebook-background-color: var(--color-facebook);
        --twitter-background-color: var(--color-twitter);
        --google-plus-background-color: var(--color-google-plus);
    }
    
    .social-link {
        position: relative;
        width: 40px;
        height: 40px;
        background-color: var(--social-background-color);
        border-radius: 50%;
    
        &:hover,
        &:focus {
            background: shade(var(--social-background-color), 10%);
        }
    
        &__icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            fill: var(--icon-color);
        }
    
        &--facebook {
            background-color: var(--facebook-background-color);
    
            &:hover,
            &:focus {
                background: shade(var(--facebook-background-color), 10%);
            }
        }
    
        &--twitter {
            background-color: var(--twitter-background-color);
    
            &:hover,
            &:focus {
                background: shade(var(--twitter-background-color), 10%);
            }
        }
    
        &--google-plus {
            background-color: var(--google-plus-background-color);
    
            &:hover,
            &:focus {
                background: shade(var(--google-plus-background-color), 10%);
            }
        }
    }
    
  • URL: /components/raw/link-social/link-social.css
  • Filesystem Path: src/01-atoms/links/link-social/link-social.css
  • Size: 1.4 KB

There are no notes for this item.