diff --git a/demo/documentation/components/button/enUS/loading.md b/demo/documentation/components/button/enUS/loading.md index 79e7f7583..d6a763aa8 100644 --- a/demo/documentation/components/button/enUS/loading.md +++ b/demo/documentation/components/button/enUS/loading.md @@ -10,6 +10,7 @@ Button has loading status. Loading +
Loading +
Loading +
Loading +
+ + +``` \ No newline at end of file diff --git a/demo/documentation/components/configConsumer/enUS/index.md b/demo/documentation/components/configConsumer/enUS/index.md index ff561d707..b7556fd7a 100644 --- a/demo/documentation/components/configConsumer/enUS/index.md +++ b/demo/documentation/components/configConsumer/enUS/index.md @@ -4,4 +4,5 @@ Config Consumer is built for getting config (usually as global config) of Config ```demo basic theme-environment +color ``` \ No newline at end of file diff --git a/demo/documentation/components/element/enUS/color.md b/demo/documentation/components/element/enUS/color.md new file mode 100644 index 000000000..14ea3a4c6 --- /dev/null +++ b/demo/documentation/components/element/enUS/color.md @@ -0,0 +1,14 @@ +# Style Scheme + +```html + + + +``` \ No newline at end of file diff --git a/demo/documentation/components/element/enUS/index.md b/demo/documentation/components/element/enUS/index.md index 8a3c9993c..5a4108174 100644 --- a/demo/documentation/components/element/enUS/index.md +++ b/demo/documentation/components/element/enUS/index.md @@ -3,4 +3,5 @@ Element is similar to config consumer but has different class apply to it when t # Demos ```demo basic +color ``` \ No newline at end of file diff --git a/demo/documentation/components/log/enUS/basic.md b/demo/documentation/components/log/enUS/basic.md index 5a669417d..8dd7b424b 100644 --- a/demo/documentation/components/log/enUS/basic.md +++ b/demo/documentation/components/log/enUS/basic.md @@ -1,78 +1,58 @@ # Basic ```html - + + + + ``` ```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) } } } diff --git a/demo/documentation/components/log/enUS/index.md b/demo/documentation/components/log/enUS/index.md index 4d0db4851..ec3b105f6 100644 --- a/demo/documentation/components/log/enUS/index.md +++ b/demo/documentation/components/log/enUS/index.md @@ -1,4 +1,6 @@ # Log + ```demo basic +loading ``` \ No newline at end of file diff --git a/demo/documentation/components/log/enUS/loading.md b/demo/documentation/components/log/enUS/loading.md new file mode 100644 index 000000000..8b26047b9 --- /dev/null +++ b/demo/documentation/components/log/enUS/loading.md @@ -0,0 +1,36 @@ +# Loading +```html + + + + + +``` + +```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() + } + } +} +``` \ No newline at end of file diff --git a/demo/documentation/components/slider/enUS/mark.md b/demo/documentation/components/slider/enUS/mark.md index 0a65d2514..344e333f1 100644 --- a/demo/documentation/components/slider/enUS/mark.md +++ b/demo/documentation/components/slider/enUS/mark.md @@ -29,9 +29,6 @@ export default { } ``` ```css -.n-slider { - margin-bottom: 8px; -} .n-input-number { margin: 0 12px 8px 0; } diff --git a/index.js b/index.js index bdfae3b10..721689d6a 100644 --- a/index.js +++ b/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, diff --git a/packages/base/IconTransition/src/main.vue b/packages/base/IconTransition/src/main.vue deleted file mode 100644 index 254a9d14c..000000000 --- a/packages/base/IconTransition/src/main.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - diff --git a/packages/common/Button/src/Button.vue b/packages/common/Button/src/Button.vue index 8af9a435e..2dfee67db 100644 --- a/packages/common/Button/src/Button.vue +++ b/packages/common/Button/src/Button.vue @@ -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" > - +
- - - - + + + + + +
- +
- +
- - - - + + + + + +
- + diff --git a/packages/common/Log/src/LogLoader.vue b/packages/common/Log/src/LogLoader.vue new file mode 100644 index 000000000..421117b5c --- /dev/null +++ b/packages/common/Log/src/LogLoader.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/common/Scrollbar/src/main.vue b/packages/common/Scrollbar/src/main.vue index ee0690be3..c56fd7078 100644 --- a/packages/common/Scrollbar/src/main.vue +++ b/packages/common/Scrollbar/src/main.vue @@ -25,6 +25,7 @@
@@ -45,6 +46,7 @@
@@ -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() diff --git a/packages/common/Slider/src/main.vue b/packages/common/Slider/src/main.vue index f7dcfe2b6..1f8784a19 100644 --- a/packages/common/Slider/src/main.vue +++ b/packages/common/Slider/src/main.vue @@ -7,10 +7,13 @@ 'n-slider--with-mark': marks, [`n-${synthesizedTheme}-theme`]: synthesizedTheme }" + @keydown.right="handleKeyDownRight" + @keydown.left="handleKeyDownLeft" >
- {{ activeHandleValue || tooltipHoverDisplayValue }} + {{ activeHandleValue === null ? tooltipHoverDisplayValue : activeHandleValue }}
@@ -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 } }, diff --git a/packages/common/Steps/src/Step.vue b/packages/common/Steps/src/Step.vue index 5b380a2d7..a8953ecd4 100644 --- a/packages/common/Steps/src/Step.vue +++ b/packages/common/Steps/src/Step.vue @@ -9,7 +9,7 @@
- +
- +
@@ -55,11 +55,11 @@ diff --git a/packages/utils/colors.js b/packages/utils/colors.js new file mode 100644 index 000000000..5587597b8 --- /dev/null +++ b/packages/utils/colors.js @@ -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 diff --git a/styles/Button.scss b/styles/Button.scss index e817a5366..c7fef1835 100644 --- a/styles/Button.scss +++ b/styles/Button.scss @@ -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; diff --git a/styles/Code.scss b/styles/Code.scss index 70495bc68..9bb26c9fc 100644 --- a/styles/Code.scss +++ b/styles/Code.scss @@ -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 { diff --git a/styles/Log.scss b/styles/Log.scss index 4d402b7e1..bff3b7a02 100644 --- a/styles/Log.scss +++ b/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; } } } -} \ No newline at end of file +} diff --git a/styles/Slider.scss b/styles/Slider.scss index ced039f4c..c690574d7 100644 --- a/styles/Slider.scss +++ b/styles/Slider.scss @@ -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; } } \ No newline at end of file diff --git a/styles/Steps.scss b/styles/Steps.scss index 96073350c..5ca6fa00a 100644 --- a/styles/Steps.scss +++ b/styles/Steps.scss @@ -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) { diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss index 6cb594097..b44071d12 100644 --- a/styles/themes/dark/index.scss +++ b/styles/themes/dark/index.scss @@ -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; + } } diff --git a/styles/themes/dark/jsIndex.scss b/styles/themes/dark/jsIndex.scss new file mode 100644 index 000000000..3c381d79c --- /dev/null +++ b/styles/themes/dark/jsIndex.scss @@ -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 */ \ No newline at end of file diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss index 16e6cbf4d..84be0cef1 100644 --- a/styles/themes/light/index.scss +++ b/styles/themes/light/index.scss @@ -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; + } } diff --git a/styles/themes/light/jsIndex.scss b/styles/themes/light/jsIndex.scss new file mode 100644 index 000000000..65d5a4271 --- /dev/null +++ b/styles/themes/light/jsIndex.scss @@ -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 */ \ No newline at end of file diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss index 5f0766da7..a868c41b4 100644 --- a/styles/themes/vars.scss +++ b/styles/themes/vars.scss @@ -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; + } } \ No newline at end of file