fix: Reverts popover styling for search page (#6688)

This commit is contained in:
Nithin David Thomas
2023-03-20 11:04:56 +05:30
committed by GitHub
parent e76b63f91d
commit d2aa5f4c69
3 changed files with 10 additions and 10 deletions

View File

@@ -76,7 +76,8 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--space-small) var(--space-normal); padding: var(--space-small) var(--space-normal);
border-bottom: 1px solid var(--s-100); border: 1px solid var(--s-100);
border-radius: var(--border-radius-small);
transition: border-bottom 0.2s ease-in-out; transition: border-bottom 0.2s ease-in-out;
input[type='search'] { input[type='search'] {
@@ -86,7 +87,7 @@ export default {
} }
&.is-focused { &.is-focused {
border-bottom: 1px solid var(--w-100); border-color: var(--w-100);
.icon { .icon {
color: var(--w-400); color: var(--w-400);

View File

@@ -35,6 +35,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-container { .tab-container {
margin-top: var(--space-smaller); margin-top: var(--space-smaller);
border-bottom: 1px solid var(--s-50); border-bottom: 1px solid var(--s-100);
} }
</style> </style>

View File

@@ -47,7 +47,7 @@
</p> </p>
</div> </div>
<div v-else class="empty text-center"> <div v-else class="empty text-center">
<p class="text-center"> <p class="text-center margin-bottom-0">
<fluent-icon icon="search" size="24px" class="icon" /> <fluent-icon icon="search" size="24px" class="icon" />
</p> </p>
<p class="empty-state__text"> <p class="empty-state__text">
@@ -202,23 +202,21 @@ export default {
} }
.search-root { .search-root {
margin: 0 auto; margin: 0 auto;
max-width: 64rem; max-width: 72rem;
min-height: 48rem; min-height: 48rem;
width: 100%; width: 100%;
height: fit-content; height: fit-content;
box-shadow: var(--shadow); padding: var(--space-normal);
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
background: white; background: white;
border-radius: var(--border-radius-large); overflow-y: auto;
margin-top: var(--space-large); margin-top: var(--space-large);
border-top: 1px solid var(--s-25);
.search-results { .search-results {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
max-height: 80vh;
overflow-y: auto;
padding: 0 var(--space-small); padding: 0 var(--space-small);
} }
} }
@@ -230,6 +228,7 @@ export default {
justify-content: center; justify-content: center;
padding: var(--space-medium) var(--space-normal); padding: var(--space-medium) var(--space-normal);
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-medium);
margin-top: var(--space-large);
.icon { .icon {
color: var(--s-500); color: var(--s-500);
} }