From d95500e5011e122a38e5dec90198960958ebcc0e Mon Sep 17 00:00:00 2001 From: dlohvinov Date: Wed, 20 Nov 2024 23:36:33 +0200 Subject: [PATCH] refactor: deprecated :deep() selector usages [WTEL-5568](https://webitel.atlassian.net/browse/WTEL-5568) --- src/components/wt-checkbox/wt-checkbox.vue | 2 +- src/components/wt-icon-btn/wt-icon-btn.vue | 2 +- src/components/wt-player/wt-player.vue | 102 +++++++++--------- src/components/wt-radio/wt-radio.vue | 6 +- src/components/wt-select/_multiselect.scss | 15 ++- src/components/wt-select/wt-select.vue | 12 +-- src/components/wt-table/wt-table.vue | 2 +- .../wt-tags-input/wt-tags-input.vue | 2 +- 8 files changed, 70 insertions(+), 73 deletions(-) diff --git a/src/components/wt-checkbox/wt-checkbox.vue b/src/components/wt-checkbox/wt-checkbox.vue index 2e2200467..7c83403e5 100644 --- a/src/components/wt-checkbox/wt-checkbox.vue +++ b/src/components/wt-checkbox/wt-checkbox.vue @@ -147,7 +147,7 @@ export default { } .wt-checkbox:hover { - :deep .wt-icon__icon { + :deep(.wt-icon__icon) { fill: var(--icon-active-color); } } diff --git a/src/components/wt-icon-btn/wt-icon-btn.vue b/src/components/wt-icon-btn/wt-icon-btn.vue index 97c7cec40..d07491128 100644 --- a/src/components/wt-icon-btn/wt-icon-btn.vue +++ b/src/components/wt-icon-btn/wt-icon-btn.vue @@ -38,7 +38,7 @@ const emit = defineEmits(['click', 'mousedown']); width: fit-content; line-height: 0; - &:hover .wt-icon--color-default :deep .wt-icon__icon { + &:hover .wt-icon--color-default :deep(.wt-icon__icon) { fill: var(--icon-btn-hover-color); } diff --git a/src/components/wt-player/wt-player.vue b/src/components/wt-player/wt-player.vue index 6a806ba9d..307d09b0d 100644 --- a/src/components/wt-player/wt-player.vue +++ b/src/components/wt-player/wt-player.vue @@ -200,72 +200,70 @@ export default { } } - :deep { - .plyr { + :deep(.plyr) { max-width: 100%; // prevents