mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-13 13:59:04 +08:00
commit
6f9e34bd4c
@ -1,4 +1,4 @@
|
||||
# Ignore-Gap
|
||||
# Ignore Gap
|
||||
```html
|
||||
<div style="height:200px">
|
||||
<n-row :gutter="12">
|
||||
|
@ -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
31
demo/documentation/components/icon/enUS/depth.md
Normal 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
|
||||
}
|
||||
}
|
||||
```
|
@ -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 />
|
||||
|
||||
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
```
|
@ -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
31
demo/documentation/components/icon/zhCN/depth.md
Normal 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
|
||||
}
|
||||
}
|
||||
```
|
@ -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 />
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
```
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|名称|类型|默认值|说明|
|
||||
|
@ -342,7 +342,7 @@ export default function (locale, instance) {
|
||||
},
|
||||
{
|
||||
name: 'Time',
|
||||
title: '事件',
|
||||
title: '时间',
|
||||
titleExtra: 'Time',
|
||||
path: `/${instance.lang}/${instance.theme}` + '/n-time'
|
||||
},
|
||||
|
@ -9,7 +9,7 @@ export default {
|
||||
validator (value) {
|
||||
return ['primary', 'secondary', 'tertiary'].includes(value)
|
||||
},
|
||||
default: 'secondary'
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render (h, context) {
|
||||
|
@ -37,7 +37,7 @@ export default {
|
||||
validator (value) {
|
||||
return ['primary', 'secondary', 'tertiary'].includes(value)
|
||||
},
|
||||
default: 'secondary'
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render (h, context) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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');
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
@ -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,
|
||||
|
@ -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
7
think.md
@ -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 文档内容
|
||||
|
||||
|
||||
```
|
||||
|
Loading…
x
Reference in New Issue
Block a user