mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
refactor(tag): use cssr
This commit is contained in:
07akioni
parent
175c634b2d
commit
bc76c96536
@ -1,151 +1,151 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@mixin tag-size-mixin($size) {
|
||||
$height: map-get($--n-height, $size) - 6px;
|
||||
$font-size: (
|
||||
"small": 13px,
|
||||
"medium": 14px,
|
||||
"large": 14px
|
||||
);
|
||||
@include m($size + "-size") {
|
||||
line-height: $height;
|
||||
height: $height;
|
||||
font-size: map-get($font-size, $size);
|
||||
@include m(round) {
|
||||
padding-left: $height / 2;
|
||||
padding-right: $height / 2;
|
||||
border-radius: $height / 2;
|
||||
@include m(closable) {
|
||||
padding-right: 10px + $height / 2;
|
||||
@include e(close) {
|
||||
right: $height / 2 - 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin tag-size-mixin($size) {
|
||||
// $height: map-get($--n-height, $size) - 6px;
|
||||
// $font-size: (
|
||||
// "small": 13px,
|
||||
// "medium": 14px,
|
||||
// "large": 14px
|
||||
// );
|
||||
// @include m($size + "-size") {
|
||||
// line-height: $height;
|
||||
// height: $height;
|
||||
// font-size: map-get($font-size, $size);
|
||||
// @include m(round) {
|
||||
// padding-left: $height / 2;
|
||||
// padding-right: $height / 2;
|
||||
// border-radius: $height / 2;
|
||||
// @include m(closable) {
|
||||
// padding-right: 10px + $height / 2;
|
||||
// @include e(close) {
|
||||
// right: $height / 2 - 6px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin tag-type-mixin($type) {
|
||||
@include m($type + '-type') {
|
||||
@include not-m(checkable) {
|
||||
box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type);
|
||||
color: map-get($--tag-text-color, $type);
|
||||
background-color: map-get($--tag-background-color, $type);
|
||||
@include e(close) {
|
||||
fill: map-get($--tag-close-color, $type);
|
||||
}
|
||||
@include not-m(disabled) {
|
||||
@include e(close) {
|
||||
&:hover {
|
||||
fill: map-get($--tag-close-color, $type + '-hover');
|
||||
}
|
||||
&:active {
|
||||
fill: map-get($--tag-close-color, $type + '-active');
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: map-get($--tag-background-color, $type + '-hover');
|
||||
}
|
||||
&:active {
|
||||
background-color: map-get($--tag-background-color, $type + '-active');
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type + '-disabled');
|
||||
color: map-get($--tag-text-color, $type + '-disabled');
|
||||
background-color: map-get($--tag-background-color, $type + '-disabled');
|
||||
@include e(close) {
|
||||
fill: map-get($--tag-close-color, $type + '-disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin tag-type-mixin($type) {
|
||||
// @include m($type + '-type') {
|
||||
// @include not-m(checkable) {
|
||||
// box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type);
|
||||
// color: map-get($--tag-text-color, $type);
|
||||
// background-color: map-get($--tag-background-color, $type);
|
||||
// @include e(close) {
|
||||
// fill: map-get($--tag-close-color, $type);
|
||||
// }
|
||||
// @include not-m(disabled) {
|
||||
// @include e(close) {
|
||||
// &:hover {
|
||||
// fill: map-get($--tag-close-color, $type + '-hover');
|
||||
// }
|
||||
// &:active {
|
||||
// fill: map-get($--tag-close-color, $type + '-active');
|
||||
// }
|
||||
// }
|
||||
// &:hover {
|
||||
// background-color: map-get($--tag-background-color, $type + '-hover');
|
||||
// }
|
||||
// &:active {
|
||||
// background-color: map-get($--tag-background-color, $type + '-active');
|
||||
// }
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type + '-disabled');
|
||||
// color: map-get($--tag-text-color, $type + '-disabled');
|
||||
// background-color: map-get($--tag-background-color, $type + '-disabled');
|
||||
// @include e(close) {
|
||||
// fill: map-get($--tag-close-color, $type + '-disabled');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(tag) {
|
||||
@include once {
|
||||
@include tag-size-mixin("small");
|
||||
@include tag-size-mixin("medium");
|
||||
@include tag-size-mixin("large");
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
padding: 0 7px;
|
||||
border-radius: $--n-tag-border-radius;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
@include e(close) {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include m(checkable) {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include m(disabled) {
|
||||
cursor: not-allowed !important;
|
||||
@include e(close) {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
@include m(checkable) {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
@include m(closable) {
|
||||
padding-right: 18px;
|
||||
@include e(close) {
|
||||
transition: fill .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
|
||||
right: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include tag-type-mixin('default');
|
||||
@include tag-type-mixin('info');
|
||||
@include tag-type-mixin('success');
|
||||
@include tag-type-mixin('warning');
|
||||
@include tag-type-mixin('error');
|
||||
@include m(checkable) {
|
||||
@include once {
|
||||
box-shadow: none;
|
||||
}
|
||||
color: map-get($--tag-text-color, 'checkable-default');
|
||||
background-color: map-get($--tag-background-color, 'checkable-default');
|
||||
@include not-m(disabled) {
|
||||
&:hover {
|
||||
@include not-m(checked) {
|
||||
color: map-get($--tag-text-color, 'checkable-hover');
|
||||
}
|
||||
background-color: map-get($--tag-background-color, 'checkable-hover');
|
||||
}
|
||||
&:active {
|
||||
@include not-m(checked) {
|
||||
color: map-get($--tag-text-color, 'checkable-active');
|
||||
}
|
||||
background-color: map-get($--tag-background-color, 'checkable-active');
|
||||
}
|
||||
}
|
||||
@include m(checked) {
|
||||
color: map-get($--tag-text-color, 'checkable-active');
|
||||
background-color: map-get($--tag-background-color, 'checkable-active');
|
||||
@include not-m(disabled) {
|
||||
&:hover {
|
||||
background-color: map-get($--tag-background-color, 'checkable-checked-hover');
|
||||
}
|
||||
&:active {
|
||||
background-color: map-get($--tag-background-color, 'checkable-checked-active');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(tag) {
|
||||
// @include once {
|
||||
// @include tag-size-mixin("small");
|
||||
// @include tag-size-mixin("medium");
|
||||
// @include tag-size-mixin("large");
|
||||
// white-space: nowrap;
|
||||
// position: relative;
|
||||
// padding: 0 7px;
|
||||
// border-radius: $--n-tag-border-radius;
|
||||
// box-sizing: border-box;
|
||||
// cursor: default;
|
||||
// display: inline-block;
|
||||
// transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
// @include e(close) {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// @include m(checkable) {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// cursor: not-allowed !important;
|
||||
// @include e(close) {
|
||||
// cursor: not-allowed !important;
|
||||
// }
|
||||
// @include m(checkable) {
|
||||
// opacity: .4;
|
||||
// }
|
||||
// }
|
||||
// @include m(closable) {
|
||||
// padding-right: 18px;
|
||||
// @include e(close) {
|
||||
// transition: fill .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// right: 3px;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// height: 14px;
|
||||
// width: 14px;
|
||||
// line-height: 14px;
|
||||
// position: absolute;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include tag-type-mixin('default');
|
||||
// @include tag-type-mixin('info');
|
||||
// @include tag-type-mixin('success');
|
||||
// @include tag-type-mixin('warning');
|
||||
// @include tag-type-mixin('error');
|
||||
// @include m(checkable) {
|
||||
// @include once {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// color: map-get($--tag-text-color, 'checkable-default');
|
||||
// background-color: map-get($--tag-background-color, 'checkable-default');
|
||||
// @include not-m(disabled) {
|
||||
// &:hover {
|
||||
// @include not-m(checked) {
|
||||
// color: map-get($--tag-text-color, 'checkable-hover');
|
||||
// }
|
||||
// background-color: map-get($--tag-background-color, 'checkable-hover');
|
||||
// }
|
||||
// &:active {
|
||||
// @include not-m(checked) {
|
||||
// color: map-get($--tag-text-color, 'checkable-active');
|
||||
// }
|
||||
// background-color: map-get($--tag-background-color, 'checkable-active');
|
||||
// }
|
||||
// }
|
||||
// @include m(checked) {
|
||||
// color: map-get($--tag-text-color, 'checkable-active');
|
||||
// background-color: map-get($--tag-background-color, 'checkable-active');
|
||||
// @include not-m(disabled) {
|
||||
// &:hover {
|
||||
// background-color: map-get($--tag-background-color, 'checkable-checked-hover');
|
||||
// }
|
||||
// &:active {
|
||||
// background-color: map-get($--tag-background-color, 'checkable-checked-active');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include b(dynamic-tags) {
|
||||
display: inline-flex;
|
||||
}
|
||||
// @include b(dynamic-tags) {
|
||||
// display: inline-flex;
|
||||
// }
|
||||
@ -1,5 +1,5 @@
|
||||
/* istanbul ignore file */
|
||||
import Alert from './src/main.vue'
|
||||
import Alert from './src/Alert.vue'
|
||||
|
||||
Alert.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Alert.name, Alert)
|
||||
|
||||
8
src/dynamic-tags/index.js
Normal file
8
src/dynamic-tags/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import DynamicTags from './src/DynamicTags.vue'
|
||||
|
||||
DynamicTags.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + DynamicTags.name, DynamicTags)
|
||||
}
|
||||
|
||||
export default DynamicTags
|
||||
@ -33,7 +33,7 @@
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<add-outline />
|
||||
<add-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
@ -41,21 +41,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NTag from '../../tag'
|
||||
import NIcon from '../../Icon'
|
||||
import AddIcon from '../../_icons/add-outline'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
import locale from '../../_mixins/locale'
|
||||
import NTag from './Tag'
|
||||
import commonProps from './commonProps'
|
||||
import NIcon from '../../Icon'
|
||||
import addOutline from '../../_icons/add-outline'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import commonProps from '../../tag/src/common-props'
|
||||
import styles from './styles'
|
||||
|
||||
export default {
|
||||
name: 'DynamicTags',
|
||||
components: {
|
||||
NTag,
|
||||
NIcon,
|
||||
addOutline
|
||||
AddIcon
|
||||
},
|
||||
mixins: [
|
||||
withapp,
|
||||
@ -63,7 +65,8 @@ export default {
|
||||
locale('Tag'),
|
||||
asformitem({
|
||||
change: 'change'
|
||||
})
|
||||
}),
|
||||
usecssr(styles)
|
||||
],
|
||||
model: {
|
||||
name: 'value',
|
||||
5
src/dynamic-tags/src/styles/base.js
Normal file
5
src/dynamic-tags/src/styles/base.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { cB } from '../../../_utils/cssr'
|
||||
|
||||
export default cB('dynamic-tags', {
|
||||
display: 'inline-flex'
|
||||
})
|
||||
7
src/dynamic-tags/src/styles/index.js
Normal file
7
src/dynamic-tags/src/styles/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import baseStyle from './base'
|
||||
|
||||
export default [
|
||||
{
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
9
src/dynamic-tags/styles/dark.js
Normal file
9
src/dynamic-tags/styles/dark.js
Normal file
@ -0,0 +1,9 @@
|
||||
import tagDarkStyle from '../../tag/styles/light'
|
||||
|
||||
export default {
|
||||
name: 'DynamicTags',
|
||||
theme: 'dark',
|
||||
peer: [
|
||||
tagDarkStyle
|
||||
]
|
||||
}
|
||||
9
src/dynamic-tags/styles/light.js
Normal file
9
src/dynamic-tags/styles/light.js
Normal file
@ -0,0 +1,9 @@
|
||||
import tagLightStyle from '../../tag/styles/light'
|
||||
|
||||
export default {
|
||||
name: 'DynamicTags',
|
||||
theme: 'light',
|
||||
peer: [
|
||||
tagLightStyle
|
||||
]
|
||||
}
|
||||
@ -67,6 +67,7 @@ import Typography from './Typography'
|
||||
import Upload from './Upload'
|
||||
import InputGroup from './input-group'
|
||||
import InputGroupLabelStyle from './input-group-label'
|
||||
import DynamicTags from './dynamic-tags'
|
||||
|
||||
import zhCN from './locale/zhCN'
|
||||
import enUS from './locale/enUS'
|
||||
@ -90,6 +91,8 @@ import inputNumberLightStyle from './input-number/styles/light'
|
||||
import inputNumberDarkStyle from './input-number/styles/dark'
|
||||
import tagLightStyle from './tag/styles/light'
|
||||
import tagDarkStyle from './tag/styles/dark'
|
||||
import dynamicTagsLightStyle from './dynamic-tags/styles/light'
|
||||
import dynamicTagsDarkStyle from './dynamic-tags/styles/dark'
|
||||
|
||||
// Can be remove after refactoring
|
||||
import baseSelectionLightStyle from './_base/selection/styles/light'
|
||||
@ -177,6 +180,7 @@ export default create({
|
||||
Upload,
|
||||
InputGroup,
|
||||
InputGroupLabelStyle,
|
||||
DynamicTags,
|
||||
// Deprecated
|
||||
NimbusServiceLayout,
|
||||
NimbusConfirmCard,
|
||||
@ -202,6 +206,8 @@ export default create({
|
||||
inputNumberDarkStyle,
|
||||
tagLightStyle,
|
||||
tagDarkStyle,
|
||||
dynamicTagsLightStyle,
|
||||
dynamicTagsDarkStyle,
|
||||
// Can be remove after refactoring
|
||||
baseSelectionLightStyle,
|
||||
baseSelectionDarkStyle
|
||||
|
||||
@ -9,7 +9,7 @@ export default {
|
||||
easeInCubicBezier: 'cubic-bezier(.4, 0, 1, 1)',
|
||||
|
||||
borderRadius: '3px',
|
||||
lightBorderRadius: '2px',
|
||||
smallBorderRadius: '2px',
|
||||
|
||||
lineHeight: '1.75',
|
||||
|
||||
|
||||
@ -148,12 +148,19 @@ export default create({
|
||||
borderColor: neutral(base.alphaBorder),
|
||||
borderOverlayColor: overlay(base.alphaBorder),
|
||||
|
||||
closeHoverColor: neutral(base.alpha2),
|
||||
closeHoverOverlayColor: overlay(base.alpha2),
|
||||
// close
|
||||
closeHoverColor: neutral(base.alpha3 * 1.25),
|
||||
closeHoverOverlayColor: overlay(base.alpha3 * 1.25),
|
||||
closeColor: neutral(base.alpha3),
|
||||
closeOverlayColor: overlay(base.alpha3),
|
||||
closeActiveColor: neutral(base.alpha3 * 0.8),
|
||||
closeActiveOverlayColor: overlay(base.alpha3 * 0.8),
|
||||
disabledCloseColor: neutral(base.alpha4),
|
||||
disabledCloseHoverColor: overlay(base.alpha4),
|
||||
disabledCloseOverlayColor: overlay(base.alpha4),
|
||||
closeOpacity: base.alpha3,
|
||||
closeHoverOpacity: base.alpha3 * 1.25,
|
||||
closeActiveOpacity: base.alpha3 * 0.8,
|
||||
closeDisabledOpacity: base.alpha4,
|
||||
|
||||
scrollbarBackgroundOverlayColor: overlay(base.alphaScrollbar),
|
||||
scrollbarHoverBackgroundOverlayColor: overlay(base.alphaScrollbarHover),
|
||||
|
||||
@ -148,12 +148,19 @@ export default create({
|
||||
borderColor: neutral(base.alphaBorder),
|
||||
borderOverlayColor: overlay(base.alphaBorder),
|
||||
|
||||
closeHoverColor: neutral(base.alpha2),
|
||||
closeHoverOverlayColor: overlay(base.alpha2),
|
||||
// close
|
||||
closeHoverColor: neutral(base.alpha3 * 0.8),
|
||||
closeHoverOverlayColor: overlay(base.alpha3 * 0.8),
|
||||
closeColor: neutral(base.alpha3),
|
||||
closeOverlayColor: overlay(base.alpha3),
|
||||
closeActiveColor: neutral(base.alpha3 * 1.2),
|
||||
closeActiveOverlayColor: overlay(base.alpha3 * 1.2),
|
||||
disabledCloseColor: neutral(base.alpha4),
|
||||
disabledCloseHoverColor: overlay(base.alpha4),
|
||||
disabledCloseOverlayColor: overlay(base.alpha4),
|
||||
closeOpacity: base.alpha3,
|
||||
closeHoverOpacity: base.alpha3 * 0.8,
|
||||
closeActiveOpacity: base.alpha3 * 1.25,
|
||||
closeDisabledOpacity: base.alpha4,
|
||||
|
||||
scrollbarBackgroundOverlayColor: overlay(base.alphaScrollbar),
|
||||
scrollbarHoverBackgroundOverlayColor: overlay(base.alphaScrollbarHover),
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Tag from './src/Tag.vue'
|
||||
import DynamicTags from './src/DynamicTags.vue'
|
||||
|
||||
Tag.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Tag.name, Tag)
|
||||
Vue.component(naive.componentPrefix + DynamicTags.name, DynamicTags)
|
||||
}
|
||||
|
||||
export default Tag
|
||||
|
||||
@ -4,15 +4,21 @@ export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
borderRadius,
|
||||
checkableTextColor,
|
||||
checkableBackgroundColor,
|
||||
checkableHoverTextColor,
|
||||
checkableHoverBackgroundColor,
|
||||
checkableActiveTextColor,
|
||||
checkableActiveBackgroundColor,
|
||||
checkableCheckedHoverBackgroundColor,
|
||||
checkableCheckedActiveBackgroundColor
|
||||
checkable,
|
||||
disabledOpacity
|
||||
} = props.$local
|
||||
const {
|
||||
textColor: checkableTextColor,
|
||||
hoverTextColor: checkableHoverTextColor,
|
||||
activeTextColor: checkableActiveTextColor,
|
||||
backgroundColor: checkableBackgroundColor,
|
||||
hoverBackgroundColor: checkableHoverBackgroundColor,
|
||||
activeBackgroundColor: checkableActiveBackgroundColor,
|
||||
checkedTextColor,
|
||||
checkedBackgroundColor,
|
||||
checkedHoverBackgroundColor,
|
||||
checkedActiveBackgroundColor
|
||||
} = checkable
|
||||
const {
|
||||
easeInOutCubicBezier
|
||||
} = props.$base
|
||||
@ -27,7 +33,7 @@ export default c([
|
||||
`,
|
||||
borderRadius,
|
||||
transition: `
|
||||
background-color .2s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier},
|
||||
color .3s ${easeInOutCubicBezier},
|
||||
box-shadow .3s ${easeInOutCubicBezier},
|
||||
opacity .3s ${easeInOutCubicBezier}
|
||||
@ -40,13 +46,11 @@ export default c([
|
||||
cursor: 'pointer'
|
||||
}),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed !important'
|
||||
cursor: 'not-allowed !important',
|
||||
opacity: disabledOpacity
|
||||
}, [
|
||||
cE('close', {
|
||||
cursor: 'not-allowed !important'
|
||||
}),
|
||||
cM('checkable', {
|
||||
opacity: '0.4'
|
||||
})
|
||||
]),
|
||||
cM('closable', {
|
||||
@ -90,15 +94,15 @@ export default c([
|
||||
])
|
||||
]),
|
||||
cM('checked', {
|
||||
color: checkableActiveTextColor,
|
||||
backgroundColor: checkableActiveBackgroundColor
|
||||
color: checkedTextColor,
|
||||
backgroundColor: checkedBackgroundColor
|
||||
}, [
|
||||
cNotM('disabled', [
|
||||
c('&:hover', {
|
||||
backgroundColor: checkableCheckedHoverBackgroundColor
|
||||
backgroundColor: checkedHoverBackgroundColor
|
||||
}),
|
||||
c('&:active', {
|
||||
backgroundColor: checkableCheckedActiveBackgroundColor
|
||||
backgroundColor: checkedActiveBackgroundColor
|
||||
})
|
||||
])
|
||||
])
|
||||
|
||||
@ -2,9 +2,7 @@ import { c, cE, cM, cTB, cNotM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
type
|
||||
} = props.$instance.type
|
||||
const type = props.$instance.type
|
||||
const pallete = props.$local[type]
|
||||
const {
|
||||
borderColor,
|
||||
@ -12,47 +10,28 @@ export default c([
|
||||
backgroundColor,
|
||||
closeColor,
|
||||
closeHoverColor,
|
||||
closeActiveColor,
|
||||
hoverBackgroundColor,
|
||||
activeBackgroudColor,
|
||||
disabledBorderColor,
|
||||
disabledTextColor,
|
||||
disabledBackgroundColor,
|
||||
disabledCloseColor
|
||||
closeActiveColor
|
||||
} = pallete
|
||||
return cTB('tag', [
|
||||
cM(`${type}-type`, {
|
||||
boxShadow: `inset 0 0 0 1px ${borderColor}`,
|
||||
color: textColor,
|
||||
backgroundColor: backgroundColor
|
||||
}, [
|
||||
cE('close', {
|
||||
fill: closeColor
|
||||
}),
|
||||
cNotM('disabled', [
|
||||
cE('close', [
|
||||
c('&:hover', {
|
||||
fill: closeHoverColor
|
||||
}),
|
||||
c('&:active', {
|
||||
fill: closeActiveColor
|
||||
})
|
||||
]),
|
||||
c('&:hover', {
|
||||
backgroundColor: hoverBackgroundColor
|
||||
}),
|
||||
c('&:active', {
|
||||
backgroundColor: activeBackgroudColor
|
||||
})
|
||||
]),
|
||||
cM('disabled', {
|
||||
boxShadow: `inset 0 0 0 1px ${disabledBorderColor}`,
|
||||
color: disabledTextColor,
|
||||
backgroundColor: disabledBackgroundColor
|
||||
cNotM('checkable', [
|
||||
cM(`${type}-type`, {
|
||||
boxShadow: `inset 0 0 0 1px ${borderColor}`,
|
||||
color: textColor,
|
||||
backgroundColor: backgroundColor
|
||||
}, [
|
||||
cE('close', {
|
||||
fill: disabledCloseColor
|
||||
})
|
||||
fill: closeColor
|
||||
}),
|
||||
cNotM('disabled', [
|
||||
cE('close', [
|
||||
c('&:hover', {
|
||||
fill: closeHoverColor
|
||||
}),
|
||||
c('&:active', {
|
||||
fill: closeActiveColor
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from '../../styles/_common-style/tag'
|
||||
import changeColor from '../../_utils/color'
|
||||
|
||||
// xxxPaneColor
|
||||
// xxxBorderColor
|
||||
import { changeColor } from '../../_utils/color'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
@ -11,7 +8,6 @@ export default create({
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
secondaryTextOverlayColor,
|
||||
disabledTextOverlayColor,
|
||||
primaryHoverColor,
|
||||
primaryActiveColor,
|
||||
primaryColor,
|
||||
@ -20,110 +16,78 @@ export default create({
|
||||
warningColor,
|
||||
errorColor,
|
||||
baseBackgroundColor,
|
||||
disabledBackgroundOverlayColor,
|
||||
pendingBackgroundOverlayColor,
|
||||
borderOverlayColor,
|
||||
disabledOpacity,
|
||||
closeOverlayColor,
|
||||
disabledOpacity
|
||||
closeHoverOverlayColor,
|
||||
closeActiveOverlayColor
|
||||
} = derived
|
||||
const {
|
||||
borderRadius
|
||||
smallBorderRadius: borderRadius
|
||||
} = base
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius,
|
||||
checkableTextColor: secondaryTextOverlayColor,
|
||||
checkableBackgroundColor: 'transparent',
|
||||
checkableHoverTextColor: primaryHoverColor,
|
||||
checkableHoverBackgroundColor: 'transparent',
|
||||
checkableActiveTextColor: baseBackgroundColor,
|
||||
checkableActiveBackgroundColor: primaryColor,
|
||||
checkableCheckedHoverBackgroundColor: primaryHoverColor,
|
||||
checkableCheckedActiveBackgroundColor: primaryActiveColor,
|
||||
disabledOpacity,
|
||||
checkable: {
|
||||
textColor: secondaryTextOverlayColor,
|
||||
hoverTextColor: primaryHoverColor,
|
||||
activeTextColor: primaryActiveColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: 'transparent',
|
||||
activeBackgroundColor: 'transparent',
|
||||
checkedTextColor: baseBackgroundColor,
|
||||
checkedBackgroundColor: primaryColor,
|
||||
checkedHoverBackgroundColor: primaryHoverColor,
|
||||
checkedActiveBackgroundColor: primaryActiveColor
|
||||
},
|
||||
default: {
|
||||
borderColor: borderOverlayColor,
|
||||
disabledBorderColor: borderOverlayColor,
|
||||
textColor: secondaryTextOverlayColor,
|
||||
disabledTextColor: disabledTextOverlayColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: pendingBackgroundOverlayColor,
|
||||
activeBackgroudColor: pendingBackgroundOverlayColor,
|
||||
disabledBackgroundColor: disabledBackgroundOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
},
|
||||
primary: {
|
||||
borderColor: changeColor(primaryColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(primaryColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(primaryColor, { alpha: 0.3 }),
|
||||
textColor: primaryColor,
|
||||
disabledTextColor: primaryColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(primaryColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(primaryColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeColor: changeColor(primaryColor, { alpha: 0.7 }),
|
||||
closeHoverColor: changeColor(primaryColor, { alpha: 0.85 }),
|
||||
closeActiveColor: changeColor(primaryColor, { alpha: 0.57 })
|
||||
},
|
||||
info: {
|
||||
borderColor: changeColor(infoColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(infoColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(infoColor, { alpha: 0.3 }),
|
||||
textColor: infoColor,
|
||||
disabledTextColor: infoColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(infoColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(infoColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeColor: changeColor(infoColor, { alpha: 0.7 }),
|
||||
closeHoverColor: changeColor(infoColor, { alpha: 0.85 }),
|
||||
closeActiveColor: changeColor(infoColor, { alpha: 0.57 })
|
||||
},
|
||||
success: {
|
||||
borderColor: changeColor(successColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(successColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(successColor, { alpha: 0.3 }),
|
||||
textColor: successColor,
|
||||
disabledTextColor: successColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(successColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(successColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeColor: changeColor(successColor, { alpha: 0.7 }),
|
||||
closeHoverColor: changeColor(successColor, { alpha: 0.85 }),
|
||||
closeActiveColor: changeColor(successColor, { alpha: 0.57 })
|
||||
},
|
||||
warning: {
|
||||
borderColor: changeColor(warningColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(warningColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(warningColor, { alpha: 0.3 }),
|
||||
textColor: warningColor,
|
||||
disabledTextColor: warningColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(warningColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(warningColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeColor: changeColor(warningColor, { alpha: 0.7 }),
|
||||
closeHoverColor: changeColor(warningColor, { alpha: 0.85 }),
|
||||
closeActiveColor: changeColor(warningColor, { alpha: 0.57 })
|
||||
},
|
||||
error: {
|
||||
borderColor: changeColor(errorColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(errorColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(errorColor, { alpha: 0.3 }),
|
||||
textColor: errorColor,
|
||||
disabledTextColor: errorColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(errorColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(errorColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeColor: changeColor(errorColor, { alpha: 0.7 }),
|
||||
closeHoverColor: changeColor(errorColor, { alpha: 0.85 }),
|
||||
closeActiveColor: changeColor(errorColor, { alpha: 0.57 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,13 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from '../../styles/_common-style/tag'
|
||||
import changeColor from '../../_utils/color'
|
||||
|
||||
// xxxPaneColor
|
||||
// xxxBorderColor
|
||||
// 需要简化，第一，去掉 hover 和 active 的样式，
|
||||
// 第二，使用不透明度来搞颜色！
|
||||
import { changeColor } from '../../_utils/color'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
theme: 'light',
|
||||
name: 'Tag',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
secondaryTextOverlayColor,
|
||||
disabledTextOverlayColor,
|
||||
primaryHoverColor,
|
||||
primaryActiveColor,
|
||||
primaryColor,
|
||||
@ -22,110 +16,79 @@ export default create({
|
||||
warningColor,
|
||||
errorColor,
|
||||
baseBackgroundColor,
|
||||
disabledBackgroundOverlayColor,
|
||||
pendingBackgroundOverlayColor,
|
||||
borderOverlayColor,
|
||||
disabledOpacity,
|
||||
tagBackgroundColor,
|
||||
closeOverlayColor,
|
||||
disabledOpacity
|
||||
closeHoverOverlayColor,
|
||||
closeActiveOverlayColor
|
||||
} = derived
|
||||
const {
|
||||
borderRadius
|
||||
smallBorderRadius: borderRadius
|
||||
} = base
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius,
|
||||
checkableTextColor: secondaryTextOverlayColor,
|
||||
checkableBackgroundColor: 'transparent',
|
||||
checkableHoverTextColor: primaryHoverColor,
|
||||
checkableHoverBackgroundColor: 'transparent',
|
||||
checkableActiveTextColor: baseBackgroundColor,
|
||||
checkableActiveBackgroundColor: primaryColor,
|
||||
checkableCheckedHoverBackgroundColor: primaryHoverColor,
|
||||
checkableCheckedActiveBackgroundColor: primaryActiveColor,
|
||||
disabledOpacity,
|
||||
checkable: {
|
||||
textColor: secondaryTextOverlayColor,
|
||||
hoverTextColor: primaryHoverColor,
|
||||
activeTextColor: primaryActiveColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: 'transparent',
|
||||
activeBackgroundColor: 'transparent',
|
||||
checkedTextColor: baseBackgroundColor,
|
||||
checkedBackgroundColor: primaryColor,
|
||||
checkedHoverBackgroundColor: primaryHoverColor,
|
||||
checkedActiveBackgroundColor: primaryActiveColor
|
||||
},
|
||||
default: {
|
||||
borderColor: borderOverlayColor,
|
||||
disabledBorderColor: borderOverlayColor,
|
||||
textColor: secondaryTextOverlayColor,
|
||||
disabledTextColor: disabledTextOverlayColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: pendingBackgroundOverlayColor,
|
||||
activeBackgroudColor: pendingBackgroundOverlayColor,
|
||||
disabledBackgroundColor: disabledBackgroundOverlayColor,
|
||||
backgroundColor: tagBackgroundColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
},
|
||||
primary: {
|
||||
borderColor: changeColor(primaryColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(primaryColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(primaryColor, { alpha: 0.3 }),
|
||||
textColor: primaryColor,
|
||||
disabledTextColor: primaryColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(primaryColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(primaryColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
backgroundColor: changeColor(primaryColor, { alpha: 0.1 }),
|
||||
closeColor: changeColor(primaryColor, { alpha: 0.75 }),
|
||||
closeHoverColor: changeColor(primaryColor, { alpha: 0.6 }),
|
||||
closeActiveColor: changeColor(primaryColor, { alpha: 0.9 })
|
||||
},
|
||||
info: {
|
||||
borderColor: changeColor(infoColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(infoColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(infoColor, { alpha: 0.3 }),
|
||||
textColor: infoColor,
|
||||
disabledTextColor: infoColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(infoColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(infoColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
backgroundColor: changeColor(infoColor, { alpha: 0.1 }),
|
||||
closeColor: changeColor(infoColor, { alpha: 0.75 }),
|
||||
closeHoverColor: changeColor(infoColor, { alpha: 0.6 }),
|
||||
closeActiveColor: changeColor(infoColor, { alpha: 0.9 })
|
||||
},
|
||||
success: {
|
||||
borderColor: changeColor(successColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(successColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(successColor, { alpha: 0.3 }),
|
||||
textColor: successColor,
|
||||
disabledTextColor: successColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(successColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(successColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
backgroundColor: changeColor(successColor, { alpha: 0.1 }),
|
||||
closeColor: changeColor(successColor, { alpha: 0.75 }),
|
||||
closeHoverColor: changeColor(successColor, { alpha: 0.6 }),
|
||||
closeActiveColor: changeColor(successColor, { alpha: 0.9 })
|
||||
},
|
||||
warning: {
|
||||
borderColor: changeColor(warningColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(warningColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(warningColor, { alpha: 0.35 }),
|
||||
textColor: warningColor,
|
||||
disabledTextColor: warningColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(warningColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(warningColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
backgroundColor: changeColor(warningColor, { alpha: 0.12 }),
|
||||
closeColor: changeColor(warningColor, { alpha: 0.75 }),
|
||||
closeHoverColor: changeColor(warningColor, { alpha: 0.6 }),
|
||||
closeActiveColor: changeColor(warningColor, { alpha: 0.9 })
|
||||
},
|
||||
error: {
|
||||
borderColor: changeColor(errorColor, { alpha: 0.3 }), // tertiary
|
||||
disabledBorderColor: changeColor(errorColor, { alpha: 0.3 }),
|
||||
borderColor: changeColor(errorColor, { alpha: 0.23 }),
|
||||
textColor: errorColor,
|
||||
disabledTextColor: errorColor,
|
||||
backgroundColor: 'transparent',
|
||||
hoverBackgroundColor: changeColor(errorColor, { alpha: 0.4 }),
|
||||
activeBackgroudColor: changeColor(errorColor, { alpha: 0.4 }),
|
||||
disabledBackgroundColor: 'transparent',
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeOverlayColor,
|
||||
closeActiveColor: closeOverlayColor,
|
||||
disabledCloseColor: borderOverlayColor
|
||||
backgroundColor: changeColor(errorColor, { alpha: 0.08 }),
|
||||
closeColor: changeColor(errorColor, { alpha: 0.65 }),
|
||||
closeHoverColor: changeColor(errorColor, { alpha: 0.5 }),
|
||||
closeActiveColor: changeColor(errorColor, { alpha: 0.8 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user