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

refactor(components): [el-input] use box-shadow to implement border (#6031)

Browse Source 
* refactor(components): [el-input] use box-shadow to implement border

* fix: select position
This commit is contained in:
msidolphin
2022-02-21 09:31:18 +08:00
committed by GitHub
parent 78b24dfdfd
commit 6e8a0016eb
7 changed files with 175 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/examples/input/mixed-input.vue
View File

@@ -27,6 +27,24 @@
</template>
</el-input>
</div>
<div class="mt-4">
<el-input
v-model="input3"
placeholder="Please input"
class="input-with-select"
>
<template #prepend>
<el-button :icon="Search"></el-button>
</template>
<template #append>
<el-select v-model="select" placeholder="Select" style="width: 110px">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
</template>
</el-input>
</div>
</template>
<script setup lang="ts">

25
packages/theme-chalk/src/cascader.scss
View File

@@ -16,10 +16,7 @@
&:not(.is-disabled):hover {
.#{$namespace}-input__inner {
cursor: pointer;
border-color: var(
--el-input-hover-border,
map.get($input, 'hover-border')
);
box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
}
}
@@ -30,10 +27,12 @@
text-overflow: ellipsis;
&:focus {
border-color: var(
--el-input-focus-border,
map.get($input, 'focus-border')
);
box-shadow: 0 0 0 1px
var(
--el-input-focus-border-color,
map.get($input, 'focus-border-color')
)
inset;
}
}
@@ -65,10 +64,12 @@
@include when(focus) {
.#{$namespace}-input__inner {
border-color: var(
--el-input-focus-border,
map.get($input, 'focus-border')
);
box-shadow: 0 0 0 1px
var(
--el-input-focus-border-color,
map.get($input, 'focus-border-color')
)
inset;
}
}
}

11
packages/theme-chalk/src/common/var.scss
View File

@@ -439,15 +439,18 @@ $input: () !default;
$input: map.merge(
(
'text-color': var(--el-text-color-regular),
'border': var(--el-border-base),
'border': 0 0 0 1px var(--el-input-border-color) inset,
'hover-border': 0 0 0 1px var(--el-input-hover-border-color) inset,
'focus-border': 0 0 0 1px var(--el-input-focus-border-color) inset,
'transparent-border': 0 0 0 1px transparent inset,
'border-color': var(--el-border-color-base),
'border-radius': var(--el-border-radius-base),
'bg-color': var(--el-color-white),
'icon-color': var(--el-text-color-placeholder),
'placeholder-color': var(--el-text-color-placeholder),
'hover-border': var(--el-border-color-hover),
'hover-border-color': var(--el-border-color-hover),
'clear-hover-color': var(--el-text-color-secondary),
'focus-border': var(--el-color-primary),
'focus-border-color': var(--el-color-primary),
),
$input
);
@@ -1207,6 +1210,8 @@ $transition: map.merge(
'fade-linear': opacity var(--el-transition-duration-fast) linear,
'border': border-color var(--el-transition-duration-fast)
var(--el-transition-function-ease-in-out-bezier),
'box-shadow': box-shadow var(--el-transition-duration-fast)
var(--el-transition-function-ease-in-out-bezier),
'color': color var(--el-transition-duration-fast)
var(--el-transition-function-ease-in-out-bezier),
),

4
packages/theme-chalk/src/form.scss
View File

@@ -204,13 +204,13 @@ $form-item-label-top-margin-bottom: map.merge(
.#{$namespace}-textarea__inner {
&,
&:focus {
border-color: var(--el-color-danger);
box-shadow: 0 0 0 1px var(--el-color-danger) inset;
}
}
.#{$namespace}-input-group__append,
.#{$namespace}-input-group__prepend {
.#{$namespace}-input__inner {
border-color: transparent;
box-shadow: 0 0 0 1px transparent inset;
}
}
.#{$namespace}-input__validateIcon {

10
packages/theme-chalk/src/input-number.scss
View File

@@ -49,10 +49,12 @@
color: var(--el-color-primary);
& ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
border-color: var(
--el-input-focus-border,
map.get($input, 'focus-border')
);
box-shadow: 0 0 0 1px
var(
--el-input-focus-border-color,
map.get($input, 'focus-border-color')
)
inset;
}
}

163
packages/theme-chalk/src/input.scss
View File

