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

chore(components): [el-input] use mixins to refactor the box-shadow (#6209)

Browse Source 
* chore(components): [el-input] use mixins to refactor the box-shadow

* fix: adjust z-index
This commit is contained in:
msidolphin
2022-02-22 15:32:27 +08:00
committed by GitHub
parent 25edf5743b
commit 04f6db9be8
3 changed files with 82 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,30 @@
@use 'mixins/var' as *;
@use 'common/var' as *;
@mixin inset-prepend-border($color) {
box-shadow: 1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
0 -1px 0 0 $color inset;
}
@mixin inset-append-border($color) {
box-shadow: 0 1px 0 0 $color inset, 0 -1px 0 0 $color inset,
-1px 0 0 0 $color inset;
}
@mixin inset-prepend-input-border($color) {
box-shadow: 1px 0 0 0px $color inset, 1px 0 0 0px $color,
0px 1px 0 0px $color inset, 0px -1px 0 0px $color inset !important;
}
@mixin inset-append-input-border($color) {
box-shadow: -1px 0 0 0px $color, -1px 0 0 0px $color inset,
0px 1px 0 0px $color inset, 0px -1px 0 0px $color inset !important;
}
@mixin mixed-input-border($color) {
box-shadow: 0 0 0 1px $color inset;
}
@include b(textarea) {
@include set-component-css-var('input', $input);
}
@@ -153,13 +177,11 @@
&:hover {
box-shadow: var(--el-input-hover-border);
z-index: 1;
}
&:focus {
outline: none;
box-shadow: var(--el-input-focus-border);
z-index: 2;
}
}
@@ -365,18 +387,14 @@
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 inset-prepend-border(var(--el-input-border-color));
}
@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 inset-append-border(var(--el-input-border-color));
}
@include m(prepend) {
@@ -389,14 +407,16 @@
> .#{$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;
@include mixed-input-border(var(--el-input-border-color));
&:hover {
box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
z-index: 1;
@include mixed-input-border(var(--el-input-hover-border-color));
}
&:focus {
outline: none;
box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
z-index: 2;
@include mixed-input-border(var(--el-input-focus-border-color));
}
}
@@ -408,35 +428,34 @@
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;
z-index: 2;
@include inset-prepend-input-border(
var(--el-input-focus-border-color)
);
}
}
&.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;
@include inset-prepend-input-border(
var(--el-input-focus-border-color)
);
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;
z-index: 2;
@include inset-prepend-input-border(
var(--el-input-focus-border-color)
);
}
}
}
}
&: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;
z-index: 1;
@include inset-prepend-input-border(
var(--el-input-hover-border-color)
);
}
}
}
@@ -454,41 +473,38 @@
.#{$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;
@include inset-append-input-border(var(--el-input-border-color));
&: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;
z-index: 2;
@include inset-append-input-border(
var(--el-input-focus-border-color)
);
}
}
&.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;
z-index: 2;
@include inset-append-input-border(
var(--el-input-focus-border-color)
);
&: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;
z-index: 2;
@include inset-append-input-border(
var(--el-input-focus-border-color)
);
}
}
}
}
&: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;
z-index: 1;
@include inset-append-input-border(
var(--el-input-hover-border-color)
);
}
}
}

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

@@ -222,3 +222,11 @@
}
}
}
@mixin inset-input-border($color, $important: false) {
@if $important == true {
box-shadow: 0 0 0 1px $color inset !important;
} @else {
box-shadow: 0 0 0 1px $color inset;
}
}

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

@@ -47,7 +47,10 @@
display: inline-flex;
&:focus {
box-shadow: 0 0 0 1px var(--el-select-input-focus-border-color) inset;
@include inset-input-border(
var(--el-select-input-focus-border-color),
true
);
}
}
@@ -79,7 +82,9 @@
}
&.#{$namespace}-icon {
position: relative;
height: inherit;
z-index: 2;
}
}
@@ -88,7 +93,7 @@
cursor: not-allowed;
&:hover {
box-shadow: 0 0 0 1px var(--el-select-disabled-border) inset;
@include inset-input-border(var(--el-select-disabled-border));
}
}
& .#{$namespace}-select__caret {
@@ -97,7 +102,10 @@
}
&.is-focus .#{$namespace}-input__inner {
box-shadow: 0 0 0 1px var(--el-select-input-focus-border-color) inset !important;
@include inset-input-border(
var(--el-select-input-focus-border-color),
true
);
}
}