From e8e0055f0f4d6a86177651f6ffcabe8dfda16a3d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 7 Mar 2020 15:48:49 +0800 Subject: [PATCH] style: input-group related styles --- .../components/code/zhCN/index.md | 2 +- .../components/input/enUS/inputGroup.md | 2 +- .../components/input/zhCN/inputGroup.md | 2 +- .../components/timeline/zhCN/index.md | 2 +- .../components/transfer/zhCN/index.md | 2 +- demo/menuOptions.js | 10 +- package.json | 2 +- src/InputNumber/src/main.vue | 40 ++++--- styles/Button.scss | 3 +- styles/Input.scss | 3 - styles/InputNumber.scss | 101 +++++++++++++++--- styles/themes/dark/components/Input.scss | 2 +- think.md | 9 +- 13 files changed, 138 insertions(+), 42 deletions(-) diff --git a/demo/documentation/components/code/zhCN/index.md b/demo/documentation/components/code/zhCN/index.md index 916be9e68..1ebbcf461 100644 --- a/demo/documentation/components/code/zhCN/index.md +++ b/demo/documentation/components/code/zhCN/index.md @@ -19,7 +19,7 @@ Vue.use(NaiveUI) NaiveUI.setHljs(hljs) ``` -## 例子 +## 演示 ```demo basic diff --git a/demo/documentation/components/input/enUS/inputGroup.md b/demo/documentation/components/input/enUS/inputGroup.md index c820e90a6..f5040644c 100644 --- a/demo/documentation/components/input/enUS/inputGroup.md +++ b/demo/documentation/components/input/enUS/inputGroup.md @@ -18,7 +18,7 @@ Search - Search + Search diff --git a/demo/documentation/components/input/zhCN/inputGroup.md b/demo/documentation/components/input/zhCN/inputGroup.md index 43332bb9c..1ea2edfb2 100644 --- a/demo/documentation/components/input/zhCN/inputGroup.md +++ b/demo/documentation/components/input/zhCN/inputGroup.md @@ -18,7 +18,7 @@ 搜索 - 搜索 + 搜索 diff --git a/demo/documentation/components/timeline/zhCN/index.md b/demo/documentation/components/timeline/zhCN/index.md index 5f644cf75..c44f557f0 100644 --- a/demo/documentation/components/timeline/zhCN/index.md +++ b/demo/documentation/components/timeline/zhCN/index.md @@ -1,6 +1,6 @@ # Timeline 时间线 这个世界有两个纬度：时间、事件。 -## 例子 +## 演示 ```demo basic size diff --git a/demo/documentation/components/transfer/zhCN/index.md b/demo/documentation/components/transfer/zhCN/index.md index eca6c0248..6e08698c7 100644 --- a/demo/documentation/components/transfer/zhCN/index.md +++ b/demo/documentation/components/transfer/zhCN/index.md @@ -1,7 +1,7 @@ # 穿梭框 Transfer 左、右、左、右...像我这么无聊的人能玩一整天。 -## 例子 +## 演示 ```demo basic large-data diff --git a/demo/menuOptions.js b/demo/menuOptions.js index ee6f114ef..af58c2169 100644 --- a/demo/menuOptions.js +++ b/demo/menuOptions.js @@ -36,6 +36,12 @@ const appendCounts = item => { } } +const appendDeprecatedDemos = (item, mode) => { + if ((env === 'development' && mode === 'debug') || localStorage.getItem('nimbus')) { + return [item] + } else return [] +} + const appendDebugDemos = (item, mode) => { if (env === 'development' && mode === 'debug') { return [item] @@ -875,7 +881,7 @@ export default function (locale, instance) { } ] }), - { + ...appendDeprecatedDemos({ name: 'Deprecated', path: `/${instance.lang}/${instance.theme}/doc` + '/', childItems: [ @@ -884,7 +890,7 @@ export default function (locale, instance) { path: `/${instance.lang}/${instance.theme}/doc` + '/n-nimbus-service-layout' } ] - }, + }, instance.mode), ...appendDebugDemos( { name: 'Debug', diff --git a/package.json b/package.json index a108c8c49..2f752bd3a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build:icon": "npm run clean && node build/buildIcon.js", "build:js": "npm run clean && rollup -c", "build:demo": "npm run build && npm run demo", - "build:doc": "npm run build && rm -rf doc/dist && cross-env NODE_ENV=development webpack --config build/webpack.doc.js --mode=production", + "build:doc": "npm run build && rm -rf doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js", "build": "npm run clean && node build/buildStyle.js && node build/buildIcon.js && rollup -c", "clean": "rm -rf lib && rm -rf es && rm -rf dist", "demo": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js", diff --git a/src/InputNumber/src/main.vue b/src/InputNumber/src/main.vue index 3a8f50f83..3e85de759 100644 --- a/src/InputNumber/src/main.vue +++ b/src/InputNumber/src/main.vue @@ -18,7 +18,31 @@ @mousedown="handleMouseDown" @click="minus" > - +
+
+ + + +
+
+ + -
diff --git a/styles/Button.scss b/styles/Button.scss index 4bfb9162f..8d2b8d11b 100644 --- a/styles/Button.scss +++ b/styles/Button.scss @@ -321,7 +321,7 @@ } } -@include themes-mixin() { +@include themes-mixin { @include button-ripple-mixin('default'); @include button-ripple-mixin('primary'); @include button-ripple-mixin('error'); @@ -366,6 +366,7 @@ box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; pointer-events: none; + z-index: 1; } @include e(icon) { @include fade-in-width-expand-transition(); diff --git a/styles/Input.scss b/styles/Input.scss index 725801d99..79f74acd8 100644 --- a/styles/Input.scss +++ b/styles/Input.scss @@ -397,9 +397,6 @@ border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; } - @include not-m(default-type) { - margin-left: 0!important; - } } } * { diff --git a/styles/InputNumber.scss b/styles/InputNumber.scss index 3c0a30fbf..fe50c8ade 100644 --- a/styles/InputNumber.scss +++ b/styles/InputNumber.scss @@ -48,16 +48,49 @@ left: 0; border-top-left-radius: $--n-input-number-border-radius; border-bottom-left-radius: $--n-input-number-border-radius; + @include b(input-number-button-border-mask) { + border-top-left-radius: $--n-input-number-border-radius; + border-bottom-left-radius: $--n-input-number-border-radius; + } + @include b(input-number-button-body) { + left: 1px; + right: 0; + @include b(icon) { + transform: translateX(-1px); + } + } + @include b(input-number-button-boundary) { + left: 0; + } } @include e(add-button) { right: 0; border-top-right-radius: $--n-input-number-border-radius; border-bottom-right-radius: $--n-input-number-border-radius; + @include b(input-number-button-border-mask) { + border-top-right-radius: $--n-input-number-border-radius; + border-bottom-right-radius: $--n-input-number-border-radius; + } + @include b(input-number-button-body) { + right: 1px; + left: 0; + @include b(icon) { + transform: translateX(1px); + } + } + @include b(input-number-button-boundary) { + right: 0; + } } } @include m(disabled) { @include e(minus-button, add-button) { - background: map-get($--input-number-button-background-color, 'disabled'); + @include b(input-number-button-body) { + background-color: map-get($--input-number-button-background-color, 'disabled'); + } + @include b(input-number-button-boundary) { + background-color: map-get($--input-number-button-background-color, 'disabled'); + } @include b(icon) { fill: map-get($--input-number-button-text-color, 'disabled'); stroke: map-get($--input-number-button-text-color, 'disabled'); @@ -90,6 +123,9 @@ } @include e(minus-button, add-button) { @include once { + background-color: transparent; + position: relative; + overflow: hidden; outline: none; position: absolute; cursor: pointer; @@ -97,27 +133,58 @@ top: 0; padding: 0; border: none; - display: flex; - align-items: center; - justify-content: center; font-size: 14px; - transition: - background-color .3s $--n-ease-in-out-cubic-bezier, - box-shadow .3s $--n-ease-in-out-cubic-bezier; } - background-color: map-get($--input-number-button-background-color, 'default'); + @include b(input-number-button-border-mask) { + @include once { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + transition: + box-shadow .3s $--n-ease-in-out-cubic-bezier; + } + box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default'); + } + @include b(input-number-button-body) { + @include once { + position: absolute; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + transition: background-color .3s $--n-ease-in-out-cubic-bezier; + } + background-color: map-get($--input-number-button-background-color, 'default'); + } + @include b(input-number-button-boundary) { + @include once { + width: 1px; + position: absolute; + top: 0; + bottom: 0; + transition: background-color .3s $--n-ease-in-out-cubic-bezier; + } + background-color: map-get($--input-number-button-background-color, 'default'); + } @include b(icon) { fill: map-get($--input-number-button-text-color, 'default'); stroke: map-get($--input-number-button-text-color, 'default'); } - box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default'); &:hover ~ { @include e(border-mask) { box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover'); } } &:hover { - background-color: map-get($--input-number-button-background-color, 'hover'); + @include b(input-number-button-body) { + background-color: map-get($--input-number-button-background-color, 'hover'); + } + @include b(input-number-button-boundary) { + background-color: map-get($--input-number-button-background-color, 'hover'); + } @include b(icon) { fill:map-get($--input-number-button-text-color, 'hover'); stroke: map-get($--input-number-button-text-color, 'hover'); @@ -129,7 +196,12 @@ color .3s $--n-ease-in-out-cubic-bezier, background-color .15s $--n-ease-in-out-cubic-bezier; } - background-color: map-get($--input-number-button-background-color, 'active'); + @include b(input-number-button-body) { + background-color: map-get($--input-number-button-background-color, 'active'); + } + @include b(input-number-button-boundary) { + background-color: map-get($--input-number-button-background-color, 'active'); + } @include b(icon) { fill:map-get($--input-number-button-text-color, 'active'); stroke: map-get($--input-number-button-text-color, 'active'); @@ -139,7 +211,12 @@ @include once { cursor: not-allowed; } - background-color: map-get($--input-number-button-background-color, 'disabled'); + @include b(input-number-button-body) { + background-color: map-get($--input-number-button-background-color, 'disabled'); + } + @include b(input-number-button-boundary) { + background-color: map-get($--input-number-button-background-color, 'disabled'); + } @include b(icon) { fill: map-get($--input-number-button-text-color, 'disabled'); stroke: map-get($--input-number-button-text-color, 'disabled'); diff --git a/styles/themes/dark/components/Input.scss b/styles/themes/dark/components/Input.scss index 7f8c01ba0..4135aae6f 100644 --- a/styles/themes/dark/components/Input.scss +++ b/styles/themes/dark/components/Input.scss @@ -39,5 +39,5 @@ 'disabled': inset 0 0 0 1px transparent, 'error-default': inset 0 0 0 1px $--n-error-color ) !global; - $--input-group-label-background-color: $--n-action-overlay-background-color !global; + $--input-group-label-background-color: $--n-input-overlay-background-color !global; } \ No newline at end of file diff --git a/think.md b/think.md index 79fb5001d..fd56ca15b 100644 --- a/think.md +++ b/think.md @@ -119,11 +119,14 @@ Previously, it would not work with single quotes: const devtoolIsOpened = e.target === document.activeElement ``` +## 2020.3.7 +主体差不多做完了，好累 + ## TODO 排序不分先后 1. Focus Detector on Time Selector 2. Menu Root Indent = 0 可能造成问题 -3. 用 RAF 优化 scrollbar 性能（不一定需要） +3. 用 RAF 优化 scrollbar 性能（不一定需要）为了有时候滚动同步的一致性，决定不做了 4. Anchor 切换有 bug，忽然闪现第一个 5. Safari select lightbar container overflow 边角（或许是 webkit 的问题）默认选中第一个可以装作这个问题不存在 6. Chrome lightbar offset @table fitler select menu 始终存在这个问题，不知道原因是什么 @@ -190,7 +193,9 @@ const devtoolIsOpened = e.target === document.activeElement 67. Modal 滚动之后的 transform origin 68. Slider 对于 modal 适配 69. table fixed scroll checkbox, not sync -70. Transfer no data +70. Transfer no data +71. Metropolis 从自带字体去掉 +72. Input Group ``` Done