mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(pagination): clean cssr codes

Browse Source
This commit is contained in:
07akioni 2020-09-01 20:24:13 +08:00
parent d732f45998
commit 3d66d42e06
4 changed files with 161 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
src/_styles/Pagination.scss
View File

@ -1,128 +1,128 @@
@import './mixins/mixins.scss';
// @import './mixins/mixins.scss';
@include themes-mixin {
@include b(pagination) {
@include once {
display: flex;
vertical-align: middle;
@include b(select) {
width: unset;
}
@include m(transition-disabled) {
@include b(pagination-item) {
transition: none;
}
}
}
@include b(pagination-quick-jumper) {
@include once {
white-space: nowrap;
display: flex;
width: 110px;
line-height: 28px;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(input) {
margin: 0 8px;
input {
padding-left: 6px;
padding-right: 10px;
}
}
}
color: map-get($--pagination-item-text-color, "default");
}
@include b(pagination-item) {
@include once {
position: relative;
cursor: pointer;
user-select: none;
min-width:28px;
height:28px;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
opacity: 1;
transition:
color .3s $--n-ease-in-out-cubic-bezier,
box-shadow .3s $--n-ease-in-out-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier,
opacity .3s $--n-ease-in-out-cubic-bezier,
fill .3s $--n-ease-in-out-cubic-bezier;
display: flex;
align-items: center;
justify-content: center;
border-radius: $--n-border-radius;
line-height: 28px;
&:not(:last-child) {
margin-right: 8px;
}
@include e(more-icon, arrow-icon) {
position: relative;
z-index: auto;
width: 16px;
height: 16px;
@include b(base-icon) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
@include m(fast-backward, fast-forward) {
@include e(more-icon) {
display: block;
}
@include e(arrow-icon) {
display: none;
}
}
}
color: map-get($--pagination-item-text-color, 'default');
fill: map-get($--pagination-item-text-color, 'default');
@include m(active) {
background: map-get($--pagination-item-background-color, 'active');
color: map-get($--pagination-item-text-color, 'active');
box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'active');
}
@include m(backward, forward) {
background-color: map-get($--pagination-item-background-color, 'default');
box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'default');
}
@include not-m(disabled) {
&:hover {
color: map-get($--pagination-item-text-color, 'hover');
@include once {
@include m(fast-backward, fast-forward) {
@include e(more-icon) {
display: none;
}
@include e(arrow-icon) {
display: block;
}
}
}
}
}
@include m(disabled) {
fill: map-get($--pagination-item-text-color, 'disabled');
color: map-get($--pagination-item-text-color, 'disabled');
@include m(active, backward, forward) {
background-color: map-get($--pagination-item-background-color, 'disabled');
box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'disabled');
}
@include once {
cursor: not-allowed;
}
}
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
@include b(pagination-quick-jumper) {
color: map-get($--pagination-text-color, "disabled");
}
}
}
}
// @include themes-mixin {
// @include b(pagination) {
// @include once {
// display: flex;
// vertical-align: middle;
// @include b(select) {
// width: unset;
// }
// @include m(transition-disabled) {
// @include b(pagination-item) {
// transition: none;
// }
// }
// }
// @include b(pagination-quick-jumper) {
// @include once {
// white-space: nowrap;
// display: flex;
// width: 110px;
// line-height: 28px;
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// @include b(input) {
// margin: 0 8px;
// input {
// padding-left: 6px;
// padding-right: 10px;
// }
// }
// }
// color: map-get($--pagination-item-text-color, "default");
// }
// @include b(pagination-item) {
// @include once {
// position: relative;
// cursor: pointer;
// user-select: none;
// min-width:28px;
// height:28px;
// padding-left: 4px;
// padding-right: 4px;
// box-sizing: border-box;
// opacity: 1;
// transition:
// color .3s $--n-ease-in-out-cubic-bezier,
// box-shadow .3s $--n-ease-in-out-cubic-bezier,
// background-color .3s $--n-ease-in-out-cubic-bezier,
// opacity .3s $--n-ease-in-out-cubic-bezier,
// fill .3s $--n-ease-in-out-cubic-bezier;
// display: flex;
// align-items: center;
// justify-content: center;
// border-radius: $--n-border-radius;
// line-height: 28px;
// &:not(:last-child) {
// margin-right: 8px;
// }
// @include e(more-icon, arrow-icon) {
// position: relative;
// z-index: auto;
// width: 16px;
// height: 16px;
// @include b(base-icon) {
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// }
// }
// @include m(fast-backward, fast-forward) {
// @include e(more-icon) {
// display: block;
// }
// @include e(arrow-icon) {
// display: none;
// }
// }
// }
// color: map-get($--pagination-item-text-color, 'default');
// fill: map-get($--pagination-item-text-color, 'default');
// @include m(active) {
// background: map-get($--pagination-item-background-color, 'active');
// color: map-get($--pagination-item-text-color, 'active');
// box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'active');
// }
// @include m(backward, forward) {
// background-color: map-get($--pagination-item-background-color, 'default');
// box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'default');
// }
// @include not-m(disabled) {
// &:hover {
// color: map-get($--pagination-item-text-color, 'hover');
// @include once {
// @include m(fast-backward, fast-forward) {
// @include e(more-icon) {
// display: none;
// }
// @include e(arrow-icon) {
// display: block;
// }
// }
// }
// }
// }
// @include m(disabled) {
// fill: map-get($--pagination-item-text-color, 'disabled');
// color: map-get($--pagination-item-text-color, 'disabled');
// @include m(active, backward, forward) {
// background-color: map-get($--pagination-item-background-color, 'disabled');
// box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'disabled');
// }
// @include once {
// cursor: not-allowed;
// }
// }
// }
// @include m(disabled) {
// @include once {
// cursor: not-allowed;
// }
// @include b(pagination-quick-jumper) {
// color: map-get($--pagination-text-color, "disabled");
// }
// }
// }
// }

