GDL - Global Design Language

pager 

<div class="o-bg-light u-mt-large u-p-base">
    <ul class="c-pager u-unstyled u-bordered u-list-none u-p-none u-m-none u-relative">
        <li class="u-absolute u-top u-left">
            <a class="c-btn c-btn--default c-btn--rounded u-py-xxsmall u-pl-xsmall u-pr-small u-label-05 u-flex u-items-center u-no-underline" title="Prima precedente" aria-label="Previous" href="#">
                <svg class="o-icon o-icon--animated o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                </svg>
                <span class="u-ml-xxsmall u-none u-block@sm">Indietro</span>
            </a>
        </li>
        <li class="c-pager__counter u-absolute">
            <span class="u-label-05">1 / 5</span>
        </li>
        <li class="u-absolute u-top u-right">
            <a class="c-btn c-btn--secondary c-btn--rounded u-py-xxsmall u-pr-xsmall u-pl-small u-label-05 u-flex u-items-center u-no-underline" aria-label="Next" title="Pagina successiva" href="#">
                <span class="u-mr-xxsmall u-none u-block@sm">Continua</span>
                <svg class="o-icon o-icon--animated o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                </svg>
            </a>
        </li>
    </ul>
</div>
 
<div class="o-bg-light u-mt-large u-p-base">
  <ul class="c-pager u-unstyled u-bordered u-list-none u-p-none u-m-none u-relative">
    <li class="u-absolute u-top u-left">
      <a class="c-btn c-btn--default c-btn--rounded u-py-xxsmall u-pl-xsmall u-pr-small u-label-05 u-flex u-items-center u-no-underline" title="Prima precedente" aria-label="Previous" href="#">
        <svg class="o-icon o-icon--animated o-icon--sm">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
        </svg>
        <span class="u-ml-xxsmall u-none u-block@sm">Indietro</span>
      </a>
    </li>
    <li class="c-pager__counter u-absolute"> 
      <span class="u-label-05">1 / 5</span>
    </li>
    <li class="u-absolute u-top u-right">
      <a class="c-btn c-btn--secondary c-btn--rounded u-py-xxsmall u-pr-xsmall u-pl-small u-label-05 u-flex u-items-center u-no-underline" aria-label="Next" title="Pagina successiva" href="#">
        <span class="u-mr-xxsmall u-none u-block@sm">Continua</span>
        <svg class="o-icon o-icon--animated o-icon--sm">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
        </svg>
      </a>
    </li>
  </ul>
</div>
 
/* No context defined. */
  • Content: 
    // Name:            Pager
// Description:     Navigate throgh list of items
//
// Component:       `c-pager`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================

.c-pager {
  height: 26px;
  
  &__counter {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
  • URL: /components/raw/pager/pager.scss
  • Filesystem Path: src/lib/components/pager/pager.scss
  • Size: 407 Bytes

No notes defined.