mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
fix(components): input-number/input/dropdown/select/badge details (#4866)
This commit is contained in:
云游君
GitHub
parent
e1e00f825d
commit
2b209fd760
@ -121,26 +121,3 @@ button/custom
|
||||
| Name | Description | Subtags |
|
||||
| ---- | ------------------------------ | ------- |
|
||||
| - | customize button group content | Button |
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.el-row {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& + .el-button-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-badge :value="12" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
<el-button>comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="3" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
<el-button>replies</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="1" class="item" type="primary">
|
||||
<el-button size="small">comments</el-button>
|
||||
<el-button>comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="2" class="item" type="warning">
|
||||
<el-button size="small">replies</el-button>
|
||||
<el-button>replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-badge value="new" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
<el-button>comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
<el-button>replies</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
<el-button>comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
<el-button>replies</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,12 +6,13 @@
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
|
||||
<el-button-group>
|
||||
<el-button-group class="ml-4">
|
||||
<el-button type="primary" :icon="Edit"></el-button>
|
||||
<el-button type="primary" :icon="Share"></el-button>
|
||||
<el-button type="primary" :icon="Delete"></el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowLeft,
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
<el-button size="large">Large</el-button>
|
||||
<el-button>Default</el-button>
|
||||
<el-button size="small">Small</el-button>
|
||||
<el-button size="large" type="primary" :icon="Search">Search</el-button>
|
||||
<el-button type="primary" :icon="Search">Search</el-button>
|
||||
<el-button size="small" type="primary" :icon="Search">Search</el-button>
|
||||
</el-row>
|
||||
<el-row class="my-4">
|
||||
<el-button size="large" round>Large</el-button>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
border
|
||||
></el-checkbox>
|
||||
</div>
|
||||
<div class="demo-with-border">
|
||||
<div class="demo-with-border my-4">
|
||||
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
|
||||
</div>
|
||||
@ -34,9 +34,3 @@ const checked3 = ref(false)
|
||||
const checked4 = ref(true)
|
||||
const checkboxGroup1 = ref([])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-with-border {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-input-number v-model="num1" size="large" />
|
||||
<el-input-number v-model="num2" />
|
||||
<el-input-number v-model="num2" class="mx-4" />
|
||||
<el-input-number v-model="num3" size="small" />
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<el-tag class="mx-1" size="large">Large</el-tag>
|
||||
<el-tag class="mx-1">Default</el-tag>
|
||||
<el-tag class="mx-1" size="small">Small</el-tag>
|
||||
<el-row>
|
||||
<el-tag class="mx-1" size="large">Large</el-tag>
|
||||
<el-tag class="mx-1">Default</el-tag>
|
||||
<el-tag class="mx-1" size="small">Small</el-tag>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mt-4">
|
||||
<el-tag class="mx-1" size="large" closable>Large</el-tag>
|
||||
<el-tag class="mx-1" closable>Default</el-tag>
|
||||
<el-tag class="mx-1" size="small" closable>Small</el-tag>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
@ -57,9 +57,6 @@ const beforeAvatarUpload = (file: ElFile) => {
|
||||
height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar-uploader-icon svg {
|
||||
margin-top: 74px; /* (178px - 28px) / 2 - 1px */
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<el-button type="primary">Click to upload</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
jpg/png files with a size less than 500kb
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
:file-list="fileList"
|
||||
list-type="picture"
|
||||
>
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<el-button type="primary">Click to upload</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
jpg/png files with a size less than 500kb
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:on-change="handleChange"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<el-button type="primary">Click to upload</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
jpg/png files with a size less than 500kb
|
||||
|
||||
@ -8,13 +8,9 @@
|
||||
:auto-upload="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button size="small" type="primary">select file</el-button>
|
||||
<el-button type="primary">select file</el-button>
|
||||
</template>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
size="small"
|
||||
type="success"
|
||||
@click="submitUpload"
|
||||
<el-button class="ml-3" type="success" @click="submitUpload"
|
||||
>upload to server</el-button
|
||||
>
|
||||
<template #tip>
|
||||
|
||||
@ -6,13 +6,9 @@
|
||||
:auto-upload="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button size="small" type="primary">select file</el-button>
|
||||
<el-button type="primary">select file</el-button>
|
||||
</template>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
size="small"
|
||||
type="success"
|
||||
@click="submitUpload"
|
||||
<el-button class="ml-3" type="success" @click="submitUpload"
|
||||
>upload to server</el-button
|
||||
>
|
||||
<template #tip>
|
||||
|
||||
@ -35,9 +35,9 @@ describe('Button.vue', () => {
|
||||
})
|
||||
it('size', () => {
|
||||
const wrapper = mount(Button, {
|
||||
props: { size: 'default' },
|
||||
props: { size: 'large' },
|
||||
})
|
||||
expect(wrapper.classes()).toContain('el-button--default')
|
||||
expect(wrapper.classes()).toContain('el-button--large')
|
||||
})
|
||||
it('plain', () => {
|
||||
const wrapper = mount(Button, {
|
||||
@ -140,11 +140,11 @@ describe('Button Group', () => {
|
||||
wrapper.findAll('.el-button-group button.el-button--small').length
|
||||
).toBe(2)
|
||||
|
||||
size.value = 'default'
|
||||
size.value = 'large'
|
||||
await nextTick()
|
||||
|
||||
expect(
|
||||
wrapper.findAll('.el-button-group button.el-button--default').length
|
||||
wrapper.findAll('.el-button-group button.el-button--large').length
|
||||
).toBe(2)
|
||||
})
|
||||
|
||||
|
||||
@ -87,7 +87,7 @@ export default defineComponent({
|
||||
const buttonSize = useSize(computed(() => buttonGroupContext?.size))
|
||||
const buttonDisabled = useDisabled()
|
||||
const buttonType = computed(
|
||||
() => props.type || buttonGroupContext?.type || 'default'
|
||||
() => props.type || buttonGroupContext?.type || ''
|
||||
)
|
||||
|
||||
// calculate hover & active color by color
|
||||
|
||||
@ -246,11 +246,7 @@ describe('Datetime Picker', () => {
|
||||
) as HTMLElement
|
||||
).click()
|
||||
// click confirm button
|
||||
;(
|
||||
document.querySelector(
|
||||
'.el-picker-panel__footer .el-button--default'
|
||||
) as HTMLElement
|
||||
).click()
|
||||
document.querySelectorAll('.el-picker-panel__footer .el-button')[1].click()
|
||||
const vm = wrapper.vm as any
|
||||
expect(dayjs(vm.value).format(formatStr)).toBe('2000-10-01 12:00:00')
|
||||
})
|
||||
@ -424,9 +420,9 @@ describe('Datetimerange', () => {
|
||||
triggerEvent(rightCell, 'click', true)
|
||||
await nextTick()
|
||||
;(
|
||||
document.querySelector(
|
||||
'.el-picker-panel__footer .el-button--default'
|
||||
) as HTMLElement
|
||||
document.querySelectorAll(
|
||||
'.el-picker-panel__footer .el-button'
|
||||
)[1] as HTMLElement
|
||||
).click()
|
||||
await nextTick()
|
||||
const vm = wrapper.vm as any
|
||||
@ -497,9 +493,9 @@ describe('Datetimerange', () => {
|
||||
triggerEvent(rightCell, 'mousemove', true)
|
||||
triggerEvent(rightCell, 'click', true)
|
||||
await nextTick()
|
||||
const btn = document.querySelector(
|
||||
'.el-picker-panel__footer .el-button--default'
|
||||
) as HTMLElement
|
||||
const btn = document.querySelectorAll(
|
||||
'.el-picker-panel__footer .el-button'
|
||||
)[1] as HTMLElement
|
||||
btn.click()
|
||||
await nextTick()
|
||||
const vm = wrapper.vm as any
|
||||
@ -545,9 +541,9 @@ describe('Datetimerange', () => {
|
||||
) as HTMLElement
|
||||
button.click()
|
||||
await nextTick()
|
||||
const btn = document.querySelector(
|
||||
'.el-picker-panel__footer .el-button--default'
|
||||
) as HTMLElement
|
||||
const btn = document.querySelectorAll(
|
||||
'.el-picker-panel__footer .el-button'
|
||||
)[1] as HTMLElement
|
||||
btn.click()
|
||||
await nextTick()
|
||||
expect(vm.value).not.toBe('')
|
||||
@ -583,9 +579,9 @@ describe('Datetimerange', () => {
|
||||
triggerEvent(leftDateInput, 'input', true)
|
||||
triggerEvent(leftDateInput, 'change', true)
|
||||
await nextTick()
|
||||
const btn = document.querySelector(
|
||||
'.el-picker-panel__footer .el-button--default'
|
||||
) as HTMLElement
|
||||
const btn = document.querySelectorAll(
|
||||
'.el-picker-panel__footer .el-button'
|
||||
)[1] as HTMLElement
|
||||
expect(btn.getAttribute('disabled')).not.toBeUndefined() // invalid input disables button
|
||||
btn.click()
|
||||
await nextTick()
|
||||
@ -742,9 +738,9 @@ describe('Datetimerange', () => {
|
||||
).click()
|
||||
await nextTick()
|
||||
;(
|
||||
document.querySelector(
|
||||
'.el-picker-panel__footer .el-button--default'
|
||||
) as HTMLElement
|
||||
document.querySelectorAll(
|
||||
'.el-picker-panel__footer .el-button'
|
||||
)[1] as HTMLElement
|
||||
).click()
|
||||
await nextTick()
|
||||
const vm = wrapper.vm as any
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
:style="{ backgroundColor: color }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot></slot>
|
||||
<span class="el-tag__content">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<el-icon v-if="closable" class="el-tag__close" @click="handleClose">
|
||||
<close />
|
||||
</el-icon>
|
||||
@ -16,7 +18,9 @@
|
||||
:style="{ backgroundColor: color }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot></slot>
|
||||
<span class="el-tag__content">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<el-icon v-if="closable" class="el-tag__close" @click="handleClose">
|
||||
<close />
|
||||
</el-icon>
|
||||
@ -43,9 +47,10 @@ export default defineComponent({
|
||||
setup(props, { emit }) {
|
||||
const tagSize = useSize()
|
||||
const classes = computed(() => {
|
||||
const { type, hit, effect } = props
|
||||
const { type, hit, effect, closable } = props
|
||||
return [
|
||||
'el-tag',
|
||||
closable && 'is-closable',
|
||||
type ? `el-tag--${type}` : '',
|
||||
tagSize.value ? `el-tag--${tagSize.value}` : '',
|
||||
effect ? `el-tag--${effect}` : '',
|
||||
|
||||
@ -10,7 +10,15 @@
|
||||
@include set-component-css-var('button', $button);
|
||||
}
|
||||
|
||||
$button-border-width: 1px;
|
||||
$button-icon-span-gap: () !default;
|
||||
$button-icon-span-gap: map.merge(
|
||||
(
|
||||
'large': 8px,
|
||||
'default': 6px,
|
||||
'small': 4px,
|
||||
),
|
||||
$button-icon-span-gap
|
||||
);
|
||||
|
||||
@include b(button) {
|
||||
display: inline-flex;
|
||||
@ -44,7 +52,7 @@ $button-border-width: 1px;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
@include button-size(
|
||||
@ -84,7 +92,7 @@ $button-border-width: 1px;
|
||||
|
||||
& [class*='#{$namespace}-icon'] {
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
margin-left: map.get($button-icon-span-gap, 'default');
|
||||
}
|
||||
svg {
|
||||
vertical-align: bottom;
|
||||
@ -165,7 +173,7 @@ $button-border-width: 1px;
|
||||
}
|
||||
@include when(circle) {
|
||||
border-radius: 50%;
|
||||
padding: map.get($button-padding-vertical, 'default');
|
||||
padding: map.get($button-padding-vertical, 'default') - $button-border-width;
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
@ -189,7 +197,14 @@ $button-border-width: 1px;
|
||||
|
||||
@each $size in (large, small) {
|
||||
@include m($size) {
|
||||
height: map.get($input-height, $size);
|
||||
--el-button-size: #{map.get($input-height, $size)};
|
||||
height: var(--el-button-size);
|
||||
|
||||
& [class*='#{$namespace}-icon'] {
|
||||
& + span {
|
||||
margin-left: map.get($button-icon-span-gap, $size);
|
||||
}
|
||||
}
|
||||
|
||||
@include button-size(
|
||||
map.get($button-padding-vertical, $size) - $button-border-width,
|
||||
@ -199,7 +214,8 @@ $button-border-width: 1px;
|
||||
);
|
||||
|
||||
@include when(circle) {
|
||||
padding: map.get($button-padding-vertical, $size);
|
||||
width: var(--el-button-size);
|
||||
padding: map.get($button-padding-vertical, $size) - $button-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,8 +35,8 @@
|
||||
user-select: none;
|
||||
|
||||
@include button-size(
|
||||
map.get($button-padding-vertical, 'default'),
|
||||
map.get($button-padding-horizontal, 'default'),
|
||||
map.get($button-padding-vertical, 'default') - $button-border-width,
|
||||
map.get($button-padding-horizontal, 'default') - $button-border-width,
|
||||
map.get($button-font-size, 'default'),
|
||||
0
|
||||
);
|
||||
@ -126,8 +126,8 @@
|
||||
@include m($size) {
|
||||
.#{$namespace}-checkbox-button__inner {
|
||||
@include button-size(
|
||||
map.get($button-padding-vertical, $size),
|
||||
map.get($button-padding-horizontal, $size),
|
||||
map.get($button-padding-vertical, $size) - $button-border-width,
|
||||
map.get($button-padding-horizontal, $size) - $button-border-width,
|
||||
map.get($button-font-size, $size),
|
||||
0
|
||||
);
|
||||
|
||||
@ -7,23 +7,26 @@
|
||||
@use 'mixins/utils' as *;
|
||||
|
||||
$checkbox-height: () !default;
|
||||
$checkbox-height: map.merge(
|
||||
$checkbox-height: map.merge($common-component-size, $checkbox-height);
|
||||
|
||||
$checkbox-bordered-padding-left: () !default;
|
||||
$checkbox-bordered-padding-left: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 32px,
|
||||
'small': 24px,
|
||||
'large': 12px,
|
||||
'default': 10px,
|
||||
'small': 8px,
|
||||
),
|
||||
$checkbox-height
|
||||
$checkbox-bordered-padding-left
|
||||
);
|
||||
|
||||
$checkbox-bordered-padding: () !default;
|
||||
$checkbox-bordered-padding: map.merge(
|
||||
$checkbox-bordered-padding-right: () !default;
|
||||
$checkbox-bordered-padding-right: map.merge(
|
||||
(
|
||||
'large': 0 20px 0 10px,
|
||||
'default': 0 15px 0 10px,
|
||||
'small': 0 15px 0 10px,
|
||||
'large': 20px,
|
||||
'default': 16px,
|
||||
'small': 12px,
|
||||
),
|
||||
$checkbox-bordered-padding
|
||||
$checkbox-bordered-padding-right
|
||||
);
|
||||
|
||||
$checkbox-bordered-input-height: () !default;
|
||||
@ -66,7 +69,8 @@ $checkbox-bordered-input-width: map.merge(
|
||||
}
|
||||
|
||||
@include when(bordered) {
|
||||
padding: map.get($checkbox-bordered-padding, 'default');
|
||||
padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
|
||||
0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
border: var(--el-border-base);
|
||||
box-sizing: border-box;
|
||||
@ -86,7 +90,11 @@ $checkbox-bordered-input-width: map.merge(
|
||||
|
||||
@each $size in (large, small) {
|
||||
&.#{$namespace}-checkbox--#{$size} {
|
||||
padding: map.get($checkbox-bordered-padding, $size);
|
||||
padding: 0
|
||||
map.get($checkbox-bordered-padding-right, $size)-$border-width-base
|
||||
0
|
||||
map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
|
||||
|
||||
border-radius: map.get($button-border-radius, $size);
|
||||
|
||||
.#{$namespace}-checkbox__label {
|
||||
@ -251,7 +259,7 @@ $checkbox-bordered-input-width: map.merge(
|
||||
|
||||
@include e(label) {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
padding-left: 8px;
|
||||
line-height: 1;
|
||||
font-size: var(--el-checkbox-font-size);
|
||||
}
|
||||
|
||||
@ -4,14 +4,7 @@
|
||||
@use 'common/var' as *;
|
||||
|
||||
$color-picker-size: () !default;
|
||||
$color-picker-size: map.merge(
|
||||
(
|
||||
'large': 36px,
|
||||
'default': 32px,
|
||||
'small': 28px,
|
||||
),
|
||||
$color-picker-size
|
||||
);
|
||||
$color-picker-size: map.merge($common-component-size, $color-picker-size);
|
||||
|
||||
@include b(color-predefine) {
|
||||
display: flex;
|
||||
@ -221,7 +214,7 @@ $color-picker-size: map.merge(
|
||||
}
|
||||
|
||||
@include e(btns) {
|
||||
margin-top: 6px;
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@ -163,6 +163,16 @@ $disabled: map.merge(
|
||||
$disabled
|
||||
);
|
||||
|
||||
$common-component-size: () !default;
|
||||
$common-component-size: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 32px,
|
||||
'small': 24px,
|
||||
),
|
||||
$common-component-size
|
||||
);
|
||||
|
||||
// Checkbox
|
||||
// css3 var in packages/theme-chalk/src/checkbox.scss
|
||||
$checkbox: () !default;
|
||||
@ -221,14 +231,7 @@ $radio: map.merge(
|
||||
);
|
||||
|
||||
$radio-height: () !default;
|
||||
$radio-height: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 32px,
|
||||
'small': 24px,
|
||||
),
|
||||
$radio-height
|
||||
);
|
||||
$radio-height: map.merge($common-component-size, $radio-height);
|
||||
|
||||
$radio-button: () !default;
|
||||
$radio-button: map.merge(
|
||||
@ -453,7 +456,7 @@ $input-disabled: map.merge(
|
||||
$input-font-size: () !default;
|
||||
$input-font-size: map.merge(
|
||||
(
|
||||
'large': 16px,
|
||||
'large': 14px,
|
||||
'default': 14px,
|
||||
'small': 12px,
|
||||
),
|
||||
@ -461,31 +464,17 @@ $input-font-size: map.merge(
|
||||
);
|
||||
|
||||
$input-height: () !default;
|
||||
$input-height: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 32px,
|
||||
'small': 24px,
|
||||
),
|
||||
$input-height
|
||||
);
|
||||
$input-height: map.merge($common-component-size, $input-height);
|
||||
|
||||
$input-line-height: () !default;
|
||||
$input-line-height: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 32px,
|
||||
'small': 24px,
|
||||
),
|
||||
$input-line-height
|
||||
);
|
||||
$input-line-height: map.merge($common-component-size, $input-line-height);
|
||||
|
||||
$input-number-width: () !default;
|
||||
$input-number-width: map.merge(
|
||||
(
|
||||
'large': 178px,
|
||||
'default': 146px,
|
||||
'small': 118px,
|
||||
'large': 180px,
|
||||
'default': 150px,
|
||||
'small': 120px,
|
||||
),
|
||||
$input-number-width
|
||||
);
|
||||
@ -533,7 +522,7 @@ $button: map.merge(
|
||||
'disabled-bg-color': var(--el-color-white),
|
||||
'disabled-border-color': var(--el-border-color-light),
|
||||
'divide-border-color': rgba($color-white, 0.5),
|
||||
'hover-text-color': var(--el-color-white),
|
||||
'hover-text-color': var(--el-color-primary),
|
||||
'hover-bg-color': var(--el-color-primary-light-9),
|
||||
'hover-border-color': var(--el-color-primary-light-7),
|
||||
'active-text-color': var(--el-button-hover-text-color),
|
||||
@ -543,6 +532,8 @@ $button: map.merge(
|
||||
$button
|
||||
);
|
||||
|
||||
$button-border-width: $border-width-base !default;
|
||||
|
||||
// need mix, so do not use css var
|
||||
$button-hover-tint-percent: 20%;
|
||||
$button-active-shade-percent: 10%;
|
||||
@ -602,7 +593,7 @@ $button-padding-horizontal: map.merge(
|
||||
(
|
||||
'large': 20px,
|
||||
'default': 16px,
|
||||
'small': 8px,
|
||||
'small': 12px,
|
||||
),
|
||||
$button-padding-horizontal
|
||||
);
|
||||
@ -790,12 +781,22 @@ $tag-padding: () !default;
|
||||
$tag-padding: map.merge(
|
||||
(
|
||||
'large': 12px,
|
||||
'default': 8px,
|
||||
'small': 4px,
|
||||
'default': 10px,
|
||||
'small': 8px,
|
||||
),
|
||||
$tag-padding
|
||||
);
|
||||
|
||||
$tag-icon-size: () !default;
|
||||
$tag-icon-size: map.merge(
|
||||
(
|
||||
'large': 18px,
|
||||
'default': 16px,
|
||||
'small': 14px,
|
||||
),
|
||||
$tag-icon-size
|
||||
);
|
||||
|
||||
@each $type in $types {
|
||||
$tag-color: map.merge(
|
||||
(
|
||||
|
||||
@ -25,14 +25,7 @@ $dropdown-item-padding: map.merge(
|
||||
);
|
||||
|
||||
$dropdown-caret-width: () !default;
|
||||
$dropdown-caret-width: map.merge(
|
||||
(
|
||||
'large': 40px,
|
||||
'default': 30px,
|
||||
'small': 20px,
|
||||
),
|
||||
$dropdown-caret-width
|
||||
);
|
||||
$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
|
||||
|
||||
$dropdown-divider-width: 1px !default;
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@include b(input-number) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
width: map.get($input-number-width, 'default');
|
||||
line-height: #{map.get($input-height, 'default') - 2};
|
||||
|
||||
.#{$namespace}-input {
|
||||
@ -27,17 +27,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
|
||||
width: map.get($input-height, 'default');
|
||||
height: auto;
|
||||
text-align: center;
|
||||
background: var(--el-bg-color);
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
height: map.get($input-height, 'default');
|
||||
line-height: map.get($input-height, 'default');
|
||||
outline: none;
|
||||
padding: 0 map.get($input-padding-horizontal, 'default');
|
||||
padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
|
||||
transition: var(--el-transition-border);
|
||||
width: 100%;
|
||||
|
||||
@ -291,7 +291,7 @@
|
||||
@include e(inner) {
|
||||
height: map.get($input-height, $size);
|
||||
line-height: map.get($input-height, $size);
|
||||
padding: 0 map.get($input-padding-horizontal, $size);
|
||||
padding: 0 map.get($input-padding-horizontal, $size)-$border-width-base;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__icon {
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
|
||||
@mixin button-variant($type) {
|
||||
--el-button-text-color: var(--el-color-white);
|
||||
--el-button-hover-text-color: var(--el-color-white);
|
||||
--el-button-disabled-text-color: var(--el-color-white);
|
||||
&.is-plain {
|
||||
@include button-plain(var(--el-button-bg-color), $type);
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
@include b(popper) {
|
||||
position: absolute;
|
||||
border-radius: var(--el-popper-border-radius);
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
z-index: 2000;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
|
||||
@ -96,10 +96,6 @@
|
||||
&.is-focus .#{$namespace}-input__inner {
|
||||
border-color: var(--el-select-input-focus-border-color);
|
||||
}
|
||||
|
||||
& .#{$namespace}-input__prefix-icon {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
|
||||
@ -10,6 +10,16 @@
|
||||
|
||||
$tag-border-width: 1px;
|
||||
|
||||
$tag-icon-span-gap: () !default;
|
||||
$tag-icon-span-gap: map.merge(
|
||||
(
|
||||
'large': 8px,
|
||||
'default': 6px,
|
||||
'small': 4px,
|
||||
),
|
||||
$tag-icon-span-gap
|
||||
);
|
||||
|
||||
@mixin genTheme(
|
||||
$backgroundColorWeight,
|
||||
$borderColorWeight,
|
||||
@ -90,7 +100,7 @@ $tag-border-width: 1px;
|
||||
align-items: center;
|
||||
|
||||
height: map.get($tag-height, 'default');
|
||||
padding: map.get($tag-padding, 'default');
|
||||
padding: 0 map.get($tag-padding, 'default') - $border-width-base;
|
||||
font-size: var(--el-tag-font-size);
|
||||
line-height: 1;
|
||||
border-width: $tag-border-width;
|
||||
@ -99,15 +109,19 @@ $tag-border-width: 1px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
--el-icon-size: 14px;
|
||||
|
||||
.#{$namespace}-icon {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
line-height: 16px;
|
||||
|
||||
font-size: calc(var(--el-icon-size) - 2px);
|
||||
|
||||
height: var(--el-icon-size);
|
||||
width: var(--el-icon-size);
|
||||
line-height: var(--el-icon-size);
|
||||
|
||||
svg {
|
||||
margin: 2px;
|
||||
@ -115,7 +129,7 @@ $tag-border-width: 1px;
|
||||
}
|
||||
|
||||
.#{$namespace}-tag__close {
|
||||
right: -5px;
|
||||
margin-left: map.get($tag-icon-span-gap, 'default');
|
||||
}
|
||||
|
||||
@include m(dark) {
|
||||
@ -126,10 +140,24 @@ $tag-border-width: 1px;
|
||||
@include genTheme(0, 40%, 100%, 100%);
|
||||
}
|
||||
|
||||
&.is-closable {
|
||||
padding-right: map.get($tag-icon-span-gap, 'default') - $border-width-base;
|
||||
}
|
||||
|
||||
@each $size in (large, small) {
|
||||
@include m($size) {
|
||||
padding: 0 map.get($tag-padding, $size) - $tag-border-width;
|
||||
height: map.get($tag-height, $size);
|
||||
|
||||
--el-icon-size: #{map.get($tag-icon-size, $size)};
|
||||
|
||||
.#{$namespace}-tag__close {
|
||||
margin-left: map.get($tag-icon-span-gap, $size);
|
||||
}
|
||||
|
||||
&.is-closable {
|
||||
padding-right: map.get($tag-icon-span-gap, $size) - $border-width-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user