fix: Update sidebar toggle icon breaking message view (#3512)
This commit is contained in:
parent
3c72a2759f
commit
6b025816f5
1 changed files with 32 additions and 19 deletions
|
@ -51,10 +51,18 @@
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="sidebar-toggle__wrap">
|
||||||
|
<woot-button
|
||||||
|
variant="smooth"
|
||||||
|
size="tiny"
|
||||||
|
color-scheme="secondary"
|
||||||
|
class="sidebar-toggle--button"
|
||||||
|
:icon="isRightOrLeftIcon"
|
||||||
|
@click="onToggleContactPanel"
|
||||||
|
>
|
||||||
|
</woot-button>
|
||||||
|
</div>
|
||||||
<ul class="conversation-panel">
|
<ul class="conversation-panel">
|
||||||
<button class="action-button__wrap" @click="onToggleContactPanel">
|
|
||||||
<fluent-icon :icon="isRightOrLeftIcon" class="action-button" />
|
|
||||||
</button>
|
|
||||||
<transition name="slide-up">
|
<transition name="slide-up">
|
||||||
<li class="spinner--container">
|
<li class="spinner--container">
|
||||||
<span v-if="shouldShowSpinner" class="spinner message" />
|
<span v-if="shouldShowSpinner" class="spinner message" />
|
||||||
|
@ -436,23 +444,28 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.action-button__wrap {
|
.sidebar-toggle__wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
|
||||||
.action-button {
|
.sidebar-toggle--button {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: var(--white);
|
|
||||||
cursor: pointer;
|
top: var(--space-mega);
|
||||||
width: var(--space-medium);
|
z-index: var(--z-index-low);
|
||||||
height: var(--space-medium);
|
|
||||||
top: var(--space-mega);
|
background: var(--white);
|
||||||
z-index: var(--z-index-low);
|
|
||||||
margin-left: var(--space-one);
|
padding: inherit 0;
|
||||||
padding: var(--space-micro) var(--space-half) var(--space-micro) 0;
|
border-top-left-radius: calc(
|
||||||
border-color: var(--color-border);
|
var(--space-medium) + 1px
|
||||||
border-width: 0 0 0 1px;
|
); /* 100px of height + 10px of border */
|
||||||
border-style: solid;
|
border-bottom-left-radius: calc(
|
||||||
border-radius: var(--border-radius-rounded);
|
var(--space-medium) + 1px
|
||||||
|
); /* 100px of height + 10px of border */
|
||||||
|
border: 1px solid var(--color-border-light);
|
||||||
|
border-right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue