langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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 = "";
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[];
@ -22,6 +22,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background-color: var(--window-bg);
border-color: var(--medium-border);
}
:global(ul.btn-dropdown-menu.show) {
display: flex;
}
</style>
<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);
overflow-y: auto;
padding-inline-start: 0;
margin: 0 calc(var(--toolbar-size) / 8) calc(var(--toolbar-size) / 8) 0;
padding: calc(var(--toolbar-size) / 10);
margin: 0;
&.border-overlap-group {
:global(button),
@ -53,19 +53,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
&:nth-child(1) {
margin-left: calc(var(--toolbar-size) / 7.5);
> :global(button),
> :global(select) {
/* default 0.25rem */
border-top-left-radius: calc(var(--toolbar-size) / 7.5);
border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
}
}
&:nth-last-child(1) {
margin-right: calc(var(--toolbar-size) / 7.5);
> :global(button),
> :global(select) {
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);
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>
@ -75,5 +64,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div>
<nav {style}>
<ButtonGroup items={_buttons} className="mt-0" />
<ButtonGroup items={_buttons} className="p-0 mb-1" />
</nav>