mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
fix: lint
This commit is contained in:
songwanli2025@163.com
commit
e84b3d39b7
@ -10,6 +10,7 @@ Button has loading status.
|
||||
</template>
|
||||
Loading
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
icon-position="right"
|
||||
@ -20,6 +21,7 @@ Button has loading status.
|
||||
</template>
|
||||
Loading
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
size="small"
|
||||
@ -27,6 +29,7 @@ Button has loading status.
|
||||
>
|
||||
Loading
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
size="large"
|
||||
@ -34,6 +37,7 @@ Button has loading status.
|
||||
>
|
||||
Loading
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
# Style Scheme
|
||||
|
||||
```html
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<n-code :code="JSON.stringify(styleScheme, 0, 2)" language="js"></n-code>
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
```
|
||||
@ -4,4 +4,5 @@ Config Consumer is built for getting config (usually as global config) of Config
|
||||
```demo
|
||||
basic
|
||||
theme-environment
|
||||
color
|
||||
```
|
||||
14
demo/documentation/components/element/enUS/color.md
Normal file
14
demo/documentation/components/element/enUS/color.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Style Scheme
|
||||
|
||||
```html
|
||||
<n-element as="span" class="myel">
|
||||
<template v-slot="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.textSecondaryColor,
|
||||
transition: `color .3s ${styleScheme.cubicBezierEaseInOut}`
|
||||
}"
|
||||
>{{ JSON.stringify(styleScheme, 0, 2) }}</pre>
|
||||
</template>
|
||||
</n-element>
|
||||
```
|
||||
@ -3,4 +3,5 @@ Element is similar to config consumer but has different class apply to it when t
|
||||
# Demos
|
||||
```demo
|
||||
basic
|
||||
color
|
||||
```
|
||||
@ -1,78 +1,58 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-log
|
||||
:log="log"
|
||||
@reach-top="handleReachTop"
|
||||
@reach-bottom="handleReachBottom"
|
||||
:bottom-loading="bottomLoading"
|
||||
:top-loading="topLoading"
|
||||
trim
|
||||
/>
|
||||
<n-card title="Random String Logs" :segmented="{
|
||||
header: 'soft',
|
||||
content: 'hard'
|
||||
}">
|
||||
<n-log
|
||||
style="margin-top: -12px; margin-bottom: -12px;"
|
||||
:log="log"
|
||||
@reach-top="handleReachTop"
|
||||
@reach-bottom="handleReachBottom"
|
||||
:loading="loading"
|
||||
trim
|
||||
/>
|
||||
<template v-slot:action>
|
||||
<n-button @click="clear">Clear</n-button>
|
||||
</template>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
const log = `
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
|
||||
export default {
|
||||
name: 'NLog',
|
||||
components: {
|
||||
NScrollbar
|
||||
},
|
||||
props: {
|
||||
log: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
lines: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
synthesizedLines () {
|
||||
if (this.lines.length) return this.lines
|
||||
if (!this.log) return []
|
||||
return this.log.split('\\n')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll (e) {
|
||||
|
||||
}
|
||||
function log () {
|
||||
const l = []
|
||||
for (let i = 0; i < 40; ++i) {
|
||||
l.push((Math.random()).toString(16))
|
||||
}
|
||||
return l.join('\n') + '\n'
|
||||
}
|
||||
`
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
topLoading: false,
|
||||
bottomLoading: false,
|
||||
log: log
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loading () {
|
||||
return this.topLoading || this.bottomLoading
|
||||
loading: false,
|
||||
log: log()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear () {
|
||||
this.log = ''
|
||||
},
|
||||
handleReachTop () {
|
||||
if (this.topLoading) return
|
||||
this.topLoading = true
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.log = log + this.log
|
||||
this.topLoading = false
|
||||
}, 3000)
|
||||
this.log = log() + this.log
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
},
|
||||
handleReachBottom () {
|
||||
if (this.bottomLoading) return
|
||||
this.bottomLoading = true
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.log = this.log + log
|
||||
this.bottomLoading = false
|
||||
}, 3000)
|
||||
this.log = this.log + log()
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
# Log
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
loading
|
||||
```
|
||||
36
demo/documentation/components/log/enUS/loading.md
Normal file
36
demo/documentation/components/log/enUS/loading.md
Normal file
@ -0,0 +1,36 @@
|
||||
# Loading
|
||||
```html
|
||||
<n-switch v-model="loading" />
|
||||
<n-card title="Random String Logs" :segmented="{
|
||||
header: 'soft',
|
||||
content: 'hard'
|
||||
}">
|
||||
<n-log
|
||||
style="margin-top: -12px; margin-bottom: -12px;"
|
||||
:loading="loading"
|
||||
:log="log"
|
||||
/>
|
||||
<template v-slot:action>
|
||||
Loading?
|
||||
</template>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
function log () {
|
||||
const l = []
|
||||
for (let i = 0; i < 40; ++i) {
|
||||
l.push((Math.random()).toString(16))
|
||||
}
|
||||
return l.join('\n') + '\n'
|
||||
}
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
log: log()
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -29,9 +29,6 @@ export default {
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-slider {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.n-input-number {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
|
||||
2
index.js
2
index.js
@ -78,7 +78,7 @@ import NimbusConfirmCard from './packages/deprecated/ConfirmCard'
|
||||
*/
|
||||
import Loader from './packages/base/Loading'
|
||||
import CancelMark from './packages/base/CancelMark'
|
||||
import IconTransition from './packages/base/IconTransition'
|
||||
import IconTransition from './packages/transition/IconSwitchTransition'
|
||||
|
||||
const NaiveUI = {
|
||||
install,
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'NBaseIconTransition',
|
||||
data () {
|
||||
return {
|
||||
appear: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick().then(() => {
|
||||
this.appear = true
|
||||
})
|
||||
},
|
||||
render (h) {
|
||||
return h('transition', {
|
||||
props: {
|
||||
name: 'n-icon-transition',
|
||||
appear: this.appear
|
||||
}
|
||||
}, this.$slots.default)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.n-icon-transition-enter, .n-icon-transition-leave-to {
|
||||
/* make sure it apply to element */
|
||||
transform: scale(.75)!important;
|
||||
opacity: 0;
|
||||
}
|
||||
.n-icon-transition-enter-to, .n-icon-transition-leave {
|
||||
transform: scale(0.9999);
|
||||
opacity: 1;
|
||||
}
|
||||
.n-icon-transition-leave-active, .n-icon-transition-enter-active {
|
||||
transform-origin: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition:
|
||||
all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
||||
}
|
||||
</style>
|
||||
@ -13,8 +13,7 @@
|
||||
'n-button--enter-pressed': enterPressed,
|
||||
'n-button--ghost': ghost,
|
||||
'n-button--text': text,
|
||||
[`n-button--${iconPosition}-icon`]:
|
||||
iconPosition && (hasIcon || loading) && !noTextContent,
|
||||
[`n-button--${iconPosition}-icon`]: iconPosition && !noTextContent,
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
:tabindex="synthesizedFocusable ? 0 : -1"
|
||||
@ -23,28 +22,35 @@
|
||||
@keyup.enter="handleKeyUpEnter"
|
||||
@keydown.enter="handleKeyDownEnter"
|
||||
>
|
||||
<transition name="n-fade-in-width-expand">
|
||||
<n-fade-in-height-expand-transition width>
|
||||
<div
|
||||
v-if="(hasIcon || loading) && !iconOnRight"
|
||||
class="n-button__icon"
|
||||
:class="{ 'n-button__icon--slot': $slots.icon }"
|
||||
>
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
:style="{
|
||||
fill: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
class="n-icon-slot"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</n-icon>
|
||||
<n-icon-switch-transition>
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
key="loading"
|
||||
class="n-icon-slot"
|
||||
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
key="icon"
|
||||
:style="{
|
||||
fill: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
class="n-icon-slot"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
/>
|
||||
</n-icon>
|
||||
</n-icon-switch-transition>
|
||||
</div>
|
||||
</transition>
|
||||
</n-fade-in-height-expand-transition>
|
||||
<div
|
||||
v-if="!circle && $slots.default"
|
||||
class="n-button__content"
|
||||
@ -54,7 +60,7 @@
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<transition name="n-fade-in-width-expand">
|
||||
<n-fade-in-height-expand-transition width>
|
||||
<div
|
||||
v-if="(loading || hasIcon) && iconOnRight"
|
||||
class="n-button__icon"
|
||||
@ -62,35 +68,47 @@
|
||||
'n-button__icon--slot': $slots.icon
|
||||
}"
|
||||
>
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
class="n-icon-slot"
|
||||
:style="{
|
||||
fill: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</n-icon>
|
||||
<n-icon-switch-transition>
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
key="loading"
|
||||
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
key="icon"
|
||||
class="n-icon-slot"
|
||||
:style="{
|
||||
fill: simulateHollowOut ? ascendantBackgroundColor : null
|
||||
}"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
/>
|
||||
</n-icon>
|
||||
</n-icon-switch-transition>
|
||||
</div>
|
||||
</transition>
|
||||
</n-fade-in-height-expand-transition>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSpin from '../../Spin'
|
||||
import NFadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
|
||||
import hollowoutable from '../../../mixins/hollowoutable'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import NIcon from '../../Icon'
|
||||
import NIconSwitchTransition from '../../../transition/IconSwitchTransition'
|
||||
|
||||
export default {
|
||||
name: 'NButton',
|
||||
components: {
|
||||
NSpin
|
||||
NSpin,
|
||||
NIcon,
|
||||
NIconSwitchTransition,
|
||||
NFadeInHeightExpandTransition
|
||||
},
|
||||
mixins: [withapp, themeable, hollowoutable],
|
||||
props: {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import styleScheme from '../../../utils/colors'
|
||||
|
||||
export default {
|
||||
name: 'NConfigConsumer',
|
||||
@ -20,7 +21,8 @@ export default {
|
||||
const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default({
|
||||
theme: this.synthesizedTheme,
|
||||
namespace: this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null,
|
||||
themeEnvironment: this.synthesizedThemeEnvironment
|
||||
themeEnvironment: this.synthesizedThemeEnvironment,
|
||||
styleScheme: this.synthesizedTheme ? styleScheme[this.synthesizedTheme] : null
|
||||
}) : []
|
||||
if (defaultSlot.length > 1) {
|
||||
console.warn('[naive-ui/config-consumer]: Config consumer only takes single child node')
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import asthemecontext from '../../../mixins/asthemecontext'
|
||||
import styleScheme from '../../../utils/colors'
|
||||
|
||||
export default {
|
||||
name: 'NElement',
|
||||
@ -25,7 +26,8 @@ export default {
|
||||
}, this.$slots.default || (this.$scopedSlots.default && this.$scopedSlots.default({
|
||||
theme: this.synthesizedTheme,
|
||||
namespace: this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null,
|
||||
themeEnvironment: this.synthesizedThemeEnvironment
|
||||
themeEnvironment: this.synthesizedThemeEnvironment,
|
||||
styleScheme: this.synthesizedTheme ? styleScheme[this.synthesizedTheme] : null
|
||||
})) || null)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* istanbul ignore file */
|
||||
import NLog from './src/main.vue'
|
||||
import NLog from './src/Log.vue'
|
||||
|
||||
NLog.install = function (Vue) {
|
||||
Vue.component(NLog.name, NLog)
|
||||
|
||||
@ -1,49 +1,45 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-log"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
:style="{
|
||||
lineHeight: lineHeight,
|
||||
height: styleHeight
|
||||
}"
|
||||
@wheel="handleWheel"
|
||||
>
|
||||
<n-scrollbar ref="scrollbar" theme="dark" @scroll="handleScroll">
|
||||
<pre
|
||||
class="n-log__line n-log__line--padding"
|
||||
:style="{
|
||||
lineHeight: lineHeight,
|
||||
height: paddingStyleHeight
|
||||
}"
|
||||
>{{ topLoading ? "Loading More" : 'Wheel Up to View More' }}</pre>
|
||||
<pre class="n-log__lines">{{ processedLog }}</pre>
|
||||
<!-- <pre v-for="(line, index) in synthesizedLines" :key="index" class="n-log__line">{{ line }}</pre> -->
|
||||
<pre
|
||||
class="n-log__line n-log__line--padding"
|
||||
:style="{
|
||||
lineHeight: lineHeight,
|
||||
height: paddingStyleHeight
|
||||
}"
|
||||
>{{ bottomLoading ? "Loading More" : 'Wheel Down to View More' }}</pre>
|
||||
<n-scrollbar ref="scrollbar" @scroll="handleScroll">
|
||||
<n-log-line v-for="(line, index) in synthesizedLines" :key="index" :line="line" />
|
||||
</n-scrollbar>
|
||||
<n-fade-in-height-expand-transition width>
|
||||
<n-log-loader v-if="loading" />
|
||||
</n-fade-in-height-expand-transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NLogLoader from './LogLoader'
|
||||
import NLogLine from './LogLine'
|
||||
import NFadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
|
||||
|
||||
export default {
|
||||
name: 'NLog',
|
||||
components: {
|
||||
NScrollbar
|
||||
NScrollbar,
|
||||
NLogLoader,
|
||||
NLogLine,
|
||||
NFadeInHeightExpandTransition
|
||||
},
|
||||
mixins: [ withapp, themeable ],
|
||||
props: {
|
||||
topLoading: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
bottomLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
},
|
||||
trim: {
|
||||
type: Boolean,
|
||||
@ -72,6 +68,10 @@ export default {
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hljs: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -88,7 +88,6 @@ export default {
|
||||
return `${this.rows * this.lineHeight}em`
|
||||
},
|
||||
processedLog () {
|
||||
console.log(this.log.trim())
|
||||
if (this.trim && this.log) return this.log.trim()
|
||||
else return this.log
|
||||
},
|
||||
@ -99,6 +98,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getHljs () {
|
||||
return this.hljs || this.$naive.hljs
|
||||
},
|
||||
handleScroll (e, container, content) {
|
||||
const containerHeight = container.offsetHeight
|
||||
const containerScrollTop = container.scrollTop
|
||||
31
packages/common/Log/src/LogLine.vue
Normal file
31
packages/common/Log/src/LogLine.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<pre class="n-log__line" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
line: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: 'javascript'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
line (value) {
|
||||
this.$el.innerHTML = this.getHljs().highlight(this.language, value).value
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$el.innerHTML = this.getHljs().highlight(this.language, this.line).value
|
||||
},
|
||||
methods: {
|
||||
getHljs () {
|
||||
return this.hljs || this.$naive.hljs
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
15
packages/common/Log/src/LogLoader.vue
Normal file
15
packages/common/Log/src/LogLoader.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="n-log-loader">
|
||||
<n-spin /><span class="n-log-loader__content">Loading</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NSpin from '../../Spin'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NSpin
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -25,6 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="verticalRail"
|
||||
class="n-scrollbar-rail n-scrollbar-rail--vertical"
|
||||
:style="{width: scrollbarSize}"
|
||||
>
|
||||
@ -45,6 +46,7 @@
|
||||
</transition>
|
||||
</div>
|
||||
<div
|
||||
ref="horizontalRail"
|
||||
class="n-scrollbar-rail n-scrollbar-rail--horizontal"
|
||||
:style="{height: scrollbarSize}"
|
||||
>
|
||||
@ -95,6 +97,8 @@ export default {
|
||||
contentWidth: null,
|
||||
containerHeight: null,
|
||||
containerWidth: null,
|
||||
verticalRailHeight: null,
|
||||
horizontalRailWidth: null,
|
||||
containerScrollTop: null,
|
||||
containerScrollLeft: null,
|
||||
horizontalScrollbarVanishTimerId: null,
|
||||
@ -112,27 +116,27 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
verticalScrollbarHeight () {
|
||||
if (this.containerHeight === null || this.contentHeight === null) return 0
|
||||
if (this.containerHeight === null || this.contentHeight === null || this.verticalRailHeight === null) return 0
|
||||
else {
|
||||
return (this.containerHeight * this.containerHeight / this.contentHeight + this.width * 1.5)
|
||||
return (this.verticalRailHeight * this.containerHeight / this.contentHeight + this.width * 1.5)
|
||||
}
|
||||
},
|
||||
verticalScrollbarHeightPx () {
|
||||
return this.verticalScrollbarHeight + 'px'
|
||||
},
|
||||
horizontalScrollbarWidth () {
|
||||
if (this.containerWidth === null || this.contentWidth === null) return 0
|
||||
if (this.containerWidth === null || this.contentWidth === null || this.horizontalRailWidth === null) return 0
|
||||
else {
|
||||
return (this.containerWidth * this.containerWidth / this.contentWidth + this.width * 1.5)
|
||||
return (this.horizontalRailWidth * this.containerWidth / this.contentWidth + this.width * 1.5)
|
||||
}
|
||||
},
|
||||
horizontalScrollbarWidthPx () {
|
||||
return this.horizontalScrollbarWidth + 'px'
|
||||
},
|
||||
verticalScrollbarTop () {
|
||||
if (this.containerHeight === null || this.containerScrollTop === null || this.contentHeight === null) return 0
|
||||
if (this.containerHeight === null || this.containerScrollTop === null || this.contentHeight === null || this.verticalRailHeight === null) return 0
|
||||
else {
|
||||
return this.containerScrollTop / (this.contentHeight - this.containerHeight) * (this.containerHeight - this.verticalScrollbarHeight)
|
||||
return this.containerScrollTop / (this.contentHeight - this.containerHeight) * (this.verticalRailHeight - this.verticalScrollbarHeight)
|
||||
}
|
||||
},
|
||||
verticalScrollbarTopPx () {
|
||||
@ -141,7 +145,7 @@ export default {
|
||||
horizontalScrollbarLeft () {
|
||||
if (this.containerWidth === null || this.containerScrollLeft === null || this.contentWidth === null) return 0
|
||||
else {
|
||||
return this.containerScrollLeft / (this.contentWidth - this.containerWidth) * (this.containerWidth - this.horizontalScrollbarWidth)
|
||||
return this.containerScrollLeft / (this.contentWidth - this.containerWidth) * (this.horizontalRailWidth - this.horizontalScrollbarWidth)
|
||||
}
|
||||
},
|
||||
horizontalScrollbarLeftPx () {
|
||||
@ -287,6 +291,12 @@ export default {
|
||||
this.containerHeight = this.$refs.scrollContainer.offsetHeight
|
||||
this.containerWidth = this.$refs.scrollContainer.offsetWidth
|
||||
}
|
||||
if (this.$refs.horizontalRail) {
|
||||
this.horizontalRailWidth = this.$refs.horizontalRail.offsetWidth
|
||||
}
|
||||
if (this.$refs.verticalRail) {
|
||||
this.verticalRailHeight = this.$refs.verticalRail.offsetHeight
|
||||
}
|
||||
},
|
||||
updateParameters () {
|
||||
this.updatePositionParameters()
|
||||
|
||||
@ -7,10 +7,13 @@
|
||||
'n-slider--with-mark': marks,
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
@keydown.right="handleKeyDownRight"
|
||||
@keydown.left="handleKeyDownLeft"
|
||||
>
|
||||
<div
|
||||
ref="rail"
|
||||
class="n-slider-rail"
|
||||
@click="handleRailClick"
|
||||
>
|
||||
<div
|
||||
class="n-slider-rail__fill"
|
||||
@ -82,7 +85,7 @@
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
>
|
||||
{{ activeHandleValue || tooltipHoverDisplayValue }}
|
||||
{{ activeHandleValue === null ? tooltipHoverDisplayValue : activeHandleValue }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@ -161,7 +164,10 @@ export default {
|
||||
showTooltip: false,
|
||||
firstHandleActive: false,
|
||||
secondHandleActive: false,
|
||||
firstHandleClicked: false,
|
||||
secondHandleClicked: false,
|
||||
memoziedOtherValue: null,
|
||||
valueChangedByRailClick: true,
|
||||
tooltipHoverDisplayValue: ''
|
||||
}
|
||||
},
|
||||
@ -238,33 +244,56 @@ export default {
|
||||
},
|
||||
active () {
|
||||
return this.firstHandleActive || this.secondHandleActive
|
||||
},
|
||||
clicked () {
|
||||
return this.firstHandleClicked || this.secondHandleClicked
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newValue, oldValue) {
|
||||
if (this.range && newValue && this.showTooltip) {
|
||||
if (this.range && newValue) {
|
||||
if (oldValue && oldValue[1] !== newValue[1]) {
|
||||
this.$nextTick().then(() => {
|
||||
this.firstHandleActive = false
|
||||
this.secondHandleActive = true
|
||||
if (!this.valueChangedByRailClick) {
|
||||
this.firstHandleActive = false
|
||||
this.secondHandleActive = true
|
||||
} else {
|
||||
this.valueChangedByRailClick = false
|
||||
}
|
||||
this.switchFocus()
|
||||
})
|
||||
} else if (oldValue && oldValue[0] !== newValue[0]) {
|
||||
this.$nextTick().then(() => {
|
||||
this.firstHandleActive = true
|
||||
this.secondHandleActive = false
|
||||
if (!this.valueChangedByRailClick) {
|
||||
this.firstHandleActive = true
|
||||
this.secondHandleActive = false
|
||||
} else {
|
||||
this.valueChangedByRailClick = false
|
||||
}
|
||||
this.switchFocus()
|
||||
})
|
||||
} else if (newValue[0] === newValue[1]) {
|
||||
this.$nextTick().then(() => {
|
||||
this.firstHandleActive = false
|
||||
this.secondHandleActive = true
|
||||
if (!this.valueChangedByRailClick) {
|
||||
this.firstHandleActive = false
|
||||
this.secondHandleActive = true
|
||||
} else {
|
||||
this.valueChangedByRailClick = false
|
||||
}
|
||||
this.switchFocus()
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$nextTick().then(() => {
|
||||
this.updatePosition()
|
||||
if (this.range) {
|
||||
if (newValue && oldValue) {
|
||||
if (newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
|
||||
this.updatePosition()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.updatePosition()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -273,6 +302,85 @@ export default {
|
||||
window.removeEventListener('mouseup', this.handleFirstHandleMouseUp)
|
||||
},
|
||||
methods: {
|
||||
handleRailClick (e) {
|
||||
this.valueChangedByRailClick = true
|
||||
const railRect = this.$refs.rail.getBoundingClientRect()
|
||||
const offsetRatio = (e.clientX - railRect.left) / railRect.width
|
||||
const newValue = this.min + (this.max - this.min) * offsetRatio
|
||||
if (!this.range) {
|
||||
this.emitInputEvent(newValue)
|
||||
this.$refs.firstHandle.focus()
|
||||
} else {
|
||||
if (this.value) {
|
||||
if (Math.abs(this.firstHandleValue - newValue) < Math.abs(this.secondHandleValue - newValue)) {
|
||||
this.emitInputEvent([newValue, this.secondHandleValue])
|
||||
this.$refs.firstHandle.focus()
|
||||
} else {
|
||||
this.emitInputEvent([this.firstHandleValue, newValue])
|
||||
this.$refs.secondHandle.focus()
|
||||
}
|
||||
} else {
|
||||
this.emitInputEvent([newValue, newValue])
|
||||
this.$refs.firstHandle.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
handleKeyDownRight () {
|
||||
let firstHandleFocused = false
|
||||
let handleValue = null
|
||||
if (document.activeElement === this.$refs.firstHandle) {
|
||||
firstHandleFocused = true
|
||||
handleValue = this.firstHandleValue
|
||||
} else {
|
||||
handleValue = this.secondHandleValue
|
||||
}
|
||||
let nextValue = Math.floor(handleValue / this.step) * this.step + this.step
|
||||
if (this.marks) {
|
||||
for (let key of Object.keys(this.marks)) {
|
||||
key = Number(key)
|
||||
if (key > handleValue && key < nextValue) {
|
||||
nextValue = key
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.range) {
|
||||
if (firstHandleFocused) {
|
||||
this.emitInputEvent([nextValue, this.secondHandleValue])
|
||||
} else {
|
||||
this.emitInputEvent([this.firstHandleValue, nextValue])
|
||||
}
|
||||
} else {
|
||||
this.emitInputEvent(nextValue)
|
||||
}
|
||||
},
|
||||
handleKeyDownLeft () {
|
||||
let firstHandleFocused = false
|
||||
let handleValue = null
|
||||
if (document.activeElement === this.$refs.firstHandle) {
|
||||
firstHandleFocused = true
|
||||
handleValue = this.firstHandleValue
|
||||
} else {
|
||||
handleValue = this.secondHandleValue
|
||||
}
|
||||
let nextValue = Math.ceil(handleValue / this.step) * this.step - this.step
|
||||
if (this.marks) {
|
||||
for (let key of Object.keys(this.marks)) {
|
||||
key = Number(key)
|
||||
if (key < handleValue && key > nextValue) {
|
||||
nextValue = key
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.range) {
|
||||
if (firstHandleFocused) {
|
||||
this.emitInputEvent([nextValue, this.secondHandleValue])
|
||||
} else {
|
||||
this.emitInputEvent([this.firstHandleValue, nextValue])
|
||||
}
|
||||
} else {
|
||||
this.emitInputEvent(nextValue)
|
||||
}
|
||||
},
|
||||
switchFocus () {
|
||||
if (this.range) {
|
||||
const firstHandle = this.$refs.firstHandle
|
||||
@ -319,13 +427,9 @@ export default {
|
||||
},
|
||||
justifyValue (value) {
|
||||
let justifiedValue = value
|
||||
if (this.min !== null) {
|
||||
justifiedValue = Math.max(this.min, justifiedValue)
|
||||
}
|
||||
if (this.max !== null) {
|
||||
justifiedValue = Math.min(this.max, justifiedValue)
|
||||
}
|
||||
justifiedValue = Math.round(justifiedValue / this.step) * this.step
|
||||
justifiedValue = Math.max(this.min, justifiedValue)
|
||||
justifiedValue = Math.min(this.max, justifiedValue)
|
||||
justifiedValue = Math.round((justifiedValue - this.min) / this.step) * this.step + this.min
|
||||
if (this.marks) {
|
||||
const closestMarkValue = this.getClosestMarkValue(value)
|
||||
if (closestMarkValue !== null && Math.abs(justifiedValue - value) > Math.abs(closestMarkValue - value)) {
|
||||
@ -339,6 +443,7 @@ export default {
|
||||
this.memoziedOtherValue = this.secondHandleValue
|
||||
}
|
||||
this.firstHandleActive = true
|
||||
this.firstHandleClicked = true
|
||||
window.addEventListener('mouseup', this.handleFirstHandleMouseUp)
|
||||
window.addEventListener('mousemove', this.throttledHandleFirstHandleMouseMove)
|
||||
},
|
||||
@ -347,12 +452,15 @@ export default {
|
||||
this.memoziedOtherValue = this.firstHandleValue
|
||||
}
|
||||
this.secondHandleActive = true
|
||||
this.secondHandleClicked = true
|
||||
window.addEventListener('mouseup', this.handleSecondHandleMouseUp)
|
||||
window.addEventListener('mousemove', this.throttledHandleSecondHandleMouseMove)
|
||||
},
|
||||
handleFirstHandleMouseUp (e) {
|
||||
this.secondHandleActive = false
|
||||
this.firstHandleActive = false
|
||||
this.secondHandleClicked = false
|
||||
this.firstHandleClicked = false
|
||||
if (!this.$refs.firstHandle.contains(e.target)) {
|
||||
this.showTooltip = false
|
||||
} else {
|
||||
@ -364,6 +472,8 @@ export default {
|
||||
handleSecondHandleMouseUp (e) {
|
||||
this.secondHandleActive = false
|
||||
this.firstHandleActive = false
|
||||
this.secondHandleClicked = false
|
||||
this.firstHandleClicked = false
|
||||
if (!this.$refs.firstHandle.contains(e.target)) {
|
||||
this.showTooltip = false
|
||||
} else {
|
||||
@ -412,7 +522,7 @@ export default {
|
||||
}
|
||||
},
|
||||
handleFirstHandleMouseLeave () {
|
||||
if (!this.active) {
|
||||
if (!this.active || !this.clicked) {
|
||||
this.showTooltip = false
|
||||
}
|
||||
},
|
||||
@ -428,7 +538,7 @@ export default {
|
||||
}
|
||||
},
|
||||
handleSecondHandleMouseLeave () {
|
||||
if (!this.active) {
|
||||
if (!this.active || !this.clicked) {
|
||||
this.showTooltip = false
|
||||
}
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<div
|
||||
class="n-step-indicator-slot"
|
||||
>
|
||||
<n-base-icon-transition>
|
||||
<n-icon-switch-transition>
|
||||
<div
|
||||
v-if="!(synthesizedStatus === 'finish' || synthesizedStatus === 'error')"
|
||||
key="index"
|
||||
@ -32,7 +32,7 @@
|
||||
>
|
||||
<md-close />
|
||||
</n-icon>
|
||||
</n-base-icon-transition>
|
||||
</n-icon-switch-transition>
|
||||
</div>
|
||||
<div v-if="vertical" class="n-step-splitor" />
|
||||
</div>
|
||||
@ -55,11 +55,11 @@
|
||||
|
||||
<script>
|
||||
import NIcon from '../../Icon'
|
||||
import NBaseIconTransition from '../../../base/IconTransition'
|
||||
import mdClose from '../../../icons/md-close'
|
||||
import mdCheckmark from '../../../icons/md-checkmark'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import hollowoutable from '../../../mixins/hollowoutable'
|
||||
import NIconSwitchTransition from '../../../transition/IconSwitchTransition'
|
||||
|
||||
export default {
|
||||
name: 'NStep',
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
NIcon,
|
||||
mdCheckmark,
|
||||
mdClose,
|
||||
NBaseIconTransition
|
||||
NIconSwitchTransition
|
||||
},
|
||||
mixins: [ themeable, hollowoutable ],
|
||||
props: {
|
||||
|
||||
@ -4,6 +4,10 @@ export default {
|
||||
transitionDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
@ -14,13 +18,21 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
handleBeforeLeave () {
|
||||
this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
|
||||
this.$el.style.height = this.$el.offsetHeight + 'px'
|
||||
if (this.width) {
|
||||
this.$el.style.maxWidth = this.$el.offsetWidth + 'px'
|
||||
this.$el.style.width = this.$el.offsetWidth + 'px'
|
||||
} else {
|
||||
this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
|
||||
this.$el.style.height = this.$el.offsetHeight + 'px'
|
||||
}
|
||||
this.$el.getBoundingClientRect()
|
||||
},
|
||||
handleLeave () {
|
||||
// debugger
|
||||
this.$el.style.maxHeight = 0
|
||||
if (this.width) {
|
||||
this.$el.style.maxWidth = 0
|
||||
} else {
|
||||
this.$el.style.maxHeight = 0
|
||||
}
|
||||
this.$el.getBoundingClientRect()
|
||||
},
|
||||
handleAfterLeave () {
|
||||
@ -28,21 +40,38 @@ export default {
|
||||
},
|
||||
handleEnter () {
|
||||
this.$nextTick().then(() => {
|
||||
this.$el.style.height = this.$el.offsetHeight + 'px'
|
||||
this.$el.style.maxHeight = 0
|
||||
if (this.width) {
|
||||
this.$el.style.width = this.$el.offsetWidth + 'px'
|
||||
this.$el.style.maxWidth = 0
|
||||
} else {
|
||||
this.$el.style.height = this.$el.offsetHeight + 'px'
|
||||
this.$el.style.maxHeight = 0
|
||||
}
|
||||
this.$el.style.transition = 'none'
|
||||
this.$el.getBoundingClientRect()
|
||||
this.$el.style.maxHeight = this.$el.style.height
|
||||
this.$el.style.transition = null
|
||||
this.$el.getBoundingClientRect()
|
||||
if (this.width) {
|
||||
this.$el.style.maxWidth = this.$el.style.width
|
||||
} else {
|
||||
this.$el.style.maxHeight = this.$el.style.height
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAfterEnter () {
|
||||
this.$el.style.height = null
|
||||
this.$el.style.maxHeight = null
|
||||
if (this.width) {
|
||||
this.$el.style.width = null
|
||||
this.$el.style.maxWidth = null
|
||||
} else {
|
||||
this.$el.style.height = null
|
||||
this.$el.style.maxHeight = null
|
||||
}
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
return h('transition', {
|
||||
props: {
|
||||
name: 'n-fade-in-height-expand'
|
||||
name: this.width ? 'n-fade-in-width-expand' : 'n-fade-in-height-expand'
|
||||
},
|
||||
on: {
|
||||
beforeLeave: this.handleBeforeLeave,
|
||||
|
||||
23
packages/transition/IconSwitchTransition/src/main.vue
Normal file
23
packages/transition/IconSwitchTransition/src/main.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'NBaseIconTransition',
|
||||
data () {
|
||||
return {
|
||||
appear: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick().then(() => {
|
||||
this.appear = true
|
||||
})
|
||||
},
|
||||
render (h) {
|
||||
return h('transition', {
|
||||
props: {
|
||||
name: 'n-icon-switch',
|
||||
appear: this.appear
|
||||
}
|
||||
}, this.$slots.default)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
9
packages/utils/colors.js
Normal file
9
packages/utils/colors.js
Normal file
@ -0,0 +1,9 @@
|
||||
import darkstyleScheme from '../../styles/themes/dark/jsIndex.scss'
|
||||
import lightstyleScheme from '../../styles/themes/light/jsIndex.scss'
|
||||
|
||||
const styleScheme = {
|
||||
dark: darkstyleScheme,
|
||||
light: lightstyleScheme
|
||||
}
|
||||
|
||||
export default styleScheme
|
||||
@ -46,6 +46,7 @@
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
@include icon-switch-transition($top: 50%, $original-transform: translateY(-50%));
|
||||
}
|
||||
@include m(slot) {
|
||||
width: $icon-size;
|
||||
@ -54,6 +55,11 @@
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
@include b(icon-slot) {
|
||||
@include icon-switch-transition($top: 50%, $original-transform: translateY(-50%));
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
line-height: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
@ -84,6 +84,13 @@
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hljs-function .hljs-params {
|
||||
color: #383a42;
|
||||
}
|
||||
.hljs-function .hljs-params .hljs-typing {
|
||||
color: #383a42;
|
||||
}
|
||||
}
|
||||
&.#{block(dark-theme)} {
|
||||
.hljs {
|
||||
|
||||
100
styles/Log.scss
100
styles/Log.scss
@ -1,40 +1,78 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@include b(log) {
|
||||
font-family: 'FiraCode', monospace;
|
||||
font-size: 14px;
|
||||
background-color: rgba(0, 0, 0, .95);
|
||||
color: rgba(255, 255, 255, .75);
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include b(scrollbar-content) {
|
||||
overflow: hidden;
|
||||
}
|
||||
@include e(lines) {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@include e(line) {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
@include m(padding) {
|
||||
@include themes-mixin {
|
||||
@include b(log) {
|
||||
position: relative;
|
||||
font-family: 'FiraCode', monospace;
|
||||
font-size: 14px;
|
||||
color: $--n-secondary-text-color;
|
||||
box-sizing: border-box;
|
||||
transition: border-color .3s $default-cubic-bezier;
|
||||
@include m(top-bordered) {
|
||||
border-top: 1px solid $--n-border-color;
|
||||
}
|
||||
@include m(bottom-bordered) {
|
||||
border-bottom: 1px solid $--n-border-color;
|
||||
}
|
||||
@include b(scrollbar) {
|
||||
@include b(scrollbar-content) {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@include b(scrollbar-rail) {
|
||||
@include m(vertical) {
|
||||
top: 8px;
|
||||
bottom: 8px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(lines) {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@include e(line) {
|
||||
margin: 0;
|
||||
}
|
||||
@include b(log-loader) {
|
||||
@include fade-in-width-expand-transition($duration: .3s, $delay: 0s);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $--n-border-color;
|
||||
// box-shadow: $--popover-box-shadow;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
height: 34px;
|
||||
border-radius: 17px;
|
||||
color: $--n-secondary-text-color;
|
||||
background-color: $--n-dialog-color;
|
||||
line-height: 34px;
|
||||
/* stylelint-disable */
|
||||
font-family: 'Lato';
|
||||
/* stylelint-enable */
|
||||
border-radius: 6px;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
margin: 8px;
|
||||
width: calc(100% - 16px);
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
&:first-child {
|
||||
margin-top: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@include e(content) {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
line-height: 34px;
|
||||
/* stylelint-disable */
|
||||
font-family: 'Lato';
|
||||
/* stylelint-enable */
|
||||
padding-left: 40px;
|
||||
padding-right: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
@include b(spin) {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: calc(50% - 10px);
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,14 +3,30 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(slider) {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: calc(100% - 14px);
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
cursor: pointer;
|
||||
@include once {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: calc(100% - 14px);
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
cursor: pointer;
|
||||
@include b(slider-marks) {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include b(slider-mark) {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@include m(with-mark) {
|
||||
width: calc(100% - 24px);
|
||||
margin: 8px 12px 32px 12px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include b(slider-rail) {
|
||||
background-color: map-get($--slider-rail-background-color, 'hover');
|
||||
@ -43,38 +59,41 @@
|
||||
box-shadow: map-get($--slider-handle-box-shadow, 'hover');
|
||||
}
|
||||
}
|
||||
@include m(with-mark) {
|
||||
margin: 8px 12px 32px 12px;
|
||||
}
|
||||
@include b(slider-rail) {
|
||||
width: 100%;
|
||||
@include once {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
height: $--slider-rail-height;
|
||||
background-color: map-get($--slider-rail-background-color, 'default');
|
||||
position: relative;
|
||||
transition: background-color .2s $default-cubic-bezier;
|
||||
border-radius: $--slider-rail-height / 2;
|
||||
@include e(fill) {
|
||||
transition: background-color .3s $default-cubic-bezier;
|
||||
background-color: map-get($--slider-rail-fill-background-color, 'default');
|
||||
border-radius: $--slider-rail-height / 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@include once {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: $--slider-rail-height / 2;
|
||||
transition: background-color .3s $default-cubic-bezier;
|
||||
}
|
||||
background-color: map-get($--slider-rail-fill-background-color, 'default');
|
||||
}
|
||||
}
|
||||
@include b(slider-handle) {
|
||||
outline: none;
|
||||
height: $--slider-handle-size;
|
||||
width: $--slider-handle-size;
|
||||
border-radius: $--slider-handle-size / 2;
|
||||
@include once {
|
||||
outline: none;
|
||||
height: $--slider-handle-size;
|
||||
width: $--slider-handle-size;
|
||||
border-radius: $--slider-handle-size / 2;
|
||||
transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
background-color: $--slider-handle-background-color;
|
||||
box-shadow: map-get($--slider-handle-box-shadow, 'default');
|
||||
transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: map-get($--slider-handle-box-shadow, 'hover');
|
||||
}
|
||||
@ -85,41 +104,38 @@
|
||||
box-shadow: map-get($--slider-handle-box-shadow, 'focus');
|
||||
}
|
||||
}
|
||||
@include b(slider-marks) {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include b(slider-mark) {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@include b(slider-dots) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
@include b(slider-dot) {
|
||||
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
@include once {
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
height: $--slider-dot-size;
|
||||
width: $--slider-dot-size;
|
||||
border-radius: $--slider-dot-size / 2;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
@include b(slider-dot) {
|
||||
@include once {
|
||||
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
height: $--slider-dot-size;
|
||||
width: $--slider-dot-size;
|
||||
border-radius: $--slider-dot-size / 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
box-shadow: map-get($--slider-dot-box-shadow, 'default');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(slider-handle-indicator) {
|
||||
@include fade-in-scale-up-transition();
|
||||
@include once {
|
||||
@include fade-in-scale-up-transition();
|
||||
transform: scale(0.99999);
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
color: $--slider-indicator-color;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 12px;
|
||||
background-color: $--slider-indicator-background-color;
|
||||
box-shadow: $--slider-indicator-box-shadow;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@ -134,6 +134,7 @@ $--steps-indicator-icon-size: (
|
||||
@include b(step-indicator-slot) {
|
||||
position: relative;
|
||||
@include e(index) {
|
||||
@include icon-switch-transition();
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
@ -142,6 +143,9 @@ $--steps-indicator-icon-size: (
|
||||
top: 0;
|
||||
transform: scale(0.9999);
|
||||
}
|
||||
@include b(icon) {
|
||||
@include icon-switch-transition();
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(vertical) {
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
@import "components/Collapse.scss";
|
||||
@import "components/Result.scss";
|
||||
|
||||
@mixin setup-dark-theme() {
|
||||
@mixin setup-dark-theme($in-js-env: false) {
|
||||
@include setup-dark-colors();
|
||||
$--n-primary-color: $--primary-6 !global;
|
||||
$--n-primary-hover-color: $--primary-5 !global;
|
||||
@ -83,60 +83,62 @@
|
||||
$--n-disabled-text-color: rgba(255, 255, 255, 0.3) !global;
|
||||
$--n-dialog-color: $--neutral-3 !global;
|
||||
$--n-background-color: $--neutral-10 !global;
|
||||
@include setup-dark-nimbus-service-layout;
|
||||
@include setup-dark-divider;
|
||||
@include setup-dark-scrollbar;
|
||||
@include setup-dark-base-loading;
|
||||
@include setup-dark-button;
|
||||
@include setup-dark-base-select-menu;
|
||||
@include setup-dark-base-picker;
|
||||
@include setup-dark-base-cancel-mark;
|
||||
@include setup-dark-tag;
|
||||
@include setup-dark-table;
|
||||
@include setup-dark-advance-table;
|
||||
@include setup-dark-popover;
|
||||
@include setup-dark-tooltip;
|
||||
@include setup-dark-confirm;
|
||||
@include setup-dark-checkbox;
|
||||
@include setup-dark-switch;
|
||||
@include setup-dark-message;
|
||||
@include setup-dark-loading-bar;
|
||||
@include setup-dark-badge;
|
||||
@include setup-dark-dropdown;
|
||||
@include setup-dark-input;
|
||||
@include setup-dark-anchor;
|
||||
@include setup-dark-alert;
|
||||
@include setup-dark-pagination;
|
||||
@include setup-dark-gradient-text;
|
||||
@include setup-dark-date-picker;
|
||||
@include setup-dark-time-picker;
|
||||
@include setup-dark-progress;
|
||||
@include setup-dark-timeline;
|
||||
@include setup-dark-back-top;
|
||||
@include setup-dark-notification;
|
||||
@include setup-dark-radio;
|
||||
@include setup-dark-step;
|
||||
@include setup-dark-input-number;
|
||||
@include setup-dark-slider;
|
||||
@include setup-dark-cascader;
|
||||
@include setup-dark-tabs;
|
||||
@include setup-dark-statistic;
|
||||
@include setup-dark-breadcrumb;
|
||||
@include setup-dark-nimbus-form;
|
||||
@include setup-dark-modal;
|
||||
@include setup-dark-transfer;
|
||||
@include setup-dark-menu;
|
||||
@include setup-dark-thing;
|
||||
@include setup-dark-list;
|
||||
@include setup-dark-layout;
|
||||
@include setup-dark-form;
|
||||
@include setup-dark-empty;
|
||||
@include setup-dark-drawer;
|
||||
@include setup-dark-descriptions;
|
||||
@include setup-dark-card;
|
||||
@include setup-dark-auto-complete;
|
||||
@include setup-dark-affix;
|
||||
@include setup-dark-avatar;
|
||||
@include setup-dark-collapse;
|
||||
@include setup-dark-result;
|
||||
@if ($in-js-env != true) {
|
||||
@include setup-dark-nimbus-service-layout;
|
||||
@include setup-dark-divider;
|
||||
@include setup-dark-scrollbar;
|
||||
@include setup-dark-base-loading;
|
||||
@include setup-dark-button;
|
||||
@include setup-dark-base-select-menu;
|
||||
@include setup-dark-base-picker;
|
||||
@include setup-dark-base-cancel-mark;
|
||||
@include setup-dark-tag;
|
||||
@include setup-dark-table;
|
||||
@include setup-dark-advance-table;
|
||||
@include setup-dark-popover;
|
||||
@include setup-dark-tooltip;
|
||||
@include setup-dark-confirm;
|
||||
@include setup-dark-checkbox;
|
||||
@include setup-dark-switch;
|
||||
@include setup-dark-message;
|
||||
@include setup-dark-loading-bar;
|
||||
@include setup-dark-badge;
|
||||
@include setup-dark-dropdown;
|
||||
@include setup-dark-input;
|
||||
@include setup-dark-anchor;
|
||||
@include setup-dark-alert;
|
||||
@include setup-dark-pagination;
|
||||
@include setup-dark-gradient-text;
|
||||
@include setup-dark-date-picker;
|
||||
@include setup-dark-time-picker;
|
||||
@include setup-dark-progress;
|
||||
@include setup-dark-timeline;
|
||||
@include setup-dark-back-top;
|
||||
@include setup-dark-notification;
|
||||
@include setup-dark-radio;
|
||||
@include setup-dark-step;
|
||||
@include setup-dark-input-number;
|
||||
@include setup-dark-slider;
|
||||
@include setup-dark-cascader;
|
||||
@include setup-dark-tabs;
|
||||
@include setup-dark-statistic;
|
||||
@include setup-dark-breadcrumb;
|
||||
@include setup-dark-nimbus-form;
|
||||
@include setup-dark-modal;
|
||||
@include setup-dark-transfer;
|
||||
@include setup-dark-menu;
|
||||
@include setup-dark-thing;
|
||||
@include setup-dark-list;
|
||||
@include setup-dark-layout;
|
||||
@include setup-dark-form;
|
||||
@include setup-dark-empty;
|
||||
@include setup-dark-drawer;
|
||||
@include setup-dark-descriptions;
|
||||
@include setup-dark-card;
|
||||
@include setup-dark-auto-complete;
|
||||
@include setup-dark-affix;
|
||||
@include setup-dark-avatar;
|
||||
@include setup-dark-collapse;
|
||||
@include setup-dark-result;
|
||||
}
|
||||
}
|
||||
|
||||
37
styles/themes/dark/jsIndex.scss
Normal file
37
styles/themes/dark/jsIndex.scss
Normal file
@ -0,0 +1,37 @@
|
||||
@import 'index.scss';
|
||||
|
||||
@include setup-dark-theme($in-js-env: true);
|
||||
|
||||
/* stylelint-disable */
|
||||
:export {
|
||||
primaryColor: $--primary-5;
|
||||
primaryHoverColor: $--primary-6;
|
||||
primaryActiveColor: $--primary-7;
|
||||
infoColor: $--info-5;
|
||||
infoHoverColor: $--info-6;
|
||||
infoActiveColor: $--info-7;
|
||||
successColor: $--success-5;
|
||||
successHoverColor: $--success-6;
|
||||
successActiveColor: $--success-7;
|
||||
errorColor: $--error-5;
|
||||
errorHoverColor: $--error-6;
|
||||
errorActiveColor: $--error-7;
|
||||
warningColor: $--error-5;
|
||||
warningHoverColor: $--error-6;
|
||||
warningActiveColor: $--error-7;
|
||||
textPrimaryColor: $--text-1;
|
||||
textSecondaryColor: $--text-2;
|
||||
textTertiaryColor: $--text-3;
|
||||
textDisabledColor: rgba(255, 255, 255, 0.3);
|
||||
popoverBackgroundColor: $--neutral-1;
|
||||
dialogBackgroundColor: $--neutral-3;
|
||||
cardBackgroundColor: $--neutral-9;
|
||||
bodyBackgroundColor: $--neutral-10;
|
||||
closeColor: $--text-3;
|
||||
dividerColor: $--neutral-6;
|
||||
dividerOverlayColor: $--overlay-6 ;
|
||||
borderColor: $--neutral-7;
|
||||
borderOverlayColor: $--overlay-7;
|
||||
cubicBezierEaseInOut: cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
/* stylelint-enable */
|
||||
@ -56,7 +56,7 @@
|
||||
@import "components/Collapse.scss";
|
||||
@import "components/Result.scss";
|
||||
|
||||
@mixin setup-light-theme() {
|
||||
@mixin setup-light-theme($in-js-env: false) {
|
||||
@include setup-light-colors();
|
||||
$--n-primary-color: $--primary-6 !global;
|
||||
$--n-primary-hover-color: $--primary-5 !global;
|
||||
@ -65,7 +65,6 @@
|
||||
$--n-success-color: $--success-6 !global;
|
||||
$--n-warning-color: $--warning-6 !global;
|
||||
$--n-error-color: $--error-6 !global;
|
||||
|
||||
$--n-text-color: $--text-1 !global;
|
||||
$--n-secondary-text-color: $--text-2 !global;
|
||||
$--n-meta-text-color: $--text-3 !global;
|
||||
@ -77,66 +76,66 @@
|
||||
$--n-alpha-border-color: $--overlay-6 !global;
|
||||
$--n-popover-color: $--neutral-10 !global;
|
||||
$--n-table-header-color: $--neutral-8 !global;
|
||||
|
||||
$--n-disabled-text-color: $--neutral-5 !global;
|
||||
$--n-card-color: $--neutral-10 !global;
|
||||
$--n-dialog-color: $--neutral-10 !global;
|
||||
$--n-background-color: $--neutral-10 !global;
|
||||
|
||||
@include setup-light-nimbus-service-layout;
|
||||
@include setup-light-divider;
|
||||
@include setup-light-scrollbar;
|
||||
@include setup-light-base-loading;
|
||||
@include setup-light-button;
|
||||
@include setup-light-base-select-menu;
|
||||
@include setup-light-base-picker;
|
||||
@include setup-light-base-cancel-mark;
|
||||
@include setup-light-tag;
|
||||
@include setup-light-table;
|
||||
@include setup-light-advance-table;
|
||||
@include setup-light-popover;
|
||||
@include setup-light-tooltip;
|
||||
@include setup-light-confirm;
|
||||
@include setup-light-checkbox;
|
||||
@include setup-light-switch;
|
||||
@include setup-light-message;
|
||||
@include setup-light-loading-bar;
|
||||
@include setup-light-badge;
|
||||
@include setup-light-dropdown;
|
||||
@include setup-light-input;
|
||||
@include setup-light-anchor;
|
||||
@include setup-light-alert;
|
||||
@include setup-light-pagination;
|
||||
@include setup-light-gradient-text;
|
||||
@include setup-light-date-picker;
|
||||
@include setup-light-time-picker;
|
||||
@include setup-light-progress;
|
||||
@include setup-light-timeline;
|
||||
@include setup-light-back-top;
|
||||
@include setup-light-notification;
|
||||
@include setup-light-radio;
|
||||
@include setup-light-steps;
|
||||
@include setup-light-input-number;
|
||||
@include setup-light-slider;
|
||||
@include setup-light-cascader;
|
||||
@include setup-light-tabs;
|
||||
@include setup-light-statistic;
|
||||
@include setup-light-breadcrumb;
|
||||
@include setup-light-nimbus-form;
|
||||
@include setup-light-modal;
|
||||
@include setup-light-transfer;
|
||||
@include setup-light-menu;
|
||||
@include setup-light-thing;
|
||||
@include setup-light-list;
|
||||
@include setup-light-layout;
|
||||
@include setup-light-form;
|
||||
@include setup-light-empty;
|
||||
@include setup-light-drawer;
|
||||
@include setup-light-descriptions;
|
||||
@include setup-light-card;
|
||||
@include setup-light-auto-complete;
|
||||
@include setup-light-affix;
|
||||
@include setup-light-avatar;
|
||||
@include setup-light-collapse;
|
||||
@include setup-light-result;
|
||||
@if ($in-js-env != true) {
|
||||
@include setup-light-nimbus-service-layout;
|
||||
@include setup-light-divider;
|
||||
@include setup-light-scrollbar;
|
||||
@include setup-light-base-loading;
|
||||
@include setup-light-button;
|
||||
@include setup-light-base-select-menu;
|
||||
@include setup-light-base-picker;
|
||||
@include setup-light-base-cancel-mark;
|
||||
@include setup-light-tag;
|
||||
@include setup-light-table;
|
||||
@include setup-light-advance-table;
|
||||
@include setup-light-popover;
|
||||
@include setup-light-tooltip;
|
||||
@include setup-light-confirm;
|
||||
@include setup-light-checkbox;
|
||||
@include setup-light-switch;
|
||||
@include setup-light-message;
|
||||
@include setup-light-loading-bar;
|
||||
@include setup-light-badge;
|
||||
@include setup-light-dropdown;
|
||||
@include setup-light-input;
|
||||
@include setup-light-anchor;
|
||||
@include setup-light-alert;
|
||||
@include setup-light-pagination;
|
||||
@include setup-light-gradient-text;
|
||||
@include setup-light-date-picker;
|
||||
@include setup-light-time-picker;
|
||||
@include setup-light-progress;
|
||||
@include setup-light-timeline;
|
||||
@include setup-light-back-top;
|
||||
@include setup-light-notification;
|
||||
@include setup-light-radio;
|
||||
@include setup-light-steps;
|
||||
@include setup-light-input-number;
|
||||
@include setup-light-slider;
|
||||
@include setup-light-cascader;
|
||||
@include setup-light-tabs;
|
||||
@include setup-light-statistic;
|
||||
@include setup-light-breadcrumb;
|
||||
@include setup-light-nimbus-form;
|
||||
@include setup-light-modal;
|
||||
@include setup-light-transfer;
|
||||
@include setup-light-menu;
|
||||
@include setup-light-thing;
|
||||
@include setup-light-list;
|
||||
@include setup-light-layout;
|
||||
@include setup-light-form;
|
||||
@include setup-light-empty;
|
||||
@include setup-light-drawer;
|
||||
@include setup-light-descriptions;
|
||||
@include setup-light-card;
|
||||
@include setup-light-auto-complete;
|
||||
@include setup-light-affix;
|
||||
@include setup-light-avatar;
|
||||
@include setup-light-collapse;
|
||||
@include setup-light-result;
|
||||
}
|
||||
}
|
||||
|
||||
37
styles/themes/light/jsIndex.scss
Normal file
37
styles/themes/light/jsIndex.scss
Normal file
@ -0,0 +1,37 @@
|
||||
@import 'index.scss';
|
||||
|
||||
@include setup-light-theme($in-js-env: true);
|
||||
|
||||
/* stylelint-disable */
|
||||
:export {
|
||||
primaryColor: $--primary-5;
|
||||
primaryHoverColor: $--primary-6;
|
||||
primaryActiveColor: $--primary-7;
|
||||
infoColor: $--info-5;
|
||||
infoHoverColor: $--info-6;
|
||||
infoActiveColor: $--info-7;
|
||||
successColor: $--success-5;
|
||||
successHoverColor: $--success-6;
|
||||
successActiveColor: $--success-7;
|
||||
errorColor: $--error-5;
|
||||
errorHoverColor: $--error-6;
|
||||
errorActiveColor: $--error-7;
|
||||
warningColor: $--error-5;
|
||||
warningHoverColor: $--error-6;
|
||||
warningActiveColor: $--error-7;
|
||||
textPrimaryColor: $--text-1;
|
||||
textSecondaryColor: $--text-2;
|
||||
textTertiaryColor: $--text-3;
|
||||
textDisabledColor: $--neutral-5;
|
||||
popoverBackgroundColor: $--neutral-10;
|
||||
dialogBackgroundColor: $--neutral-10;
|
||||
cardBackgroundColor: $--neutral-10;
|
||||
bodyBackgroundColor: $--neutral-9;
|
||||
closeColor: $--text-3;
|
||||
dividerColor: $--neutral-7;
|
||||
dividerOverlayColor: $--overlay-7;
|
||||
borderColor: $--neutral-6;
|
||||
borderOverlayColor: $--overlay-6;
|
||||
cubicBezierEaseInOut: cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
/* stylelint-enable */
|
||||
@ -265,16 +265,16 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
&.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to {
|
||||
opacity: 1;
|
||||
transform: scale(1) $original-transform;
|
||||
transform: scale(0.99999) $original-transform;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fade-in-transition($block: "fade-in", $enter-duration: .2s, $leave-duration: .2s) {
|
||||
&.#{$namespace}-#{$block}--transition-enter-active {
|
||||
transition: opacity $enter-duration $default-cubic-bezier;
|
||||
transition: all $enter-duration $default-cubic-bezier !important;
|
||||
}
|
||||
&.#{$namespace}-#{$block}--transition-leave-active {
|
||||
transition: opacity $leave-duration $default-cubic-bezier;
|
||||
transition: all $leave-duration $default-cubic-bezier !important;
|
||||
}
|
||||
&.#{$namespace}-#{$block}--transition-enter,
|
||||
&.#{$namespace}-#{$block}--transition-leave-to {
|
||||
@ -397,26 +397,30 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
|
||||
|
||||
@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
|
||||
&.#{$namespace}-#{$block}-leave-active {
|
||||
transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay, margin $duration $default-cubic-bezier $delay;
|
||||
transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay,
|
||||
margin-left $duration $default-cubic-bezier $delay,
|
||||
margin-right $duration $default-cubic-bezier $delay;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-enter-active {
|
||||
transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier, margin $duration $default-cubic-bezier;
|
||||
transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier,
|
||||
margin-left $duration $default-cubic-bezier,
|
||||
margin-right $duration $default-cubic-bezier;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-enter {
|
||||
max-width: 0!important;
|
||||
margin: 0!important;
|
||||
opacity: 0;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
opacity: 0!important;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-leave-to {
|
||||
max-width: 0!important;
|
||||
opacity: 0!important;
|
||||
margin: 0!important;
|
||||
opacity: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -445,4 +449,24 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
|
||||
opacity: 0!important;
|
||||
transform: translateY(60%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon-switch-transition ($original-transform: (), $left: 0, $top: 0) {
|
||||
&.n-icon-switch-enter, &.n-icon-switch-leave-to {
|
||||
/* make sure it apply to element */
|
||||
transform: $original-transform scale(.75);
|
||||
opacity: 0;
|
||||
}
|
||||
&.n-icon-switch-enter-to, &.n-icon-switch-leave {
|
||||
transform: scale(0.9999) $original-transform;
|
||||
opacity: 1;
|
||||
}
|
||||
&.n-icon-switch-leave-active, &.n-icon-switch-enter-active {
|
||||
transform-origin: center;
|
||||
position: absolute;
|
||||
left: $left;
|
||||
top: $top;
|
||||
transition:
|
||||
all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user