diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index 923d85b311..ffee7ba8f8 100644 --- a/src/components/NcInputField/NcInputField.vue +++ b/src/components/NcInputField/NcInputField.vue @@ -373,7 +373,7 @@ export default { background-color: var(--color-main-background); color: var(--color-main-text); - border: 2px solid var(--color-border-maxcontrast); + border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast); border-radius: var(--border-radius-large); cursor: pointer; @@ -388,7 +388,8 @@ export default { &:active:not([disabled]), &:hover:not([disabled]), &:focus:not([disabled]) { - border-color: 2px solid var(--color-main-text) !important; + border-width: var(--border-width-input-focused, 2px); + border-color: var(--color-main-text) !important; box-shadow: 0 0 0 2px var(--color-main-background) !important; } diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue index 496b3ed0bc..3656709732 100644 --- a/src/components/NcSelect/NcSelect.vue +++ b/src/components/NcSelect/NcSelect.vue @@ -1153,7 +1153,7 @@ body { /* Borders */ --vs-border-color: var(--color-border-maxcontrast); - --vs-border-width: 2px; + --vs-border-width: var(--border-width-input, 2px) !important; --vs-border-style: solid; --vs-border-radius: var(--border-radius-large); @@ -1238,6 +1238,7 @@ body { } &.vs--open .vs__dropdown-toggle { + border-width: var(--border-width-input-focused); outline: 2px solid var(--color-main-background); border-color: var(--color-main-text); border-bottom-color: transparent; @@ -1312,6 +1313,7 @@ body { } .vs__dropdown-menu { + border-width: var(--border-width-input-focused) !important; border-color: var(--color-main-text) !important; outline: none !important; box-shadow: diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue index 57ba5fa2f4..05b18d3f84 100644 --- a/src/components/NcTextArea/NcTextArea.vue +++ b/src/components/NcTextArea/NcTextArea.vue @@ -331,13 +331,13 @@ export default { margin: 0; padding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input width: 100%; - + height: calc(var(--default-clickable-area) * 2); font-size: var(--default-font-size); text-overflow: ellipsis; background-color: var(--color-main-background); color: var(--color-main-text); - border: 2px solid var(--color-border-maxcontrast); + border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast); border-radius: var(--border-radius-large); cursor: pointer; @@ -345,7 +345,8 @@ export default { &:active:not([disabled]), &:hover:not([disabled]), &:focus:not([disabled]) { - border-color: 2px solid var(--color-main-text) !important; + border-width: var(--border-width-input-focused, 2px); + border-color: var(--color-main-text); box-shadow: 0 0 0 2px var(--color-main-background) !important; }