mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
Merge remote-tracking branch 'upstream/develop' into develop
# Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
This commit is contained in:
songwanli2025@163.com
commit
b0d3ddfdef
@ -127,10 +127,6 @@ export default {
|
||||
name: 'Icon',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-icon'
|
||||
},
|
||||
{
|
||||
name: 'Menu',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-menu'
|
||||
},
|
||||
{
|
||||
name: 'Tag',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tag'
|
||||
@ -263,7 +259,7 @@ export default {
|
||||
path: `/${this.lang}/${this.theme}` + '/n-loading-bar'
|
||||
},
|
||||
{
|
||||
name: 'Menu (in progress)',
|
||||
name: 'Menu',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-menu'
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# Config Consumer
|
||||
Config Consumer is built for get global config of Naive UI. It will help when you want to build a component which support themes or other mutable features.
|
||||
Config Consumer is built for getting config (usually as global config) of Config Provider. It will be helpful when you want to build a component which supports themes or other mutable features.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
theme-environment
|
||||
```
|
||||
@ -0,0 +1,25 @@
|
||||
# Theme Environment
|
||||
```html
|
||||
<n-button @click="theme = 'dark'">Dark Theme</n-button>
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
<n-config-provider :theme="theme" :theme-environment="env">
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ themeEnvironment }">
|
||||
{{ themeEnvironment }}
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
</n-config-provider>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme: 'light',
|
||||
env: {
|
||||
dark: 'Dark 666',
|
||||
light: 'Light 666'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -5,4 +5,6 @@ Config Provider is using to set global theme and set namespace for components (d
|
||||
theme
|
||||
namespace
|
||||
inherit-theme
|
||||
theme-environment
|
||||
transparent
|
||||
```
|
||||
@ -0,0 +1,25 @@
|
||||
# Theme Environment
|
||||
```html
|
||||
<n-button @click="theme = 'dark'">Dark Theme</n-button>
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
<n-config-provider :theme="theme" :theme-environment="env">
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ themeEnvironment }">
|
||||
{{ themeEnvironment }}
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
</n-config-provider>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme: 'light',
|
||||
env: {
|
||||
dark: 'Dark 666',
|
||||
light: 'Light 666'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,26 @@
|
||||
# Transparent
|
||||
If you don't need wrapper DOM, set it to transparent.
|
||||
```html
|
||||
<n-button @click="theme = 'dark'">Dark Theme</n-button>
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
<n-config-provider :theme="theme" :theme-environment="env" transparent>
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ themeEnvironment }">
|
||||
No Wrapper DOM: {{ themeEnvironment }}
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
</n-config-provider>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme: 'light',
|
||||
env: {
|
||||
dark: 'Dark 666',
|
||||
light: 'Light 666'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -76,27 +76,24 @@ export default {
|
||||
methods: {
|
||||
handlePasswordInput () {
|
||||
if (this.model.reenteredPassword) {
|
||||
this.$refs.reenteredPassword.validate('password-input', ({
|
||||
valid,
|
||||
errors
|
||||
}) => {
|
||||
if (valid) {
|
||||
this.$NMessage.success('password ok')
|
||||
this.$refs.reenteredPassword.validate('password-input', (errors => {
|
||||
if (!errors) {
|
||||
this.$NMessage.success('Valid')
|
||||
} else {
|
||||
console.log(errors)
|
||||
this.$NMessage.error('password not ok')
|
||||
this.$NMessage.error('Invalid')
|
||||
}
|
||||
})
|
||||
}))
|
||||
}
|
||||
},
|
||||
handleValidateButtonClick (e) {
|
||||
e.preventDefault()
|
||||
this.$refs.form.validate((valid, errors) => {
|
||||
console.log(valid, errors)
|
||||
if (valid) {
|
||||
this.$NMessage.success(String(valid))
|
||||
this.$refs.form.validate(errors => {
|
||||
if (!errors) {
|
||||
this.$NMessage.success('Valid')
|
||||
} else {
|
||||
this.$NMessage.error(String(valid))
|
||||
console.log(errors)
|
||||
this.$NMessage.error('Invalid')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -212,12 +212,12 @@ export default {
|
||||
methods: {
|
||||
handleValidateButtonClick (e) {
|
||||
e.preventDefault()
|
||||
this.$refs.form.validate((valid, errors) => {
|
||||
console.log(valid, errors)
|
||||
if (valid) {
|
||||
this.$NMessage.success(String(valid))
|
||||
this.$refs.form.validate(errors => {
|
||||
if (!errors) {
|
||||
this.$NMessage.success('Valid')
|
||||
} else {
|
||||
this.$NMessage.error(String(valid))
|
||||
console.log(errors)
|
||||
this.$NMessage.error('Invalid')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -60,12 +60,12 @@ export default {
|
||||
methods: {
|
||||
handleValidateClick (e) {
|
||||
e.preventDefault()
|
||||
this.$refs.form.validate((valid, errors) => {
|
||||
if (valid) {
|
||||
this.$NMessage.success(String(valid))
|
||||
this.$refs.form.validate(errors => {
|
||||
if (!errors) {
|
||||
this.$NMessage.success('Valid')
|
||||
} else {
|
||||
console.log(errors)
|
||||
this.$NMessage.error(String(valid))
|
||||
this.$NMessage.error('Invalid')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -207,12 +207,12 @@ export default {
|
||||
methods: {
|
||||
handleValidateButtonClick (e) {
|
||||
e.preventDefault()
|
||||
this.$refs.form.validate((valid, errors) => {
|
||||
console.log(valid, errors)
|
||||
if (valid) {
|
||||
this.$NMessage.success(String(valid))
|
||||
this.$refs.form.validate(errors => {
|
||||
if (!errors) {
|
||||
this.$NMessage.success('Valid')
|
||||
} else {
|
||||
this.$NMessage.error(String(valid))
|
||||
console.log(errors)
|
||||
this.$NMessage.error('Invalid')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<div class="theme-picker">
|
||||
<n-select
|
||||
v-model="NApp.$parent.theme"
|
||||
v-model="NConfigProvider.$parent.theme"
|
||||
size="small"
|
||||
:options="options"
|
||||
/>
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
document.body.focus()
|
||||
},
|
||||
handleThemeChange (theme) {
|
||||
this.NApp.$parent.theme = theme
|
||||
this.NConfigProvider.$parent.theme = theme
|
||||
},
|
||||
handleLangInput (lang) {
|
||||
this.$emit('lang-change', lang)
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
.n-app--light-theme .markdown {
|
||||
.n-config-provider--light-theme .markdown {
|
||||
p, li, code {
|
||||
color: $--n-secondary-text-color;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.5.18",
|
||||
"version": "0.5.21",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
>
|
||||
<circle
|
||||
:style="{
|
||||
strokeWidth
|
||||
strokeWidth,
|
||||
stroke
|
||||
}"
|
||||
class="n-base-loading-circular-path"
|
||||
cx="50"
|
||||
@ -32,6 +33,10 @@ export default {
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
stroke: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@ -32,10 +32,11 @@
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import asthemecontext from '../../../mixins/asthemecontext'
|
||||
|
||||
export default {
|
||||
name: 'NAvatar',
|
||||
mixins: [withapp, themeable],
|
||||
mixins: [withapp, themeable, asthemecontext],
|
||||
props: {
|
||||
size: {
|
||||
type: [String, Number],
|
||||
|
||||
@ -31,16 +31,14 @@
|
||||
>
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
:class="{
|
||||
'simulate-hollow-out-stroke': simulateHollowOut
|
||||
}"
|
||||
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
|
||||
:size="null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
:class="{
|
||||
'simulate-hollow-out-fill': simulateHollowOut
|
||||
:style="{
|
||||
fill: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
class="n-icon-slot"
|
||||
>
|
||||
@ -53,10 +51,9 @@
|
||||
<div
|
||||
v-if="!circle && $slots.default"
|
||||
class="n-button__content"
|
||||
:class="{
|
||||
'simulate-hollow-out-text': simulateHollowOut
|
||||
:style="{
|
||||
color: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
:style="style"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
@ -77,16 +74,14 @@
|
||||
>
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
:class="{
|
||||
'simulate-hollow-out-stroke': simulateHollowOut
|
||||
}"
|
||||
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
class="n-icon-slot"
|
||||
:class="{
|
||||
'simulate-hollow-out-fill': simulateHollowOut
|
||||
:style="{
|
||||
fill: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
>
|
||||
<slot
|
||||
@ -172,7 +167,6 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
style: {},
|
||||
enterPressed: false,
|
||||
rippling: false,
|
||||
rippleTimer: null
|
||||
|
||||
@ -6,18 +6,26 @@ export default {
|
||||
name: 'NConfigConsumer',
|
||||
mixins: [ withapp, themeable ],
|
||||
watch: {
|
||||
'NApp.theme': function (value, oldValue) {
|
||||
'NConfigProvider.theme': function (value, oldValue) {
|
||||
this.$emit('theme-change', value, oldValue)
|
||||
},
|
||||
'NApp.namespace': function (value, oldValue) {
|
||||
'NConfigProvider.namespace': function (value, oldValue) {
|
||||
this.$emit('namespace-change', value, oldValue)
|
||||
},
|
||||
'NConfigProvider.themeEnvironment': function (value, oldValue) {
|
||||
this.$emit('theme-environment-change', value, oldValue)
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
return this.$scopedSlots.default ? this.$scopedSlots.default({
|
||||
const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default({
|
||||
theme: this.synthesizedTheme,
|
||||
namespace: this.NApp ? this.NApp.namespace : null
|
||||
namespace: this.NConfigProvider ? this.NConfigProvider.namespace : null,
|
||||
themeEnvironment: this.synthesizedThemeEnvironment
|
||||
}) : []
|
||||
if (defaultSlot.length > 1) {
|
||||
console.warn('[naive-ui/config-consumer]: Config consumer only takes single child node')
|
||||
}
|
||||
return [defaultSlot[0]]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,16 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-app"
|
||||
:class="{
|
||||
[`n-app--${theme}-theme`]: theme,
|
||||
[`n-${theme}-theme`]: theme
|
||||
}"
|
||||
:style="synthesizedStyle"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
@ -19,19 +6,45 @@ export default {
|
||||
mixins: [themeable],
|
||||
provide () {
|
||||
return {
|
||||
NApp: this
|
||||
NConfigProvider: this
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
NApp: {
|
||||
NConfigProvider: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
transparent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
namespace: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
themeEnvironment: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default() : []
|
||||
if (this.transparent) {
|
||||
if (defaultSlot.length > 1) {
|
||||
console.warn('[naive-ui/config-provider]: Config provider only takes single child node in transparent mode.')
|
||||
}
|
||||
}
|
||||
return !this.transparent ? h('div', {
|
||||
staticClass: 'n-config-provider',
|
||||
class: {
|
||||
[`n-config-provider--${this.theme}-theme`]: this.theme,
|
||||
[`n-${this.theme}-theme`]: this.theme
|
||||
},
|
||||
style: this.synthesizedStyle
|
||||
},
|
||||
defaultSlot)
|
||||
: defaultSlot[0]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -209,7 +209,7 @@ export default {
|
||||
handleContentInput () {
|
||||
this._validate('input')
|
||||
},
|
||||
validate (trigger = null, afterValidate, options = null) {
|
||||
validate (trigger = null, afterValidate, options) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this._validate(trigger, options).then(({
|
||||
valid,
|
||||
@ -217,18 +217,13 @@ export default {
|
||||
}) => {
|
||||
if (valid) {
|
||||
if (afterValidate) {
|
||||
afterValidate({
|
||||
valid
|
||||
})
|
||||
afterValidate()
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
} else {
|
||||
if (afterValidate) {
|
||||
afterValidate({
|
||||
valid,
|
||||
errors
|
||||
})
|
||||
afterValidate(errors)
|
||||
} else {
|
||||
// eslint-disable-next-line prefer-promise-reject-errors
|
||||
reject({
|
||||
@ -239,7 +234,9 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
_validate (trigger = null, options = null) {
|
||||
_validate (trigger = null, options = {
|
||||
suppressWarning: true
|
||||
}) {
|
||||
if (!this.path) {
|
||||
throw new Error('[naive-ui/form-item/validate]: validate form-item without path')
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import NFormItemCol from './FormItemCol'
|
||||
import NRow from '../../Grid/src/main'
|
||||
import NRow from '../../Grid/src/Row'
|
||||
import NFormItem from './FormItem'
|
||||
|
||||
export default {
|
||||
|
||||
@ -88,12 +88,12 @@ export default {
|
||||
if (results.some(result => !result.valid)) {
|
||||
const errors = results.filter(result => result.errors).map(result => result.errors)
|
||||
if (afterValidate) {
|
||||
afterValidate(false, errors)
|
||||
afterValidate(errors)
|
||||
} else {
|
||||
reject(errors)
|
||||
}
|
||||
} else {
|
||||
if (afterValidate) afterValidate(true)
|
||||
if (afterValidate) afterValidate()
|
||||
else {
|
||||
resolve()
|
||||
}
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
/* istanbul ignore file */
|
||||
import Grid from './src/main.vue'
|
||||
import Row from './src/Row.vue'
|
||||
import Col from './src/Col.vue'
|
||||
|
||||
Grid.install = function (Vue) {
|
||||
Vue.component(Grid.name, Grid)
|
||||
Vue.component(Col.name, Col)
|
||||
const Grid = {
|
||||
install: function (Vue) {
|
||||
Vue.component(Row.name, Row)
|
||||
Vue.component(Col.name, Col)
|
||||
}
|
||||
}
|
||||
|
||||
export default Grid
|
||||
|
||||
@ -65,9 +65,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.n-row {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -59,9 +59,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.n-row {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -3,8 +3,7 @@
|
||||
class="n-radio-button"
|
||||
:class="{
|
||||
'n-radio-button--disabled': disabled,
|
||||
'n-radio-button--checked': checked,
|
||||
'simulate-hollow-out-text': shouldSimulateHollowOutText
|
||||
'n-radio-button--checked': checked
|
||||
}"
|
||||
:tabindex="disabled ? -1 : 0"
|
||||
@keyup.enter="handleKeyUpEnter"
|
||||
@ -42,9 +41,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldSimulateHollowOutText () {
|
||||
return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
|
||||
},
|
||||
// shouldSimulateHollowOutText () {
|
||||
// return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
|
||||
// },
|
||||
checked () {
|
||||
if (this.NRadioGroup) {
|
||||
return this.NRadioGroup.value === this.value
|
||||
|
||||
@ -23,14 +23,17 @@
|
||||
<div
|
||||
v-for="mark in computedMarks"
|
||||
:key="mark.label"
|
||||
class="n-slider-dot simulate-hollow-out-background"
|
||||
:style="mark.style"
|
||||
class="n-slider-dot"
|
||||
:style="{
|
||||
backgroundColor: ascendantBackgroundColor,
|
||||
...mark.style
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="firstHandle"
|
||||
class="n-slider-handle simulate-hollow-out-background"
|
||||
class="n-slider-handle"
|
||||
tabindex="0"
|
||||
:style="firstHandleStyle"
|
||||
@mousedown="handleFirstHandleMouseDown"
|
||||
@ -40,7 +43,7 @@
|
||||
<div
|
||||
v-if="range"
|
||||
ref="secondHandle"
|
||||
class="n-slider-handle simulate-hollow-out-background"
|
||||
class="n-slider-handle"
|
||||
tabindex="0"
|
||||
:style="secondHandleStyle"
|
||||
@mousedown="handleSecondHandleMouseDown"
|
||||
@ -221,12 +224,14 @@ export default {
|
||||
},
|
||||
firstHandleStyle () {
|
||||
return {
|
||||
backgroundColor: this.ascendantBackgroundColor,
|
||||
left: ((this.firstHandleValue - this.min) / (this.max - this.min) * 100) + '%',
|
||||
zIndex: this.firstHandleActive ? 1 : 0
|
||||
}
|
||||
},
|
||||
secondHandleStyle () {
|
||||
return {
|
||||
backgroundColor: this.ascendantBackgroundColor,
|
||||
left: ((this.secondHandleValue - this.min) / (this.max - this.min) * 100) + '%',
|
||||
zIndex: this.secondHandleActive ? 1 : 0
|
||||
}
|
||||
|
||||
@ -5,12 +5,13 @@
|
||||
>
|
||||
<transition name="n-spin--transition">
|
||||
<n-base-loading
|
||||
v-if="spinning"
|
||||
:class="{
|
||||
[`n-spin--${size}-size`]: true
|
||||
}"
|
||||
:stroke="stroke"
|
||||
:stroke-width="strokeWidth"
|
||||
:theme="synthesizedTheme"
|
||||
v-if="spinning"
|
||||
class="n-spin"
|
||||
/>
|
||||
</transition>
|
||||
@ -24,12 +25,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<n-base-loading
|
||||
v-else
|
||||
:class="{
|
||||
[`n-spin--${size}-size`]: size
|
||||
}"
|
||||
:stroke="stroke"
|
||||
:stroke-width="strokeWidth"
|
||||
:theme="synthesizedTheme"
|
||||
v-else
|
||||
class="n-spin"
|
||||
/>
|
||||
</template>
|
||||
@ -46,6 +48,10 @@ export default {
|
||||
},
|
||||
mixins: [withapp, themeable],
|
||||
props: {
|
||||
stroke: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 'medium'
|
||||
|
||||
@ -13,20 +13,22 @@
|
||||
>
|
||||
<n-icon
|
||||
v-if="synthesizedStatus === 'finish'"
|
||||
type="md-checkmark"
|
||||
/>
|
||||
>
|
||||
<md-checkmark />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
v-else-if="synthesizedStatus === 'error'"
|
||||
type="md-close"
|
||||
/>
|
||||
>
|
||||
<md-close />
|
||||
</n-icon>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="n-step-indicator--transition">
|
||||
<div
|
||||
v-if="!(synthesizedStatus === 'finish' || synthesizedStatus === 'error')"
|
||||
class="n-step-indicator__index"
|
||||
:class="{
|
||||
'simulate-hollow-out-text': synthesizedStatus === 'process'
|
||||
:style="{
|
||||
color: synthesizedStatus === 'process' ? ascendantBackgroundColor : null
|
||||
}"
|
||||
>
|
||||
{{ index }}
|
||||
@ -53,6 +55,8 @@
|
||||
<script>
|
||||
import NIcon from '../../Icon'
|
||||
import hollowoutable from '../../../mixins/hollowoutable'
|
||||
import mdClose from '../../../icons/md-close'
|
||||
import mdCheckmark from '../../../icons/md-checkmark'
|
||||
|
||||
export default {
|
||||
name: 'NStep',
|
||||
@ -62,7 +66,9 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
NIcon
|
||||
NIcon,
|
||||
mdCheckmark,
|
||||
mdClose
|
||||
},
|
||||
mixins: [hollowoutable],
|
||||
props: {
|
||||
|
||||
@ -7,7 +7,12 @@
|
||||
>
|
||||
<div class="n-timeline-item-timeline">
|
||||
<div class="n-timeline-item-timeline__line" />
|
||||
<div class="n-timeline-item-timeline__circle simulate-hollow-out-background" />
|
||||
<div
|
||||
class="n-timeline-item-timeline__circle"
|
||||
:style="{
|
||||
backgroundColor: ascendantBackgroundColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="n-timeline-item-content">
|
||||
<div
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import HollowOutStyleManager from '../utils/HollowOutStyleManager'
|
||||
// import HollowOutStyleManager from '../utils/HollowOutStyleManager'
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
@ -11,8 +11,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ascendantBackgroundColor: null,
|
||||
CSSNode: null
|
||||
ascendantBackgroundColor: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -38,17 +37,17 @@ export default {
|
||||
break
|
||||
}
|
||||
}
|
||||
HollowOutStyleManager.registerComponent(this.hollowOutBackgroundColorId, this.ascendantBackgroundColor)
|
||||
// HollowOutStyleManager.registerComponent(this.hollowOutBackgroundColorId, this.ascendantBackgroundColor)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
|
||||
this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
|
||||
// this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
|
||||
// this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
|
||||
if (this.avoidHollowOut) return
|
||||
this.updateHollowOutStyle()
|
||||
},
|
||||
beforeDestroy () {
|
||||
const id = this.hollowOutBackgroundColorId
|
||||
HollowOutStyleManager.unregisterComponent(id, 1000)
|
||||
// const id = this.hollowOutBackgroundColorId
|
||||
// HollowOutStyleManager.unregisterComponent(id, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ export default {
|
||||
} else if (this.NThemedComponent && this.NThemedComponent.synthesizedTheme) {
|
||||
return this.NThemedComponent.synthesizedTheme
|
||||
} else {
|
||||
return (this.NApp && this.NApp.synthesizedTheme) || null
|
||||
return (this.NConfigProvider && this.NConfigProvider.synthesizedTheme) || null
|
||||
}
|
||||
},
|
||||
synthesizedStyle () {
|
||||
@ -29,6 +29,11 @@ export default {
|
||||
return this.themedStyle[this.synthesizedTheme]
|
||||
}
|
||||
return null
|
||||
},
|
||||
synthesizedThemeEnvironment () {
|
||||
if (this.synthesizedTheme && this.NConfigProvider && this.NConfigProvider.themeEnvironment) {
|
||||
return this.NConfigProvider.themeEnvironment[this.synthesizedTheme] || null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
export default {
|
||||
inject: {
|
||||
NApp: {
|
||||
NConfigProvider: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
namespace () {
|
||||
return (this.NApp && this.NApp.namespace) || null
|
||||
return (this.NConfigProvider && this.NConfigProvider.namespace) || null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
class HollowOutStyleManager {
|
||||
constructor () {
|
||||
this.idStyleMap = new Map()
|
||||
this.CSSNode = document.createElement('style')
|
||||
this.CSSNode.type = 'text/css'
|
||||
}
|
||||
styleForComponent (id, backgroundColor) {
|
||||
if (!backgroundColor) return ''
|
||||
return `[n-hollowoutable-id=${id}] .simulate-hollow-out-text {
|
||||
color: ${backgroundColor}!important;
|
||||
}
|
||||
[n-hollowoutable-id=${id}] .simulate-hollow-out-background {
|
||||
background-color: ${backgroundColor}!important;
|
||||
}
|
||||
[n-hollowoutable-id=${id}] .simulate-hollow-out-stroke circle {
|
||||
stroke: ${backgroundColor}!important;
|
||||
}
|
||||
[n-hollowoutable-id=${id}] .simulate-hollow-out-fill path {
|
||||
fill: ${backgroundColor}!important;
|
||||
}
|
||||
`
|
||||
}
|
||||
get styleLiteral () {
|
||||
let style = ''
|
||||
this.idStyleMap.forEach((value) => {
|
||||
style += value
|
||||
})
|
||||
// console.log('styleLiteral', style)
|
||||
return style
|
||||
}
|
||||
updateCSSNode () {
|
||||
this.CSSNode.innerHTML = this.styleLiteral
|
||||
const headEl = document.querySelector('head')
|
||||
if (!headEl.contains(this.CSSNode)) {
|
||||
headEl.appendChild(this.CSSNode)
|
||||
}
|
||||
}
|
||||
registerComponent (id, backgroundColor) {
|
||||
// console.log('registerComponent', id, backgroundColor)
|
||||
this.idStyleMap.set(id, this.styleForComponent(id, backgroundColor))
|
||||
this.updateCSSNode()
|
||||
}
|
||||
unregisterComponent (id, delay) {
|
||||
this.idStyleMap.delete(id)
|
||||
window.setTimeout(() => {
|
||||
this.updateCSSNode()
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
export default new HollowOutStyleManager()
|
||||
@ -5,7 +5,7 @@ function getTheme (component) {
|
||||
if (cursor.synthesizedTheme) {
|
||||
return cursor.synthesizedTheme
|
||||
}
|
||||
if (name === 'NApp') {
|
||||
if (name === 'NConfigProvider') {
|
||||
return cursor.theme || null
|
||||
}
|
||||
cursor = cursor.$parent
|
||||
|
||||
@ -1,5 +1 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@include b(app) {
|
||||
position: relative;
|
||||
}
|
||||
@import './mixins/mixins.scss';
|
||||
@ -19,33 +19,35 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(avatar) {
|
||||
@include avatar-size-mixin('small');
|
||||
@include avatar-size-mixin('medium');
|
||||
@include avatar-size-mixin('large');
|
||||
@include b(icon) {
|
||||
transition: fill .3s $default-cubic-bezier;
|
||||
fill: white;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
color: white;
|
||||
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
|
||||
background-color: $--overlay-5;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@include e(text) {
|
||||
white-space: nowrap;
|
||||
@include once {
|
||||
@include avatar-size-mixin('small');
|
||||
@include avatar-size-mixin('medium');
|
||||
@include avatar-size-mixin('large');
|
||||
@include b(icon) {
|
||||
transition: fill .3s $default-cubic-bezier;
|
||||
fill: white;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
color: white;
|
||||
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@include e(text) {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
background-color: $--avatar-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './themes/vars.scss';
|
||||
|
||||
@include b(row) {
|
||||
@include m(flex) {
|
||||
|
||||
@ -2,102 +2,122 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(layout) {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
transition: margin-left .3s $default-cubic-bezier;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
@include m(has-sider) {
|
||||
flex-direction: row;
|
||||
& > {
|
||||
@include b(layout) {
|
||||
flex: 1;
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
transition: margin-left .3s $default-cubic-bezier;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
@include m(has-sider) {
|
||||
flex-direction: row;
|
||||
& > {
|
||||
@include b(layout) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(layout-header) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: $--n-card-color;
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@include once {
|
||||
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
background-color: $--layout-header-background-color;
|
||||
@include m(bordered) {
|
||||
border-bottom: solid 1px $--n-divider-color;
|
||||
border-bottom: solid 1px $--layout-header-border-color;
|
||||
}
|
||||
}
|
||||
@include b(layout-content) {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
transition: margin-left .3s $default-cubic-bezier;
|
||||
}
|
||||
@include b(layout-footer) {
|
||||
box-sizing: border-box;
|
||||
@include m(bordered) {
|
||||
border-top: solid 1px $--n-divider-color;
|
||||
@include once {
|
||||
transition: border-color .3s $default-cubic-bezier;
|
||||
box-sizing: border-box;
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@include m(bordered) {
|
||||
border-top: solid 1px $--layout-footer-border-color;
|
||||
}
|
||||
}
|
||||
@include b(layout-sider) {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: $--n-card-color;
|
||||
transition: min-width .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, transform .3s $default-cubic-bezier;
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
transition: min-width .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, transform .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
}
|
||||
background-color: $--layout-sider-background-color;
|
||||
@include e(toggle-button) {
|
||||
z-index: 1;
|
||||
transition: transform .3s $default-cubic-bezier;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
path {
|
||||
transition: fill .3s $default-cubic-bezier;
|
||||
fill: $service-layout-toggle-button-color;
|
||||
@include once {
|
||||
z-index: 1;
|
||||
transition: transform .3s $default-cubic-bezier;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
}
|
||||
path {
|
||||
@include once {
|
||||
transition: fill .3s $default-cubic-bezier;
|
||||
}
|
||||
fill: $--layout-sider-toggle-button-fill;
|
||||
}
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
}
|
||||
@include e(content) {
|
||||
opacity: 0;
|
||||
transition: opacity .3s $default-cubic-bezier,;
|
||||
}
|
||||
@include m(show-content) {
|
||||
@include once {
|
||||
@include e(content) {
|
||||
opacity: 1;
|
||||
opacity: 0;
|
||||
transition: opacity .3s $default-cubic-bezier;
|
||||
}
|
||||
}
|
||||
@include once {
|
||||
@include m(show-content) {
|
||||
@include e(content) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include m(collapsed) {
|
||||
@include e(toggle-button) {
|
||||
transform: translateX(50%) translateY(-50%) rotate(180deg);
|
||||
}
|
||||
}
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@include m(bordered) {
|
||||
border-right: solid 1px $--n-divider-color;
|
||||
}
|
||||
@include m(collapsed) {
|
||||
@include e(toggle-button) {
|
||||
transform: translateX(50%) translateY(-50%) rotate(180deg);
|
||||
}
|
||||
}
|
||||
@include m(absolute-positioned) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-right: solid 1px $--layout-sider-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -136,14 +136,16 @@
|
||||
}
|
||||
&::before { // item background
|
||||
content: "";
|
||||
background-size: 300%;
|
||||
background-image: $service-layout-item-background-image;
|
||||
background-position: $--service-layout-item-background-position;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s $default-cubic-bezier;
|
||||
transition: opacity 0.3s $default-cubic-bezier, background-position .3s $default-cubic-bezier;
|
||||
opacity: 0;
|
||||
}
|
||||
@include m(active) {
|
||||
|
||||
@ -141,7 +141,7 @@
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
@include e(border-mask) {
|
||||
box-shadow: inset 0 0 0 $--radio-border-mask-width map-get($--radio-button-border-color, 'hover');
|
||||
box-shadow: map-get($--radio-button-box-shadow, 'hover');
|
||||
transition: box-shadow .3s $default-cubic-bezier;
|
||||
}
|
||||
@include not-m(checked) {
|
||||
@ -150,7 +150,7 @@
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include e(border-mask) {
|
||||
box-shadow: inset 0 0 0 1px map-get($--radio-button-label-color, 'active'), 0 0 0 2px change-color(map-get($--radio-button-label-color, 'active'), $alpha: .3);
|
||||
box-shadow: map-get($--radio-button-box-shadow, 'focus')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
top: 50%;
|
||||
right: 0;
|
||||
@include b(slider-dot) {
|
||||
transition: box-shadow .3s $default-cubic-bezier;
|
||||
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
height: $--slider-dot-size;
|
||||
|
||||
@ -17,9 +17,12 @@
|
||||
@include b(step-indicator) {
|
||||
background-color: map-get($--steps-step-background-color, $status);
|
||||
box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status);
|
||||
@include e(icon, index) {
|
||||
@include e(index) {
|
||||
color: map-get($--steps-step-indicator-color, $status);
|
||||
}
|
||||
@include e(icon) {
|
||||
fill: map-get($--steps-step-indicator-color, $status);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -95,7 +98,7 @@
|
||||
@include e(icon) {
|
||||
@include fade-in-transition-ease-in-out(step-indicator, .3s);
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
color: rgba(255,255,255,0.3);
|
||||
fill: rgba(255,255,255,0.3);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
|
||||
3
styles/themes/dark/components/Avatar.scss
Normal file
3
styles/themes/dark/components/Avatar.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@mixin setup-dark-avatar {
|
||||
$--avatar-background-color: $--overlay-5 !global;
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
@mixin setup-dark-layout {
|
||||
|
||||
$--layout-header-background-color: $--n-card-color !global;
|
||||
$--layout-header-border-color: $--n-divider-color !global;
|
||||
$--layout-footer-border-color: $--n-divider-color !global;
|
||||
$--layout-sider-border-color: $--n-divider-color !global;
|
||||
$--layout-sider-background-color: $--n-card-color !global;
|
||||
$--layout-sider-toggle-button-fill: rgba(255, 255, 255, .3)!global;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
$service-layout-color: $--n-secondary-text-color !global;
|
||||
$service-layout-border-color: $--n-divider-color !global;
|
||||
$service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
|
||||
$service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
|
||||
$service-layout-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
|
||||
$--service-kayout-item-active-color: $--primary-6 !global;
|
||||
$--service-layout-item-background-position: 0% !global;
|
||||
}
|
||||
@ -22,9 +22,13 @@
|
||||
) !global;
|
||||
$--radio-button-label-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'active': $--n-primary-color,
|
||||
'active': black,
|
||||
'hover': $--n-primary-color
|
||||
) !global;
|
||||
$--radio-disabled-opacity: .4 !global;
|
||||
$--radio-border-mask-width: 1px !global;
|
||||
$--radio-button-box-shadow: (
|
||||
'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
|
||||
'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color
|
||||
) !global;
|
||||
}
|
||||
@ -52,6 +52,7 @@
|
||||
@import "components/Card.scss";
|
||||
@import "components/AutoComplete.scss";
|
||||
@import "components/Affix.scss";
|
||||
@import "components/Avatar.scss";
|
||||
|
||||
@mixin setup-dark-theme() {
|
||||
@include setup-dark-colors();
|
||||
@ -131,4 +132,5 @@
|
||||
@include setup-dark-card;
|
||||
@include setup-dark-auto-complete;
|
||||
@include setup-dark-affix;
|
||||
@include setup-dark-avatar;
|
||||
}
|
||||
|
||||
3
styles/themes/light/components/Avatar.scss
Normal file
3
styles/themes/light/components/Avatar.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@mixin setup-light-avatar {
|
||||
$--avatar-background-color: $--overlay-5 !global;
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
@mixin setup-light-layout {
|
||||
|
||||
$--layout-header-background-color: $--n-card-color !global;
|
||||
$--layout-header-border-color: $--n-divider-color !global;
|
||||
$--layout-footer-border-color: $--n-divider-color !global;
|
||||
$--layout-sider-border-color: $--n-divider-color !global;
|
||||
$--layout-sider-background-color: $--n-card-color !global;
|
||||
$--layout-sider-toggle-button-fill: rgba(0, 0, 0, .15) !global;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
$service-layout-color: $--n-text-color !global ;
|
||||
$service-layout-border-color: $--n-divider-color !global;
|
||||
$service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
|
||||
$service-layout-item-background-image: linear-gradient(47deg, $--neutral-7, $--neutral-7) !global;
|
||||
$service-layout-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
|
||||
$--service-kayout-item-active-color: $--primary-6 !global;
|
||||
$--service-layout-item-background-position: 100% !global;
|
||||
}
|
||||
@ -27,4 +27,8 @@
|
||||
) !global;
|
||||
$--radio-disabled-opacity: .4 !global;
|
||||
$--radio-border-mask-width: 0px !global;
|
||||
$--radio-button-box-shadow: (
|
||||
'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
|
||||
'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color
|
||||
) !global;
|
||||
}
|
||||
@ -52,6 +52,7 @@
|
||||
@import "components/Card.scss";
|
||||
@import "components/AutoComplete.scss";
|
||||
@import "components/Affix.scss";
|
||||
@import "components/Avatar.scss";
|
||||
|
||||
@mixin setup-light-theme() {
|
||||
@include setup-light-colors();
|
||||
@ -130,4 +131,5 @@
|
||||
@include setup-light-card;
|
||||
@include setup-light-auto-complete;
|
||||
@include setup-light-affix;
|
||||
@include setup-light-avatar;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user