react-awesome-paginate
Version:
React awesome paginate is a modern, typescript based pagination component. You can use it in your project.
2 lines • 1.78 kB
CSS
.react-awesome-paginate__container{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}.react-awesome-paginate__pages{display:flex;flex-wrap:wrap}.react-awesome-paginate__button{background:none;border:none;cursor:pointer;font-size:14px;transition:background-color .2s ease}.react-awesome-paginate__button:hover:not(:disabled){background-color:#f0f0f0}.react-awesome-paginate__button:disabled{cursor:not-allowed;opacity:.5}.react-awesome-paginate__button.active{background-color:#007bff;border-color:#007bff;color:#fff}.react-awesome-paginate__button.active:hover{background-color:#054d99;border-color:#007bff}.react-awesome-paginate__more__button{background:none;border:none;color:#7e7d7d;font-size:14px;padding:6px 12px;text-align:center}.react-awesome-paginate__default__container,.react-awesome-paginate__default__pages{gap:8px}.react-awesome-paginate__default__button{background-color:#fff;border:1px solid #ccc;padding:6px 12px}.react-awesome-paginate__circular__container,.react-awesome-paginate__circular__pages{gap:8px}.react-awesome-paginate__circular__button{background-color:#fff;border:1px solid #ccc;border-radius:50%;font-size:12px;height:40px;min-height:34px;min-width:34px;text-overflow:ellipsis;transition:width .2s;white-space:nowrap;width:40px}.react-awesome-paginate__classic__container,.react-awesome-paginate__classic__pages{gap:8px}.react-awesome-paginate__classic__button{color:#007bff;font-weight:700;font:16px;padding:6px 12px}.react-awesome-paginate__classic__more__button{color:#007bff;font-weight:700;font:16px}.react-awesome-paginate__compact__button{background-color:#fff;border:1px solid #ccc;padding:6px 12px}.react-awesome-paginate__compact__more__button{border:1px solid #ccc}
/*# sourceMappingURL=index.css.map */