page: txp5

Core SASS

form: txp5_scss

_prev-next.scss ➔ modified 129 days ago

GitHub: _prev-next.scss

    
      @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>