fix: fix inline-edit input

This commit is contained in:
Alex Grozav 2023-06-22 13:31:46 +03:00
parent ffcbaedf18
commit 206baebf77

View file

@ -28,23 +28,22 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
$--horiz-padding: 15px; $--horiz-padding: 15px;
input { .el-input {
border: 1px solid transparent;
padding: 0 $--horiz-padding - 2px; // -2px for borders
}
div.el-input {
display: inline-grid; display: inline-grid;
font: inherit; font: inherit;
padding: 10px 0; padding: 10px 0;
&::after, :deep(input) {
input { border: 1px solid transparent;
padding: 0 $--horiz-padding - 2px; // -2px for borders
width: 100%;
grid-area: 1 / 2; grid-area: 1 / 2;
font: inherit; font: inherit;
} }
&::after { &::after {
grid-area: 1 / 2;
font: inherit;
content: attr(data-value) ' '; content: attr(data-value) ' ';
visibility: hidden; visibility: hidden;
white-space: nowrap; white-space: nowrap;
@ -56,9 +55,13 @@ div.el-input {
} }
&:hover { &:hover {
input:not(:focus) { :deep(input):not(:focus) {
border: 1px solid var(--color-text-lighter); border: 1px solid var(--color-text-lighter);
} }
} }
:deep(input):focus {
border: 1px solid var(--color-secondary);
}
} }
</style> </style>