From 91f8a2abf7d9c9d28435294adee82ed9847c9309 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Thu, 16 May 2024 15:38:35 +0200 Subject: [PATCH] Use new border with variables Signed-off-by: Marco Ambrosini --- src/components/NcInputField/NcInputField.vue | 5 +++-- src/components/NcSelect/NcSelect.vue | 4 +++- src/components/NcTextArea/NcTextArea.vue | 7 ++++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index c0d4f64a5b..f4b7cc4807 100644 --- a/src/components/NcInputField/NcInputField.vue +++ b/src/components/NcInputField/NcInputField.vue @@ -371,7 +371,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; @@ -386,7 +386,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 8b8c2651e0..df4fca7cdb 100644 --- a/src/components/NcSelect/NcSelect.vue +++ b/src/components/NcSelect/NcSelect.vue @@ -1149,7 +1149,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); @@ -1226,6 +1226,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; @@ -1300,6 +1301,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 908c8b9551..95c09c316d 100644 --- a/src/components/NcTextArea/NcTextArea.vue +++ b/src/components/NcTextArea/NcTextArea.vue @@ -325,13 +325,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; @@ -339,7 +339,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; }