shineout/css/Pagination/styles/pagination.css

Shein 前端组件库

.so-pagination {
  font-size: var(--pagination-font-size, var(--font-size-base, 14px));
}
.so-pagination-section {
  display: inline-block;
  vertical-align: middle;
}
.so-pagination-section-ltr {
  margin-right: 8px;
}
.so-pagination-section-ltr:last-child {
  margin-right: 0;
}
.so-pagination-section-rtl {
  margin-left: 8px;
}
.so-pagination-section-rtl:last-child {
  margin-left: 0;
}
.so-pagination-section > span {
  color: var(--gray-600, #6c757d);
  line-height: var(--pagination-size, 34px);
}
.so-pagination-center {
  text-align: center;
}
.so-pagination-right {
  text-align: right;
  text-align: end;
}
.so-pagination-small .so-pagination-item {
  min-width: var(--pagination-size-small, 30px);
  height: var(--pagination-size-small, 30px);
  font-size: var(--font-size-small, 12px);
  line-height: var(--pagination-size-small, 30px);
}
.so-pagination-small .so-pagination-arrow {
  padding-top: 1px;
}
.so-pagination-large .so-pagination-item {
  min-width: var(--pagination-size-large, 42px);
  height: var(--pagination-size-large, 42px);
  font-size: var(--font-size-large, 18px);
  line-height: var(--pagination-size-large, 42px);
}
.so-pagination-item {
  position: relative;
  display: inline-block;
  min-width: var(--pagination-size, 34px);
  height: var(--pagination-size, 34px);
  padding: 0 2px;
  border: var(--pagination-border-width, 1px) solid #ddd;
  background-color: #fff;
  border-radius: var(--pagination-border-radius, 4px);
  color: var(--gray-600, #6c757d);
  line-height: var(--pagination-size, 34px);
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: top;
}
.so-pagination-item-ltr {
  margin-right: 8px;
}
.so-pagination-item-ltr:last-child {
  margin-right: 0;
}
.so-pagination-item-rtl {
  margin-left: 8px;
}
.so-pagination-item-rtl:last-child {
  margin-left: 0;
}
.so-pagination-item svg {
  width: 12px;
  height: 12px;
  fill: var(--gray-600, #6c757d);
}
.so-pagination-item[disabled] {
  color: var(--gray-500, #adb5bd);
}
.so-pagination-item[disabled] svg {
  fill: var(--gray-500, #adb5bd);
}
.so-pagination-item:hover {
  border-color: var(--pagination-hover-border, #ddd);
  background: var(--pagination-hover-bg, #f8f9fa);
  color: var(--pagination-hover-color, #3399ff);
}
.so-pagination-item:hover svg {
  fill: var(--pagination-hover-color, #3399ff);
}
.so-pagination-item:active,
.so-pagination-item:focus {
  text-decoration: none;
}
.so-pagination-current[disabled] {
  border-color: var(--primary-color, #3399ff);
  background: var(--primary-color, #3399ff);
  color: #fff;
}
.so-pagination-more-right svg,
.so-pagination-more-left svg {
  opacity: 0;
}
.so-pagination-more-right:before,
.so-pagination-more-left:before {
  position: absolute;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  content: '\2022\2022\2022';
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.so-pagination-more-right:hover svg,
.so-pagination-more-left:hover svg {
  opacity: 1;
}
.so-pagination-more-right:hover:before,
.so-pagination-more-left:hover:before {
  display: none;
}
.so-pagination-no-border,
.so-pagination-no-border:hover {
  border-color: transparent;
  background: transparent;
}
div.so-pagination-pagesize {
  display: inline-block;
  width: auto;
}
div.so-pagination-pagesize .so-select-result .so-select-ellipsis {
  overflow: unset;
}
div.so-pagination-pagesize .so-select-options {
  width: auto;
}
.so-pagination-simple-span {
  margin-left: 16px;
}
.so-pagination-rtl .so-pagination-simple-span {
  margin-left: 0;
  margin-right: 16px;
}
.so-pagination-simple-input input {
  text-align: center;
}
.so-pagination.so-pagination-rtl {
  direction: rtl;
  text-align: right;
}