mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-13 13:59:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #47 from TuSimple/freestyle

Browse Source 
Freestyle
This commit is contained in:
07akioni 2020-02-20 22:04:52 +08:00 committed by GitHub Enterprise
commit 6f9e34bd4c
30 changed files with 288 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/anchor/enUS/ignoreGap.md
View File

@ -1,4 +1,4 @@
# Ignore-Gap
# Ignore Gap
```html
<div style="height:200px">
<n-row :gutter="12">

20
demo/documentation/components/icon/enUS/basic.md
View File

@ -2,24 +2,30 @@
```html
<n-icon
size="40"
color="#e4000f"
>
<ios-contacts/>
<game-controller-outline />
</n-icon>
<n-icon
size="40"
color="rgba(0, 128, 0, .5)"
color="#0e7a0d"
>
<md-contacts/>
<game-controller />
</n-icon>
<n-icon
size="40"
>
<game-controller-outline />
</n-icon>
```
```js
import mdContacts from 'naive-ui/lib/icons/md-contacts'
import iosContacts from 'naive-ui/lib/icons/ios-contacts'
import gameControllerOutline from 'naive-ui/lib/icons/game-controller-outline'
import gameController from 'naive-ui/lib/icons/game-controller'
export default {
components: {
mdContacts,
iosContacts
gameControllerOutline,
gameController
}
}
```

31
demo/documentation/components/icon/enUS/depth.md Normal file
View File

@ -0,0 +1,31 @@
# Depth
To match different level text colors, icon provides `depth` prop.
```html
<n-icon
size="40"
depth="primary"
>
<cash-outline />
</n-icon>
<n-icon
size="40"
depth="secondary"
>
<cash-outline />
</n-icon>
<n-icon
size="40"
depth="tertiary"
>
<cash-outline />
</n-icon>
```
```js
import cashOutline from 'naive-ui/lib/icons/cash-outline'
export default {
components: {
cashOutline
}
}
```

15
demo/documentation/components/icon/enUS/index.md
View File

@ -1,21 +1,22 @@
# Icon
```component
icons
```
Naive-UI use Ionicons as its builtin icon library.
## Demos
To view all available icons, see <n-a href="https://ionicons.com/" target="_blank" rel="noreferer noopener">Ionicons V5</n-a> & <n-a href="https://ionicons.com/v4/" target="_blank" rel="noreferer noopener">Ionicons V4</n-a>. Icons' name are the same as Ionicons in naive-ui. See demos to know the way to import icons.
```demo
basic
theme
custom-icon
depth
```
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|themed-style|`object`|`null`||
|size|`number`|`null`||
|color|`object`|`null`||
|size|`number \| string`|`null`||
|color|`string`|`null`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
## Slots
@ -23,8 +24,4 @@ custom-icon
|-|-|-|
|default|`()`||
## Search Icons
<icons />

12
demo/documentation/components/icon/enUS/theme.md
View File

@ -5,22 +5,24 @@ Naive UI provides a simple way to custom style of icon in different themes.
size="40"
:themed-style="{
dark: {
fill: 'rgba(255, 0, 0, .5)'
fill: 'rgb(0, 128, 0)',
stroke: 'rgb(0, 128, 0)'
},
light: {
fill: 'rgba(0, 128, 0, .5)'
fill: 'rgb(0, 160, 0)',
stroke: 'rgb(0, 160, 0)'
}
}"
>
<md-cash />
<cash-outline />
</n-icon>
```
```js
import mdCash from 'naive-ui/lib/icons/md-cash'
import cashOutline from 'naive-ui/lib/icons/cash-outline'
export default {
components: {
mdCash
cashOutline
}
}
```

20
demo/documentation/components/icon/zhCN/basic.md
View File

@ -2,24 +2,30 @@
```html
<n-icon
size="40"
color="#e4000f"
>
<ios-contacts/>
<game-controller-outline />
</n-icon>
<n-icon
size="40"
color="rgba(0, 128, 0, .5)"
color="#0e7a0d"
>
<md-contacts/>
<game-controller />
</n-icon>
<n-icon
size="40"
>
<game-controller-outline />
</n-icon>
```
```js
import mdContacts from 'naive-ui/lib/icons/md-contacts'
import iosContacts from 'naive-ui/lib/icons/ios-contacts'
import gameControllerOutline from 'naive-ui/lib/icons/game-controller-outline'
import gameController from 'naive-ui/lib/icons/game-controller'
export default {
components: {
mdContacts,
iosContacts
gameControllerOutline,
gameController
}
}
```

