<div class="toolbar ">
    <div class="toolbar__limiter">
        <div class="select toolbar__limiter-wrapper">
            <label class="label toolbar__limiter-label" for="Sorteren op">
                Toon
            </label>
            <select id="Sorteren op" class="select__field toolbar__limiter-select " name="sort-by">
                <option value="12">
                    12
                </option>
                <option value="24">
                    24
                </option>
                <option value="36">
                    36
                </option>
            </select>
        </div>
    </div>
    <div class="toolbar__sorter">
        <div class="select toolbar__sorter-wrapper">
            <label class="label toolbar__sorter-label" for="sort-by">
                Sorteren op
            </label>
            <select id="sort-by" class="select__field toolbar__sorter-select " name="sort-by">
                <option value="prijs high to low">
                    Prijs hoog - laag
                </option>
                <option value="prijs low to high">
                    Prijs laag - hoog
                </option>
                <option value="new">
                    Nieuw
                </option>
                <option value="best reviewd">
                    Best beoordeeld
                </option>
            </select>
        </div>

    </div>
</div>
<div class="toolbar {{ class }}" {{{ attributes }}}>
    <div class="{{ limiter.class }}">
        {{> '@select' limiter.select }}
    </div>
    <div class="toolbar__sorter">
        {{render '@select' sortBy }}
    </div>
</div>
{
  "amount": "1630",
  "found": "producten gevonden",
  "show": "Toon",
  "perpage": "producten per pagina",
  "sortBy": {
    "class": "toolbar__sorter-wrapper",
    "label": {
      "attributes": "",
      "text": "Sorteren op",
      "class": "toolbar__sorter-label"
    },
    "field": {
      "id": "sort-by",
      "name": "sort-by",
      "class": "toolbar__sorter-select"
    },
    "options": [
      {
        "text": "Prijs hoog - laag",
        "value": "prijs high to low"
      },
      {
        "text": "Prijs laag - hoog",
        "value": "prijs low to high"
      },
      {
        "text": "Nieuw",
        "value": "new"
      },
      {
        "text": "Best beoordeeld",
        "value": "best reviewd"
      }
    ]
  },
  "limiter": {
    "class": "toolbar__limiter",
    "select": {
      "class": "toolbar__limiter-wrapper",
      "label": {
        "attributes": "",
        "text": "Toon",
        "class": "toolbar__limiter-label"
      },
      "field": {
        "id": "Sorteren op",
        "name": "sort-by",
        "class": "toolbar__limiter-select"
      },
      "options": [
        {
          "text": "12",
          "value": "12"
        },
        {
          "text": "24",
          "value": "24"
        },
        {
          "text": "36",
          "value": "36"
        }
      ]
    },
    "suffix": ""
  },
  "showPager": true,
  "pager": {
    "arrowLeftVisible": false,
    "arrowRightVisible": true,
    "pages": [
      {
        "pageNo": 1,
        "class": "link--invert",
        "active": false
      },
      {
        "pageNo": 2,
        "class": "link--invert",
        "active": false
      },
      {
        "pageNo": 3,
        "class": "link--invert",
        "active": false
      }
    ]
  }
}
  • Content:
    .toolbar {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    
        @include mq($screen-l) {
            justify-content: flex-end;
        }
    
        @include mq($screen-m) {
            padding: $spacer--2 0 $spacer--1;
        }
    
        &__limiter,
        &__sorter {
            width: 100%;
    
            @include mq($screen-l) {
                width: auto;
            }
    
            &-label {
                display: none;
            }
    
            &-select {
                background-color: #ecf5f4;
                padding: 0 2.5rem 0 1rem;
                width: 100%;
                height: 48px;
    
                @include mq($screen-l) {
                    height: 36px;
                }
            }
        }
    
        &__limiter {
            margin-right: $spacer--1;
            width: 30%;
    
            @include mq($screen-l) {
                width: auto;
            }
        }
    
        &__sorter {
            width: 70%;
    
            @include mq($screen-l) {
                width: auto;
            }
        }
    
        & .select {
            margin-bottom: 0;
    
            @include mq($screen-m) {
                width: auto;
            }
        }
    }
    
    .toolbar--bottom {
        font-family: $font-family-saira;
        font-size: $font-size-base;
        letter-spacing: 0.02em;
    
        display: flex;
        flex-basis: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    
        @include mq($screen-m) {
            justify-content: flex-start;
            flex-basis: 70%;
            margin: 0;
            padding: 0;
        }
    
        &-amount {
            display: flex;
            justify-content: flex-start;
    
        }
    
        &-limiter {
            display: flex;
            align-items: center;
            justify-content: flex-end;
    
            border-left: 1px solid #e6e6e6;
            padding: 0 16px;
            margin: 0 16px;
    
            width: unset;
    
            & .toolbar__limiter-select {
                background-color: #ecf5f4;
                margin: 0 16px;
                width: unset;
            }
            & .toolbar__limiter-wrapper {
                margin: 0;
            }
        }
    
    
    }
    
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: build/components/03-modules/toolbar/_toolbar.scss
  • Size: 2 KB

There are no notes for this item.