@alifd/meet-react/lib/pagination/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component pagination
  @display Pagination
  @chinese 分页
  @family navigation
*/
:root {
  --pagination-small-text-mini-width: var(--s-3);
  --pagination-small-text-padding-left: 2.6666666666666665vw;
  --pagination-small-text-padding-right: 2.6666666666666665vw;
  --pagination-small-text-number-font-size: 3.7333333333333334vw;
  --pagination-small-icon-font-size: 4.8vw;
  --pagination-medium-text-mini-width: var(--s-4);
  --pagination-medium-text-padding-left: var(--s-3);
  --pagination-medium-text-padding-right: var(--s-3);
  --pagination-medium-text-number-font-size: var(--s-4);
  --pagination-medium-icon-font-size: var(--s-5);
  --pagination-large-text-mini-width: var(--s-6);
  --pagination-large-text-padding-left: 3.7333333333333334vw;
  --pagination-large-text-padding-right: 3.7333333333333334vw;
  --pagination-large-text-number-font-size: 4.8vw;
  --pagination-large-icon-font-size: 5.866666666666666vw;
  /**
    @desc current-color
    @semantic 当前选中页码颜色
    @namespace style/color
  */
  --pagination-text-current-color: var(--color-brand-3);
  --pagination-icon-color: var(--color-text1-4);
  --pagination-icon-disabled-color: var(--color-text1-1);
}

.mt-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.mt-pagination--small-text {
  padding-left: var(--pagination-small-text-padding-left);
  padding-right: var(--pagination-small-text-padding-right);
  text-align: center;
}
.mt-pagination--small-text-number {
  font-size: var(--pagination-small-text-number-font-size);
}
.mt-pagination--small-text-mini {
  width: var(--pagination-small-text-mini-width);
}
.mt-pagination--small-icon {
  font-size: var(--pagination-small-icon-font-size);
}
.mt-pagination--medium-text {
  padding-left: var(--pagination-medium-text-padding-left);
  padding-right: var(--pagination-medium-text-padding-right);
  text-align: center;
}
.mt-pagination--medium-text-number {
  font-size: var(--pagination-medium-text-number-font-size);
}
.mt-pagination--medium-text-mini {
  width: var(--pagination-medium-text-mini-width);
}
.mt-pagination--medium-icon {
  font-size: var(--pagination-medium-icon-font-size);
}
.mt-pagination--large-text {
  padding-left: var(--pagination-large-text-padding-left);
  padding-right: var(--pagination-large-text-padding-right);
  text-align: center;
}
.mt-pagination--large-text-number {
  font-size: var(--pagination-large-text-number-font-size);
}
.mt-pagination--large-text-mini {
  width: var(--pagination-large-text-mini-width);
}
.mt-pagination--large-icon {
  font-size: var(--pagination-large-icon-font-size);
}
.mt-pagination-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-pagination-text-current {
  color: var(--pagination-text-current-color);
}
.mt-pagination-text-select-drawer {
  --select-drawer-padding-lr: 0;
}
.mt-pagination-icon {
  color: var(--pagination-icon-color);
}
.mt-pagination-icon--first {
  margin-right: 0;
}
.mt-pagination-icon--last {
  margin-left: 0;
}
.mt-pagination-icon--disabled {
  color: var(--pagination-icon-disabled-color);
}