重构分页组件
宇天
parent
b460410b68
commit
0b47e23e96
|
|
@ -4,7 +4,7 @@ import './main.scss'
|
||||||
|
|
||||||
Anot.ui.pager = '1.0.0'
|
Anot.ui.pager = '1.0.0'
|
||||||
//计算页码列表
|
//计算页码列表
|
||||||
function calculate({ currPage, maxPageShow, totalPages }) {
|
function calculate({ currPage, maxPageShow, totalPage }) {
|
||||||
let arr = []
|
let arr = []
|
||||||
let fixNum = 0
|
let fixNum = 0
|
||||||
let halfPage =
|
let halfPage =
|
||||||
|
|
@ -12,87 +12,135 @@ function calculate({ currPage, maxPageShow, totalPages }) {
|
||||||
? maxPageShow - currPage
|
? maxPageShow - currPage
|
||||||
: Math.floor(maxPageShow / 2)
|
: Math.floor(maxPageShow / 2)
|
||||||
|
|
||||||
if (totalPages < 2) {
|
if (totalPage < 2) {
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
if (currPage - halfPage > 1) {
|
if (currPage - halfPage > 1) {
|
||||||
arr.push('...')
|
arr.push('...')
|
||||||
}
|
}
|
||||||
if (totalPages - currPage < halfPage) {
|
if (totalPage - currPage < halfPage) {
|
||||||
fixNum = halfPage - totalPages + currPage
|
fixNum = halfPage - totalPage + currPage
|
||||||
}
|
}
|
||||||
for (
|
for (
|
||||||
let i = currPage - halfPage - fixNum;
|
let i = currPage - halfPage - fixNum;
|
||||||
i < currPage + halfPage + 1 && i <= totalPages;
|
i < currPage + halfPage + 1 && i <= totalPage;
|
||||||
i++
|
i++
|
||||||
) {
|
) {
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
arr.push(i)
|
arr.push(i)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (currPage + halfPage < totalPages) {
|
if (currPage + halfPage < totalPage) {
|
||||||
arr.push('...')
|
arr.push('...')
|
||||||
}
|
}
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
// 更新组件
|
// 更新组件
|
||||||
function update(currPage, vm) {
|
function update(currPage, vm) {
|
||||||
const { totalPages, props: { maxPageShow } } = vm
|
const { totalPage, props: { maxPageShow } } = vm
|
||||||
vm.currPage = vm.inputPage = currPage
|
vm.currPage = vm.inputPage = currPage
|
||||||
|
if (typeof vm.props.onPageChange === 'function') {
|
||||||
vm.props.onPageChange(currPage)
|
vm.props.onPageChange(currPage)
|
||||||
vm.pageList.clear()
|
|
||||||
if (totalPages > 1) {
|
|
||||||
vm.pageList.pushArray(calculate({ currPage, totalPages, maxPageShow }))
|
|
||||||
}
|
}
|
||||||
|
vm.pageList.clear()
|
||||||
|
if (totalPage > 1) {
|
||||||
|
vm.pageList.pushArray(calculate({ currPage, totalPage, maxPageShow }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tmpls = {
|
||||||
|
home: `<button class="do-ui-font button home"
|
||||||
|
:css="{'border-radius': props.radius}"
|
||||||
|
:attr-disabled="currPage === 1"
|
||||||
|
:data="{to: parseUrl(1)}"
|
||||||
|
:click="setPage(1, $event)"></button>`,
|
||||||
|
end: `<button class="do-ui-font button end"
|
||||||
|
:css="{'border-radius': props.radius}"
|
||||||
|
:attr-disabled="currPage === totalPage"
|
||||||
|
:data="{to: parseUrl(totalPage)}"
|
||||||
|
:click="setPage(totalPage, $event)"></button>`,
|
||||||
|
prev: `<button class="do-ui-font button prev"
|
||||||
|
:css="{'border-radius': props.radius}"
|
||||||
|
:attr-disabled="{disabled: currPage < 2}"
|
||||||
|
:data="{to: parseUrl(currPage - 1)}"
|
||||||
|
:click="setPage(currPage - 1, $event)"></button>`,
|
||||||
|
next: `<button class="do-ui-font button next"
|
||||||
|
:css="{'border-radius': props.radius}"
|
||||||
|
:attr-disabled="{disabled: currPage >= totalPage}"
|
||||||
|
:data="{to: parseUrl(currPage + 1)}"
|
||||||
|
:click="setPage(currPage + 1, $event)"></button>`,
|
||||||
|
pager: `<button class="page"
|
||||||
|
:repeat="pageList"
|
||||||
|
:css="{'border-radius': props.radius}"
|
||||||
|
:attr-disabled="{disabled: '...' === el || currPage === el}"
|
||||||
|
:data="{to: parseUrl(el)}"
|
||||||
|
:class="{disabled: '...' === el, curr: currPage === el}"
|
||||||
|
:text="el"
|
||||||
|
:click="setPage(el, $event)"></button>`,
|
||||||
|
curr: `<button class="page curr" :text="currPage"></button>`,
|
||||||
|
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItems}} 条</span>`,
|
||||||
|
jumper: `<div class="input-box">前往
|
||||||
|
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
|
||||||
|
</div>`
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Anot.component('pager', {
|
export default Anot.component('pager', {
|
||||||
construct: function(props, state) {
|
construct: function(props, state) {
|
||||||
props.className =
|
props.theme = +props.theme || 1
|
||||||
'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
|
if (props.simpleMode) {
|
||||||
delete props.theme
|
props.theme = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
state.classList = state.classList.concat(
|
||||||
|
'skin-' + props.theme,
|
||||||
|
props.color || 'plain',
|
||||||
|
props.size || 'mini'
|
||||||
|
)
|
||||||
|
|
||||||
|
if (props.total) {
|
||||||
|
state.totalItems = +props.total
|
||||||
|
}
|
||||||
|
if (props.pageSize) {
|
||||||
|
state.pageSize = +props.pageSize
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!props.layout) {
|
||||||
|
props.layout = 'total,home,prev,pager,next,end,jumper'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.theme === 2) {
|
||||||
|
props.radius = null
|
||||||
|
}
|
||||||
|
|
||||||
|
delete props.total
|
||||||
|
delete props.pageSize
|
||||||
delete props.color
|
delete props.color
|
||||||
|
delete props.size
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
|
let { layout, theme, simpleMode } = this.props
|
||||||
|
if (simpleMode) {
|
||||||
|
layout = ['prev', 'curr', 'next']
|
||||||
|
} else {
|
||||||
|
layout = layout.replace(/\s/g, '')
|
||||||
|
if (theme === 2) {
|
||||||
|
layout = layout.replace(/total|jumper/g, '')
|
||||||
|
}
|
||||||
|
layout = layout.split(',')
|
||||||
|
}
|
||||||
|
layout = layout.map(it => tmpls[it] || '')
|
||||||
return `
|
return `
|
||||||
<div class="do-pager do-fn-noselect" :class="{{props.className}}">
|
<div
|
||||||
<a class="normal"
|
class="do-pager do-fn-noselect"
|
||||||
:if="currPage > 1 && !props.simpleMode"
|
:class="{{classList.join(' ')}}">
|
||||||
:attr="{href: parseUrl(1)}"
|
${layout.join('\n')}
|
||||||
:text="props.btns.home"
|
|
||||||
:click="setPage(1, $event)"></a>
|
|
||||||
<a class="normal"
|
|
||||||
:if="currPage > 1"
|
|
||||||
:attr="{href: parseUrl(currPage - 1)}"
|
|
||||||
:text="props.btns.prev"
|
|
||||||
:click="setPage(currPage - 1, $event)"></a>
|
|
||||||
<a :if-loop="!props.simpleMode || currPage === el"
|
|
||||||
:repeat="pageList"
|
|
||||||
:attr="{href: parseUrl(el)}"
|
|
||||||
:class="{normal: currPage !== el, disabled: '...' === el, curr: currPage === el}"
|
|
||||||
:text="el"
|
|
||||||
:click="setPage(el, $event)"></a>
|
|
||||||
<a class="normal"
|
|
||||||
:if="currPage < totalPages"
|
|
||||||
:attr="{href: parseUrl(currPage + 1)}"
|
|
||||||
:click="setPage(currPage + 1, $event)">{{props.btns.next}}</a>
|
|
||||||
<a class="normal"
|
|
||||||
:if="currPage < totalPages && !props.simpleMode"
|
|
||||||
:attr="{href: parseUrl(totalPages)}"
|
|
||||||
:click="setPage(totalPages, $event)">{{props.btns.end}}</a>
|
|
||||||
|
|
||||||
<div class="input-box" :if="!props.simpleMode && totalPages > 1">
|
|
||||||
<span>共 {{totalPages}} 页 {{totalItems}} 条，前往</span>
|
|
||||||
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)">
|
|
||||||
<span>页</span>
|
|
||||||
</div>
|
|
||||||
</div>`
|
</div>`
|
||||||
},
|
},
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
const { currPage, totalPages, props } = this
|
const { currPage, totalPage, props } = this
|
||||||
this.pageList.clear()
|
this.pageList.clear()
|
||||||
this.pageList.pushArray(
|
this.pageList.pushArray(
|
||||||
calculate({ currPage, totalPages, maxPageShow: props.maxPageShow })
|
calculate({ currPage, totalPage, maxPageShow: props.maxPageShow })
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
|
|
@ -101,6 +149,7 @@ export default Anot.component('pager', {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
|
classList: [],
|
||||||
currPage: 1,
|
currPage: 1,
|
||||||
totalItems: 1,
|
totalItems: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
|
|
@ -108,63 +157,56 @@ export default Anot.component('pager', {
|
||||||
pageList: []
|
pageList: []
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
totalPages: function() {
|
totalPage: function() {
|
||||||
return Math.ceil(this.totalItems / this.pageSize)
|
return Math.ceil(this.totalItems / this.pageSize)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
url: null,
|
url: null,
|
||||||
btns: {
|
|
||||||
prev: '<<',
|
|
||||||
next: '>>',
|
|
||||||
home: '首页',
|
|
||||||
end: '末页'
|
|
||||||
},
|
|
||||||
maxPageShow: 5,
|
maxPageShow: 5,
|
||||||
className: '',
|
|
||||||
simpleMode: !1,
|
simpleMode: !1,
|
||||||
onPageChange: Anot.noop,
|
radius: 3,
|
||||||
onCreated: Anot.noop
|
onPageChange: Anot.PropsTypes.isFunction(),
|
||||||
|
onCreated: Anot.PropsTypes.isFunction()
|
||||||
},
|
},
|
||||||
|
skip: ['classList'],
|
||||||
methods: {
|
methods: {
|
||||||
// 格式化页码的URL
|
// 格式化页码的URL
|
||||||
parseUrl: function(val) {
|
parseUrl: function(val) {
|
||||||
val = val >>> 0
|
val = val >>> 0
|
||||||
if (val < 1 || !this.props.url || this.currPage === val) {
|
if (val < 1 || !this.props.url || this.currPage === val) {
|
||||||
return 'javascript:;'
|
return ''
|
||||||
}
|
}
|
||||||
return this.props.url.replace('{id}', val)
|
return this.props.url.replace('{id}', val)
|
||||||
},
|
},
|
||||||
// 设置页码
|
// 设置页码
|
||||||
setPage: function(val, ev) {
|
setPage: function(val, ev) {
|
||||||
if (this.currPage === val) {
|
let { inputPage, totalPage, currPage } = this
|
||||||
|
let elem = (ev && ev.target) || null
|
||||||
|
if ((elem && elem.disabled) || currPage === val) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let elem = (ev && ev.target) || null
|
if (elem) {
|
||||||
if (val && elem) {
|
|
||||||
if (val && val !== '...') {
|
if (val && val !== '...') {
|
||||||
let link =
|
let link = elem.dataset.to
|
||||||
(elem && elem.getAttribute('href')) ||
|
|
||||||
elem.getAttribute('xlink:href')
|
|
||||||
|
|
||||||
if ('javascript:;' !== link) {
|
if (link) {
|
||||||
location.href = link
|
location.href = link
|
||||||
} else {
|
} else {
|
||||||
val = val >> 0
|
val = val >>> 0
|
||||||
update(val, this)
|
|
||||||
}
|
}
|
||||||
|
update(val, this)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (val === null) {
|
if (val === null) {
|
||||||
let { inputPage, totalPages, currPage } = this
|
|
||||||
inputPage = inputPage >>> 0
|
inputPage = inputPage >>> 0
|
||||||
|
|
||||||
if (ev && ev.keyCode === 13) {
|
if (ev && ev.keyCode === 13) {
|
||||||
if (inputPage < 1 || currPage === inputPage) {
|
if (inputPage < 1 || currPage === inputPage) {
|
||||||
return (this.inputPage = currPage)
|
return (this.inputPage = currPage)
|
||||||
}
|
}
|
||||||
if (inputPage > totalPages) {
|
if (inputPage > totalPage) {
|
||||||
inputPage = totalPages
|
inputPage = totalPage
|
||||||
}
|
}
|
||||||
this.inputPage = inputPage
|
this.inputPage = inputPage
|
||||||
update(inputPage, this)
|
update(inputPage, this)
|
||||||
|
|
|
||||||
|
|
@ -8,87 +8,142 @@
|
||||||
|
|
||||||
@import "var.scss";
|
@import "var.scss";
|
||||||
|
|
||||||
.do-pager {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
|
.do-pager {height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);
|
||||||
|
|
||||||
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
|
&.mini {line-height:35px;
|
||||||
a.curr, a.disabled {cursor:default;}
|
.button,.page {min-width:35px;height:35px}
|
||||||
|
}
|
||||||
|
&.medium {line-height:40px;
|
||||||
|
.button,.page {min-width:40px;height:40px}
|
||||||
|
}
|
||||||
|
&.large {line-height:45px;
|
||||||
|
.button,.page {min-width:45px;height:45px}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,.page {display:inline-block;border:0;color: nth($cgr, 1);text-decoration:none;cursor:pointer;vertical-align:top;font-size:14px;font-weight:100;
|
||||||
|
|
||||||
|
&.home::after {content:"\e652";font-size:18px;}
|
||||||
|
&.prev::after {content:"\e659";font-size:18px;}
|
||||||
|
&.next::after {content:"\e658";font-size:18px;}
|
||||||
|
&.end::after {content:"\e653";font-size:18px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.curr, .disabled {cursor:default;}
|
||||||
|
|
||||||
&.skin-1 {width:100%;
|
&.skin-1 {width:100%;
|
||||||
|
|
||||||
a.normal,
|
.page,
|
||||||
a.disabled,
|
.button,
|
||||||
a.curr {padding:0 10px;margin:0 3px;}
|
.disabled,
|
||||||
|
.curr {padding:0 8px;margin:0 3px;}
|
||||||
|
|
||||||
a.curr {font-weight:bold;font-size:15px;}
|
.curr {font-weight:bold;font-size:15px;}
|
||||||
a.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1);
|
.page.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1);
|
||||||
&:hover,&:active {background:none;}
|
&:hover,&:active {background:none;}
|
||||||
}
|
}
|
||||||
|
.page.curr {background:none;color:nth($cgr, 1);
|
||||||
|
&:hover,&:active {background:none;}
|
||||||
|
}
|
||||||
|
.button[disabled] {cursor:not-allowed;}
|
||||||
|
|
||||||
.input-box,
|
.total-box,.input-box {display:inline-block;padding:0 8px;}
|
||||||
.input-box span,
|
.input-box input {display:inline-block;width:40px;height:30px;padding:0 3px;font-size:14px;background:#fff;border:1px solid #ddd;text-align:center;}
|
||||||
.input-box input {display:inline-block;}
|
|
||||||
.input-box input {width:40px;height:30px;padding:0 3px;background:#fff;border:1px solid #ddd;text-align:center;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.skin-2 {float:right;width:auto;
|
&.skin-2 {float:right;width:auto;
|
||||||
|
|
||||||
a.normal,
|
.page,
|
||||||
a.disabled,
|
.button,
|
||||||
a.curr {float:left;margin:0;padding:0 5px;color:#fff;}
|
.disabled,
|
||||||
|
.curr {float:left;margin:0;padding:0 5px;color:#fff;}
|
||||||
|
|
||||||
a.disabled {display:none;}
|
.page.disabled {display:none;}
|
||||||
|
.button[disabled] {cursor:not-allowed;}
|
||||||
|
|
||||||
.input-box {display:none;}
|
.input-box {display:none;}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.plain a.normal {background:nth($cp, 1);color:nth($cgr, 1);}
|
&.plain {
|
||||||
&.plain a.normal:hover {background:nth($cp, 2)}
|
.page,.button {background:nth($cp, 1);color:nth($cgr, 1);
|
||||||
&.skin-2.plain a.curr,
|
|
||||||
&.plain a.normal:active {background:nth($cp, 3)}
|
|
||||||
|
|
||||||
&.grey a.normal {background:nth($cgr, 1);color: #fff;}
|
&:hover {background:nth($cp, 2)}
|
||||||
&.grey a.normal:hover {background:nth($cgr, 2)}
|
&:active {background:nth($cp, 3)}
|
||||||
&.skin-2.grey a.curr,
|
|
||||||
&.grey a.normal:active {background:nth($cgr, 3)}
|
|
||||||
|
|
||||||
&.red a.normal {background:nth($cr, 1);color: #fff;}
|
|
||||||
&.red a.normal:hover {background:nth($cr, 2)}
|
|
||||||
&.skin-2.red a.curr,
|
|
||||||
&.red a.normal:active {background:nth($cr, 3)}
|
|
||||||
|
|
||||||
&.orange a.normal {background:nth($co, 1);color: #fff;}
|
|
||||||
&.orange a.normal:hover {background:nth($co, 2)}
|
|
||||||
&.skin-2.orange a.curr,
|
|
||||||
&.orange a.normal:active {background:nth($co, 3)}
|
|
||||||
|
|
||||||
&.green a.normal {background:nth($cg, 1);color: #fff;}
|
|
||||||
&.green a.normal:hover {background:nth($cg, 2)}
|
|
||||||
&.skin-2.green a.curr,
|
|
||||||
&.green a.normal:active {background:nth($cg, 3)}
|
|
||||||
|
|
||||||
&.teal a.normal {background:nth($ct, 1);color: #fff;}
|
|
||||||
&.teal a.normal:hover {background:nth($ct, 2)}
|
|
||||||
&.skin-2.teal a.curr,
|
|
||||||
&.teal a.normal:active {background:nth($ct, 3)}
|
|
||||||
|
|
||||||
&.blue a.normal {background:nth($cb, 1);color: #fff;}
|
|
||||||
&.blue a.normal:hover {background:nth($cb, 2)}
|
|
||||||
&.skin-2.blue a.curr,
|
|
||||||
&.blue a.normal:active {background:nth($cb, 3)}
|
|
||||||
|
|
||||||
&.purple a.normal {background:nth($cpp, 1);color: #fff;}
|
|
||||||
&.purple a.normal:hover {background:nth($cpp, 2)}
|
|
||||||
&.skin-2.purple a.curr,
|
|
||||||
&.purple a.normal:active {background:nth($cpp, 3)}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
&.skin-1 {
|
|
||||||
a.disabled {background:none;color:nth($cgr, 1);
|
|
||||||
&:hover,&:active {background:none;}
|
|
||||||
}
|
}
|
||||||
|
.button[disabled] {background:nth($cp, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cp, 3)}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.grey {
|
||||||
|
.page,.button {background:nth($cgr, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($cgr, 2)}
|
||||||
|
&:active {background:nth($cgr, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($cgr, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cgr, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.red {
|
||||||
|
.page,.button {background:nth($cr, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($cr, 2)}
|
||||||
|
&:active {background:nth($cr, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($cr, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cr, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.orange {
|
||||||
|
.page,.button {background:nth($co, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($co, 2)}
|
||||||
|
&:active {background:nth($co, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($co, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($co, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
.page,.button {background:nth($cg, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($cg, 2)}
|
||||||
|
&:active {background:nth($cg, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($cg, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cg, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.teal {
|
||||||
|
.page,.button {background:nth($ct, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($ct, 2)}
|
||||||
|
&:active {background:nth($ct, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($ct, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($ct, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
.page,.button {background:nth($cb, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($cb, 2)}
|
||||||
|
&:active {background:nth($cb, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($cb, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cb, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.purple,.button {
|
||||||
|
.page {background:nth($cpp, 1);color: #fff;
|
||||||
|
|
||||||
|
&:hover {background:nth($cpp, 2)}
|
||||||
|
&:active {background:nth($cpp, 3)}
|
||||||
|
}
|
||||||
|
.button[disabled] {background:nth($cpp, 1);}
|
||||||
|
&.skin-2 .curr {background:nth($cpp, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Reference in New Issue