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.