snurky components for Magento 2

Payment Icons 

<div class="paymenticons__footer ">
    <div class="paymenticons__footer--list paymenticons__list list--horizontal">
        <span class="paymenticons__footer--item paymenticons__item list__item--ideal">
            <svg class="icon icon paymenticons__footer--icon paymenticons__icon" role="presentation" focusable="false">
                <title>ideal</title>
                <use xlink:href="/images/icons-sprite.svg#payment-ideal-colored"></use>
            </svg>

        </span>
        <span class="paymenticons__footer--item paymenticons__item list__item--bancontact">
            <svg class="icon icon paymenticons__footer--icon paymenticons__icon" role="presentation" focusable="false">
                <title>bancontact</title>
                <use xlink:href="/images/icons-sprite.svg#payment-bancontact-colored"></use>
            </svg>

        </span>
    </div>
</div>
 
<div class="paymenticons__{{ type }} ">
    <div class="paymenticons__{{ type }}--list paymenticons__list list--horizontal">
        {{#each paymenticons }}
            <span class="paymenticons__{{ type }}--item paymenticons__item list__item--{{ this.title }}">
                {{ render '@icon' this }}
            </span>
        {{/each}}
    </div>
</div>
 
{
  "type": "footer",
  "paymenticons": [
    {
      "id": "payment-ideal-colored",
      "title": "ideal",
      "type": "footer",
      "class": "icon paymenticons__footer--icon paymenticons__icon",
      "hidden": true
    },
    {
      "id": "payment-bancontact-colored",
      "title": "bancontact",
      "type": "footer",
      "class": "icon paymenticons__footer--icon paymenticons__icon",
      "hidden": true
    }
  ]
}
  • Content: 
    $paymenticons__list-margin                                  : 0 auto !default;
$paymenticons__list-margin\@medium                          : 0 auto !default;
$paymenticons__list-width                                   : $spacer--extra-large !default;
$paymenticons__list-width\@medium                           : $spacer--extra-large !default;
$paymenticons__list-height                                  : $spacer--extra-large !default;
$paymenticons__list-height\@medium                          : $spacer--extra-large !default;

$paymenticons__footer-width                                 : 100% !default;
$paymenticons__footer-border-top                            : 1px solid $gray-light !default;
  • URL: /components/raw/payment-icons/_payment-icons-variables.scss
  • Filesystem Path: build/components/Organisms/payment-icons/_payment-icons-variables.scss
  • Size: 702 Bytes
  • Content: 
    @import 'payment-icons-variables';

.paymenticons {

    &__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: $paymenticons__list-margin;

        @include mq($screen-m) {
            flex-flow: row wrap;
            margin: $paymenticons__list-margin\@medium;
            order: 2;
        }
    }

    &__icon {
        width: $paymenticons__list-width;
        height: $paymenticons__list-height;
    }
    &__footer {
        margin: 0 auto;
        width: $paymenticons__footer-width;
        border-top: $paymenticons__footer-border-top;

    }
}
  • URL: /components/raw/payment-icons/_payment-icons.scss
  • Filesystem Path: build/components/Organisms/payment-icons/_payment-icons.scss
  • Size: 642 Bytes

There are no notes for this item.