feat: Update the design for dropdown buttons (#5625)
This commit is contained in:
parent
bf4338ef9e
commit
1f271356ca
6 changed files with 57 additions and 27 deletions
|
@ -113,9 +113,22 @@ $default-button-height: 4.0rem;
|
|||
}
|
||||
|
||||
&.clear {
|
||||
color: var(--w-700);
|
||||
|
||||
&.secondary {
|
||||
color: var(--s-700)
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--g-700)
|
||||
}
|
||||
|
||||
&.alert {
|
||||
color: var(--r-700)
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--y-600);
|
||||
color: var(--y-700)
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -146,6 +159,8 @@ $default-button-height: 4.0rem;
|
|||
|
||||
&.small {
|
||||
height: var(--space-large);
|
||||
padding-bottom: var(--space-smaller);
|
||||
padding-top: var(--space-smaller);
|
||||
}
|
||||
|
||||
&.large {
|
||||
|
|
|
@ -14,15 +14,9 @@
|
|||
}
|
||||
|
||||
.modal--close {
|
||||
border-radius: 50%;
|
||||
color: $color-heading;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-big;
|
||||
line-height: $space-normal;
|
||||
padding: $space-normal;
|
||||
position: absolute;
|
||||
right: $space-micro;
|
||||
top: $space-micro;
|
||||
right: $space-small;
|
||||
top: $space-small;
|
||||
|
||||
&:hover {
|
||||
background: $color-background;
|
||||
|
|
|
@ -7,9 +7,13 @@
|
|||
@click="onBackDropClick"
|
||||
>
|
||||
<div :class="modalContainerClassName" @click.stop>
|
||||
<button class="modal--close" @click="close">
|
||||
<fluent-icon icon="dismiss" />
|
||||
</button>
|
||||
<woot-button
|
||||
color-scheme="secondary"
|
||||
icon="dismiss"
|
||||
variant="clear"
|
||||
class="modal--close"
|
||||
@click="close"
|
||||
/>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -41,9 +41,18 @@
|
|||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="dropdown__header">
|
||||
<h4 class="text-block-title text-truncate">
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<woot-button
|
||||
icon="dismiss"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
variant="clear"
|
||||
@click="onCloseDropdown"
|
||||
/>
|
||||
</div>
|
||||
<multiselect-dropdown-items
|
||||
v-if="showSearchDropdown"
|
||||
:options="options"
|
||||
|
@ -172,4 +181,15 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
.text-block-title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
<woot-button
|
||||
class="multiselect-dropdown--item"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
:class="{
|
||||
active: option.id === (selectedItem && selectedItem.id),
|
||||
}"
|
||||
|
@ -129,7 +130,7 @@ export default {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 16rem;
|
||||
max-height: 20rem;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
|
@ -162,7 +163,7 @@ export default {
|
|||
|
||||
.multiselect-dropdown--list {
|
||||
width: 100%;
|
||||
max-height: 12rem;
|
||||
max-height: 16rem;
|
||||
}
|
||||
|
||||
.multiselect-dropdown--item {
|
||||
|
@ -170,13 +171,13 @@ export default {
|
|||
width: 100%;
|
||||
|
||||
&.active {
|
||||
background-color: var(--w-50);
|
||||
color: var(--w-900);
|
||||
font-weight: var(--font-weight-bold);
|
||||
background-color: var(--w-25);
|
||||
color: var(--w-800);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-background-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -29,19 +29,15 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.dropdown-menu__item {
|
||||
list-style: none;
|
||||
margin-bottom: var(--space-micro);
|
||||
|
||||
::v-deep {
|
||||
a,
|
||||
.button {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: var(--s-700);
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
padding: var(--space-small);
|
||||
padding-top: var(--space-small);
|
||||
padding-bottom: var(--space-small);
|
||||
border-radius: var(--border-radius-normal);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background);
|
||||
|
|
Loading…
Reference in a new issue