refactor: update deep selectors

kiva · Jan 9, 2025 · c3f0ac5 · c3f0ac5
1 parent b556f27
commit c3f0ac5
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 28 deletions.
diff --git a/@kiva/kv-components/vue/KvCommentsAdd.vue b/@kiva/kv-components/vue/KvCommentsAdd.vue
@@ -116,20 +116,20 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> input {
+:deep(input) {
 	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
 }
 
->>> input:focus {
+:deep(input:focus) {
 	@apply tw-border-tertiary;
 	box-shadow: none;
 }
 
->>> button > span {
+:deep(button > span) {
 	@apply tw-min-h-0;
 }
 
->>> button > span > span {
+:deep(button > span > span) {
 	@apply tw-py-0 tw-px-0.5;
 }
 </style>
diff --git a/@kiva/kv-components/vue/KvCommentsHeartButton.vue b/@kiva/kv-components/vue/KvCommentsHeartButton.vue
@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style scoped>
-.filled >>> svg {
+.filled :deep(svg) {
     fill: #F60059;
 }
 </style>
diff --git a/@kiva/kv-components/vue/KvCommentsReplyButton.vue b/@kiva/kv-components/vue/KvCommentsReplyButton.vue
@@ -38,15 +38,15 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> span {
+:deep(span) {
 	@apply tw-min-h-0;
 }
 
->>> span > span {
+:deep(span > span) {
 	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
 }
 
->>> svg {
+:deep(svg) {
 	@apply tw-mx-0.5;
 }
 </style>
diff --git a/@kiva/kv-components/vue/KvInlineActivityCard.vue b/@kiva/kv-components/vue/KvInlineActivityCard.vue
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.activity-avatar, .activity-avatar >>> img, .activity-avatar >>> div {
+.activity-avatar, .activity-avatar :deep(img), .activity-avatar :deep(div) {
     @apply tw-w-4 tw-h-4;
 }
 </style>
diff --git a/@kiva/kv-components/vue/KvIntroductionLoanCard.vue b/@kiva/kv-components/vue/KvIntroductionLoanCard.vue
@@ -425,7 +425,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.loan-callouts >>> span {
+.loan-callouts :deep(span) {
 	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
@@ -443,7 +443,7 @@ export default {
 .loan-card-name {
 	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
 }
-.loan-bookmark >>> button {
+.loan-bookmark :deep(button) {
 	@apply !tw-rounded-t-none;
 }
 </style>
diff --git a/@kiva/kv-components/vue/KvLendCta.vue b/@kiva/kv-components/vue/KvLendCta.vue
@@ -550,39 +550,39 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.amountDropdownWrapper >>> select {
+.amountDropdownWrapper :deep(select) {
 	border-radius: 14px 0 0 14px;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-0;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-1;
 }
 
-.lendButtonWrapper >>> span:first-child {
+.lendButtonWrapper :deep(span:first-child) {
 	border-radius: 0 14px 14px 0;
 }
 
-.filtered-dropdown >>> select {
+.filtered-dropdown :deep(select) {
 	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
 }
 
-.unselected-dropdown >>> select {
+.unselected-dropdown :deep(select) {
 	@apply tw-border-gray-400;
 }
 
-.selected-dropdown >>> select {
+.selected-dropdown :deep(select) {
 	@apply tw-border-eco-green-4;
 }
 
-.preset-option >>> span.tw-w-full:first-child {
+.preset-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-2 tw-border-gray-400;
 }
 
-.selected-option >>> span.tw-w-full:first-child {
+.selected-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-eco-green-4;
 }
 </style>
diff --git a/@kiva/kv-components/vue/KvLoanActivities.vue b/@kiva/kv-components/vue/KvLoanActivities.vue
@@ -233,24 +233,24 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.loan-activity >>> #kvLightboxBody {
+.loan-activity :deep(#kvLightboxBody) {
 	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
 }
 
-.loan-activity >>> div > div > div > div > div:first-child {
+.loan-activity :deep(div > div > div > div > div:first-child) {
 	box-shadow: var(--kiva-box-shadow);
 }
 
-.loan-activity >>> div > div > div > div > div:first-child > div,
-.loan-activity >>> #kvLightboxBody div {
+.loan-activity :deep(div > div > div > div > div:first-child > div),
+.loan-activity :deep(#kvLightboxBody div) {
 	box-shadow: none;
 }
 
-.loan-activity >>> #kvLightboxBody > div:first-child {
+.loan-activity :deep(#kvLightboxBody > div:first-child) {
 	@apply tw-px-4;
 }
 
-.loan-activity >>> [role=dialog] {
+.loan-activity :deep([role=dialog]) {
 	min-width: 840px;
 	max-width: 840px !important;
 
@@ -260,7 +260,7 @@ export default {
 	}
 }
 
-.loan-activity >>> #kvLightboxBody > div:nth-child(2) {
+.loan-activity :deep(#kvLightboxBody > div:nth-child(2)) {
 	@apply tw-px-4;
 
 	box-shadow: var(--kiva-negative-box-shadow);

diff --git a/@kiva/kv-components/vue/KvWideLoanCard.vue b/@kiva/kv-components/vue/KvWideLoanCard.vue
@@ -427,7 +427,7 @@ export default {
 	@apply tw-no-underline;
 }
 /** Unique to this loan card */
-.loan-callouts >>> div{
+.loan-callouts :deep(div) {
 	@apply tw-flex-wrap tw-h-auto;
 }
 </style>