<nav role="navigation" aria-label="Navigera bland sökresultaten">
    <p id="" class="vgr-visually-hidden"></p>
    <ol class="vgr-pagination" aria-labelledby="">

        <li class="vgr-pagination__item vgr-pagination__item--icon vgr-pagination__item--prev">
            <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
                <input name="index" type="hidden" value="0">
                <button aria-label="Föregående sida" class="vgr-button vgr-button--subtle" type="submit" disabled="">Föregående</button>
            </form>
        </li>

        <li class="vgr-pagination__item vgr-pagination__item--num">
            <form action="/ftv-webbtidsbokning/AvailableAppointments/" class="display-flex vgr-pagination__form" method="get">
                <label for="pagination_numinput" class="vgr-pagination__text">Sida</label>
                <input id="pagination_numinput" name="index" class="vgr-form__input vgr-pagination__numinput" type="number" min="1" max="17" value="1">
                <div class="vgr-pagination__text vgr-pagination__text--block">
                    av 17
                </div>
                <button aria-label="Gå till vald sida" class="vgr-button vgr-button--subtle" type="submit"></button>
            </form>
        </li>

        <li class="vgr-pagination__item vgr-pagination__item--icon vgr-pagination__item--next">
            <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
                <input name="index" type="hidden" value="2">
                <button aria-label="Nästa sida" class="vgr-button vgr-button--subtle" type="submit">Nästa</button>
            </form>
        </li>

    </ol>
</nav>
<nav role="navigation" aria-label="Navigera bland sökresultaten">
  <p id="{{ labelId }}" class="vgr-visually-hidden">{{ title }}</p>
  <ol class="vgr-pagination" aria-labelledby="{{ labelId }}">

    <li class="vgr-pagination__item vgr-pagination__item--icon vgr-pagination__item--prev">
      <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
        <input name="index" type="hidden" value="0">
        <button aria-label="Föregående sida" class="vgr-button vgr-button--subtle" type="submit" disabled="">Föregående</button>
      </form>
    </li>

    <li class="vgr-pagination__item vgr-pagination__item--num">
      <form action="/ftv-webbtidsbokning/AvailableAppointments/" class="display-flex vgr-pagination__form" method="get">
        <label for="pagination_numinput" class="vgr-pagination__text">Sida</label>
        <input id="pagination_numinput" name="index" class="vgr-form__input vgr-pagination__numinput" type="number" min="1" max="17" value="1">
        <div class="vgr-pagination__text vgr-pagination__text--block">
          av 17
        </div>
        <button aria-label="Gå till vald sida" class="vgr-button vgr-button--subtle" type="submit"></button>
      </form>
    </li>

    <li class="vgr-pagination__item vgr-pagination__item--icon vgr-pagination__item--next">
      <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
        <input name="index" type="hidden" value="2">
        <button aria-label="Nästa sida" class="vgr-button vgr-button--subtle" type="submit">Nästa</button>
      </form>
    </li>

  </ol>
</nav>
/* No context defined for this component. */
  • Content:
    .vgr-pagination {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    
      @media (max-width: 444px) {
        justify-content: center;
      }
    
      &__item {
        @media (max-width: 444px) {
          margin: 0 5px 10px;
        }
    
        &--num {
          @media (max-width: 444px) {
            order: 1;
          }
        }
    
        &--active {
          >a {
            box-shadow: inset 0 -2px 0 #FF9400;
          }
        }
    
        button {
          padding-top: 12px;
          padding-bottom: 10px;
        }
    
        &--icon {
          button:after {
            // margin-top: 2px;
            // height: 18px;
            // background: url(http://hitta.vgregion.se/Areas/HittaSearch/Static/Images/sprite.svg);
            content: "";
            position: absolute;
            top: 50%;
            margin-top: 1px;
            display: block;
            width: 10px;
            height: 17px;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
          }
        }
    
        &--prev {
          button {
            padding-left: 32px;
          }
    
          button:after {
            // left: 10px;
            // background-position: 0 -36px;
    
            left: 12px;
            background: url(/icons/vgr--icon-chevron-left.svg);
          }
        }
    
        &--next {
          button {
            padding-right: 32px;
          }
    
          button:after {
            // right: 10px;
            // background-position: 0 -83px;
    
            right: 12px;
            background: url(/icons/vgr--icon-chevron-right.svg);
          }
        }
      }
    
      &__form {
        align-items: center;
      }
    
      &__numinput {
        align-self: stretch;
        width: 3rem;
        padding: 12px 0 12px 12px;
      }
    
      &__text {
        margin: 0 5px;
        flex-shrink: 0;
        font-size: .8rem;
    
        &--block {
          position: relative;
          display: inline-block;
        }
      }
    
    }
  • URL: /components/raw/standard-pagination/_standard-pagination.scss
  • Filesystem Path: components/navigations/standard-pagination/_standard-pagination.scss
  • Size: 1.9 KB

There are no notes for this item.