31
demo/documentation/components/icon/zhCN/depth.md Normal file
View File

@ -0,0 +1,31 @@
# 深度
为了搭配不同级的文字颜色，图标提供 `depth` 选项。
```html
<n-icon
size="40"
depth="primary"
>
<cash-outline />
</n-icon>
<n-icon
size="40"
depth="secondary"
>
<cash-outline />
</n-icon>
<n-icon
size="40"
depth="tertiary"
>
<cash-outline />
</n-icon>
```
```js
import cashOutline from 'naive-ui/lib/icons/cash-outline'
export default {
components: {
cashOutline
}
}
```

12
demo/documentation/components/icon/zhCN/index.md
View File

@ -1,22 +1,21 @@
# 图标 Icon
Naive-UI 使用 Ionicons 作为内置的 Icon 库。
```component
icons
```
## 演示
全部图标请参考 <n-a href="https://ionicons.com/" target="_blank" rel="noreferer noopener">Ionicons V5</n-a> 及 <n-a href="https://ionicons.com/v4/" target="_blank" rel="noreferer noopener">Ionicons V4</n-a>。在 Naive UI 中，图标名称和 Ionicons 维持一致。导入方式请参考演示。
```demo
basic
theme
custom-icon
depth
```
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|themed-style|`object`|`null`||
|size|`number`|`null`||
|color|`object`|`null`||
|size|`number \| string`|`null`||
|color|`string`|`null`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
@ -25,6 +24,3 @@ custom-icon
|-|-|-|
|default|`()`||
## 搜索图标
<icons />

12
demo/documentation/components/icon/zhCN/theme.md
View File

@ -5,22 +5,24 @@ Naive UI 提供一些简单的方法来自定义不同主题下的样式。
size="40"
:themed-style="{
dark: {
fill: 'rgba(255, 0, 0, .5)'
fill: 'rgb(0, 128, 0)',
stroke: 'rgb(0, 128, 0)'
},
light: {
fill: 'rgba(0, 128, 0, .5)'
fill: 'rgb(0, 160, 0)',
stroke: 'rgb(0, 160, 0)'
}
}"
>
<md-cash />
<cash-outline />
</n-icon>
```
```js
import mdCash from 'naive-ui/lib/icons/md-cash'
import cashOutline from 'naive-ui/lib/icons/cash-outline'
export default {
components: {
mdCash
cashOutline
}
}
```

5
demo/documentation/components/radio/enUS/basic.md
View File

@ -15,15 +15,18 @@
<n-radio
v-model="value"
value="Be Here Now"
disabled
:disabled="disabled"
>
Be Here Now
</n-radio>
<n-switch v-model="disabled"/>
```
```js
export default {
data () {
return {
disabled: true,
value: null
}
}

14
demo/documentation/components/tag/enUS/disabled.md
View File

@ -3,7 +3,7 @@
<n-tag
closable
@close="handleClose"
disabled
:disabled="disabled"
>
Real Love
</n-tag>
@ -18,7 +18,7 @@
<n-tag
type="warning"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
I'm Down
@ -26,7 +26,7 @@
<n-tag
type="error"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
Yesterday
@ -34,11 +34,12 @@
<n-tag
type="info"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
I'm Looking Through You
</n-tag>
<n-switch v-model="disabled"/>
```
```js
export default {
@ -46,6 +47,11 @@ export default {
handleClose () {
this.$NMessage.info('tag close')
}
},
data () {
return {
disabled: true
}
}
}
```

16
demo/documentation/components/tag/zhCN/disabled.md
View File

