@opentiny/vue-theme/pager/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-pager{--tv-Pager-font-size:var(--tv-font-size-default, 14px);--tv-Pager-text-color:var(--tv-color-text, #191919);--tv-Pager-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Pager-text-color-secondary:var(--tv-color-text-secondary, #595959);--tv-Pager-icon-size:16px;--tv-Pager-icon-color:var(--tv-color-icon, #808080);--tv-Pager-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Pager-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-Pager-border-color:var(--tv-color-border, #c2c2c2);--tv-Pager-border-color-hover:var(--tv-color-border-hover, #191919);--tv-Pager-border-color-active:var(--tv-color-border-active, #191919);--tv-Pager-border-color-disabled:var(--tv-color-border-disabled, #dbdbdb);--tv-Pager-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Pager-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-Pager-height:var(--tv-size-height-md, 32px);--tv-Pager-padding-y:var(--tv-space-md, 8px);--tv-Pager-font-size-xs:var(--tv-font-size-sm, 12px);--tv-Pager-input-height-xs:var(--tv-size-height-xs, 24px);--tv-Pager-min-width-xs:24px;--tv-Pager-page-item-bg-color-active:var(--tv-color-bg-active, #f5f5f5);--tv-Pager-page-item-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Pager-page-item-border-color:transparent;--tv-Pager-page-item-border-color-disabled:transparent;--tv-Pager-page-item-border-color-hover:transparent;--tv-Pager-page-item-border-radius:var(--tv-border-radius-brand, 999px);--tv-Pager-page-item-font-weight-hover:var(--tv-font-weight-bold, 600);--tv-Pager-page-item-min-width:32px;--tv-Pager-page-item-padding-x:var(--tv-space-md, 8px);--tv-Pager-page-item-text-color-active:var(--tv-color-text-active-1, #191919);--tv-Pager-page-item-text-color-hover:var(--tv-color-text, #191919);--tv-Pager-prev-next-bg-color-hover:transparent;--tv-Pager-custom-prev-next-text-color:var(--tv-color-text-link, #1476ff);--tv-Pager-prev-margin-left:var(--tv-space-xl, 16px);--tv-Pager-prev-margin-right:var(--tv-space-md, 8px);--tv-Pager-next-margin-right:0;--tv-Pager-next-margin-left:var(--tv-space-md, 8px);--tv-Pager-input-border-radius:var(--tv-border-radius-md, 6px);--tv-Pager-input-height:var(--tv-size-height-md, 32px);--tv-Pager-goto-left-padding-left:var(--tv-space-xl, 16px);--tv-Pager-sizes-arrow-padding-x:var(--tv-space-md, 8px);--tv-Pager-sizes-num-margin-right:var(--tv-space-sm, 4px);--tv-Pager-sizes-popup-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Pager-sizes-popup-text-color-active:var(--tv-color-text-active, #1476ff);--tv-Pager-sizes-popup-item-height:32px;--tv-Pager-input-background:var(--tv-color-bg-3, #ffffff);text-align:left;padding:var(--tv-Pager-padding-y) 0;color:var(--tv-Pager-text-color)}.tiny-pager .tiny-pager__group{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;font-size:var(--tv-Pager-font-size)}.tiny-pager .tiny-pager__group+.tiny-pager__sizes{margin-left:16px}.tiny-pager .tiny-pager__group>span{display:inline-block;vertical-align:middle}.tiny-pager .tiny-pager__total{height:var(--tv-Pager-height);line-height:var(--tv-Pager-height)}.tiny-pager .tiny-pager__total-allpage{margin:0 4px}.tiny-pager .tiny-pager__pull-left{float:left;height:var(--tv-Pager-height)}.tiny-pager .tiny-pager__pages{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--tv-Pager-font-size)}.tiny-pager .tiny-pager__pages li{background:0 0;display:inline-block;font-size:var(--tv-Pager-font-size);cursor:pointer;margin-right:4px;text-align:center;line-height:calc(var(--tv-Pager-height) - 2px);border-radius:var(--tv-Pager-page-item-border-radius);height:var(--tv-Pager-height);min-width:var(--tv-Pager-page-item-min-width);color:var(--tv-Pager-text-color-secondary);padding:0 var(--tv-Pager-page-item-padding-x);-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid var(--tv-Pager-page-item-border-color);-webkit-transition:all .5s ease;transition:all .5s ease}.tiny-pager .tiny-pager__pages li a{color:var(--tv-Pager-text-color-secondary)}.tiny-pager .tiny-pager__pages li svg{fill:var(--tv-Pager-icon-color);color:var(--tv-Pager-icon-color);vertical-align:middle}.tiny-pager .tiny-pager__pages li:not(.dot):not(.is-active):hover{color:var(--tv-Pager-page-item-text-color-hover);background-color:var(--tv-Pager-bg-color-hover);border:1px solid var(--tv-Pager-page-item-border-color-hover);font-weight:var(--tv-Pager-page-item-font-weight-hover)}.tiny-pager .tiny-pager__pages li:not(.dot):not(.is-active):hover svg{fill:var(--tv-Pager-icon-color-hover)}.tiny-pager .tiny-pager__pages li.dot svg,.tiny-pager .tiny-pager__pages li.quicknext svg,.tiny-pager .tiny-pager__pages li.quickprev svg{font-size:var(--tv-Pager-icon-size)}.tiny-pager .tiny-pager__pages li.dot.is-popup svg,.tiny-pager .tiny-pager__pages li.quicknext.is-popup svg,.tiny-pager .tiny-pager__pages li.quickprev.is-popup svg{display:inline}.tiny-pager .tiny-pager__pages li.is-active{font-weight:700;color:var(--tv-Pager-page-item-text-color-active);background-color:var(--tv-Pager-page-item-bg-color-active);border:1px solid var(--tv-Pager-page-item-border-color-hover)}.tiny-pager .tiny-pager__pages li:last-child{margin-right:0}.tiny-pager__loading .tiny-pager__total{display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-pager__loading .tiny-pager__total-loading{width:30px}.tiny-pager__goto{font-size:0}.tiny-pager__goto input[type=text]{width:48px;text-align:center;vertical-align:top;border-radius:var(--tv-Pager-input-border-radius);display:inline-block;position:inherit;height:var(--tv-Pager-input-height);line-height:var(--tv-Pager-input-height);border:1px solid var(--tv-Pager-border-color);color:var(--tv-Pager-text-color);font-size:var(--tv-Pager-font-size);-webkit-transition:border .3s;transition:border .3s;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:4px;background:var(--tv-Pager-input-background)}.tiny-pager__goto input[type=text]:hover{border:1px solid var(--tv-Pager-border-color-hover)}.tiny-pager__goto input[type=text].active,.tiny-pager__goto input[type=text]:active,.tiny-pager__goto input[type=text]:focus,.tiny-pager__goto input[type=text][active]{border:1px solid var(--tv-Pager-border-color-active);-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent}.tiny-pager__goto input[type=text][disabled]{color:var(--tv-Pager-text-color-disabled);border-color:var(--tv-Pager-border-color-disabled);background:var(--tv-Pager-bg-color-disabled);cursor:not-allowed}.tiny-pager__goto-text{font-size:var(--tv-Pager-font-size);padding-left:var(--tv-Pager-goto-left-padding-left);margin-right:8px;line-height:var(--tv-Pager-input-height)}.tiny-pager__goto-text-sufix{padding-left:4px}.tiny-pager__btn-next,.tiny-pager__btn-prev{height:var(--tv-Pager-height);line-height:calc(var(--tv-Pager-height) - 2px);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--tv-Pager-font-size);font-weight:bolder;outline:0;border:1px solid var(--tv-Pager-page-item-border-color);background:0 0;margin-top:0;margin-right:var(--tv-Pager-prev-margin-right);margin-bottom:0;margin-left:var(--tv-Pager-prev-margin-left);padding:0;vertical-align:middle;cursor:pointer}.tiny-pager__btn-next span,.tiny-pager__btn-prev span{color:var(--tv-Pager-custom-prev-next-text-color)}.tiny-pager__btn-next svg,.tiny-pager__btn-prev svg{fill:var(--tv-Pager-icon-color);font-size:var(--tv-Pager-icon-size);vertical-align:middle}.tiny-pager__btn-next:hover,.tiny-pager__btn-prev:hover{background-color:var(--tv-Pager-prev-next-bg-color-hover);border:1px solid var(--tv-Pager-page-item-border-color-hover)}.tiny-pager__btn-next:hover svg,.tiny-pager__btn-prev:hover svg{fill:var(--tv-Pager-icon-color-hover)}.tiny-pager__btn-next[disabled],.tiny-pager__btn-next[disabled]:hover,.tiny-pager__btn-prev[disabled],.tiny-pager__btn-prev[disabled]:hover{background-color:transparent;cursor:not-allowed}.tiny-pager__btn-next[disabled] span,.tiny-pager__btn-prev[disabled] span{color:var(--tv-Pager-text-color-disabled)}.tiny-pager__btn-next[disabled] svg,.tiny-pager__btn-prev[disabled] svg{fill:var(--tv-Pager-icon-color-disabled)}.tiny-pager__btn-next{margin-right:var(--tv-Pager-next-margin-right);margin-left:var(--tv-Pager-next-margin-left)}.tiny-pager__selector{--tv-Pager-font-size:var(--tv-font-size-default, 14px);--tv-Pager-text-color:var(--tv-color-text, #191919);--tv-Pager-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Pager-text-color-secondary:var(--tv-color-text-secondary, #595959);--tv-Pager-icon-size:16px;--tv-Pager-icon-color:var(--tv-color-icon, #808080);--tv-Pager-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Pager-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-Pager-border-color:var(--tv-color-border, #c2c2c2);--tv-Pager-border-color-hover:var(--tv-color-border-hover, #191919);--tv-Pager-border-color-active:var(--tv-color-border-active, #191919);--tv-Pager-border-color-disabled:var(--tv-color-border-disabled, #dbdbdb);--tv-Pager-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Pager-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-Pager-height:var(--tv-size-height-md, 32px);--tv-Pager-padding-y:var(--tv-space-md, 8px);--tv-Pager-font-size-xs:var(--tv-font-size-sm, 12px);--tv-Pager-input-height-xs:var(--tv-size-height-xs, 24px);--tv-Pager-min-width-xs:24px;--tv-Pager-page-item-bg-color-active:var(--tv-color-bg-active, #f5f5f5);--tv-Pager-page-item-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Pager-page-item-border-color:transparent;--tv-Pager-page-item-border-color-disabled:transparent;--tv-Pager-page-item-border-color-hover:transparent;--tv-Pager-page-item-border-radius:var(--tv-border-radius-brand, 999px);--tv-Pager-page-item-font-weight-hover:var(--tv-font-weight-bold, 600);--tv-Pager-page-item-min-width:32px;--tv-Pager-page-item-padding-x:var(--tv-space-md, 8px);--tv-Pager-page-item-text-color-active:var(--tv-color-text-active-1, #191919);--tv-Pager-page-item-text-color-hover:var(--tv-color-text, #191919);--tv-Pager-prev-next-bg-color-hover:transparent;--tv-Pager-custom-prev-next-text-color:var(--tv-color-text-link, #1476ff);--tv-Pager-prev-margin-left:var(--tv-space-xl, 16px);--tv-Pager-prev-margin-right:var(--tv-space-md, 8px);--tv-Pager-next-margin-right:0;--tv-Pager-next-margin-left:var(--tv-space-md, 8px);--tv-Pager-input-border-radius:var(--tv-border-radius-md, 6px);--tv-Pager-input-height:var(--tv-size-height-md, 32px);--tv-Pager-goto-left-padding-left:var(--tv-space-xl, 16px);--tv-Pager-sizes-arrow-padding-x:var(--tv-space-md, 8px);--tv-Pager-sizes-num-margin-right:var(--tv-space-sm, 4px);--tv-Pager-sizes-popup-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-Pager-sizes-popup-text-color-active:var(--tv-color-text-active, #1476ff);--tv-Pager-sizes-popup-item-height:32px;--tv-Pager-input-background:var(--tv-color-bg-3, #ffffff)}.tiny-pager__selector.tiny-popover.tiny-popper{border:0;padding:8px 0;border-radius:var(--tv-Pager-input-border-radius)}.tiny-pager__selector.tiny-popover.tiny-popper[x-placement^=bottom]{margin-top:4px}.tiny-pager__selector.tiny-popover.tiny-popper[x-placement^=top]{margin-bottom:0}.tiny-pager__selector-body{max-height:300px;overflow-y:auto;overflow-x:hidden}.tiny-pager__selector-poplist .list-item{color:var(--tv-Pager-text-color);min-height:var(--tv-Pager-sizes-popup-item-height);padding:0 16px;line-height:var(--tv-Pager-sizes-popup-item-height);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-pager__selector-poplist .list-item:hover{cursor:pointer;background:var(--tv-Pager-sizes-popup-bg-color-hover)}.tiny-pager__selector-poplist .list-item.is-selected:hover{background:var(--tv-Pager-page-item-bg-color-hover)}.tiny-pager__selector-poplist .list-item.select-pre{background:var(--tv-Pager-sizes-popup-bg-color-hover)}.tiny-pager__selector-poplist .list-item.select-pre.is-selected{color:var(--tv-Pager-sizes-popup-text-color-active);background:0 0;font-weight:700}.tiny-pager__selector-poplist .list-item.select-pre.is-selected:hover{background:var(--tv-Pager-page-item-bg-color-hover)}.tiny-pager .tiny-pager__popover{margin:0 4px 0 14px}.tiny-pager .tiny-pager__sizes .tiny-select{width:70px}.tiny-pager .tiny-pager__sizes .tiny-pager__popover{margin:0}.tiny-pager .tiny-pager__sizes+.tiny-pager__group{margin:0 16px}.tiny-pager__page-size{max-width:200px;position:relative;text-align:left;height:var(--tv-Pager-input-height);line-height:calc(var(--tv-Pager-input-height) - 2px);border:1px solid var(--tv-Pager-border-color);border-radius:var(--tv-Pager-input-border-radius);background:var(--tv-Pager-input-background);font-size:var(--tv-Pager-font-size);padding:0;padding-left:12px;padding-right:4px;display:block;white-space:nowrap;-webkit-transition:border .3s;transition:border .3s;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-pager__page-size:hover{outline:0;border-color:var(--tv-Pager-border-color-hover)}.tiny-pager__page-size:active,.tiny-pager__page-size:focus{outline:0;border-color:var(--tv-Pager-border-color-hover)}.tiny-pager__page-size-btn{padding:0 var(--tv-Pager-sizes-arrow-padding-x);height:var(--tv-Pager-height);line-height:calc(var(--tv-Pager-height) - 2px);position:relative;float:right;top:-1px;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden;cursor:pointer}.tiny-pager__page-size-btn svg{font-size:var(--tv-Pager-icon-size);fill:var(--tv-Pager-icon-color);vertical-align:middle}.tiny-pager__page-size-btn svg:hover{fill:var(--tv-Pager-icon-color-hover)}.tiny-pager__page-size .sizes{margin-right:var(--tv-Pager-sizes-num-margin-right)}.tiny-pager .tiny-svg-size.tiny-svg-size__reverse-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.tiny-pager .tiny-popover__reference{outline:0}.tiny-pager.tiny-pager--mini .tiny-pager__total{font-size:var(--tv-Pager-font-size-xs)}.tiny-pager.tiny-pager--mini .tiny-pager__goto-text{font-size:var(--tv-Pager-font-size-xs);line-height:var(--tv-Pager-input-height-xs)}.tiny-pager.tiny-pager--mini .tiny-pager__goto input{height:var(--tv-Pager-input-height-xs);line-height:var(--tv-Pager-input-height-xs)}.tiny-pager.tiny-pager--mini .tiny-pager__page-size{height:var(--tv-Pager-input-height-xs);line-height:calc(var(--tv-Pager-input-height-xs) - 2px)}.tiny-pager.tiny-pager--mini .tiny-pager__page-size-btn{height:calc(var(--tv-Pager-input-height-xs) - 2px);line-height:calc(var(--tv-Pager-input-height-xs) - 2px)}.tiny-pager.tiny-pager--mini li{min-width:var(--tv-Pager-min-width-xs);height:var(--tv-Pager-input-height-xs);padding:0 4px;line-height:calc(var(--tv-Pager-input-height-xs) - 2px);font-size:var(--tv-Pager-font-size-xs)}.tiny-pager.tiny-pager--mini .tiny-pager__btn-next svg,.tiny-pager.tiny-pager--mini .tiny-pager__btn-prev svg{font-size:14px}.tiny-pager.tiny-pager--mini .tiny-pager__input input{height:var(--tv-Pager-input-height-xs);line-height:calc(var(--tv-Pager-input-height-xs) - 2px)}.tiny-pager.tiny-pager--mini .tiny-pager__input-btn{height:var(--tv-Pager-input-height-xs);line-height:calc(var(--tv-Pager-input-height-xs) - 2px)}.tiny-pager.is-disabled .tiny-pager__total{color:var(--tv-Pager-text-color-disabled)}.tiny-pager.is-disabled ul li{cursor:not-allowed;color:var(--tv-Pager-text-color-disabled);background-color:transparent;border-color:var(--tv-Pager-page-item-border-color-disabled)}.tiny-pager.is-disabled ul li.is-active,.tiny-pager.is-disabled ul li:not(.dot):not(.is-active):hover{color:var(--tv-Pager-text-color-disabled);font-weight:400;background-color:transparent;border-color:var(--tv-Pager-page-item-border-color-disabled)}.tiny-pager.is-disabled ul li svg{fill:var(--tv-Pager-icon-color-disabled)}.tiny-pager.is-disabled .tiny-pager__page-size{color:var(--tv-Pager-text-color-disabled);cursor:not-allowed;border-color:var(--tv-Pager-border-color-disabled);background:var(--tv-Pager-bg-color-disabled)}.tiny-pager.is-disabled .tiny-pager__page-size-btn svg{fill:var(--tv-Pager-icon-color-disabled);cursor:not-allowed}.tiny-pager.is-disabled .tiny-pager__goto-text{color:var(--tv-Pager-text-color-disabled)}