32
src/pagination/src/styles/themed-base.cssr.js
View File

@ -3,18 +3,18 @@ import { cTB, c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
itemTextColorDefault,
itemTextColor,
itemTextColorHover,
itemTextColorActive,
itemTextColorDisabled,
itemBackgroundColorDefault,
itemBackgroundColorActive,
itemBackgroundColorDisabled,
itemBorderColorDefault,
itemColor,
itemColorActive,
itemColorDisabled,
itemBorderColor,
itemBorderColorActive,
itemBorderColorDisabled,
textColorDisabled,
borderRadius
jumperTextColorDisabled,
itemBorderRadius
} = props.$local
const {
easeInOutCubicBezier
@ -45,7 +45,7 @@ export default c([
line-height: 28px;
transition: color .3s ${easeInOutCubicBezier};
`,
color: itemTextColorDefault
color: itemTextColor
}, [
cB('input', {
raw: `
@ -80,11 +80,11 @@ export default c([
display: flex;
align-items: center;
justify-content: center;
border-radius: ${borderRadius};
border-radius: ${itemBorderRadius};
line-height: 28px;
`,
color: itemTextColorDefault,
fill: itemTextColorDefault
color: itemTextColor,
fill: itemTextColor
}, [
c('&:not(:last-child)', {
raw: `
@ -122,13 +122,13 @@ export default c([
})
]),
cM('active', {
background: itemBackgroundColorActive,
background: itemColorActive,
color: itemTextColorActive,
boxShadow: `inset 0 0 0 1px ${itemBorderColorActive}`
}),
cM('backward, forward', {
backgroundColor: itemBackgroundColorDefault,
boxShadow: `inset 0 0 0 1px ${itemBorderColorDefault}`
backgroundColor: itemColor,
boxShadow: `inset 0 0 0 1px ${itemBorderColor}`
}),
cNotM('disabled', [
c('&:hover', {
@ -156,7 +156,7 @@ export default c([
color: itemTextColorDisabled
}, [
cM('active, backward, forward', {
backgroundColor: itemBackgroundColorDisabled,
backgroundColor: itemColorDisabled,
boxShadow: `inset 0 0 0 1px ${itemBorderColorDisabled}`
})
])
@ -167,7 +167,7 @@ export default c([
`
}, [
cB('pagination-quick-jumper', {
color: textColorDisabled
color: jumperTextColorDisabled
})
])
])

18
src/pagination/styles/dark.js
View File

@ -10,7 +10,7 @@ export default create({
const {
secondaryTextOverlayColor,
primaryColor,
disabledBackgroundColor,
disabledInputBackgroundOverlayColor,
disabledTextOverlayColor,
borderOverlayColor,
tertiaryOpacity
@ -19,19 +19,19 @@ export default create({
borderRadius
} = base
return {
itemTextColorDefault: secondaryTextOverlayColor,
itemTextColor: secondaryTextOverlayColor,
itemTextColorHover: primaryColor,
itemTextColorActive: primaryColor,
itemTextColorDisabled: disabledTextOverlayColor,
itemBackgroundColorDefault: 'transparent',
itemBackgroundColorActive: 'transparent',
itemBackgroundColorDisabled: disabledBackgroundColor,
itemBorderColorDefault: borderOverlayColor,
itemColor: 'transparent',
itemColorActive: 'transparent',
itemColorDisabled: disabledInputBackgroundOverlayColor,
itemBorderColor: borderOverlayColor,
itemBorderColorActive: changeColor(primaryColor, { alpha: tertiaryOpacity }),
itemBorderColorDisabled: 'transparent',
textColorDefault: secondaryTextOverlayColor,
textColorDisabled: secondaryTextOverlayColor,
borderRadius: borderRadius
itemBorderRadius: borderRadius,
jumperTextColor: secondaryTextOverlayColor,
jumperTextColorDisabled: disabledTextOverlayColor
}
}
})

18
src/pagination/styles/light.js
View File

@ -9,7 +9,7 @@ export default create({
const {
secondaryTextColor,
primaryColor,
disabledBackgroundColor,
disabledInputBackgroundColor,
disabledTextColor,
cardBackgroundColor,
baseBackgroundColor,
@ -19,19 +19,19 @@ export default create({
borderRadius
} = base
return {
itemTextColorDefault: secondaryTextColor,
itemTextColor: secondaryTextColor,
itemTextColorHover: primaryColor,
itemTextColorActive: primaryColor,
itemTextColorDisabled: disabledTextColor,
itemBackgroundColorDefault: cardBackgroundColor,
itemBackgroundColorActive: baseBackgroundColor,
itemBackgroundColorDisabled: disabledBackgroundColor,
itemBorderColorDefault: borderColor,
itemColor: cardBackgroundColor,
itemColorActive: baseBackgroundColor,
itemColorDisabled: disabledInputBackgroundColor,
itemBorderColor: borderColor,
itemBorderColorActive: primaryColor,
itemBorderColorDisabled: borderColor,
textColorDefault: secondaryTextColor,
textColorDisabled: disabledTextColor,
borderRadius: borderRadius
itemBorderRadius: borderRadius,
jumperTextColor: secondaryTextColor,
jumperTextColorDisabled: disabledTextColor
}
}
})