GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 08:46:37 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Simplify Handling of margins and padding of ButtonGroup & ButtonDropdown

Browse source
This commit is contained in:
Henrik Giesel 2021-04-23 22:22:53 +02:00
parent 9629d3201b
commit baeaa29dae
3 changed files with 8 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ts/editor-toolbar/ButtonDropdown.svelte
View file

@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let className = ""; export let className = "";
function extendClassName(className: string): string { function extendClassName(className: string): string {
return `dropdown-menu btn-dropdown-menu py-1 mb-0 ${className}`; return `dropdown-menu btn-dropdown-menu ${className}`;
} }
export let items: ToolbarItem[]; export let items: ToolbarItem[];
@ -22,6 +22,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background-color: var(--window-bg); background-color: var(--window-bg);
border-color: var(--medium-border); border-color: var(--medium-border);
} }
:global(ul.btn-dropdown-menu.show) {
display: flex;
}
</style> </style>
<ButtonGroup {id} className={extendClassName(className)} {items} /> <ButtonGroup {id} className={extendClassName(className)} {items} />

9
ts/editor-toolbar/ButtonGroup.svelte
View file

@ -26,8 +26,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
flex-wrap: var(--toolbar-wrap); flex-wrap: var(--toolbar-wrap);
overflow-y: auto; overflow-y: auto;
padding-inline-start: 0; padding: calc(var(--toolbar-size) / 10);
margin: 0 calc(var(--toolbar-size) / 8) calc(var(--toolbar-size) / 8) 0; margin: 0;
&.border-overlap-group { &.border-overlap-group {
:global(button), :global(button),
@ -53,19 +53,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
&:nth-child(1) { &:nth-child(1) {
margin-left: calc(var(--toolbar-size) / 7.5);
> :global(button), > :global(button),
> :global(select) { > :global(select) {
/* default 0.25rem */
border-top-left-radius: calc(var(--toolbar-size) / 7.5); border-top-left-radius: calc(var(--toolbar-size) / 7.5);
border-bottom-left-radius: calc(var(--toolbar-size) / 7.5); border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
} }
} }
&:nth-last-child(1) { &:nth-last-child(1) {
margin-right: calc(var(--toolbar-size) / 7.5);
> :global(button), > :global(button),
> :global(select) { > :global(select) {
border-top-right-radius: calc(var(--toolbar-size) / 7.5); border-top-right-radius: calc(var(--toolbar-size) / 7.5);

13
ts/editor-toolbar/EditorToolbar.svelte
View file

@ -54,17 +54,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background: var(--bg-color); background: var(--bg-color);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
/* Remove outermost marigns */
& > :global(ul) {
& > :global(li:nth-child(1)) {
margin-left: 0;
}
& > :global(li:nth-last-child(1)) {
margin-right: 0;
}
}
} }
</style> </style>
@ -75,5 +64,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div> </div>
<nav {style}> <nav {style}>
<ButtonGroup items={_buttons} className="mt-0" /> <ButtonGroup items={_buttons} className="p-0 mb-1" />
</nav> </nav>