Alpaca components for Magento 2

Actions Group 

<div class="actions-group ">
    <div class="actions-group__handler">
        <button class="button actions-group__button" type="button" aria-label="button">
            I am a button
        </button>

        <button class="button actions-group__button" type="button" aria-label="button">
            I am a button
        </button>

    </div>
    <div class="actions-group__handler">
        <a class="link actions-group__link" href="#" title="Title">
            Link
        </a>

        <a class="link actions-group__link" href="#" title="Title">
            Link
        </a>

        <a class="link actions-group__link" href="#" title="Title">
            Link
        </a>

    </div>
</div>
 
<div class="actions-group {{ class }}">
    {{#each sides }}
        <div class="actions-group__handler">
            {{#each action }}
                {{#if button }}
                    {{ render '@button' button merge=true }}
                {{else}}
                    {{ render '@link' link merge=true }}
                {{/if}}
            {{/each }}
        </div>
    {{/each}}
</div>
 
{
  "sides": [
    {
      "action": [
        {
          "button": {
            "class": "actions-group__button"
          }
        },
        {
          "button": {
            "class": "actions-group__button"
          }
        }
      ]
    },
    {
      "action": [
        {
          "link": {
            "class": "actions-group__link"
          }
        },
        {
          "link": {
            "class": "actions-group__link"
          }
        },
        {
          "link": {
            "class": "actions-group__link"
          }
        }
      ]
    }
  ]
}
  • Content: 
    $actions-group__spacing               : $spacer--medium !default;
$actions-group__width                 : 100% !default;

$actions-group__handler-margin        : 0 0 $actions-group__spacing !default;
$actions-group__handler-margin\@medium: 0 !default;

$actions-group__button-margin         : 0 0 $actions-group__spacing !default;
$actions-group__button-margin\@medium : 0 $actions-group__spacing auto 0 !default;
$actions-group__button-width          : 100% !default;
$actions-group__button-width\@medium  : auto !default;

$actions-group__link-margin           : 0 $actions-group__spacing 0 0 !default;
$actions-group__link-padding          : $actions-group__spacing 0 !default;
$actions-group__link-text-decoration  : underline !default;
$actions-group__link-background-clip  : content-box !default;
$actions-group__link-font-size        : $font-size-medium !default;
$actions-group__link-font-weight      : $font-weight-medium !default;
  • URL: /components/raw/actions-group/_actions-group-variables.scss
  • Filesystem Path: build/components/Organisms/actions-group/_actions-group-variables.scss
  • Size: 941 Bytes
  • Content: 
    @import 'actions-group-variables';

.actions-group {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    width: $actions-group__width;

    &__handler {
        flex-basis: 100%;
        margin: $actions-group__handler-margin;

        @include mq($screen-m) {
            flex-basis: auto;
            margin: $actions-group__handler-margin\@medium;
        }
    }

    &__button {
        margin: $actions-group__button-margin;
        width: $actions-group__button-width;

        @include mq($screen-m) {
            width: $actions-group__button-width\@medium;
            margin: $actions-group__button-margin\@medium;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    &__link {
        padding: $actions-group__link-padding;
        margin: $actions-group__link-margin;
        text-decoration: $actions-group__link-text-decoration;
        background-clip: $actions-group__link-background-clip;
        font-size: $actions-group__link-font-size;
        font-weight: $actions-group__link-font-weight;

        &:last-child {
            margin-right: 0;
        }
    }
}
  • URL: /components/raw/actions-group/_actions-group.scss
  • Filesystem Path: build/components/Organisms/actions-group/_actions-group.scss
  • Size: 1.2 KB

No notes defined.