Is it possible to add classname for 3 sections for toolbar?
Closed this issue · 3 comments
ejindev commented
I think we should add more class for 3 section in toolbar for easy customize style.
In Toolbar.svelte
<nav class="{$theme.toolbar}">
{#each Object.keys(sections) as key}
<div class="ec-toolbar-{key}">
{#each sections[key] as buttons}
{#if buttons.length > 1}
<div class="{$theme.buttonGroup}">
<Buttons {buttons}/>
</div>
{:else}
<Buttons {buttons}/>
{/if}
{/each}
</div>
{/each}
</nav>
In index.scss
/* Toolbar */
.ec-toolbar {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1em;
.ec-toolbar-start {
//add something or do not set
}
.ec-toolbar-center {
//add something or do not set
}
.ec-toolbar-end {
//add something or do not set
}
> * {
margin-bottom: -.5em;
> * {
margin-bottom: .5em;
&:not(:last-child) {
margin-right: .75em;
}
}
}
}
vkurko commented
Good idea! Thank you. I'll implement it in the next release.
vkurko commented
The CSS classes ec-start
/ec-center
/ec-end
should be applied to the toolbar sections in v3.1.0. Please check.
ejindev commented
The CSS classes
ec-start
/ec-center
/ec-end
should be applied to the toolbar sections in v3.1.0. Please check.
yes. thank you