Alpaca components for Magento 2

Items 

<div class="dashboard-items ">
    <h2 class="dashboard-items__title margin-bottom-sm">
        Addresses
    </h2>

    <div class="row margin-0">
        <div class="dashboard-items__item col-sm-3 margin-bottom-m">
            <h3 class="dashboard-items__subtitle margin-bottom-l">
                Contact information
            </h3>

            <div class="margin-bottom-l">
                qweqwe qwe qwe@qwe.com
            </div>
            <div class="actions-group margin-bottom-xl">
                <div class="actions-group__handler">
                    <a class="link actions-group__link" href="#" title="Title">
                        Edit
                    </a>

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

                </div>
            </div>

        </div>
        <div class="dashboard-items__item col-sm-3 margin-bottom-m">
            <h3 class="dashboard-items__subtitle margin-bottom-l">
                Address second
            </h3>

            <div class="margin-bottom-l">
                Second address qwe@qwe.com
            </div>
            <div class="actions-group margin-bottom-xl">
                <div class="actions-group__handler">
                    <a class="link actions-group__link" href="#" title="Title">
                        Edit
                    </a>

                </div>
            </div>

        </div>
    </div>
</div>
 
<div class="dashboard-items {{ class }}">
    {{#if title }}
        {{#if link}}
            <div class="dashboard-table__header">
                {{ render '@heading' title }}
                {{ render '@link' link }}
            </div>
        {{else}}
            {{ render '@heading' title }}
        {{/if}}
    {{/if}}
    {{#if informations }}
        <div class="row {{ contentClass }}">
            {{#each informations }}
                <div class="dashboard-items__item {{ this.class }}">
                    {{#if this.title }}
                        {{ render '@heading' this.title }}
                    {{/if}}
                    {{#if contentComponent}}
                        {{ render (component contentComponent) contentContext }}
                    {{else}}
                        {{#if this.information }}
                            <div class="{{ this.addressClass }}">
                                {{{ this.information }}}
                            </div>
                        {{/if}}
                    {{/if}}
                    {{#if actions }}
                        {{ render '@actions-group' actions }}
                    {{/if}}
                </div>
            {{/each}}
        </div>
    {{/if}}
</div>
 
{
  "title": {
    "tag": "h2",
    "class": "dashboard-items__title margin-bottom-sm",
    "text": "Addresses"
  },
  "contentClass": "margin-0",
  "informations": [
    {
      "title": {
        "tag": "h3",
        "class": "dashboard-items__subtitle margin-bottom-l",
        "text": "Contact information"
      },
      "class": "col-sm-3 margin-bottom-m",
      "addressClass": "margin-bottom-l",
      "information": "qweqwe qwe qwe@qwe.com",
      "actions": {
        "class": "margin-bottom-xl",
        "sides": [
          {
            "class": "margin-bottom-xl",
            "action": [
              {
                "link": {
                  "text": "Edit",
                  "class": "actions-group__link"
                }
              },
              {
                "link": {
                  "text": "Change password",
                  "class": "actions-group__link"
                }
              }
            ]
          }
        ]
      }
    },
    {
      "title": {
        "tag": "h3",
        "class": "dashboard-items__subtitle margin-bottom-l",
        "text": "Address second"
      },
      "class": "col-sm-3 margin-bottom-m",
      "addressClass": "margin-bottom-l",
      "information": "Second address qwe@qwe.com",
      "actions": {
        "class": "margin-bottom-xl",
        "sides": [
          {
            "action": [
              {
                "link": {
                  "text": "Edit",
                  "class": "actions-group__link"
                }
              }
            ]
          }
        ]
      }
    }
  ]
}
  • Content: 
    $dashboard-items__padding                : $spacer--medium !default;

$dashboard-items__title-font-family      : $font-family-base !default;
$dashboard-items__title-font-size        : $font-size-large !default;
$dashboard-items__title-font-weight      : $font-weight-bold !default;
$dashboard-items__title-padding          : $spacer--medium !default;
$dashboard-items__title-background       : $bg-color-secondary !default;
$dashboard-items__title-border           : $border-secondary !default;
$dashboard-items__title-border-width     : 0 0 $border-width-secondary !default;
$dashboard-items__title-text-transform   : uppercase !default;

$dashboard-items__subtitle-font-size     : $font-size-medium !default;
$dashboard-items__subtitle-font-weight   : $font-weight-normal !default;
$dashboard-items__subtitle-text-transform: uppercase !default;

$dashboard-items__item-font-size         : $font-size-medium !default;

$dashboard-items__collapsible-transform  : rotate(180deg) !default;

.dashboard-items {
    &__item {
        padding: $dashboard-items__padding;
        font-size: $dashboard-items__item-font-size;
    }

    &__title,
    &__subtitle {
        font-family: $dashboard-items__title-font-family;
    }

    &__title {
        padding: $dashboard-items__title-padding;
        background: $dashboard-items__title-background;
        font-size: $dashboard-items__title-font-size;
        font-weight: $dashboard-items__title-font-weight;
        border: $dashboard-items__title-border;
        border-width: $dashboard-items__title-border-width;
        text-transform: $dashboard-items__title-text-transform;
    }

    &__collapsible {
        &--active {
            .icon {
                transform: $dashboard-items__collapsible-transform;
            }
        }
    }

    &__title-collapsible {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    &__subtitle {
        font-size: $dashboard-items__subtitle-font-size;
        font-weight: $dashboard-items__subtitle-font-weight;
        text-transform: $dashboard-items__subtitle-text-transform;
    }
}
  • URL: /components/raw/dashboard-items/_items.scss
  • Filesystem Path: build/components/Organisms/dashboard/items/_items.scss
  • Size: 2.2 KB

No notes defined.