diff options
author | Julius Härtl <jus@bitgrid.net> | 2022-11-07 22:41:26 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2022-11-07 22:42:46 +0300 |
commit | 0c59a85c9c221ca930044a9831894e663a4cd8af (patch) | |
tree | ac8473aade5b3ba8ed2c05dac0f23f88c1804241 | |
parent | 09e0d2e143c9d9f920f5dd06c670e4f4147f69f5 (diff) |
Remove legacy v-deep selector
Signed-off-by: Julius Härtl <jus@bitgrid.net>
-rw-r--r-- | src/CardCreateDialog.vue | 4 | ||||
-rw-r--r-- | src/CardSelector.vue | 2 | ||||
-rw-r--r-- | src/components/board/Board.vue | 2 | ||||
-rw-r--r-- | src/components/board/TagsTabSidebar.vue | 2 | ||||
-rw-r--r-- | src/components/card/CardSidebar.vue | 85 | ||||
-rw-r--r-- | src/components/card/CardSidebarTabDetails.vue | 10 | ||||
-rw-r--r-- | src/components/card/CommentForm.vue | 4 | ||||
-rw-r--r-- | src/components/card/CommentItem.vue | 4 | ||||
-rw-r--r-- | src/components/card/Description.vue | 8 | ||||
-rw-r--r-- | src/components/cards/AvatarList.vue | 6 | ||||
-rw-r--r-- | src/components/cards/CardBadges.vue | 2 | ||||
-rw-r--r-- | src/components/cards/CardItem.vue | 2 | ||||
-rw-r--r-- | src/components/search/GlobalSearchResults.vue | 4 | ||||
-rw-r--r-- | src/css/comments.scss | 2 | ||||
-rw-r--r-- | src/views/Dashboard.vue | 2 |
15 files changed, 70 insertions, 69 deletions
diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue index 0e0a9c17..937ce895 100644 --- a/src/CardCreateDialog.vue +++ b/src/CardCreateDialog.vue @@ -237,14 +237,14 @@ export default { justify-content: flex-end; } - .card-selector::v-deep .modal-container { + .card-selector:deep(.modal-container) { overflow: visible !important; } .empty-content { margin-top: 5vh !important; - &::v-deep h2 { + &:deep(h2) { margin-bottom: 5vh; } } diff --git a/src/CardSelector.vue b/src/CardSelector.vue index 5a255aac..95a0a073 100644 --- a/src/CardSelector.vue +++ b/src/CardSelector.vue @@ -169,7 +169,7 @@ export default { float: right; } - .card-selector::v-deep .modal-container { + .card-selector:deep(.modal-container) { overflow: visible !important; } </style> diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index c1707f29..3b192ac8 100644 --- a/src/components/board/Board.vue +++ b/src/components/board/Board.vue @@ -209,7 +209,7 @@ export default { align-items: stretch; height: 100%; - .smooth-dnd-draggable-wrapper::v-deep { + &:deep(.smooth-dnd-draggable-wrapper) { display: flex; height: auto; diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue index 4313727a..4e91b0fc 100644 --- a/src/components/board/TagsTabSidebar.vue +++ b/src/components/board/TagsTabSidebar.vue @@ -189,7 +189,7 @@ export default { } .color-picker-wrapper { - &, &::v-deep > .trigger { + &, &:deep > .trigger { width: $clickable-area; padding: 3px; display: flex; diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue index f08bd147..0ef12fb0 100644 --- a/src/components/card/CardSidebar.vue +++ b/src/components/card/CardSidebar.vue @@ -208,53 +208,54 @@ export default { <style lang="scss" scoped> - section.app-sidebar__tab--active { - min-height: auto; - display: flex; - flex-direction: column; - height: 100%; - } +section.app-sidebar__tab--active { + min-height: auto; + display: flex; + flex-direction: column; + height: 100%; +} - // FIXME: Obivously we should at some point not randomly reuse the sidebar component - // since this is not oficially supported - .modal__card .app-sidebar { - $modal-padding: 14px; - border: 0; - min-width: calc(100% - #{$modal-padding * 2}); - position: relative; - top: 0; - left: 0; - right: 0; - max-width: calc(100% - #{$modal-padding * 2}); - padding: 0 14px; - max-height: 100%; - overflow: initial; - user-select: text; - -webkit-user-select: text; +// FIXME: Obivously we should at some point not randomly reuse the sidebar component +// since this is not oficially supported +.modal__card .app-sidebar { + $modal-padding: 14px; + border: 0; + min-width: calc(100% - #{$modal-padding * 2}); + position: relative; + top: 0; + left: 0; + right: 0; + max-width: calc(100% - #{$modal-padding * 2}); + padding: 0 14px; + max-height: 100%; + overflow: initial; + user-select: text; + -webkit-user-select: text; - &::v-deep { - .app-sidebar-header { - position: sticky; - top: 0; - z-index: 100; - background-color: var(--color-main-background); - } - .app-sidebar-tabs__nav { - position: sticky; - top: 87px; - margin: 0; - z-index: 100; - background-color: var(--color-main-background); - } + // FIXME: test + &:deep { + .app-sidebar-header { + position: sticky; + top: 0; + z-index: 100; + background-color: var(--color-main-background); + } + .app-sidebar-tabs__nav { + position: sticky; + top: 87px; + margin: 0; + z-index: 100; + background-color: var(--color-main-background); + } - .app-sidebar__tab { - overflow: initial; - } + .app-sidebar__tab { + overflow: initial; + } - #emptycontent, .emptycontent { - margin-top: 88px; - } + #emptycontent, .emptycontent { + margin-top: 88px; } } +} </style> diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue index a860de83..6e457fad 100644 --- a/src/components/card/CardSidebarTabDetails.vue +++ b/src/components/card/CardSidebarTabDetails.vue @@ -368,11 +368,11 @@ export default { </script> <style lang="scss" scoped> -.section-wrapper::v-deep .mx-datepicker-main.mx-datepicker-popup { +.section-wrapper:deep(.mx-datepicker-main.mx-datepicker-popup) { left: 0 !important; } -.section-wrapper::v-deep .mx-datepicker-main.mx-datepicker-popup.mx-datepicker-sidebar { +.section-wrapper:deep(.mx-datepicker-main.mx-datepicker-popup.mx-datepicker-sidebar) { padding: 0 !important; } @@ -413,7 +413,7 @@ export default { padding: 6px } -.section-details::v-deep .multiselect__tags-wrap { +.section-details:deep(.multiselect__tags-wrap) { flex-wrap: wrap; } @@ -430,11 +430,11 @@ export default { } } -.multiselect::v-deep .multiselect__tags-wrap { +.multiselect:deep(.multiselect__tags-wrap) { z-index: 2; } -.multiselect.multiselect--active::v-deep .multiselect__tags-wrap { +.multiselect.multiselect--active:deep(.multiselect__tags-wrap) { z-index: 0; } diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue index bf4ab08b..6327938e 100644 --- a/src/components/card/CommentForm.vue +++ b/src/components/card/CommentForm.vue @@ -186,13 +186,13 @@ export default { & > div[contenteditable] { width: 100%; - &::v-deep > span > div { + &:deep > span > div { vertical-align: middle; } } } - .comment-form::v-deep .atwho-li { + .comment-form:deep(.atwho-li) { height: 32px; } diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue index c989146b..32da3819 100644 --- a/src/components/card/CommentItem.vue +++ b/src/components/card/CommentItem.vue @@ -222,7 +222,7 @@ export default { padding-left: 8px; } - &::v-deep .rich-text--wrapper { + &:deep(.rich-text--wrapper) { margin-top: -3px; color: var(--color-text-lighter); } @@ -241,7 +241,7 @@ export default { } } - .comment--content::v-deep { + .comment--content:deep { a { text-decoration: underline; } diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue index 0a2244a7..e2cc4f27 100644 --- a/src/components/card/Description.vue +++ b/src/components/card/Description.vue @@ -277,7 +277,7 @@ export default { display: flex; flex-direction: column; - &::v-deep .attachment-list { + &:deep(.attachment-list) { flex-shrink: 1; } } @@ -292,16 +292,16 @@ export default { width: auto; overflow-x: auto; - &::v-deep { + &:deep { /* stylelint-disable-next-line no-invalid-position-at-import-rule */ @import './../../css/markdown'; } - &::v-deep input { + &:deep(input) { min-height: auto; } - &::v-deep a { + &:deep(a) { text-decoration: underline; } } diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue index e3f83744..17138e97 100644 --- a/src/components/cards/AvatarList.vue +++ b/src/components/cards/AvatarList.vue @@ -154,7 +154,7 @@ export default { margin-top: 5px; position: relative; flex-grow: 1; - ::v-deep .popovermenu { + :deep(.popovermenu) { margin-right: -4px; img { padding: 0; @@ -174,7 +174,7 @@ export default { padding-right: $avatar-offset; flex-direction: row-reverse; .avatardiv, - ::v-deep .avatardiv { + :deep(.avatardiv) { width: 36px; height: 36px; box-sizing: content-box !important; @@ -189,7 +189,7 @@ export default { cursor: pointer; } } - &:hover div:nth-child(n+2) ::v-deep .avatardiv { + &:hover div:nth-child(n+2) :deep(.avatardiv) { margin-right: 1px; } } diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue index 28fe4b52..ce9d05fc 100644 --- a/src/components/cards/CardBadges.vue +++ b/src/components/cards/CardBadges.vue @@ -109,7 +109,7 @@ export default { margin-right: 2px; span, - &::v-deep span { + &:deep(span) { padding: 10px 2px; } } diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue index 9c43af73..57d85947 100644 --- a/src/components/cards/CardItem.vue +++ b/src/components/cards/CardItem.vue @@ -208,7 +208,7 @@ export default { background-color: var(--color-main-background); margin-bottom: $card-spacing; - &::v-deep * { + &:deep(*) { cursor: pointer; } diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue index 4f51ce9c..bf1c61ec 100644 --- a/src/components/search/GlobalSearchResults.vue +++ b/src/components/search/GlobalSearchResults.vue @@ -207,7 +207,7 @@ export default { margin-right: 20px; } } - h2::v-deep span { + h2:deep(span) { background-color: var(--color-background-dark); padding: 3px; border-radius: var(--border-radius); @@ -221,7 +221,7 @@ export default { flex-grow: 0; } } - &::v-deep .card { + &:deep(.card) { width: $stack-width; margin-right: $stack-spacing; } diff --git a/src/css/comments.scss b/src/css/comments.scss index f2fa497a..3c1ef3ae 100644 --- a/src/css/comments.scss +++ b/src/css/comments.scss @@ -3,7 +3,7 @@ flex-grow: 1; position: relative; - .editor__content::v-deep { + .editor__content:deep { flex-grow: 1; margin-left: 44px; diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index 48ebfdf6..9e228086 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -164,7 +164,7 @@ export default { margin-top: 3px; } - .duedate::v-deep { + .duedate:deep { .due { margin: 0 0 0 10px; padding: 2px 4px; |