Alpaca components for Magento 2

Toolbar 

<div class="toolbar ">
    <div class="toolbar__mode">
        <button class="button button--icon toolbar__mode-button button--icon-light toolbar__mode-button--active" aria-label="grid view">
            <svg class="icon toolbar__mode-icon" role="presentation" focusable="false">
                <title>Grid</title>
                <use href="/images/icons-sprite.svg#grid"></use>
            </svg>

        </button>

        <button class="button button--icon toolbar__mode-button button--icon-light" aria-label="list view">
            <svg class="icon toolbar__mode-icon" role="presentation" focusable="false">
                <title>List</title>
                <use href="/images/icons-sprite.svg#list"></use>
            </svg>

        </button>

    </div>

    <div class="select toolbar__sorter">
        <label class="
            label
            toolbar__sorter-label margin-right-s margin-bottom-0
        " for="sorter">
            Sort By
        </label>
        <select id="sorter" class="select__field toolbar__sorter-select" name="sorter">
            <option class="" value="product-name">
                Product Name
            </option>
            <option class="" value="price">
                Price
            </option>
        </select>
    </div>

    <script src="/components/raw/select/select.js"></script>

    <div class="toolbar__amount toolbar__amount">
        <span class="toolbar__amount-content">
            Items 1-9 of
            12
        </span>
    </div>

    <div class="select toolbar__limiter margin-0">
        <label class="
            label
            toolbar__limiter-label margin-right-s margin-bottom-0
        " for="limiter">
            Show
        </label>
        <select id="limiter" class="select__field toolbar__limiter-select" name="limiter">
            <option class="" value="12">
                12
            </option>
            <option class="" value="24">
                24
            </option>
            <option class="" value="36">
                36
            </option>
        </select>
    </div>

    <script src="/components/raw/select/select.js"></script>

</div>
 