@@ -16,6 +16,7 @@
font-size: var(--el-font-size-base);
@include e(inner) {
position: relative;
display: block;
resize: vertical;
padding: 5px 15px;
@@ -27,12 +28,12 @@
color: var(--el-input-text-color, map.get($input, 'text-color'));
background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
background-image: none;
border: var(--el-input-border, map.get($input, 'border'));
box-shadow: var(--el-input-border, map.get($input, 'border'));
border-radius: var(
--el-input-border-radius,
map.get($input, 'border-radius')
);
transition: var(--el-transition-border);
transition: var(--el-transition-box-shadow);
&::placeholder {
color: var(
@@ -42,18 +43,12 @@
}
&:hover {
border-color: var(
--el-input-hover-border,
map.get($input, 'hover-border')
);
box-shadow: var(--el-input-hover-border);
}
&:focus {
outline: none;
border-color: var(
--el-input-focus-border,
map.get($input, 'focus-border')
);
box-shadow: var(--el-input-focus-border);
}
}
@@ -129,6 +124,7 @@
}
@include e(inner) {
position: relative;
-webkit-appearance: none;
background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
background-image: none;
@@ -136,7 +132,6 @@
--el-input-border-radius,
map.get($input, 'border-radius')
);
border: var(--el-input-border, map.get($input, 'border'));
box-sizing: border-box;
color: var(--el-input-text-color, map.get($input, 'text-color'));
display: inline-block;
@@ -145,8 +140,9 @@
line-height: map.get($input-height, 'default');
outline: none;
padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
transition: var(--el-transition-border);
transition: var(--el-transition-box-shadow);
width: 100%;
box-shadow: var(--el-input-border, map.get($input, 'border'));
&::placeholder {
color: var(
@@ -156,18 +152,14 @@
}
&:hover {
border-color: var(
--el-input-hover-border,
map.get($input, 'hover-border')
);
box-shadow: var(--el-input-hover-border);
z-index: 1;
}
&:focus {
outline: none;
border-color: var(
--el-input-focus-border,
map.get($input, 'focus-border')
);
box-shadow: var(--el-input-focus-border);
z-index: 2;
}
}
@@ -221,17 +213,15 @@
@include when(active) {
.#{$namespace}-input__inner {
outline: none;
border-color: var(
--el-input-focus-border,
map.get($input, 'focus-color')
);
box-shadow: 0 0 0 1px
var(--el-input-focus-border, map.get($input, 'focus-color')) inset;
}
}
@include when(disabled) {
.#{$namespace}-input__inner {
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
box-shadow: 0 0 0 1px map.get($input-disabled, 'border') inset;
color: map.get($input-disabled, 'text-color');
cursor: not-allowed;
@@ -247,7 +237,7 @@
@include when(exceed) {
.#{$namespace}-input__inner {
border-color: var(--el-color-danger);
box-shadow: 0 0 0 1px var(--el-color-danger) inset;
}
.#{$namespace}-input__suffix {
@@ -341,7 +331,6 @@
vertical-align: middle;
display: table-cell;
position: relative;
border: $border-base;
border-radius: var(--el-input-border-radius);
padding: 0 20px;
width: 1px;
@@ -354,7 +343,7 @@
.#{$namespace}-select,
.#{$namespace}-button {
display: inline-block;
margin: -10px -20px;
margin: 0 -20px;
}
button.#{$namespace}-button,
@@ -364,8 +353,6 @@
border-color: transparent;
background-color: transparent;
color: inherit;
border-top: 0;
border-bottom: 0;
}
.#{$namespace}-button,
@@ -378,35 +365,133 @@
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,
0 1px 0 0 var(--el-input-border-color) inset,
0 -1px 0 0 var(--el-input-border-color) inset;
}
@include e(append) {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: 0 1px 0 0 var(--el-input-border-color) inset,
0 -1px 0 0 var(--el-input-border-color) inset,
-1px 0 0 0 var(--el-input-border-color) inset;
}
@include m(prepend) {
.#{$namespace}-input__inner {
box-shadow: 1px 0 0 0px var(--el-input-border-color) inset,
0px 1px 0 0px var(--el-input-border-color) inset,
0px -1px 0 0px var(--el-input-border-color) inset;
}
> .#{$namespace}-input__inner {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: 0 0 0 1px var(--el-input-border-color) inset;
&:hover {
box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
}
&:focus {
outline: none;
box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
}
}
.#{$namespace}-select
.#{$namespace}-input.is-focus
.#{$namespace}-input__inner {
border-color: transparent;
@include e(prepend) {
.#{$namespace}-select {
.#{$namespace}-input {
.#{$namespace}-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:focus {
outline: none;
box-shadow: 1px 0 0 0px var(--el-input-focus-border-color) inset,
1px 0 0 0px var(--el-input-focus-border-color),
0px 1px 0 0px var(--el-input-focus-border-color) inset,
0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
}
}
&.is-focus {
.#{$namespace}-input__inner {
box-shadow: 1px 0 0 0px var(--el-input-focus-border-color) inset,
1px 0 0 0px var(--el-input-focus-border-color),
0px 1px 0 0px var(--el-input-focus-border-color) inset,
0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
z-index: 2;
&:focus {
outline: none;
box-shadow: 1px 0 0 0px var(--el-input-focus-border-color) inset,
1px 0 0 0px var(--el-input-focus-border-color),
0px 1px 0 0px var(--el-input-focus-border-color) inset,
0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
}
}
}
}
&:hover {
.#{$namespace}-input__inner {
box-shadow: 1px 0 0 0px var(--el-input-hover-border-color) inset,
1px 0 0 0px var(--el-input-hover-border-color),
0px 1px 0 0px var(--el-input-hover-border-color) inset,
0px -1px 0 0px var(--el-input-hover-border-color) inset !important;
}
}
}
}
}
@include m(append) {
.#{$namespace}-input__inner {
> .#{$namespace}-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.#{$namespace}-select
.#{$namespace}-input.is-focus
.#{$namespace}-input__inner {
border-color: transparent;
@include e(append) {
.#{$namespace}-select {
.#{$namespace}-input {
.#{$namespace}-input__inner {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: -1px 0 0 0px var(--el-input-border-color),
-1px 0 0 0px var(--el-input-border-color) inset,
0px 1px 0 0px var(--el-input-border-color) inset,
0px -1px 0 0px var(--el-input-border-color) inset;
&:focus {
outline: none;
box-shadow: -1px 0 0 0px var(--el-input-focus-border-color),
-1px 0 0 0px var(--el-input-focus-border-color) inset,
0px 1px 0 0px var(--el-input-focus-border-color) inset,
0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
}
}
&.is-focus {
.#{$namespace}-input__inner {
outline: none;
box-shadow: -1px 0 0 0px var(--el-input-focus-border-color),
-1px 0 0 0px var(--el-input-focus-border-color) inset,
0px 1px 0 0px var(--el-input-focus-border-color) inset,
0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
&:focus {
outline: none;
box-shadow: -1px 0 0 0px var(--el-input-focus-border-color),
-1px 0 0 0px var(--el-input-focus-border-color) inset,
0px 1px 0 0px var(--el-input-focus-border-color) inset,
0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
}
}
}
}
&:hover {
.#{$namespace}-input__inner {
box-shadow: -1px 0 0 0px var(--el-input-hover-border-color),
-1px 0 0 0px var(--el-input-hover-border-color) inset,
0px 1px 0 0px var(--el-input-hover-border-color) inset,
0px -1px 0 0px var(--el-input-hover-border-color) inset;
}
}
}
}
}
}

8
packages/theme-chalk/src/select.scss
View File

@@ -36,7 +36,7 @@
&:hover:not(.#{$namespace}-select--disabled) {
.#{$namespace}-input__inner {
border-color: var(--el-select-border-color-hover);
box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset;
}
}
@@ -47,7 +47,7 @@
display: inline-flex;
&:focus {
border-color: var(--el-select-input-focus-border-color) !important;
box-shadow: 0 0 0 1px var(--el-select-input-focus-border-color) inset;
}
}
@@ -88,7 +88,7 @@
cursor: not-allowed;
&:hover {
border-color: var(--el-select-disabled-border);
box-shadow: 0 0 0 1px var(--el-select-disabled-border) inset;
}
}
& .#{$namespace}-select__caret {
@@ -97,7 +97,7 @@
}
&.is-focus .#{$namespace}-input__inner {
border-color: var(--el-select-input-focus-border-color) !important;
box-shadow: 0 0 0 1px var(--el-select-input-focus-border-color) inset !important;
}
}