mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-24 15:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: input-group related styles

Browse Source
This commit is contained in:
07akioni 2020-03-07 15:48:49 +08:00
parent 05ae87a40c
commit e8e0055f0f
13 changed files with 138 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/code/zhCN/index.md
View File

@ -19,7 +19,7 @@ Vue.use(NaiveUI)
NaiveUI.setHljs(hljs)
```
## 例子
## 演示
```demo
basic

2
demo/documentation/components/input/enUS/inputGroup.md
View File

@ -18,7 +18,7 @@
<n-input-group>
<n-button type="primary">Search</n-button>
<n-input :style="{ width: '50%' }" v-model="value8" />
<n-button>Search</n-button>
<n-button type="primary" ghost>Search</n-button>
</n-input-group>
<n-input-group>
<n-date-picker v-model="value9"/>

2
demo/documentation/components/input/zhCN/inputGroup.md
View File

@ -18,7 +18,7 @@
<n-input-group>
<n-button type="primary">搜索</n-button>
<n-input :style="{ width: '50%' }" v-model="value8" />
<n-button>搜索</n-button>
<n-button type="primary" ghost>搜索</n-button>
</n-input-group>
<n-input-group>
<n-date-picker v-model="value9"/>

2
demo/documentation/components/timeline/zhCN/index.md
View File

@ -1,6 +1,6 @@
# Timeline 时间线
这个世界有两个纬度：时间、事件。
## 例子
## 演示
```demo
basic
size

2
demo/documentation/components/transfer/zhCN/index.md
View File

@ -1,7 +1,7 @@
# 穿梭框 Transfer
<!--single-column-->
左、右、左、右...像我这么无聊的人能玩一整天。
## 例子
## 演示
```demo
basic
large-data

10
demo/menuOptions.js
View File

@ -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',

2
package.json
View File

@ -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",

40
src/InputNumber/src/main.vue
View File

@ -18,7 +18,31 @@
@mousedown="handleMouseDown"
@click="minus"
>
<n-icon><md-remove /></n-icon>
<div class="n-input-number-button-boundary" />
<div class="n-input-number-button-body">
<n-icon>
<md-remove />
</n-icon>
</div>
<div class="n-input-number-button-border-mask" />
</button>
<button
tabindex="-1"
type="button"
class="n-input-number__add-button"
:class="{
[`n-input-number__add-button--disabled`]: !addable
}"
@mousedown="handleMouseDown"
@click="add"
>
<div class="n-input-number-button-body">
<n-icon>
<md-add />
</n-icon>
</div>
<div class="n-input-number-button-boundary" />
<div class="n-input-number-button-border-mask" />
</button>
<input
ref="input"
@ -31,20 +55,6 @@
@blur="handleBlur"
@keyup.enter="handleEnter"
>
<button
tabindex="-1"
type="button"
class="n-input-number__add-button"
:class="{
[`n-input-number__add-button--disabled`]: !addable
}"
@mousedown="handleMouseDown"
@click="add"
>
<n-icon>
<md-add />
</n-icon>
</button>
<div class="n-input-number__border-mask" />
</div>
</template>

3
styles/Button.scss
View File

@ -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();

3
styles/Input.scss
View File

@ -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;
}
}
}
* {

101
styles/InputNumber.scss
View File

@ -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');

2
styles/themes/dark/components/Input.scss
View File

@ -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;
}

9
think.md
View File

@ -119,11 +119,14 @@ Previously, it would not work with single quotes:
const devtoolIsOpened = e.target === document.activeElement
```
## 2020.3.7
主体差不多做完了，好累
## TODO 排序不分先后
1. <del>Focus Detector on Time Selector</del>
2. <del>Menu Root Indent = 0 可能造成问题</del>
3. 用 RAF 优化 scrollbar 性能（不一定需要）
3. <del>用 RAF 优化 scrollbar 性能（不一定需要）</del>为了有时候滚动同步的一致性，决定不做了
4. <del>Anchor 切换有 bug，忽然闪现第一个</del>
5. <del>Safari select lightbar container overflow 边角（或许是 webkit 的问题）</del>默认选中第一个可以装作这个问题不存在
6. <del>Chrome lightbar offset @table fitler</del> select menu 始终存在这个问题，不知道原因是什么
@ -190,7 +193,9 @@ const devtoolIsOpened = e.target === document.activeElement
67. <del>Modal 滚动之后的 transform origin</del>
68. <del>Slider 对于 modal 适配</del>
69. <del>table fixed scroll checkbox, not sync</del>
70. Transfer no data
70. <del>Transfer no data</del>
71. Metropolis 从自带字体去掉
72. Input Group
```
Done