solarwood components for Magento 2

Logo 

<a class="logo " href="/components/preview/home" aria-label="Homepage">
    <img class="logo__image " src="/images/logo/logo.svg" alt="Solarwood Logo">
</a>
 
<a
    class="logo {{ class }}"
    href="{{ href }}"
    aria-label="{{ ariaLabel}}"
>
    <img
        class="logo__image {{ imageClass }}"
        {{#if imageSrcSet }}
            srcset="{{ imageSrcSet }}"
        {{/if}}
        src="{{ imageSrc }}"
        alt="{{ imageAlt }}"
        {{{ imageAttributes }}}
    >
</a>
 
{
  "class": "",
  "ariaLabel": "Homepage",
  "imageAlt": "Solarwood Logo",
  "imageAttributes": "",
  "imageClass": "",
  "imageSrcSet": "",
  "imageSrc": "/images/logo/logo.svg",
  "href": "/components/preview/home"
}
  • Content: 
    $logo__max-width           : 80px !default;
$logo__max-width\@medium   : 350px !default;
$logo__max-width\@large    : 250px !default;
$logo__image-height        : auto !default;
$logo__image-height\@medium: 45px !default;
$logo__image-width\@medium : auto !default;

.logo {
    display: flex;
    flex: 1  calc(#{$logo__max-width} * 2);
    max-width: calc(#{$logo__max-width} * 2);
    order: 0;
    margin-top: 12px;
    @include mq($screen-l) {
        margin-top: 1.5rem;
        max-width: $logo__max-width\@medium;
        justify-content: center;
    }
    @include mq($screen-l) {
        align-items: center;
        margin-top: 0;
        justify-content: flex-start;
        max-width: $logo__max-width\@large;
    }

    &__image {
        height: $logo__image-height;
        width: 300px;
        margin: 5px 0;
        //filter: invert(44%) sepia(26%) saturate(840%) hue-rotate(353deg) brightness(94%) contrast(82%);

        @include mq($screen-l) {
            height: $logo__image-height\@medium;
            width: $logo__image-width\@medium;
            margin: 0;
        }
    }
}
.prismicio-route-view,
.prismicio-direct-page {
    .header {
        position: absolute;
        .logo {
            &__image {
                filter: brightness(0) invert(1);
            }
        }
        &.sticky {
            position: fixed;
            background: #fff;

            .logo {
                &__image {
                    filter: none;
                }
            }
            @media screen and (max-width: $screen-m){
                .side-menu__trigger {
                    background-image: url('/images/icons/menu-bg-blue-rotated.svg');
                    transform: rotate(0);
                    background-color: transparent !important;
                    height: 138px;
                    width: 138px;
                    left: auto;
                    top: -50px;
                    right: -40px;
                    position: absolute;
                    .icon {
                        fill: $white;
                        transform: rotate(180deg);
                        margin-top: 26px;
                        margin-right: 8px !important;
                    }
                }
            }
        }
    }
}
.footer_logo--image {
    max-width: 60%;
    margin: 0 auto;
}
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: build/components/Molecules/logo/_logo.scss
  • Size: 2.3 KB

There are no notes for this item.