javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(components): [select-v2] Uniform style consistent with select (#10501)

Browse Source
This commit is contained in:
kooriookami
2022-11-09 12:27:20 +08:00
committed by GitHub
parent 03a628cab5
commit ed417d0fe0
2 changed files with 10 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/components/select-v2/src/select.vue
View File

@@ -30,7 +30,7 @@
ref="selectionRef"
:class="[
nsSelectV2.e('wrapper'),
nsSelectV2.is('focused', states.isComposing),
nsSelectV2.is('focused', states.isComposing || expanded),
nsSelectV2.is('hovering', states.comboBoxHovering),
nsSelectV2.is('filterable', filterable),
nsSelectV2.is('disabled', selectDisabled),
@@ -254,8 +254,7 @@
nsSelectV2.e('placeholder'),
nsSelectV2.is(
'transparent',
states.isComposing ||
(multiple ? modelValue.length === 0 : !hasModelValue)
multiple ? modelValue.length === 0 : !hasModelValue
),
]"
>

22
packages/theme-chalk/src/select-v2.scss
View File

@@ -25,14 +25,15 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
box-sizing: border-box;
cursor: pointer;
padding: 1px 30px 1px 0;
border: 1px solid getCssVar('border-color');
border-radius: getCssVar('border-radius-base');
transition: border-color getCssVar('transition-duration-fast')
getCssVar('ease-in-out-bezier-function');
background-color: getCssVar('fill-color', 'blank');
transition: getCssVar('transition', 'duration');
&:hover {
border-color: getCssVar('text-color', 'placeholder');
}
@@ -47,7 +48,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
@include when(hovering) {
&:not(.is-focused) {
border-color: getCssVar('text-color', 'placeholder');
border-color: getCssVar('border-color-hover');
}
}
@@ -180,6 +181,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
#{$selector}__combobox-input {
padding-right: 35px;
display: block;
color: getCssVar('text-color', 'regular');
&:focus {
border-color: getCssVar('select-input-focus-border-color');
@@ -236,7 +238,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
@include e(caret) {
color: getCssVar('select-input-color');
font-size: getCssVar('select-input-font-size');
transition: transform getCssVar('transition-duration');
transition: getCssVar('transition', 'duration');
transform: rotateZ(180deg);
cursor: pointer;
@@ -259,6 +261,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
&.#{$namespace}-icon {
height: inherit;
svg {
vertical-align: middle;
}
@@ -273,15 +276,6 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
flex-wrap: wrap;
}
@include e(wrapper) {
background-color: getCssVar('fill-color', 'blank');
border: 1px solid getCssVar('border-color');
border-radius: getCssVar('border-radius-base');
position: relative;
transition: all getCssVar('transition-duration')
getCssVar('ease-in-out-bezier-function');
}
@include e(input-calculator) {
left: 0;
position: absolute;