vexip-ui/css/pagination.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-pagination-vars{--vxp-pagination-color:inherit;--vxp-pagination-color-hover:var(--vxp-color-primary-base);--vxp-pagination-color-focus:var(--vxp-pagination-color-hover);--vxp-pagination-color-disabled:var(--vxp-content-color-disabled);--vxp-pagination-color-active:var(--vxp-pagination-color-hover);--vxp-pagination-bg-color:var(--vxp-fill-color-background);--vxp-pagination-bg-color-hover:var(--vxp-color-primary-opacity-8);--vxp-pagination-bg-color-focus:var(--vxp-pagination-bg-color-hover);--vxp-pagination-bg-color-disabled:var(--vxp-pagination-bg-color);--vxp-pagination-bg-color-active:var(--vxp-color-primary-base);--vxp-pagination-b-color:var(--vxp-border-color-base);--vxp-pagination-b-color-hover:var(--vxp-color-primary-base);--vxp-pagination-b-color-focus:var(--vxp-pagination-b-color-hover);--vxp-pagination-b-color-disabled:var(--vxp-fill-color-disabled);--vxp-pagination-b-color-active:var(--vxp-pagination-b-color-hover);--vxp-pagination-s-color-focus:var(--vxp-color-primary-opacity-6);--vxp-pagination-border:var(--vxp-border-shape) var(--vxp-pagination-b-color);--vxp-pagination-radius:var(--vxp-radius-base);--vxp-pagination-size:32px;--vxp-pagination-item-span:6px;--vxp-pagination-plugin-span:10px}.vxp-pagination{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex;align-items:center}.vxp-pagination,.vxp-pagination *,.vxp-pagination ::after,.vxp-pagination ::before{box-sizing:border-box}.vxp-pagination--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-pagination--small{--vxp-pagination-size:28px}.vxp-pagination--large{--vxp-pagination-size:36px}.vxp-pagination__list{display:flex;align-items:center;padding:0;margin:0}.vxp-pagination__item{position:relative;display:flex;align-items:center;justify-content:center;min-width:var(--vxp-pagination-size);height:var(--vxp-pagination-size);padding:0 6px;margin-inline-end:var(--vxp-pagination-item-span);list-style:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--vxp-pagination-border);border-radius:var(--vxp-pagination-radius);outline:0;transition:var(--vxp-transition-color),var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-pagination__item:last-of-type{margin-inline-start:0}.vxp-pagination__item:hover{color:var(--vxp-pagination-color-hover);border-color:var(--vxp-pagination-b-color-hover)}.vxp-pagination__item:focus,.vxp-pagination__item:focus-within{color:var(--vxp-pagination-color-focus);border-color:var(--vxp-pagination-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-pagination-s-color-focus)}.vxp-pagination__item--active{color:var(--vxp-pagination-color-active);border-color:var(--vxp-pagination-b-color-active)}.vxp-pagination__item--disabled,.vxp-pagination__item--disabled.vxp-pagination__item--active,.vxp-pagination__item--disabled:focus,.vxp-pagination__item--disabled:focus-within,.vxp-pagination__item--disabled:hover{color:var(--vxp-pagination-color-disabled);cursor:not-allowed;border-color:var(--vxp-pagination-b-color-disabled);box-shadow:none}.vxp-pagination__item--disabled.vxp-pagination__item--active{background-color:var(--vxp-pagination-bg-color-disabled)}.vxp-pagination--background .vxp-pagination__item{background-color:var(--vxp-pagination-bg-color)}.vxp-pagination--background .vxp-pagination__item:hover{background-color:var(--vxp-pagination-bg-color-hover)}.vxp-pagination--background .vxp-pagination__item:focus,.vxp-pagination--background .vxp-pagination__item:focus-within{background-color:var(--vxp-pagination-bg-color-focus)}.vxp-pagination--background .vxp-pagination__item--active{--vxp-pagination-color-active:var(--vxp-color-white);--vxp-pagination-color-hover:var(--vxp-color-white);--vxp-pagination-color-focus:var(--vxp-color-white);--vxp-pagination-bg-color-disabled:var(--vxp-fill-color-disabled)}.vxp-pagination--background .vxp-pagination__item--active,.vxp-pagination--background .vxp-pagination__item--active:focus,.vxp-pagination--background .vxp-pagination__item--active:hover{background-color:var(--vxp-pagination-bg-color-active)}.vxp-pagination--background .vxp-pagination__item--disabled,.vxp-pagination--background .vxp-pagination__item--disabled:focus,.vxp-pagination--background .vxp-pagination__item--disabled:focus-within,.vxp-pagination--background .vxp-pagination__item--disabled:hover{background-color:var(--vxp-pagination-bg-color-disabled)}.vxp-pagination--no-border .vxp-pagination__item{border:0}.vxp-pagination__jump,.vxp-pagination__size,.vxp-pagination__total{display:inline-flex;align-items:center;justify-content:center}.vxp-pagination__jump{white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-pagination__jump-input{min-width:60px;height:var(--vxp-pagination-size);margin:0 4px;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.vxp-pagination__size{min-width:106px}.vxp-pagination__size-select{width:100%}.vxp-pagination__size-select .vxp-select__selector{height:var(--vxp-pagination-size)}.vxp-pagination__total{white-space:nowrap}.vxp-pagination>.vxp-pagination__jump,.vxp-pagination>.vxp-pagination__size,.vxp-pagination>.vxp-pagination__total{margin-inline-start:var(--vxp-pagination-plugin-span)}.vxp-pagination>.vxp-pagination__jump--prefix,.vxp-pagination>.vxp-pagination__size--prefix,.vxp-pagination>.vxp-pagination__total--prefix{margin-inline:0 var(--vxp-pagination-plugin-span)}