page: txp5

Core SASS

form: txp5_scss

_prev-next.scss ➔ modified 55 days ago 

    
      @use "beam";

.prev-next {
  @extend %beam !optional;
  gap: var(--base-unit);
  .ui-icon {
    width: auto;
    overflow: auto;
    height: auto;
    margin-inline-end: 0;
  }
  > a,
  > span {
    display: flex;
    flex-direction: column;

    justify-items: baseline;
  }

  .disabled {
    opacity: .5;
  }
}

Source html

 
        
          <nav class="prev-next" aria-label="Page navigation">
  <span class="disabled" aria-disabled="true" aria-label="Previous">
    <span class="ui-icon ui-icon-arrowthick-1-w">Previous</span>
  </span>
  <form>
    <label for="current-page">Page</label>
    <input class="current-page" id="current-page" name="page" type="text" size="4" inputmode="numeric" pattern="[0-9]+" value="1">
    of
    <span class="total-pages">2</span>
  </form>
  <a rel="next" title="Next" href="#"><span class="ui-icon ui-icon-arrowthick-1-e">Next</span></a>
</nav>