snurky components for Magento 2

Brief Info: Link 

<div class="brief-info brief-info--link">
    <ul class="list brief-info__items-container">
        <li class="brief-info__list-item list__item">
            <a class="
                        brief-info__link
                        link button button--icon button--icon-light
                    " href="#">
                <span class="
                            brief-info__icon-wrapper
                            
                        ">
                    <svg class="icon brief-info__icon" role="presentation" focusable="false">
                        <title>Free shipping icon</title>
                        <use xlink:href="/images/icons-sprite.svg#theme-shipping"></use>
                    </svg>

                </span>

                <span class="brief-info__title ">
                    Free Shipping
                </span>
                <span class="brief-info__subtitle
                                
                            ">
                    On Hundreds of Products
                </span>
            </a>
        </li>
    </ul>
</div>
 
<div class="brief-info {{ class }}">
    <ul class="list brief-info__items-container">
        {{#each items as |item|}}
            <li class="brief-info__list-item list__item">
                <a
                    class="
                        brief-info__link
                        {{ item.linkClass }}
                    "
                    {{{ item.linkAttributes }}}
                >
                    <span
                        class="
                            brief-info__icon-wrapper
                            {{ item.iconWrapperClass }}
                        "
                    >
                        {{ render '@icon' item.icon }}
                    </span>

                    <{{ item.title.tag }}
                        class="brief-info__title {{ item.title.class }}"
                        {{{ item.title.attributes }}}
                    >
                        {{ item.title.text }}
                    </{{ item.title.tag }}>
                    {{#if item.subtitle.tag }}
                        <{{ item.subtitle.tag }}
                            class="brief-info__subtitle
                                {{ item.subtitle.class }}
                            "
                            {{{ item.subtitle.attributes }}}
                        >
                            {{ item.subtitle.text }}
                        </{{ item.subtitle.tag }}>
                    {{/if}}
                </a>
            </li>
        {{/each}}
    </ul>
</div>
 
{
  "items": [
    {
      "isButton": false,
      "linkClass": "link button button--icon button--icon-light",
      "linkAttributes": "href=\"#\"",
      "iconLabel": "Delivery",
      "iconWrapperClass": "",
      "icon": {
        "class": "brief-info__icon",
        "id": "theme-shipping",
        "title": "Free shipping icon",
        "hidden": true
      },
      "title": {
        "class": "",
        "tag": "span",
        "text": "Free Shipping"
      },
      "subtitle": {
        "class": "",
        "tag": "span",
        "text": "On Hundreds of Products"
      }
    }
  ],
  "class": "brief-info--link"
}
  • Content: 
    $brief-info__mq-display                  : $screen-l !default;
$brief-info__padding                     : 0 !default;
$brief-info__border                      : $spacer--extra-small solid $gray-light !default;
$brief-info__justyfi-content             : space-between !default;

$brief-info__icon-size                   : 48px !default;
$brief-info__icon-fill                   : $white !default;
$brief-info__item-padding                : $spacer !default;

$brief-info__title-text-transform        : uppercase !default;
$brief-info__title-font-family           : $font-family-base !default;
$brief-info__title-font-size             : $font-size-medium !default;
$brief-info__title-font-weight           : $font-weight-bold !default;
$brief-info__title-margin                : 0 !default;
$brief-info__title-color                 : $white !default;
$brief-info__title-text-align            : left !default;

$brief-info__subtitle-font-size          : $font-size-base !default;
$brief-info__subtitle-font-wight         : $font-weight-base !default;
$brief-info__subtitle-text-transform     : none !default;
$brief-info__subtitle-color              : $color-secondary !default;
$brief-info__subtitle-margin             : 0 !default;

$vreif-info__content-text-decoration     : none !default;

// dividers
$brief-info__divider-width               : $border-width-base !default;
$brief-info__divider-top                 : $spacer !default;
$brief-info__divider-bottom              : $spacer !default;
$brief-info__divider-left                : auto !default;
$brief-info__divider-right               : 0 !default;
$brief-info__divider-color               : $border-color-base !default;

$brief-info__item--width                 : calc(33.333333% - #{$spacer}) !default;
$brief-info__mq-display--dividers        : $screen-m !default;

$brief-info__padding--dividers           : $spacer--m 0 !default;
$brief-info__border--dividers            : 0 !default;
$brief-info__border-width--dividers      : $spacer--extra-small 0 !default;

$brief-info__item-padding--dividers      : 0 $spacer--semi-medium !default;
$brief-info__item-padding--dividers\@xl  : $spacer $spacer--large !default;
$brief-info__item-margin--dividers       : 0 !default;
$brief-info__item-margin--dividers\@xl   : 0 !default;

$brief-info__icon-size--dividers         : 24px !default;
$brief-info__icon-margin--dividers       : 0 0 $spacer !default;
$brief-info__icon-margin--dividers\@large: 0 $spacer--medium 0 0 !default;

$brief-info__title-font-weight--dividers : $font-weight-bold !default;
$brief-info__title-font-size--dividers   : $brief-info__title-font-size !default;
$brief-info__title-height--dividers      : 32px !default;

//link
$brief-info__link-padding                : 0 0 0 ($brief-info__icon-size + $spacer--medium) !default;

$brief-info__title-color--link           : gray-darker !default;
$brief-info__title-font-size--link       : $font-size-medium !default;
$brief-info__title-font-weight--link     : $font-weight-bold !default;
$brief-info__title-line-heigh--link      : 24px !default;
$brief-info__title-margin--link          : 0 !default;
$brief-info__title-padding--link         : 0 !default;

$brief-info__subtitle-font-size--link    : $font-size-small !default;
$brief-info__subtitle-font-weight--link  : $font-weight-normal !default;
$brief-info__subtitle-line-height--link  : 16px !default;
$brief-info__subtitle-margin--link       : 0 !default;
$brief-info__subtitle-padding--link      : 0 !default;
  • URL: /components/raw/brief-info/_brief-info-variables.scss
  • Filesystem Path: build/components/Organisms/brief-info/_brief-info-variables.scss
  • Size: 3.5 KB
  • Content: 
    @import 'brief-info-variables';

.brief-info {
    display: none;

    @include mq($brief-info__mq-display) {
        display: block;
        padding: $brief-info__padding;
    }

    &--dividers {
        @include mq($brief-info__mq-display--dividers) {
            display: block;
            padding: $brief-info__padding--dividers;
            border: $brief-info__border--dividers;
            border-width: $brief-info__border-width--dividers;
        }

        .brief-info__item {
            padding: $brief-info__item-padding--dividers;
            margin: $brief-info__item-margin--dividers;
            flex: 1 1 100%;

            @include mq($screen-xl) {
                background: $theme-second;
                padding: $spacer--small $spacer--semi-medium;
                margin: 0;
                align-items: center;
                justify-content: center;
            }

            &:not(:last-child) {
                &:after {
                    //content: '';
                    display: block;
                    position: absolute;
                    width: $brief-info__divider-width;
                    top: $brief-info__divider-top;
                    bottom: $brief-info__divider-bottom;
                    left: $brief-info__divider-left;
                    right: $brief-info__divider-right;
                    background-color: $brief-info__divider-color;
                }
            }
        }

        .brief-info__items-container {
            @include mq($brief-info__mq-display--dividers) {
                flex-flow: row nowrap;
            }
        }

        .brief-info__item {
            @include mq($brief-info__mq-display--dividers) {
                flex-flow: column wrap;
                align-items: center;
                max-width: $brief-info__item--width;
                border-radius: 5px;
            }

            @include mq($screen-l) {
                flex-flow: row nowrap;
            }
        }

        .brief-info__icon-wrapper {
            width: $brief-info__icon-size--dividers;
            height: $brief-info__icon-size--dividers;
            margin: $brief-info__icon-margin--dividers;

            @include mq($screen-l) {
                margin: $brief-info__icon-margin--dividers\@large;
            }
        }

        .brief-info__title {
            font-weight: $brief-info__title-font-weight--dividers;
            font-size: $brief-info__title-font-size--dividers;

            @include font-padding(
                $brief-info__title-font-size--dividers,
                $brief-info__title-height--dividers
            );
        }
    }

    &--link {
        .brief-info__icon-wrapper {
            position: absolute;
            left: 0;
        }

        .brief-info__title {
            display: block;
            color: $brief-info__title-color--link;
            font-size: $brief-info__title-font-size--link;
            font-weight: $brief-info__title-font-weight--link;
            line-height: $brief-info__title-line-heigh--link;
            margin: $brief-info__title-margin--link;
            padding: $brief-info__title-padding--link;
        }

        .brief-info__subtitle {
            display: block;
            font-size: $brief-info__subtitle-font-size--link;
            font-weight: $brief-info__subtitle-font-weight--link;
            line-height: $brief-info__subtitle-line-height--link;
            margin: $brief-info__subtitle-margin--link;
            padding: $brief-info__subtitle-padding--link;
        }
    }

    &__items-container {
        display: flex;
        justify-content: $brief-info__justyfi-content;
        flex-flow: column nowrap;

        @include mq($brief-info__mq-display) {
            flex-flow: row nowrap;
        }
    }

    &__list-item {
        flex-grow: 1;

        &:last-child {
            padding-bottom: 0;
        }
    }

    &__item {
        display: flex;
        position: relative;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1;
        padding: $brief-info__item-padding;

        &[type="button"] {
            background-color: $white;
            border: 0;
            text-align: left;
            cursor: pointer;
        }

        @include mq($brief-info__mq-display) {
            flex-flow: row nowrap;
        }
    }

    &__icon-wrapper {
        width: $brief-info__icon-size;
        height: $brief-info__icon-size;

        .icon {
            width: 100%;
            height: 100%;
            fill: $brief-info__icon-fill;
        }
    }

    &__title {
        margin: $brief-info__title-margin;
        color: $brief-info__title-color;
        font-family: $brief-info__title-font-family;
        font-size: $brief-info__title-font-size;
        font-weight: $brief-info__title-font-weight;
        text-transform: $brief-info__title-text-transform;
        text-align: $brief-info__title-text-align;
    }

    &__subtitle {
        margin: $brief-info__subtitle-margin;
        font-size: $brief-info__subtitle-font-size;
        font-weight: $brief-info__subtitle-font-wight ;
        text-transform: $brief-info__subtitle-text-transform;
        color: $brief-info__subtitle-color;
    }

    &__content {
        text-decoration: $vreif-info__content-text-decoration;
    }

    &__link {
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        align-items: flex-start;
        padding: $brief-info__link-padding;

        &:before {
            max-width: $brief-info__icon-size;
        }

        &:hover,
        &.focus-visible {
            text-decoration: none;
            color: inherit;
        }
    }
}
  • URL: /components/raw/brief-info/_brief-info.scss
  • Filesystem Path: build/components/Organisms/brief-info/_brief-info.scss
  • Size: 5.7 KB

There are no notes for this item.