mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(transfer): use cssr

Browse Source
This commit is contained in:
07akioni 2020-08-02 19:36:45 +08:00
parent 142767a7ff
commit a5d1feee79
6 changed files with 335 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

492
src/_styles/Transfer.scss
View File

@ -105,249 +105,249 @@
// @include transfer-animation-mixin('medium');
// @include transfer-animation-mixin('large');
@include themes-mixin {
@include b(transfer) {
@include once {
display: flex;
width: 444px;
// @include transfer-size-mixin('small');
// @include transfer-size-mixin('medium');
// @include transfer-size-mixin('large');
}
@include b(transfer-list) {
@include once {
background-clip: padding-box;
width: calc(50% - 36px);
position: relative;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: $--n-transfer-border-radius;
@include b(virtual-scroller) {
height: 100%;
scrollbar-width: none;
-moz-scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
@include e(border-mask) {
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: $--n-transfer-border-radius;
}
}
@include e(border-mask) {
border: 1px solid $--transfer-border-color;
pointer-events: $--transfer-list-border-mask-pointer-events;
}
background-color: map-get($--transfer-list-background-color, 'default');
@include b(transfer-list-header) {
@include once {
box-sizing: border-box;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
display: flex;
border-radius: $--n-transfer-border-radius $--n-transfer-border-radius 0 0;
align-items: center;
background-clip: padding-box;
@include e(checkbox) {
position: relative;
padding: 0 9px 0 14px;
@include b(checkbox) {
display: block;
}
}
}
background-color: map-get($--transfer-list-header-background-color, 'default');
@include e(header) {
@include once {
flex: 1;
line-height: 1;
font-weight: $--n-strong-weight;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--transfer-list-header-text-color, 'default');
@include m(disabled) {
color: map-get($--transfer-list-header-text-color, 'disabled');
}
}
@include e(extra) {
@include once {
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 12px;
justify-self: flex-end;
margin-right: 14px;
white-space: nowrap;
}
color: map-get($--transfer-list-header-extra-text-color, 'default');
}
}
@include b(transfer-list-body) {
@include b(transfer-filter) {
border-bottom: 1px solid $--transfer-filter-border-color;
}
@include once {
box-sizing: border-box;
overflow: hidden;
position: relative;
height: 272px;
display: flex;
flex-direction: column;
border-bottom-right-radius: $--n-transfer-border-radius;
border-bottom-left-radius: $--n-transfer-border-radius;
@include b(transfer-list-flex-container) {
flex: 1;
position: relative;
@include b(scrollbar) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: unset;
@include b(scrollbar-content) {
width: 100%;
}
}
@include b(empty) {
@include fade-in-transition;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
}
@include b(transfer-filter) {
padding: 8px 8px;
box-sizing: border-box;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
}
@include b(transfer-list-content) {
@include once {
padding: 0;
margin: 0;
position: relative;
@include m(animation-disabled) {
@include b(transfer-list-item) {
animation: none !important;
}
}
}
@include b(transfer-list-item) {
@include once {
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
@include e(extra) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 4px;
}
@include m(source) {
animation-fill-mode: forwards;
@include m(enter) {
transform: translateX(150%);
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier;
animation-delay: 0s, .25s;
}
@include m(leave) {
transform: translateX(-150%);
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier;
animation-delay: .25s, 0s;
}
}
@include m(target) {
animation-fill-mode: forwards;
@include m(enter) {
transform: translateX(-150%);
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier;
animation-delay: 0s, .25s;
}
@include m(leave) {
transform: translateX(150%);
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier;
animation-delay: .25s, 0s;
}
}
}
color: map-get($--transfer-item-text-color, 'default');
@include e(checkbox) {
@include once {
position: relative;
padding: 0 9px 0 14px;
@include b(checkbox) {
display: block;
}
}
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
color: map-get($--transfer-item-text-color, 'disabled');
}
}
}
}
}
@include b(transfer-gap) {
@include once {
width: 72px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
@include b(transfer-button) {
@include once {
width: 36px;
height: 36px;
border-radius: 18px;
cursor: pointer;
&:first-child {
margin-bottom: 12px;
}
@include m(to) {
transform: rotate(180deg);
}
}
@include e(icon) {
@include once {
pointer-events: none;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
fill: map-get($--transfer-gap-button-background-color, 'default');
}
&:hover {
@include e(icon) {
fill: map-get($--transfer-gap-button-background-color, 'hover');
}
}
&:active {
@include e(icon) {
fill: map-get($--transfer-gap-button-background-color, 'active');
}
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
@include e(icon) {
fill: map-get($--transfer-gap-button-background-color, 'disabled') !important;
}
}
}
}
}
}
// @include themes-mixin {
// @include b(transfer) {
// @include once {
// display: flex;
// width: 444px;
// // @include transfer-size-mixin('small');
// // @include transfer-size-mixin('medium');
// // @include transfer-size-mixin('large');
// }
// @include b(transfer-list) {
// @include once {
// background-clip: padding-box;
// width: calc(50% - 36px);
// position: relative;
// transition: background-color .3s $--n-ease-in-out-cubic-bezier;
// border-radius: $--n-transfer-border-radius;
// @include b(virtual-scroller) {
// height: 100%;
// scrollbar-width: none;
// -moz-scrollbar-width: none;
// &::-webkit-scrollbar {
// width: 0;
// height: 0;
// }
// }
// @include e(border-mask) {
// transition: border-color .3s $--n-ease-in-out-cubic-bezier;
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// border-radius: $--n-transfer-border-radius;
// }
// }
// @include e(border-mask) {
// border: 1px solid $--transfer-border-color;
// pointer-events: $--transfer-list-border-mask-pointer-events;
// }
// background-color: map-get($--transfer-list-background-color, 'default');
// @include b(transfer-list-header) {
// @include once {
// box-sizing: border-box;
// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
// display: flex;
// border-radius: $--n-transfer-border-radius $--n-transfer-border-radius 0 0;
// align-items: center;
// background-clip: padding-box;
// @include e(checkbox) {
// position: relative;
// padding: 0 9px 0 14px;
// @include b(checkbox) {
// display: block;
// }
// }
// }
// background-color: map-get($--transfer-list-header-background-color, 'default');
// @include e(header) {
// @include once {
// flex: 1;
// line-height: 1;
// font-weight: $--n-strong-weight;
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// }
// color: map-get($--transfer-list-header-text-color, 'default');
// @include m(disabled) {
// color: map-get($--transfer-list-header-text-color, 'disabled');
// }
// }
// @include e(extra) {
// @include once {
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// font-size: 12px;
// justify-self: flex-end;
// margin-right: 14px;
// white-space: nowrap;
// }
// color: map-get($--transfer-list-header-extra-text-color, 'default');
// }
// }
// @include b(transfer-list-body) {
// @include b(transfer-filter) {
// border-bottom: 1px solid $--transfer-filter-border-color;
// }
// @include once {
// box-sizing: border-box;
// overflow: hidden;
// position: relative;
// height: 272px;
// display: flex;
// flex-direction: column;
// border-bottom-right-radius: $--n-transfer-border-radius;
// border-bottom-left-radius: $--n-transfer-border-radius;
// @include b(transfer-list-flex-container) {
// flex: 1;
// position: relative;
// @include b(scrollbar) {
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// height: unset;
// @include b(scrollbar-content) {
// width: 100%;
// }
// }
// @include b(empty) {
// @include fade-in-transition;
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translateY(-50%) translateX(-50%);
// }
// }
// @include b(transfer-filter) {
// padding: 8px 8px;
// box-sizing: border-box;
// transition: border-color .3s $--n-ease-in-out-cubic-bezier;
// }
// }
// @include b(transfer-list-content) {
// @include once {
// padding: 0;
// margin: 0;
// position: relative;
// @include m(animation-disabled) {
// @include b(transfer-list-item) {
// animation: none !important;
// }
// }
// }
// @include b(transfer-list-item) {
// @include once {
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// position: relative;
// cursor: pointer;
// display: flex;
// align-items: center;
// @include e(extra) {
// text-overflow: ellipsis;
// overflow: hidden;
// white-space: nowrap;
// padding-right: 4px;
// }
// @include m(source) {
// animation-fill-mode: forwards;
// @include m(enter) {
// transform: translateX(150%);
// animation-duration: .25s, .25s;
// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier;
// animation-delay: 0s, .25s;
// }
// @include m(leave) {
// transform: translateX(-150%);
// animation-duration: .25s, .25s;
// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier;
// animation-delay: .25s, 0s;
// }
// }
// @include m(target) {
// animation-fill-mode: forwards;
// @include m(enter) {
// transform: translateX(-150%);
// animation-duration: .25s, .25s;
// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier;
// animation-delay: 0s, .25s;
// }
// @include m(leave) {
// transform: translateX(150%);
// animation-duration: .25s, .25s;
// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier;
// animation-delay: .25s, 0s;
// }
// }
// }
// color: map-get($--transfer-item-text-color, 'default');
// @include e(checkbox) {
// @include once {
// position: relative;
// padding: 0 9px 0 14px;
// @include b(checkbox) {
// display: block;
// }
// }
// }
// @include m(disabled) {
// @include once {
// cursor: not-allowed;
// }
// color: map-get($--transfer-item-text-color, 'disabled');
// }
// }
// }
// }
// }
// @include b(transfer-gap) {
// @include once {
// width: 72px;
// display: flex;
// align-items: center;
// justify-content: center;
// flex-direction: column;
// }
// @include b(transfer-button) {
// @include once {
// width: 36px;
// height: 36px;
// border-radius: 18px;
// cursor: pointer;
// &:first-child {
// margin-bottom: 12px;
// }
// @include m(to) {
// transform: rotate(180deg);
// }
// }
// @include e(icon) {
// @include once {
// pointer-events: none;
// transition: fill .3s $--n-ease-in-out-cubic-bezier;
// }
// fill: map-get($--transfer-gap-button-background-color, 'default');
// }
// &:hover {
// @include e(icon) {
// fill: map-get($--transfer-gap-button-background-color, 'hover');
// }
// }
// &:active {
// @include e(icon) {
// fill: map-get($--transfer-gap-button-background-color, 'active');
// }
// }
// @include m(disabled) {
// @include once {
// cursor: not-allowed;
// }
// @include e(icon) {
// fill: map-get($--transfer-gap-button-background-color, 'disabled') !important;
// }
// }
// }
// }
// }
// }

1
src/_styles/index.scss
View File

@ -35,7 +35,6 @@
@import './Anchor.scss';
@import './Dropdown.scss';
@import './Popselect.scss';
@import './Transfer.scss';
@import './Spin.scss';
@import './LoadingBar.scss';
@import './Slider.scss';

3
src/transfer/src/styles/index.js
View File

@ -12,7 +12,8 @@ export default [
{
key: 'syntheticSize',
watch: [
'syntheticSize'
'syntheticSize',
'syntheticTheme'
],
CNode: themedSizeStyle
}

95
src/transfer/src/styles/themed-base/index.cssr.js
View File

@ -52,7 +52,14 @@ export default c([
]),
cE('border-mask', {
border: `1px solid ${borderColor}`,
pointerEvents: 'none'
transition: `transition: border-color .3s ${easeInOutCubicBezier}`,
pointerEvents: 'none',
borderRadius,
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0
}),
cB('transfer-list-header', {
boxSizing: 'border-box',
@ -63,7 +70,7 @@ export default c([
backgroundColor: headerBackgroundColor,
transition: `
border-color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier}
`
}, [
cE('checkbox', {
@ -192,27 +199,27 @@ export default c([
animation-timing-function: ${easeInOutCubicBezier}, ${easeInCubicBezier};
animation-delay: .25s, 0s;
`
})
]),
cM('target', {
animationFillMode: 'forwards'
}, [
cM('enter', {
raw: `
transform: translateX(-150%);
animation-duration: .25s, .25s;
animation-timing-function: ${easeInOutCubicBezier}, ${easeOutCubicBezier};
animation-delay: 0s, .25s;
`
}),
cM('target', {
animationFillMode: 'forwards'
}, [
cM('enter', {
raw: `
transform: translateX(-150%);
animation-duration: .25s, .25s;
animation-timing-function: ${easeInOutCubicBezier}, ${easeOutCubicBezier};
animation-delay: 0s, .25s;
`
}),
cM('leave', {
raw: `
transform: translateX(150%);
animation-duration: .25s, .25s;
animation-timing-function: ${easeInOutCubicBezier}, ${easeInCubicBezier};
animation-delay: .25s, 0s;
`
})
])
cM('leave', {
raw: `
transform: translateX(150%);
animation-duration: .25s, .25s;
animation-timing-function: ${easeInOutCubicBezier}, ${easeInCubicBezier};
animation-delay: .25s, 0s;
`
})
])
])
])
@ -237,29 +244,29 @@ export default c([
}),
cM('to', {
transform: 'rotate(180deg)'
})
]),
cE('icon', {
pointerEvents: 'none',
transition: `fill .3s ${easeInOutCubicBezier}`,
fill: buttonBackgroundColor
}),
c('&:hover', [
}),
cE('icon', {
fill: buttonHoverBackgroundColor
})
]),
c('&:active', [
cE('icon', {
fill: buttonActiveBackgroundColor
})
]),
cM('disabled', {
cursor: 'not-allowed'
}, [
cE('icon', {
fill: buttonDisabledBackgroundColor
})
pointerEvents: 'none',
transition: `fill .3s ${easeInOutCubicBezier}`,
fill: buttonBackgroundColor
}),
c('&:hover', [
cE('icon', {
fill: buttonHoverBackgroundColor
})
]),
c('&:active', [
cE('icon', {
fill: buttonActiveBackgroundColor
})
]),
cM('disabled', {
cursor: 'not-allowed'
}, [
cE('icon', {
fill: buttonDisabledBackgroundColor
})
])
])
])
]

17
src/transfer/styles/dark.js
View File

@ -6,7 +6,22 @@ export default create({
name: 'Transfer',
getDerivedVariables ({ base, derived }) {
return {
...commonVariables
...commonVariables,
borderRadius: base.borderRadius,
borderColor: 'transparent',
listBackgroundColor: derived.inputBackgroundOverlayColor,
headerBackgroundColor: derived.tableHeaderBackgroundOverlayColor,
headerTextColor: derived.primaryTextOverlayColor,
disabledHeaderTextColor: derived.disabledTextOverlayColor,
headerExtraTextColor: derived.secondaryTextOverlayColor,
// TODO refactor
buttonBackgroundColor: 'rgba(255, 255, 255, 0.3)',
buttonHoverBackgroundColor: derived.primaryHoverColor,
buttonActiveBackgroundColor: derived.primaryActiveColor,
buttonDisabledBackgroundColor: 'rgba(255, 255, 255, 0.15)',
filterBorderColor: derived.dividerOverlayColor,
itemTextColor: derived.secondaryTextOverlayColor,
itemDisabledTextColor: derived.disabledTextOverlayColor
}
}
})

21
src/transfer/styles/light.js
View File

@ -1,12 +1,31 @@
import create from '../../styles/_utils/create-component-base'
import commonVariables from './_common'
import { composite } from '../../_utils/color'
export default create({
theme: 'light',
name: 'Transfer',
getDerivedVariables ({ base, derived }) {
return {
...commonVariables
...commonVariables,
borderRadius: base.borderRadius,
borderColor: derived.dividerOverlayColor,
listBackgroundColor: derived.cardBackgroundColor,
headerBackgroundColor: composite(
derived.cardBackgroundColor,
derived.tableHeaderBackgroundOverlayColor
),
headerTextColor: derived.primaryTextColor,
disabledHeaderTextColor: derived.disabledTextColor,
headerExtraTextColor: derived.secondaryTextColor,
// TODO refactor
buttonBackgroundColor: 'rgba(0, 0, 0, 0.2)',
buttonHoverBackgroundColor: derived.primaryHoverColor,
buttonActiveBackgroundColor: derived.primaryActiveColor,
buttonDisabledBackgroundColor: 'rgba(0, 0, 0, 0.1)',
filterBorderColor: derived.dividerOverlayColor,
itemTextColor: derived.secondaryTextColor,
itemDisabledTextColor: derived.disabledTextColor
}
}
})