github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 15:34:20 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
4311e9df45
discourse/app/assets/stylesheets/common/components/bookmark-menu.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

66 lines
1.1 KiB
SCSS
Raw Normal View History

FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
.bookmark-menu-content {
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
.dropdown-menu {
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 14:18:50 +08:00
padding: 0;
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
min-width: 200px;
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 14:18:50 +08:00
}
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
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 14:18:50 +08:00
.bookmark-menu__title {
display: flex;
align-items: center;
gap: 0.75em;
background: var(--tertiary-low);
color: var(--tertiary);
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
padding: 0.75rem 1rem;
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 14:18:50 +08:00
font-weight: bold;
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
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 14:18:50 +08:00
.d-icon {
color: var(--tertiary);
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
}
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 14:18:50 +08:00
}
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
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 14:18:50 +08:00
.bookmark-menu__row {
display: flex;
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
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 14:18:50 +08:00
&:hover,
&:focus {
background: var(--tertiary-very-low);
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
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 14:18:50 +08:00
&.--remove {
background: var(--danger-low);
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
}
}
}
.bookmark-menu__row-title {
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
padding: 0.75rem 1rem;
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 14:18:50 +08:00
font-weight: bold;
}
.bookmark-menu__row-btn {
margin: 0;
width: 100%;
text-align: left;
justify-content: left !important;
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
gap: 0.75rem;
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 14:18:50 +08:00
color: var(--primary);
DEV: implements <DropdownMenu /> (#26917) DropdownMenu component is meant as a way to describe the content of menus. Syntax: ``` <DropdownMenu as |dm|> <dm.item class="test"> First </dm.item> <dm.divider class="foo" /> <dm.item class="bar"> Second </dm.item> </DropdownMenu> ```
2024-05-08 15:08:42 +08:00
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 14:18:50 +08:00
&: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;
}
FEATURE: Redesigned bookmark modal and menu (#23071) Adds the new quick menu for bookmarking. When you bookmark a post (chat message behaviour will come later) we show this new quick menu and bookmark the item straight away. You can then choose a reminder quick option, or choose Custom... to open the old modal. If you click on an existing bookmark, we show the same quick menu but with Edit and Delete options. A later PR will introduce a new bookmark modal, but for now we are using the old modal for Edit and Custom... options.
2024-04-05 07:25:30 +08:00
}
}
Reference in New Issue Copy Permalink