<div class="toolbar {{ class }}" {{{ attributes }}}>
    {{#if showMode }}
        <div class="toolbar__mode">
            {{ render '@button--icon' gridMode merge=true }}
            {{ render '@button--icon' listMode merge=true }}
        </div>
    {{/if}}

    {{#if showSorter }}
        {{ render '@select' sortBy merge=true }}
    {{/if}}

    {{#if showAmount }}
        <div class="toolbar__amount {{ amount.class }}">
            <span class="toolbar__amount-content">
                {{ amount.prefix }} {{ amount.currentRange }} {{ amount.preposition }}
                {{ amount.total }}
            </span>
        </div>
    {{/if}}

    {{#if showLimit }}
        {{ render '@select' limiter.select merge=true }}
    {{/if}}

    {{#if showPager }}
        {{ render '@pager' pager merge=true }}
    {{/if}}
</div>
 
{
  "showMode": true,
  "showSorter": true,
  "showAmount": true,
  "showLimit": true,
  "amount": {
    "class": "toolbar__amount",
    "prefix": "Items",
    "currentRange": "1-9",
    "preposition": "of",
    "total": "12"
  },
  "gridMode": {
    "class": "toolbar__mode-button button--icon-light toolbar__mode-button--active",
    "attributes": "aria-label=\"grid view\"",
    "icon": {
      "id": "grid",
      "title": "Grid",
      "class": "toolbar__mode-icon"
    }
  },
  "listMode": {
    "class": "toolbar__mode-button button--icon-light",
    "attributes": "aria-label=\"list view\"",
    "icon": {
      "id": "list",
      "title": "List",
      "class": "toolbar__mode-icon"
    }
  },
  "list": {
    "href": "",
    "icon": {
      "id": "list",
      "title": "List",
      "class": "toolbar__mode-icon"
    }
  },
  "sortBy": {
    "class": "toolbar__sorter",
    "label": {
      "attributes": "",
      "text": "Sort By",
      "class": "toolbar__sorter-label margin-right-s margin-bottom-0"
    },
    "field": {
      "id": "sorter",
      "name": "sorter",
      "class": "toolbar__sorter-select"
    },
    "options": [
      {
        "text": "Product Name",
        "value": "product-name"
      },
      {
        "text": "Price",
        "value": "price"
      }
    ]
  },
  "limiter": {
    "select": {
      "class": "toolbar__limiter margin-0",
      "label": {
        "attributes": "",
        "text": "Show",
        "class": "toolbar__limiter-label margin-right-s margin-bottom-0"
      },
      "field": {
        "id": "limiter",
        "name": "limiter",
        "class": "toolbar__limiter-select"
      },
      "options": [
        {
          "text": "12",
          "value": "12"
        },
        {
          "text": "24",
          "value": "24"
        },
        {
          "text": "36",
          "value": "36"
        }
      ]
    },
    "suffix": ""
  },
  "pager": {
    "class": "toolbar__pager"
  }
}
  • Content: 
    $toolbar__padding                               : $spacer 0 !default;
$toolbar__padding\@medium                       : $spacer--semi-medium 0 !default;
$toolbar__padding\@large                        : 0 0 $spacer--medium !default;
$toolbar__border-style                          : solid !default;
$toolbar__border-color                          : $gray !default;
$toolbar__border-width                          : 0 0 1px 0 !default;

$toolbar__mode-margin                           : 0 $spacer--medium 0 0 !default;
$toolbar__mode-button-icon-fill                 : $color-secondary !default;
$toolbar__mode-button-icon-fill--active         : $color-primary !default;
$toolbar__mode-button-icon-size                 : 18px !default;

$toolbar__amount-color                          : $color-secondary !default;
$toolbar__amount-padding--visible               : $spacer 0 !default;

$toolbar__sorter-width                          : 100% !default;
$toolbar__sorter-width\@medium                  : auto !default;
$toolbar__sorter-select-min-width               : 160px !default;
$toolbar__sorter-border-width                   : 1px 0 0 0 !default;
$toolbar__sorter-border-width\@medium           : 0 !default;
$toolbar__sorter-padding                        : $spacer 0 0 !default;
$toolbar__sorter-padding\@medium                : 0 !default;
$toolbar__sorter-margin                         : $spacer 0 0 !default;
$toolbar__sorter-margin\@medium                 : 0 !default;
$toolbar__sorter-order                          : 2 !default;
$toolbar__sorter-order\@medium                  : 0 !default;
$toolbar__sorter-link-padding                   : 0 $spacer !default;
$toolbar__sorter-link-font-weight               : $font-weight-normal !default;
$toolbar__sorter-link-bg-hover                  : $color-primary !default;

$toolbar__sorter-label-margin                   : 0 $spacer--small 0 0 !default;

//toolbar--secondary
$toolbar__justify-content--secondary            : space-between !default;
$toolbar__padding--secondary                    : $spacer--semi-medium 0 !default;

$toolbar__amount-order--secondary               : 1 !default;
$toolbar__amount-flex-grow--secondary           : 0 !default;

$toolbar__pager-order--secondary                : 1 !default;
$toolbar__pager-flex-grow--secondary            : 2 !default;
$toolbar__pager-flex-basis--secondary           : 100% !default;
$toolbar__pager-margin--secondary               : 0 0 $spacer--medium !default;

$toolbar__sorter-limiter-order--secondary       : 3 !default;
$toolbar__sorter-limiter-flex-grow--secondary   : 0 !default;
  • URL: /components/raw/toolbar/_toolbar-variables.scss
  • Filesystem Path: build/components/Organisms/toolbar/_toolbar-variables.scss
  • Size: 2.6 KB
  • Content: 
    @import 'toolbar-variables';

.toolbar {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: $toolbar__padding;
    border-style: $toolbar__border-style;
    border-color: $toolbar__border-color;
    border-width: $toolbar__border-width;

    @include mq($screen-m) {
        align-items: center;
        justify-content: flex-start;
        padding: $toolbar__padding\@medium;
    }

    @include mq($screen-l) {
        padding: $toolbar__padding\@large;
    }

    .pager {
        display: none;
    }

    &--secondary {
        justify-content: $toolbar__justify-content--secondary;
        flex-wrap: wrap;
        padding: $toolbar__padding--secondary;

        .pager {
            display: block;
        }

        .toolbar__amount {
            display: flex;
            order: $toolbar__amount-order--secondary;
            flex-grow: $toolbar__amount-flex-grow--secondary;
        }

        .toolbar__pager {
            order: $toolbar__pager-order--secondary;
            flex-grow: $toolbar__pager-flex-grow--secondary;
            flex-basis: $toolbar__pager-flex-basis--secondary;
            margin: $toolbar__pager-margin--secondary;
        }

        .toolbar__limiter {
            order: $toolbar__sorter-limiter-order--secondary;
            flex-grow: $toolbar__sorter-limiter-flex-grow--secondary;
        }
    }

    &__mode,
    &__limiter,
    &__amount,
    &__sorter {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    &__mode {
        display: flex;
        flex: 0 0 auto;
        margin: $toolbar__mode-margin;
    }

    &__mode-button {
        .icon {
            width: $toolbar__mode-button-icon-size;
            height: $toolbar__mode-button-icon-size;
            fill: $toolbar__mode-button-icon-fill;
        }

        &--active {
            .icon {
                fill: $toolbar__mode-button-icon-fill--active;
            }
        }
    }

    &__amount {
        display: none;
        color: $toolbar__amount-color;
        flex-grow: 1;
        justify-content: center;

        @include mq($screen-m) {
            display: flex;
        }

        &--visible {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: flex-start;
            padding: $toolbar__amount-padding--visible;

            @include mq($screen-m) {
                flex: 1 0 0;
            }

            @include isIE() {
                flex-grow: 0;

                @include mq($screen-m) {
                    flex-grow: 1;
                }
            }
        }
    }

    &__amount-content {
        white-space: nowrap;
    }

    &__sorter {
        order: $toolbar__sorter-order;
        width: $toolbar__sorter-width;
        padding: $toolbar__sorter-padding;
        margin: $toolbar__sorter-margin;
        border-style: $toolbar__border-style;
        border-color: $toolbar__border-color;
        border-width: $toolbar__sorter-border-width;

        @include mq($screen-m) {
            order: $toolbar__sorter-order\@medium;
            width: $toolbar__sorter-width\@medium;
            padding: $toolbar__sorter-padding\@medium;
            margin: $toolbar__sorter-margin\@medium;
            border-width: $toolbar__sorter-border-width\@medium;
        }
        .select2 {
            flex-grow: 1;
            min-width: $toolbar__sorter-select-min-width;
        }

    }

    &__sorter-label,
    &__limiter-label {
        white-space: nowrap;
        margin: $toolbar__sorter-label-margin;
    }

    &__sorter-link {
        padding: $toolbar__sorter-link-padding;
        font-weight: $toolbar__sorter-link-font-weight;
        &:hover,
        &.focus-visible {
            background-color: $toolbar__sorter-link-bg-hover;
        }
    }

    ~ .toolbar {
        border-bottom: 0;

        .pager {
            display: block;
        }

        .toolbar {
            &__mode,
            &__sorter,
            &__amount,
            &__limiter {
                display: none;
            }
        }
    }
}
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: build/components/Organisms/toolbar/_toolbar.scss
  • Size: 4.2 KB

No notes defined.