@vuesax-alpha/nightly/theme-chalk/vs-pagination.css

A Component Library for Vue 3

.vs-pagination{--vs-pagination-font-size:14px;--vs-pagination-bg-color:rgba(var(--vs-gray-3), 1);--vs-pagination-text-color:rgba(var(--vs-text), 1);--vs-pagination-border-radius:12px;--vs-pagination-button-color:rgba(var(--vs-text), 1);--vs-pagination-button-width:36px;--vs-pagination-button-height:36px;--vs-pagination-button-disabled-color:var(--vs-text-color-placeholder);--vs-pagination-button-disabled-bg-color:var(--vs-gray-3);--vs-pagination-button-bg-color:rgba(var(--vs-fill-color), 1);--vs-pagination-button-bg-hover:rgba(var(--vs-gray-4), 1);--vs-pagination-hover-color:rgba(var(--vs-primary), 1);--vs-pagination-font-size-small:12px;--vs-pagination-button-width-small:24px;--vs-pagination-button-height-small:24px;--vs-pagination-item-gap:16px;--vs-pagination-button-margin:2px;--vs-color:var(--vs-primary);display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;color:var(--vs-pagination-text-color);font-weight:400}.vs-pagination.is-square *{border-radius:0}.vs-pagination.is-circle .btn-next,.vs-pagination.is-circle .btn-prev,.vs-pagination.is-circle .vs-pager button,.vs-pagination.is-circle .vs-pager__aria-active{border-radius:50%}.vs-pagination.is-not-margin .vs-pager button{border-radius:0;margin:0}.vs-pagination.is-not-margin .btn-prev{border-radius:12px 0 0 12px;margin-right:0}.vs-pagination.is-not-margin .btn-next{border-radius:0 12px 12px 0;margin-left:0}.vs-pagination.is-buttons-dotted .btn-next,.vs-pagination.is-buttons-dotted .btn-prev{width:15px;height:12px;min-width:15px;padding:0;background:0 0}.vs-pagination.is-buttons-dotted .btn-next i,.vs-pagination.is-buttons-dotted .btn-prev i{width:6px;height:6px}.vs-pagination.is-buttons-dotted .btn-next i:before,.vs-pagination.is-buttons-dotted .btn-prev i:before{width:1px}.vs-pagination.is-buttons-dotted .btn-next i:after,.vs-pagination.is-buttons-dotted .btn-prev i:after{height:1px}.vs-pagination.is-buttons-dotted .vs-pager>button{min-width:12px;max-width:12px;width:12px;height:12px}.vs-pagination.is-buttons-dotted .vs-pager>button.is-active{transform:scale(1)}.vs-pagination.is-buttons-dotted .vs-pager__aria-active{width:12px;height:12px;box-shadow:0 2px 10px 0 rgba(var(--vs-color),.4);transform:scale(1)}.vs-pagination.is-buttons-dotted .vs-pager__aria-active.is-change{transform:scale(1.2)}.vs-pagination .vs-input__original{text-align:center;-moz-appearance:textfield}.vs-pagination .vs-select{--vs-select-min-height:var(--vs-pagination-button-height)}.vs-pagination .vs-select__input{width:128px;height:var(--vs-pagination-button-height);line-height:var(--vs-pagination-button-height);font-size:var(--vs-pagination-font-size)}.vs-pagination button{display:flex;justify-content:center;align-items:center;font-size:var(--vs-pagination-font-size);min-width:var(--vs-pagination-button-width);height:var(--vs-pagination-button-height);line-height:var(--vs-pagination-button-height);color:var(--vs-pagination-button-color);background:var(--vs-pagination-bg-color);padding:0 4px;border:none;border-radius:var(--vs-pagination-border-radius);cursor:pointer;text-align:center;box-sizing:border-box;margin:0 var(--vs-pagination-button-margin);transition:var(--vs-transition-ease)}.vs-pagination button *{pointer-events:none}.vs-pagination button:focus{outline:0}.vs-pagination button:hover{background-color:var(--vs-pagination-button-bg-hover)}.vs-pagination button:active{transform:scale(.93)}.vs-pagination button.is-disabled,.vs-pagination button:disabled{opacity:.4;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-pagination button:focus-visible{outline:1px solid var(--vs-pagination-hover-color);outline-offset:-1px}.vs-pagination .btn-next .vs-icon,.vs-pagination .btn-prev .vs-icon{display:block;font-size:12px;font-weight:700;width:inherit}.vs-pagination>.is-first{margin-left:0!important}.vs-pagination>.is-last{margin-right:0!important}.vs-pagination .btn-prev{margin-left:var(--vs-pagination-item-gap)}.vs-pagination__progress{width:100%;height:3px;background:rgba(var(--vs-gray-3),1);position:absolute;bottom:-8px;border-radius:10px}.vs-pagination__progress .progress{width:0;background:rgba(var(--vs-color),1);height:100%;position:relative;border-radius:inherit;transition:all .25s ease;max-width:100%}.vs-pagination__sizes{margin-left:var(--vs-pagination-item-gap);font-weight:400;color:var(--vs-text-color-regular)}.vs-pagination__total{margin-left:var(--vs-pagination-item-gap);font-weight:400;color:var(--vs-text-color-regular)}.vs-pagination__total[disabled=true]{color:var(--vs-text-color-placeholder)}.vs-pagination__jump{display:flex;align-items:center;margin-left:var(--vs-pagination-item-gap);font-weight:400;color:var(--vs-text-color-regular)}.vs-pagination__jump[disabled=true]{color:var(--vs-text-color-placeholder)}.vs-pagination__goto{margin-right:8px}.vs-pagination__editor{text-align:center;box-sizing:border-box;width:56px;height:var(--vs-pagination-button-height);line-height:var(--vs-pagination-button-height)}.vs-pagination__editor::-webkit-inner-spin-button,.vs-pagination__editor::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vs-pagination__classifier{margin-left:8px}.vs-pagination__rightwrapper{flex:1;display:flex;justify-content:flex-end;align-items:center}.vs-pagination.is-background .btn-next,.vs-pagination.is-background .btn-prev,.vs-pagination.is-background .vs-pager button{margin:0 4px;background-color:var(--vs-pagination-button-bg-color)}.vs-pagination.is-background .btn-next.is-active,.vs-pagination.is-background .btn-prev.is-active,.vs-pagination.is-background .vs-pager button.is-active{background-color:var(--vs-color-primary);color:var(--vs-color-white)}.vs-pagination.is-background .btn-next.is-disabled,.vs-pagination.is-background .btn-next:disabled,.vs-pagination.is-background .btn-prev.is-disabled,.vs-pagination.is-background .btn-prev:disabled,.vs-pagination.is-background .vs-pager button.is-disabled,.vs-pagination.is-background .vs-pager button:disabled{color:var(--vs-text-color-placeholder);background-color:var(--vs-disabled-bg-color)}.vs-pagination.is-background .btn-next.is-disabled.is-active,.vs-pagination.is-background .btn-next:disabled.is-active,.vs-pagination.is-background .btn-prev.is-disabled.is-active,.vs-pagination.is-background .btn-prev:disabled.is-active,.vs-pagination.is-background .vs-pager button.is-disabled.is-active,.vs-pagination.is-background .vs-pager button:disabled.is-active{color:var(--vs-text-color-secondary);background-color:var(--vs-fill-color-dark)}.vs-pagination.is-background .btn-prev{margin-left:var(--vs-pagination-item-gap)}.vs-pagination--small .btn-next,.vs-pagination--small .btn-prev,.vs-pagination--small .vs-pager button{height:var(--vs-pagination-button-height-small);line-height:var(--vs-pagination-button-height-small);font-size:var(--vs-pagination-font-size-small);min-width:var(--vs-pagination-button-width-small)}.vs-pagination--small button,.vs-pagination--small span:not([class*=suffix]){font-size:var(--vs-pagination-font-size-small)}.vs-pagination--small .vs-select{--vs-select-min-height:var(--vs-pagination-button-height)}.vs-pagination--small .vs-select .vs-input{width:100px;font-size:var(--vs-pagination-font-size-small);height:var(--vs-pagination-button-height-small);line-height:var(--vs-pagination-button-height-small)}.vs-pager{display:flex;justify-content:flex-start;align-items:center;position:relative;font-size:var(--vs-pagination-font-size);padding:0;margin:0}.vs-pager .is-loading{border-radius:50%;opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative}.vs-pager .is-disabled{opacity:.4;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-pager__aria-active{display:flex;justify-content:center;align-items:center;background-color:rgba(var(--vs-color),1);color:#fff;border-radius:var(--vs-pagination-border-radius);position:absolute;transition:var(--vs-transition-ease);z-index:100;font-size:inherit;box-shadow:0 5px 20px 0 rgba(var(--vs-color),.3);cursor:default;width:var(--vs-pagination-button-width);height:var(--vs-pagination-button-height)}.vs-pager__aria-active:active{transform:scale(1.05)}.vs-pager__aria-active.is-change{transform:scale(1.1)}.vs-pager .more{position:relative}.vs-pager .more span{opacity:1;visibility:visible;transition:var(--vs-transition-ease)}.vs-pager .more svg{position:absolute;top:50%;left:50%;transition:var(--vs-transition-ease);opacity:0;visibility:hidden}.vs-pager .more.btn-quickprev svg{transform:translate(calc(-50% + 4px),-50%)}.vs-pager .more.btn-quicknext svg{transform:translate(calc(-50% - 4px),-50%)}.vs-pager .more:hover svg{transform:translate(-50%,-50%);opacity:1;visibility:visible}.vs-pager .more:hover span{opacity:0;visibility:hidden}@keyframes pager-rotate{100%{transform:rotate(360deg)}}