@ -3,14 +3,14 @@
<n-tag
closable
@close="handleClose"
disabled
:disabled="disabled"
>
爱在西元前
</n-tag>
<n-tag
type="success"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
不该
@ -18,7 +18,7 @@
<n-tag
type="warning"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
超人不会飞
@ -26,7 +26,7 @@
<n-tag
type="error"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
手写的从前
@ -34,11 +34,12 @@
<n-tag
type="info"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
哪里都是你
</n-tag>
<n-switch v-model="disabled"/>
```
```js
export default {
@ -46,6 +47,11 @@ export default {
handleClose () {
this.$NMessage.info('tag close')
}
},
data () {
return {
disabled: true
}
}
}
```

4
demo/documentation/components/typography/enUS/index.md
View File

@ -22,12 +22,12 @@ text
|underline|`boolean`|`false`||
|delete|`boolean`|`false`||
|code|`boolean`|`false`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`'secondary'`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
### P Props
|Name|Type|Default|Description|
|-|-|-|-|
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`'secondary'`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
### H1, H2, H3, H4, H5, H6 Props

4
demo/documentation/components/typography/zhCN/index.md
View File

@ -21,12 +21,12 @@ text
|underline|`boolean`|`false`||
|delete|`boolean`|`false`||
|code|`boolean`|`false`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`'secondary'`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
### P Props
|名称|类型|默认值|说明|
|-|-|-|-|
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`'secondary'`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
### H1, H2, H3, H4, H5, H6 Props
|名称|类型|默认值|说明|

2
demo/menuOptions.js
View File

@ -342,7 +342,7 @@ export default function (locale, instance) {
},
{
name: 'Time',
title: '事件',
title: '时间',
titleExtra: 'Time',
path: `/${instance.lang}/${instance.theme}` + '/n-time'
},

2
src/Typography/src/p.vue
View File

@ -9,7 +9,7 @@ export default {
validator (value) {
return ['primary', 'secondary', 'tertiary'].includes(value)
},
default: 'secondary'
default: null
}
},
render (h, context) {

2
src/Typography/src/text.vue
View File

@ -37,7 +37,7 @@ export default {
validator (value) {
return ['primary', 'secondary', 'tertiary'].includes(value)
},
default: 'secondary'
default: null
}
},
render (h, context) {

22
src/_themes/darkStyleScheme.scss
View File

@ -4,27 +4,27 @@
/* stylelint-disable */
:export {
primaryColor: $--n-primary-hover-color;
primaryHoverColor: $--n-primary-color;
primaryColor: $--n-primary-color;
primaryHoverColor: $--n-primary-hover-color;
primaryActiveColor: $--n-primary-active-color;
infoColor: $--n-info-hover-color;
infoHoverColor: $--n-info-color;
infoColor: $--n-info-color;
infoHoverColor: $--n-info-hover-color;
infoActiveColor: $--n-info-active-color;
successColor: $--n-success-hover-color;
successHoverColor: $--n-success-color;
successColor: $--n-success-color;
successHoverColor: $--n-success-hover-color;
successActiveColor: $--n-success-active-color;
errorColor: $--n-error-hover-color;
errorHoverColor: $--n-error-color;
errorColor: $--n-error-color;
errorHoverColor: $--n-error-hover-color;
errorActiveColor: $--n-error-active-color;
warningColor: $--n-warning-hover-color;
warningHoverColor: $--n-warning-color;
warningColor: $--n-warning-color;
warningHoverColor: $--n-warning-hover-color;
warningActiveColor: $--n-warning-active-color;
primaryTextColor: $--overlay-text-1;
secondaryTextColor: $--overlay-text-2;
tertiaryTextColor: $--overlay-text-3;
disabledTextColor: rgba(255, 255, 255, 0.3);
popoverBackgroundColor: $--neutral-popover;
dialogBackgroundColor: $--neutral-modal;
modalBackgroundColor: $--neutral-modal;
cardBackgroundColor: $--neutral-card;
bodyBackgroundColor: $--neutral-body;
closeColor: $--overlay-text-3;

22
src/_themes/lightStyleScheme.scss
View File

@ -4,27 +4,27 @@
/* stylelint-disable */
:export {
primaryColor: $--n-primary-hover-color;
primaryHoverColor: $--n-primary-color;
primaryColor: $--n-primary-color;
primaryHoverColor: $--n-primary-hover-color;
primaryActiveColor: $--n-primary-active-color;
infoColor: $--n-info-hover-color;
infoHoverColor: $--n-info-color;
infoColor: $--n-info-color;
infoHoverColor: $--n-info-hover-color;
infoActiveColor: $--n-info-active-color;
successColor: $--n-success-hover-color;
successHoverColor: $--n-success-color;
successColor: $--n-success-color;
successHoverColor: $--n-success-hover-color;
successActiveColor: $--n-success-active-color;
errorColor: $--n-error-hover-color;
errorHoverColor: $--n-error-color;
errorColor: $--n-error-color;
errorHoverColor: $--n-error-hover-color;
errorActiveColor: $--n-error-active-color;
warningColor: $--n-warning-hover-color;
warningHoverColor: $--n-warning-color;
warningColor: $--n-warning-color;
warningHoverColor: $--n-warning-hover-color;
warningActiveColor: $--n-warning-active-color;
primaryTextColor: $--overlay-text-1;
secondaryTextColor: $--overlay-text-2;
tertiaryTextColor: $--overlay-text-3;
disabledTextColor: $--overlay-text-4;
popoverBackgroundColor: $--neutral-popover;
dialogBackgroundColor: $--neutral-modal;
modalBackgroundColor: $--neutral-modal;
cardBackgroundColor: $--neutral-card;
bodyBackgroundColor: $--neutral-body;
closeColor: $--overlay-text-3;

6
styles/BaseSelection.scss
View File

@ -119,7 +119,7 @@
background-color: transparent;
height: 100%;
}
color: $--base-selection-color;
color: map-get($--base-selection-text-color, 'default');
&::placeholder {
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: map-get($--base-selection-placeholder-color, 'default');
@ -207,7 +207,7 @@
box-shadow: map-get($--base-selection-box-shadow, 'disabled');
@include e(input) {
cursor: not-allowed;
color: map-get($--base-selection-placeholder-color, 'disabled');
color: map-get($--base-selection-text-color, 'disabled');
@include m(placeholder) {
color: map-get($--base-selection-placeholder-color, 'disabled');
}
@ -249,7 +249,7 @@
cursor: pointer;
}
caret-color: map-get($--base-selection-caret-color, 'default');
color: $--base-selection-color;
color: map-get($--base-selection-text-color, 'default');
}
@include once {
@include e(mirror) {

8
styles/Icon.scss
View File

@ -9,27 +9,23 @@
display: inline-block;
position: relative;
transition: $--icon-transition;
fill: $--n-base-text-color;
stroke: $--n-base-text-color;
svg {
height: 1em;
width: 1em;
}
@include m(primary-depth) {
fill: $--n-base-text-color;
stroke: $--n-base-text-color;
svg {
opacity: $--n-primary-opacity;
}
}
@include m(secondary-depth) {
fill: $--n-base-text-color;
stroke:$--n-base-text-color;
svg {
opacity: $--n-secondary-opacity;
}
}
@include m(tertiary-depth) {
fill: $--n-base-text-color;
stroke: $--n-base-text-color;
svg {
opacity: $--n-tertiary-opacity;
}

79
styles/Pagination.scss
View File

@ -11,9 +11,6 @@
@include m(transition-disabled) {
@include b(pagination-item) {
transition: none;
path {
transition: none;
}
}
}
}
@ -45,17 +42,19 @@
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;
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:6px;
line-height: 28px;
path {
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
&:not(:last-child) {
margin-right: 10px;
margin-right: 8px;
}
@include e(more-icon, arrow-icon) {
position: relative;
@ -69,27 +68,7 @@
bottom: 0;
}
}
}
color: map-get($--pagination-item-text-color, 'default');
@include e(more-icon, arrow-icon) {
path {
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) {
box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'default');
path {
fill: map-get($--pagination-item-text-color, 'default');
}
}
@include m(fast-backward, fast-forward) {
@include once {
@include m(fast-backward, fast-forward) {
@include e(more-icon) {
display: block;
}
@ -97,39 +76,43 @@
display: none;
}
}
path {
fill: map-get($--pagination-item-text-color, 'default');
}
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
opacity: $--pagination-disabled-opacity;
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) {
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 m(fast-backward, fast-forward) {
@include once {
@include once {
@include m(fast-backward, fast-forward) {
@include e(more-icon) {
display: none;
}
}
@include e(arrow-icon) {
@include once {
@include e(arrow-icon) {
display: block;
}
path {
fill: map-get($--pagination-item-text-color, 'default');
}
}
path {
fill: map-get($--pagination-item-text-color, 'default');
}
}
}
}
@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 {

4
styles/Progress.scss
View File

@ -36,7 +36,9 @@
}
$fill-color: map-get($--progress-fill-color, $type);
@include b(progress-icon) {
fill: $fill-color;
@include b(icon) {
fill: $fill-color;
}
@include m(as-text) {
color: map-get($--progress-indicator-color, 'outside');
}

12
styles/Tabs.scss
View File

@ -64,12 +64,16 @@ $--tabs-tab-font-size: (
margin-left: 8px;
}
}
fill: map-get($--tabs-tab-scroll-button-color, 'default');
@include b(icon) {
fill: map-get($--tabs-tab-scroll-button-color, 'default');
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
fill: map-get($--tabs-tab-scroll-button-color, 'disabled');
@include b(icon) {
fill: map-get($--tabs-tab-scroll-button-color, 'disabled');
}
}
}
}
@ -114,7 +118,9 @@ $--tabs-tab-font-size: (
cursor: pointer;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
fill: map-get($--tabs-tab-close-button-color, 'default');
@include b(icon) {
fill: map-get($--tabs-tab-close-button-color, 'default');
}
}
@include e(label) {
@include once {

59
styles/Typography.scss
View File

@ -12,10 +12,10 @@ $--header-font-size: (
$--header-margin: (
'1': 24px 0 18px 0,
'2': 24px 0 18px 0,
'3': 18px 0 12px 0,
'4': 18px 0 12px 0,
'5': 18px 0 12px 0,
'6': 18px 0 12px 0
'3': 20px 0 16px 0,
'4': 20px 0 16px 0,
'5': 18px 0 14px 0,
'6': 18px 0 14px 0
);
$--header-prefix-width: (
@ -108,6 +108,14 @@ $--header-bar-width: (
@include header-mixin('5');
@include header-mixin('6');
@include b(p) {
&:first-child {
margin-top: 0;
}
transition: color .3s $--n-ease-in-out-cubic-bezier;
margin: 12px 0 16px 0;
font-size: 14px;
line-height: 1.75;
color: $--n-secondary-text-color;
@include m(primary-depth) {
color: $--n-primary-text-color;
}
@ -117,14 +125,6 @@ $--header-bar-width: (
@include m(tertiary-depth) {
color: $--n-tertiary-text-color;
}
&:first-child {
margin-top: 0;
}
transition: color .3s $--n-ease-in-out-cubic-bezier;
margin: 12px 0 16px 0;
font-size: 14px;
line-height: 1.75;
color: $--n-secondary-text-color;
}
@include b(ul) {
margin: 12px 0;
@ -134,7 +134,7 @@ $--header-bar-width: (
&:last-child {
margin-bottom: 0;
}
padding-left: 1.625em;
padding-left: 1.75em;
@include m(align-text) {
padding-left: 0;
}
@ -147,14 +147,14 @@ $--header-bar-width: (
&:last-child {
margin-bottom: 0;
}
padding-left: 1.625em;
padding-left: 1.75em;
@include m(align-text) {
padding-left: 0;
}
}
@include b(li) {
transition: color .3s $--n-ease-in-out-cubic-bezier;
line-height: 1.625em;
line-height: 1.75em;
margin-bottom: 0px;
font-size: 14px;
color: $--n-secondary-text-color;
@ -182,14 +182,27 @@ $--header-bar-width: (
background-color: $--typography-code-background-color;
border: 1px solid $--typography-code-border-color;
}
@include m(primary-depth) {
color: $--n-primary-text-color;
@include m(default-type) {
@include m(primary-depth) {
color: $--n-primary-text-color;
}
@include m(secondary-depth) {
color: $--n-secondary-text-color;
}
@include m(tertiary-depth) {
color: $--n-tertiary-text-color;
}
}
@include m(secondary-depth) {
color: $--n-secondary-text-color;
}
@include m(tertiary-depth) {
color: $--n-tertiary-text-color;
@include not-m(default-type) {
@include m(primary-depth) {
opacity: $--n-primary-opacity;
}
@include m(secondary-depth) {
opacity: $--n-secondary-opacity;
}
@include m(tertiary-depth) {
opacity: $--n-tertiary-opacity;
}
}
@include m(strong) {
font-weight: 500;
@ -231,7 +244,7 @@ $--header-bar-width: (
&:last-child {
margin-bottom: 0;
}
line-height: 1.625;
line-height: 1.75;
margin: 0;
margin-top: 12px;
margin-bottom: 12px;

7
styles/themes/dark/components/BaseSelection.scss
View File

@ -1,8 +1,11 @@
@mixin setup-dark-base-selection {
$--base-selection-color: $--n-secondary-text-color !global;
$--base-selection-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--base-selection-background-color: (
'default': $--n-input-background-color,
'disabled': change-color($--n-input-background-color, $alpha: alpha($--n-input-background-color) * $--n-disabled-opacity),
'disabled': $--n-disabled-background-color,
'active': change-color($--n-primary-color, $alpha: 0.1),
'error-focus': change-color($--n-error-color, $alpha: 0.1),
) !global;

22
styles/themes/dark/components/Pagination.scss
View File

@ -1,20 +1,22 @@
@mixin setup-dark-pagination {
$--pagination-item-text-color: (
"default": $--n-secondary-text-color,
"hover": $--n-primary-color,
"active": $--n-primary-color
'default': $--n-secondary-text-color,
'hover': $--n-primary-color,
'active': $--n-primary-color,
'disabled': $--n-disabled-text-color
) !global;
$--pagination-item-background-color: (
"default": transparent,
"active": change-color($--n-primary-color, $alpha: .2)
'default': transparent,
'active': change-color($--n-primary-color, $alpha: .2),
'disabled': $--n-disabled-background-color
) !global;
$--pagination-item-border-color: (
"default": $--n-border-color,
"active": $--n-primary-color
'default': $--n-border-color,
'active': $--n-primary-color,
'disabled': transparent
) !global;
$--pagination-text-color: (
"default": $--n-secondary-text-color,
"disabled": $--n-disabled-text-color
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--pagination-disabled-opacity: $--n-disabled-opacity !global;
}

5
styles/themes/light/components/BaseSelection.scss
View File

@ -1,5 +1,8 @@
@mixin setup-light-base-selection {
$--base-selection-color: $--n-secondary-text-color !global;
$--base-selection-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--base-selection-background-color: (
'default': white,
'disabled': $--n-disabled-background-color,

22
styles/themes/light/components/Pagination.scss
View File

@ -1,20 +1,22 @@
@mixin setup-light-pagination {
$--pagination-item-text-color: (
"default": $--n-secondary-text-color,
"hover": $--n-primary-color,
"active": $--n-primary-color
'default': $--n-secondary-text-color,
'hover': $--n-primary-color,
'active': $--n-primary-color,
'disabled': $--n-disabled-text-color
) !global;
$--pagination-item-background-color: (
"default": transparent,
"active": change-color($--n-primary-color, $alpha: .15)
'default': transparent,
'active': change-color($--n-primary-color, $alpha: .15),
'disabled': $--n-disabled-background-color
) !global;
$--pagination-item-border-color: (
"default": $--n-border-color,
"active": $--n-primary-color
'default': $--n-border-color,
'active': $--n-primary-color,
'disabled': $--n-border-color
) !global;
$--pagination-text-color: (
"default": $--n-secondary-text-color,
"disabled": $--n-disabled-text-color
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--pagination-disabled-opacity: $--n-disabled-opacity !global;
}

7
think.md
View File

@ -131,7 +131,7 @@ Previously, it would not work with single quotes:
18. cascader select menu disabled 选项
19. icon 的默认 stroke
20. tree 组件
21. 文件上传组件
21. <del>文件上传组件</del>
22. custom-input 废弃或者重构
23. Date 键盘操作 Time 键盘操作
24. Time 格式化
@ -143,9 +143,9 @@ Previously, it would not work with single quotes:
30. 逐步放宽对宽度必需传 number 的现实，尤其是对于 table
31. <del>BaseLoading 代替 Log 里的 Spin</del>
32. Modal 内部组件的卸载方式
33. Anchor 的另一种模式，追踪内容按照的是中间范围而不是自身大小
33. <del>Anchor 的另一种模式，追踪内容按照的是中间范围而不是自身大小</del>
34. <del>bug md-loader alert 内的 code 不显示</del> 不是 bug，md 就这么渲染
35. backtop mounted blink
35. <del>backtop mounted blink</del>
36. <del>Tab keep alive</del>
37. Cascader submenu 的 lightbar 用 base tracking rect 代替
38. Dropdown 样式微调
@ -156,6 +156,7 @@ Previously, it would not work with single quotes:
43. Tab 文档待更新
44. Icon 文档待更新
45. 统一 next 回调和 Promise API 为 Promise API，应该有三四个组件用到了
46. Date Picker 的 format 文档内容
```