Skip to content

E
Element
Commit dda21ce9 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

Input / Input Number: add chalk theme (#7178) 

* Input / Input Number: add chalk theme

* Update Input Number doc
parent 9bae0160
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 101 deletions
examples/docs/en-US/input-number.md
View file @ dda21ce9
...@@ -99,15 +99,16 @@ Allows you to define incremental steps. ...@@ -99,15 +99,16 @@ Allows you to define incremental steps.
### Size ### Size
Additional `large` and `small` sizes of the input box are available Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo :::demo
```html ```html
<template> <template>
<el-input-number size="large" v-model="num4"></el-input-number> <el-input-number v-model="num4"></el-input-number>
<el-input-number v-model="num5"></el-input-number> <el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number> <el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
</template> </template>
<script> <script>
export default { export default {
...@@ -115,7 +116,32 @@ Additional `large` and `small` sizes of the input box are available ...@@ -115,7 +116,32 @@ Additional `large` and `small` sizes of the input box are available
return { return {
num4: 1, num4: 1,
num5: 1, num5: 1,
num6: 1 num6: 1,
num7: 1
}
}
};
</script>
```
:::
### Controls Position
:::demo Set `controls-position` to decide controls position
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
};
},
methods: {
handleChange(value) {
console.log(value);
} }
} }
}; };
...@@ -135,6 +161,7 @@ Additional `large` and `small` sizes of the input box are available ...@@ -135,6 +161,7 @@ Additional `large` and `small` sizes of the input box are available
|disabled| whether the component is disabled | boolean | — | false | |disabled| whether the component is disabled | boolean | — | false |
|controls| whether to enable the control buttons | boolean | — | true | |controls| whether to enable the control buttons | boolean | — | true |
|debounce| debounce delay when typing, in millisecond | number | — | 300 | |debounce| debounce delay when typing, in millisecond | number | — | 300 |
|controls-position | position of the control buttons | string | right | - |
|name | same as `name` in native input | string | — | — | |name | same as `name` in native input | string | — | — |
### Events ### Events
......
examples/docs/en-US/input.md
View file @ dda21ce9
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<style> <style>
.demo-input.demo-en-US { .demo-input.demo-en-US {
.el-select .el-input { .el-select .el-input {
width: 110px; width: 130px;
} }
.el-input { .el-input {
width: 180px; width: 180px;
...@@ -105,6 +105,16 @@ ...@@ -105,6 +105,16 @@
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
} }
.demo-input-suffix {
padding: 10px;
}
.demo-input-suffix .el-input {
margin-right: 15px;
}
.demo-input-label {
display: inline-block;
width: 130px;
}
.demo-autocomplete { .demo-autocomplete {
text-align: center; text-align: center;
...@@ -196,7 +206,7 @@ Add an icon to indicate input type. ...@@ -196,7 +206,7 @@ Add an icon to indicate input type.
::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well. ::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
```html ```html
<div class="demo-input-suffix"> <div class="demo-input-suffix">
Using attributes <span class="demo-input-label">Using attributes</span>
<el-input <el-input
placeholder="Pick a date" placeholder="Pick a date"
suffix-icon="el-icon-date" suffix-icon="el-icon-date"
...@@ -209,7 +219,7 @@ Add an icon to indicate input type. ...@@ -209,7 +219,7 @@ Add an icon to indicate input type.
</el-input> </el-input>
</div> </div>
<div class="demo-input-suffix"> <div class="demo-input-suffix">
Using slots <span class="demo-input-label">Using slots</span>
<el-input <el-input
placeholder="Pick a date" placeholder="Pick a date"
v-model="input22"> v-model="input22">
...@@ -222,6 +232,13 @@ Add an icon to indicate input type. ...@@ -222,6 +232,13 @@ Add an icon to indicate input type.
</el-input> </el-input>
</div> </div>
<style>
.demo-input-label {
display: inline-block;
width: 130px;
}
</style>
<script> <script>
export default { export default {
data() { data() {
......
examples/docs/zh-CN/input-number.md
View file @ dda21ce9
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
num3: 5, num3: 5,
num4: 1, num4: 1,
num5: 1, num5: 1,
num6: 1 num6: 1,
num7: 1,
num8: 1
} }
}, },
methods: { methods: {
...@@ -97,15 +99,16 @@ ...@@ -97,15 +99,16 @@
### 尺寸 ### 尺寸
额外提供了 `large`、`small` 两种尺寸的数字输入框 额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框
:::demo :::demo
```html ```html
<template> <template>
<el-input-number size="large" v-model="num4"></el-input-number> <el-input-number v-model="num4"></el-input-number>
<el-input-number v-model="num5"></el-input-number> <el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number> <el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
</template> </template>
<script> <script>
export default { export default {
...@@ -113,7 +116,32 @@ ...@@ -113,7 +116,32 @@
return { return {
num4: 1, num4: 1,
num5: 1, num5: 1,
num6: 1 num6: 1,
num7: 1
}
}
};
</script>
```
:::
### 按钮位置
:::demo 设置 `controls-position` 属性可以控制按钮位置。
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
};
},
methods: {
handleChange(value) {
console.log(value);
} }
} }
}; };
...@@ -132,6 +160,7 @@ ...@@ -132,6 +160,7 @@
| disabled | 是否禁用计数器 | boolean | — | false | | disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true | | controls | 是否使用控制按钮 | boolean | — | true |
| debounce | 输入时的去抖延迟，毫秒 | number | — | 300 | | debounce | 输入时的去抖延迟，毫秒 | number | — | 300 |
| controls-position | 控制按钮位置 | string | right | - |
| name | 原生属性 | string | — | — | | name | 原生属性 | string | — | — |
### Events ### Events
......
examples/docs/zh-CN/input.md
View file @ dda21ce9
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
<style> <style>
.demo-input.demo-zh-CN { .demo-input.demo-zh-CN {
.el-select .el-input { .el-select .el-input {
width: 110px; width: 130px;
} }
.el-input { .el-input {
width: 180px; width: 180px;
...@@ -369,7 +369,7 @@ export default { ...@@ -369,7 +369,7 @@ export default {
</div> </div>
<style> <style>
.el-select .el-input { .el-select .el-input {
width: 110px; width: 130px;
} }
</style> </style>
<script> <script>
......
packages/autocomplete/src/autocomplete-suggestions.vue
View file @ dda21ce9
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<transition name="el-zoom-in-top" @after-leave="doDestroy"> <transition name="el-zoom-in-top" @after-leave="doDestroy">
<div <div
v-show="showPopper" v-show="showPopper"
class="el-autocomplete-suggestion" class="el-autocomplete-suggestion el-popper"
:class="{ 'is-loading': parent.loading }" :class="{ 'is-loading': parent.loading }"
:style="{ width: dropdownWidth }" :style="{ width: dropdownWidth }"
> >
......
packages/autocomplete/src/autocomplete.vue
View file @ dda21ce9
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
</el-input> </el-input>
<el-autocomplete-suggestions <el-autocomplete-suggestions
:props="props" :props="props"
visible-arrow
:class="[popperClass ? popperClass : '']" :class="[popperClass ? popperClass : '']"
ref="suggestions" ref="suggestions"
:suggestions="suggestions" :suggestions="suggestions"
......
packages/input-number/src/input-number.vue
View file @ dda21ce9
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
:class="[ :class="[
size ? 'el-input-number--' + size : '', size ? 'el-input-number--' + size : '',
{ 'is-disabled': disabled }, { 'is-disabled': disabled },
{ 'is-without-controls': !controls} { 'is-without-controls': !controls },
{ 'is-controls-right': controlsAtRight }
]" ]"
> >
<span <span
...@@ -12,7 +13,7 @@ ...@@ -12,7 +13,7 @@
:class="{'is-disabled': minDisabled}" :class="{'is-disabled': minDisabled}"
v-repeat-click="decrease" v-repeat-click="decrease"
> >
<i class="el-icon-minus"></i> <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>
</span> </span>
<span <span
v-if="controls" v-if="controls"
...@@ -20,7 +21,7 @@ ...@@ -20,7 +21,7 @@
:class="{'is-disabled': maxDisabled}" :class="{'is-disabled': maxDisabled}"
v-repeat-click="increase" v-repeat-click="increase"
> >
<i class="el-icon-plus"></i> <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>
</span> </span>
<el-input <el-input
:value="currentValue" :value="currentValue"
...@@ -102,6 +103,10 @@ ...@@ -102,6 +103,10 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
controlsPosition: {
type: String,
default: ''
},
debounce: { debounce: {
type: Number, type: Number,
default: 300 default: 300
...@@ -136,6 +141,9 @@ ...@@ -136,6 +141,9 @@
precision() { precision() {
const { value, step, getPrecision } = this; const { value, step, getPrecision } = this;
return Math.max(getPrecision(value), getPrecision(step)); return Math.max(getPrecision(value), getPrecision(step));
},
controlsAtRight() {
return this.controlsPosition === 'right';
} }
}, },
methods: { methods: {
......
packages/select/src/select.vue
View file @ dda21ce9
<template> <template>
<div <div
class="el-select" class="el-select"
:class="[size ? 'el-select--' + size : '']"
v-clickoutside="handleClose"> v-clickoutside="handleClose">
<div <div
class="el-select__tags" class="el-select__tags"
...@@ -114,9 +115,9 @@ ...@@ -114,9 +115,9 @@
import NavigationMixin from './navigation-mixin'; import NavigationMixin from './navigation-mixin';
const sizeMap = { const sizeMap = {
'large': 42, 'medium': 36,
'small': 30, 'small': 32,
'mini': 22 'mini': 28
}; };
const valueEquals = (a, b) => { const valueEquals = (a, b) => {
...@@ -521,7 +522,7 @@ ...@@ -521,7 +522,7 @@
if (!this.$refs.reference) return; if (!this.$refs.reference) return;
let inputChildNodes = this.$refs.reference.$el.childNodes; let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px'; input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 40) + 'px';
if (this.visible && this.emptyText !== false) { if (this.visible && this.emptyText !== false) {
this.broadcast('ElSelectDropdown', 'updatePopper'); this.broadcast('ElSelectDropdown', 'updatePopper');
} }
......
packages/theme-chalk/src/autocomplete.scss
View file @ dda21ce9
...@@ -11,16 +11,20 @@ ...@@ -11,16 +11,20 @@
@include b(autocomplete-suggestion) { @include b(autocomplete-suggestion) {
margin: 5px 0; margin: 5px 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12); box-shadow: $--box-shadow-light;
&.el-popper .popper__arrow {
left: 24px !important;
}
@include e(wrap) { @include e(wrap) {
max-height: 280px; max-height: 280px;
overflow: auto;
background-color: $--color-white;
border: 1px solid $--color-black;
padding: 6px 0; padding: 6px 0;
border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
background-color: $--color-white;
border: 1px solid $--border-color-light;
border-radius: $--border-radius-base;
} }
@include e(list) { @include e(list) {
...@@ -29,13 +33,13 @@ ...@@ -29,13 +33,13 @@
} }
& li { & li {
list-style: none; padding: 0 20px;
line-height: 36px;
padding: 0 10px;
margin: 0; margin: 0;
line-height: 33px;
cursor: pointer; cursor: pointer;
color: $--color-black; color: $--color-text-regular;
font-size: 14px; font-size: $--font-size-base;
list-style: none;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -43,17 +47,21 @@ ...@@ -43,17 +47,21 @@
&:hover { &:hover {
background-color: $--select-option-hover-background; background-color: $--select-option-hover-background;
} }
&.highlighted { &.highlighted {
background-color: $--color-primary; color: $--color-primary;
color: $--color-white;
} }
&:active { &:active {
background-color: darken($--color-primary, 0.2); background-color: $--color-primary;
color: $--color-white;
} }
&.divider { &.divider {
margin-top: 6px; margin-top: 6px;
border-top: 1px solid $--color-black; border-top: 1px solid $--color-black;
} }
&.divider:last-child { &.divider:last-child {
margin-bottom: -6px; margin-bottom: -6px;
} }
......
packages/theme-chalk/src/cascader.scss
View file @ dda21ce9
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@include b(cascader) { @include b(cascader) {
display: inline-block; display: inline-block;
position: relative; position: relative;
min-width: 224px; font-size: $--font-size-base;
.el-input, .el-input,
.el-input__inner { .el-input__inner {
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
line-height: 36px; line-height: 40px;
padding: 0 25px 0 10px; padding: 0 25px 0 15px;
color: $--input-color; color: $--input-color;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
font-size: $--font-size-small;
text-align: left; text-align: left;
font-size: inherit;
span { span {
color: $--color-black; color: $--color-black;
...@@ -63,17 +63,27 @@ ...@@ -63,17 +63,27 @@
@include m(medium) { @include m(medium) {
font-size: $--input-medium-font-size; font-size: $--input-medium-font-size;
.el-cascader__label { @include e(label) {
line-height: #{$--input-medium-height - 2}; line-height: #{$--input-medium-height };
} }
} }
@include m(small) { @include m(small) {
font-size: $--input-small-font-size; font-size: $--input-small-font-size;
.el-cascader__label { @include e(label) {
line-height: #{$--input-small-height - 2}; line-height: #{$--input-small-height };
} }
} }
@include m(mini) {
font-size: $--input-mini-font-size;
@include e(label) {
line-height: #{$--input-mini-height};
}
}
@include when(disabled) { @include when(disabled) {
.el-cascader__label { .el-cascader__label {
z-index: #{$--index-normal + 1}; z-index: #{$--index-normal + 1};
...@@ -92,8 +102,8 @@ ...@@ -92,8 +102,8 @@
border-radius: $--border-radius-small; border-radius: $--border-radius-small;
box-shadow: $--select-dropdown-shadow; box-shadow: $--select-dropdown-shadow;
&.el-popper .popper__arrow { .popper__arrow {
left: 24px !important; transform: translateX(-400%);
} }
} }
......
packages/theme-chalk/src/common/var.scss
View file @ dda21ce9
...@@ -98,7 +98,7 @@ $--index-popper: 2000; ...@@ -98,7 +98,7 @@ $--index-popper: 2000;
/* Disable base /* Disable base
-------------------------- */ -------------------------- */
$--disabled-fill-base: $--border-color-extra-light; $--disabled-fill-base: $--background-color-base;
$--disabled-color-base: $--color-text-placeholder; $--disabled-color-base: $--color-text-placeholder;
$--disabled-border-base: $--border-color-lighter; $--disabled-border-base: $--border-color-lighter;
...@@ -612,6 +612,7 @@ $--datepicker-inrange-color: $--border-color-extra-light; ...@@ -612,6 +612,7 @@ $--datepicker-inrange-color: $--border-color-extra-light;
$--datepicker-inrange-hover-color: $--border-color-extra-light; $--datepicker-inrange-hover-color: $--border-color-extra-light;
$--datepicker-active-color: $--color-primary; $--datepicker-active-color: $--color-primary;
$--datepicker-text-hover-color: $--color-primary; $--datepicker-text-hover-color: $--color-primary;
$--datepicker-cell-hover-color: #fff;
/* Loading /* Loading
--------------------------*/ --------------------------*/
......
packages/theme-chalk/src/dropdown.scss
View file @ dda21ce9
...@@ -18,6 +18,24 @@ ...@@ -18,6 +18,24 @@
& .el-dropdown__caret-button { & .el-dropdown__caret-button {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
position: relative;
border-left: none;
&::before {
$gap: 5px;
content: '';
position: absolute;
display: block;
width: 1px;
top: $gap;
bottom: $gap;
left: 0;
background: mix(white, transparent, 50%);
}
&:hover {
}
& .el-dropdown__icon { & .el-dropdown__icon {
padding-left: 0; padding-left: 0;
......
packages/theme-chalk/src/input-number.scss
View file @ dda21ce9
...@@ -3,28 +3,32 @@ ...@@ -3,28 +3,32 @@
@import "input"; @import "input";
@include b(input-number) { @include b(input-number) {
position: relative;
display: inline-block; display: inline-block;
width: 180px; width: 180px;
position: relative;
& .el-input { .el-input {
display: block; display: block;
&__inner {
-webkit-appearance: none;
padding-left: #{$--input-height + 10};
padding-right: #{$--input-height + 10};
} }
& .el-input__inner {
appearance: none;
padding-right: #{$--input-height * 2 + 10};
} }
@include e((increase, decrease)) { @include e((increase, decrease)) {
height: auto; position: absolute;
border-left: $--border-base; z-index: 1;
top: 1px;
width: $--input-height; width: $--input-height;
height: auto;
line-height: #{$--input-height - 2}; line-height: #{$--input-height - 2};
top: 1px;
text-align: center; text-align: center;
color: $--color-black; background: $--background-color-base;
color: $--color-text-regular;
cursor: pointer; cursor: pointer;
position: absolute; font-size: 13px;
z-index: 1;
&:hover { &:hover {
color: $--color-primary; color: $--color-primary;
...@@ -34,21 +38,26 @@ ...@@ -34,21 +38,26 @@
} }
} }
@include when(disabled) { &.is-disabled {
color: $--disabled-border-base; color: $--disabled-color-base;
cursor: not-allowed; cursor: not-allowed;
} }
} }
@include e(increase) { @include e(increase) {
right: 0; right: 1px;
border-radius: 0 $--border-radius-base $--border-radius-base 0;
border-left: $--border-base;
} }
@include e(decrease) { @include e(decrease) {
right: #{$--input-height + 1}; left: 1px;
border-radius: $--border-radius-base 0 0 $--border-radius-base;
border-right: $--border-base;
} }
@include when(disabled) { @include when(disabled) {
& .el-input-number__increase, .el-input-number__decrease { @include e((increase, decrease)) {
border-color: $--disabled-border-base; border-color: $--disabled-border-base;
color: $--disabled-border-base; color: $--disabled-border-base;
...@@ -58,39 +67,112 @@ ...@@ -58,39 +67,112 @@
} }
} }
} }
@include m(medium) { @include m(medium) {
width: 200px; width: 200px;
& .el-input-number__increase, .el-input-number__decrease { @include e((increase, decrease)) {
line-height: #{$--input-medium-height - 2}; line-height: #{$--input-medium-height - 2};
width: $--input-medium-height; width: $--input-medium-height;
font-size: $--input-medium-font-size; font-size: $--input-medium-font-size;
} }
& .el-input-number__decrease {
right: #{$--input-medium-height + 1}; .el-input__inner {
} padding-left: #{$--input-medium-height + 7};
& .el-input__inner { padding-right: #{$--input-medium-height + 7};
padding-right: #{$--input-medium-height * 2 + 10};
} }
} }
@include m(small) { @include m(small) {
width: 130px; width: 130px;
& .el-input-number__increase, .el-input-number__decrease { @include e((increase, decrease)) {
line-height: #{$--input-small-height - 2}; line-height: #{$--input-small-height - 2};
width: $--input-small-height; width: $--input-small-height;
font-size: $--input-small-font-size; font-size: $--input-small-font-size;
[class*=el-icon] {
transform: scale(.9);
}
}
.el-input__inner {
padding-left: #{$--input-small-height + 7};
padding-right: #{$--input-small-height + 7};
}
}
@include m(mini) {
width: 130px;
@include e((increase, decrease)) {
line-height: #{$--input-mini-height - 2};
width: $--input-mini-height;
font-size: $--input-mini-font-size;
[class*=el-icon] {
transform: scale(.8);
} }
& .el-input-number__decrease {
right: #{$--input-small-height + 1};
} }
& .el-input__inner {
padding-right: #{$--input-small-height * 2 + 10}; .el-input__inner {
padding-left: #{$--input-mini-height + 7};
padding-right: #{$--input-mini-height + 7};
} }
} }
@include when(without-controls) { @include when(without-controls) {
& .el-input__inner { .el-input__inner {
padding-right: 10px; padding-right: 15px;
}
}
@include when(controls-right) {
.el-input__inner {
padding-left: 15px;
padding-right: #{$--input-height + 10};
}
@include e((increase, decrease)) {
height: auto;
line-height: #{($--input-height - 2) / 2};
[class*=el-icon] {
transform: scale(.8);
}
}
@include e(increase) {
border-radius: 0 $--border-radius-base 0 0;
border-bottom: $--border-base;
}
@include e(decrease) {
right: 1px;
bottom: 1px;
top: auto;
left: auto;
border-right: none;
border-left: $--border-base;
border-radius: 0 0 $--border-radius-base 0;
}
&[class*=medium] {
[class*=increase], [class*=decrease] {
line-height: #{($--input-medium-height - 2) / 2};
}
}
&[class*=small] {
[class*=increase], [class*=decrease] {
line-height: #{($--input-small-height - 2) / 2};
}
}
&[class*=mini] {
[class*=increase], [class*=decrease] {
line-height: #{($--input-mini-height - 2) / 2};
}
} }
} }
} }
packages/theme-chalk/src/input.scss
View file @ dda21ce9
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
height: $--input-height; height: $--input-height;
line-height: 1; line-height: 1;
outline: none; outline: none;
padding: 3px 10px; padding: 0 15px;
transition: $--border-transition-base; transition: $--border-transition-base;
width: 100%; width: 100%;
text-align: inherit; text-align: inherit;
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
transition: all .3s; transition: all .3s;
pointer-events: none; pointer-events: none;
} }
@include e(suffix-inner) { @include e(suffix-inner) {
pointer-events: all; pointer-events: all;
} }
...@@ -105,34 +106,37 @@ ...@@ -105,34 +106,37 @@
cursor: not-allowed; cursor: not-allowed;
} }
} }
@include m(suffix) { @include m(suffix) {
.el-input__inner { .el-input__inner {
padding-right: 30px; padding-right: 30px;
} }
} }
@include m(prefix) { @include m(prefix) {
.el-input__inner { .el-input__inner {
padding-left: 30px; padding-left: 30px;
} }
} }
@include m(medium) { @include m(medium) {
font-size: $--input-medium-font-size; font-size: $--input-medium-font-size;
& .el-input__inner { @include e(inner) {
height: $--input-medium-height; height: $--input-medium-height;
} }
} }
@include m(small) { @include m(small) {
font-size: $--input-small-font-size; font-size: $--input-small-font-size;
& .el-input__inner { @include e(inner) {
height: $--input-small-height; height: $--input-small-height;
} }
} }
@include m(mini) { @include m(mini) {
font-size: $--input-mini-font-size; font-size: $--input-mini-font-size;
& .el-input__inner { @include e(inner) {
height: $--input-mini-height; height: $--input-mini-height;
} }
} }
...@@ -144,47 +148,51 @@ ...@@ -144,47 +148,51 @@
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
& > .el-input__inner { > .el-input__inner {
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
} }
@include e((append, prepend)) { @include e((append, prepend)) {
background-color: $--color-black; background-color: $--background-color-base;
color: $--color-black; color: $--color-info;
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
position: relative; position: relative;
border: $--border-base; border: $--border-base;
border-radius: $--input-border-radius; border-radius: $--input-border-radius;
padding: 0 10px; padding: 0 20px;
width: 1px; width: 1px;
white-space: nowrap; white-space: nowrap;
& .el-select, .el-select,
& .el-button { .el-button {
display: block; display: block;
margin: -10px; margin: -20px;
} }
& button.el-button, button.el-button,
& div.el-select .el-input__inner, div.el-select .el-input__inner,
& div.el-select:hover .el-input__inner { div.el-select:hover .el-input__inner {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
} }
& .el-button,
& .el-input { .el-button,
.el-input {
font-size: inherit; font-size: inherit;
} }
} }
@include e(prepend) { @include e(prepend) {
border-right: 0; border-right: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@include e(append) { @include e(append) {
border-left: 0; border-left: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
...@@ -197,6 +205,7 @@ ...@@ -197,6 +205,7 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
} }
@include m(append) { @include m(append) {
.el-input__inner { .el-input__inner {
border-top-right-radius: 0; border-top-right-radius: 0;
......
packages/theme-chalk/src/select-dropdown.scss
View file @ dda21ce9
...@@ -36,8 +36,8 @@ ...@@ -36,8 +36,8 @@
padding: 0; padding: 0;
} }
& .popper__arrow { .popper__arrow {
left: 24px !important; transform: translateX(-400%);
} }
} }
......
packages/theme-chalk/src/select.scss
View file @ dda21ce9
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
@include b(select) { @include b(select) {
display: inline-block; display: inline-block;
position: relative; position: relative;
min-width: 224px;
&:hover { &:hover {
.el-input__inner { .el-input__inner {
...@@ -18,7 +17,7 @@ ...@@ -18,7 +17,7 @@
} }
} }
& .el-input__inner { .el-input__inner {
cursor: pointer; cursor: pointer;
padding-right: 35px; padding-right: 35px;
...@@ -27,7 +26,7 @@ ...@@ -27,7 +26,7 @@
} }
} }
& .el-input { .el-input {
& .el-select__caret { & .el-select__caret {
color: $--select-input-color; color: $--select-input-color;
font-size: $--select-input-font-size; font-size: $--select-input-font-size;
...@@ -65,7 +64,7 @@ ...@@ -65,7 +64,7 @@
} }
} }
& > .el-input { > .el-input {
display: block; display: block;
} }
...@@ -109,11 +108,11 @@ ...@@ -109,11 +108,11 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
& .el-tag__close { .el-tag__close {
margin-top: -2px; margin-top: -2px;
} }
& .el-tag { .el-tag {
height: $--select-tag-height; height: $--select-tag-height;
line-height: $--select-tag-height; line-height: $--select-tag-height;
box-sizing: border-box; box-sizing: border-box;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment