discourse/app/assets/stylesheets/common/components/bookmark-menu.scss
Joffrey JAFFEUX 17c92b4b2a
UX: shows the bookmark menu improvements
This commit adds a new option `@modalForMobile` for `<DMenu />` which allows to display a `<DModal />` when expanding a menu on mobile.

This commit also adds a `@views` options to toasts which is an array accepting `['mobile',  'desktop']` and will control if the toast is show on desktop and/or mobile.

Finally this commit allows to hide the progressBar even if the toast is set to `@autoClose=true`. This is controlled through the `@showProgressBar` option.
2024-04-08 08:18:50 +02:00

74 lines
1.3 KiB
SCSS

.bookmark-menu-content {
.bookmark-menu__body {
background: var(--secondary);
display: flex;
flex-direction: column;
min-width: 200px;
}
.bookmark-menu__actions {
margin: 0;
padding: 0;
list-style: none;
}
.bookmark-menu__title {
display: flex;
align-items: center;
gap: 0.75em;
background: var(--tertiary-low);
color: var(--tertiary);
padding: 0.75rem;
font-weight: bold;
.d-icon {
color: var(--tertiary);
}
}
.bookmark-menu__row {
width: 100%;
display: flex;
&:hover,
&:focus {
background: var(--tertiary-very-low);
&.--remove {
background: var(--danger-low);
}
}
}
.bookmark-menu__row-title {
padding: 0.75rem;
border-bottom: 1px solid var(--primary-low);
font-weight: bold;
}
.bookmark-menu__row-btn {
margin: 0;
padding: 0.75rem !important;
width: 100%;
text-align: left;
justify-content: left !important;
gap: 0.75em;
color: var(--primary);
&:hover,
&:focus {
color: var(--primary) !important;
background: var(--tertiary-very-low);
}
.--remove & {
color: var(--danger);
}
.d-button-label {
color: inherit;
}
.d-icon {
color: inherit;
margin: 0 !important;
}
}
}