From 6fb6526fb042ffd69fa3377f0cf9f51246c447a9 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Fri, 3 Nov 2017 11:08:46 +0800 Subject: [PATCH] init pagination --- components/pagination/index.js | 0 components/pagination/pagination.vue | 0 components/pagination/style/index.js | 2 + components/pagination/style/index.less | 333 +++++++++++++++++++++++++ examples/rate.vue | 2 +- 5 files changed, 336 insertions(+), 1 deletion(-) create mode 100644 components/pagination/index.js create mode 100644 components/pagination/pagination.vue create mode 100644 components/pagination/style/index.js create mode 100644 components/pagination/style/index.less diff --git a/components/pagination/index.js b/components/pagination/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/components/pagination/pagination.vue b/components/pagination/pagination.vue new file mode 100644 index 000000000..e69de29bb diff --git a/components/pagination/style/index.js b/components/pagination/style/index.js new file mode 100644 index 000000000..cf31ed80f --- /dev/null +++ b/components/pagination/style/index.js @@ -0,0 +1,2 @@ +import '../../style/index.less' +import './index.less' diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less new file mode 100644 index 000000000..5b8e0ddab --- /dev/null +++ b/components/pagination/style/index.less @@ -0,0 +1,333 @@ +@import "../../style/themes/default"; +@import "../../style/mixins/index"; +@import "../../input/style/mixin"; + +@pagination-prefix-cls: ~"@{ant-prefix}-pagination"; + +.@{pagination-prefix-cls} { + font-size: @font-size-base; + + &:after { + content: " "; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; + } + + &-total-text { + display: inline-block; + vertical-align: middle; + height: 28px; + line-height: 28px; + margin-right: 8px; + } + + &-item { + cursor: pointer; + border-radius: @border-radius-base; + user-select: none; + min-width: 28px; + height: 28px; + line-height: 28px; + text-align: center; + list-style: none; + display: inline-block; + vertical-align: middle; + border: @border-width-base @border-style-base @border-color-base; + background-color: @component-background; + margin-right: 8px; + font-family: Arial; + outline: 0; + + a { + text-decoration: none; + color: @text-color; + transition: none; + margin: 0 6px; + } + + &:focus, + &:hover { + transition: all .3s; + border-color: @primary-color; + a { + color: @primary-color; + } + } + + &-active { + background-color: @primary-color; + border-color: @primary-color; + + &:focus, + &:hover { + background-color: @primary-5; + border-color: @primary-5; + } + + a, + &:focus a, + &:hover a { + color: #fff; + } + } + } + + &-jump-prev, + &-jump-next { + outline: 0; + + &:after { + content: "•••"; + display: block; + letter-spacing: 2px; + color: @disabled-color; + text-align: center; + } + + &:focus, + &:hover { + &:after { + color: @primary-color; + .iconfont-size-under-12px(8px); + letter-spacing: -1px; + font-family: "anticon"; + } + } + } + + &-jump-prev { + &:focus, + &:hover { + &:after { + content: "\e620\e620"; + } + } + } + + &-jump-next { + &:focus, + &:hover { + &:after { + content: "\e61f\e61f"; + } + } + } + + &-prev, + &-jump-prev, + &-jump-next { + margin-right: 8px; + } + &-prev, + &-next, + &-jump-prev, + &-jump-next { + font-family: Arial; + cursor: pointer; + color: @text-color; + border-radius: @border-radius-base; + list-style: none; + min-width: 28px; + height: 28px; + line-height: 28px; + text-align: center; + transition: all .3s; + display: inline-block; + vertical-align: middle; + } + + &-prev, + &-next { + outline: 0; + + a { + color: @text-color; + user-select: none; + } + + &:hover a { + color: @primary-color; + } + + .@{pagination-prefix-cls}-item-link { + border: @border-width-base @border-style-base @border-color-base; + background-color: @component-background; + border-radius: @border-radius-base; + outline: none; + display: block; + transition: all .3s; + + &:after { + .iconfont-size-under-12px(8px); + display: block; + height: 26px; + line-height: 26px; + font-family: "anticon"; + text-align: center; + font-weight: 500; + } + } + + &:focus .@{pagination-prefix-cls}-item-link, + &:hover .@{pagination-prefix-cls}-item-link { + border-color: @primary-color; + color: @primary-color; + } + } + + &-prev { + .@{pagination-prefix-cls}-item-link:after { + content: "\e620"; + display: block; + } + } + + &-next { + .@{pagination-prefix-cls}-item-link:after { + content: "\e61f"; + display: block; + } + } + + &-disabled { + &, + &:hover, + &:focus { + cursor: not-allowed; + a, + .@{pagination-prefix-cls}-item-link { + border-color: @border-color-base; + color: @disabled-color; + cursor: not-allowed; + } + } + } + + &-slash { + margin: 0 10px 0 5px; + } + + &-options { + display: inline-block; + vertical-align: middle; + margin-left: 16px; + + &-size-changer { + display: inline-block; + margin-right: 8px; + } + + &-quick-jumper { + display: inline-block; + height: @input-height-base; + line-height: @input-height-base; + + input { + .input; + margin: 0 8px; + width: 50px; + } + } + } + + &-simple &-prev, + &-simple &-next { + height: 24px; + line-height: 24px; + vertical-align: top; + .@{pagination-prefix-cls}-item-link { + border: 0; + height: 24px; + &:after { + line-height: 24px; + } + } + } + + &-simple &-simple-pager { + display: inline-block; + margin-right: 8px; + height: 24px; + + input { + margin-right: 8px; + box-sizing: border-box; + background-color: @component-background; + border-radius: @border-radius-base; + border: @border-width-base @border-style-base @border-color-base; + outline: none; + padding: 0 6px; + height: 100%; + text-align: center; + transition: border-color .3s; + + &:hover { + border-color: @primary-color; + } + } + } +} + +.@{pagination-prefix-cls} { + &.mini &-total-text, + &.mini &-simple-pager { + height: 20px; + line-height: 20px; + } + + &.mini &-item { + border: 0; + margin: 0; + min-width: 20px; + height: 20px; + line-height: 20px; + } + + &.mini &-prev, + &.mini &-next { + margin: 0; + min-width: 20px; + height: 20px; + line-height: 20px; + } + + &.mini &-prev &-item-link, + &.mini &-next &-item-link { + border: 0; + &:after { + height: 20px; + line-height: 20px; + } + } + + &.mini &-jump-prev, + &.mini &-jump-next { + height: 20px; + line-height: 20px; + } + + &.mini &-options { + margin-left: 8px; + &-quick-jumper { + height: 20px; + line-height: 20px; + + input { + .input-sm; + width: 44px; + } + } + } +} + +@media only screen and (max-width: 1024px) { + .@{pagination-prefix-cls}-item { + &-after-jump-prev, + &-before-jump-next { + display: none; + } + } +} diff --git a/examples/rate.vue b/examples/rate.vue index d09d36a37..fa48d073d 100644 --- a/examples/rate.vue +++ b/examples/rate.vue @@ -27,7 +27,7 @@ {{hoverValueAH}}stars
自定义 - +