Ability to set font size

[ghostdevv]

I would love to be able to set the font size without having to edit the st-toast-title and st-toast-description classes, via a prop I imagine

[mzohaibqc]

@ghostdevv I don't think so. If we follow this approach, we have to provide props for everything like margin, background, color, and even for different sections, so it will not scale well. IMO, overriding respective class is better solution.

<div class="parent">
  <ToastContainer {toasts} let:data={data}>
    <FlatToast {data} />
  </ToastContainer>
</div>

<style>
  .parent :global(.st-toast-description) {
    color: red;
   font-size: 1rem;
  }
</style>

[ghostdevv]

@mzohaibqc Alright that makes sense, maybe instead of using rems for sizing, em or even px could be used? I had to rework the fontsizing of my entire app to make rems work

[mzohaibqc]

You don't need to rework your whole app. Just override the toast related font size with any unit like rem, px or em. I don't understand why you need to refactor your whole app just to change toast styles.

On Sun, 27 Jun 2021, 5:23 pm GHOST, @.***> wrote:

@mzohaibqc https://github.com/mzohaibqc Alright that makes sense, maybe instead of using rems for sizing, em or even px could be used? I had to rework the fontsizing of my entire app to make rems work

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mzohaibqc/svelte-toasts/issues/3#issuecomment-869153237, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIBRKYMK5XV2P3G6R5CXELTU4J5ZANCNFSM47LPETLA .

[ghostdevv]

@mzohaibqc Everything in the FlatToast at least uses rems for margins, padding etc etc - and my app by default was setting 1rem equal to 8px, but the default for browsers is 16px. Since you would've designed everything using 16px it really messed up the toast, so I had to set it to 16px and then halve all of my rem values to compensate

[mzohaibqc]

You don't need to do that. Just add a parent container and override FlatToast styles using :global like this

.parent :global(.st-toast-description) { font-size: 14px; // or 1em; }

On Mon, 28 Jun 2021, 5:45 am GHOST, @.***> wrote:

@mzohaibqc https://github.com/mzohaibqc Everything in the FlatToast at least uses rems for margins, padding etc etc - and my app by default was setting 1rem equal to 8px, but the default for browsers is 16px. Since you would've designed everything using 16px it really messed up the toast, so I had to set it to 16px and then halve all of my rem values to compensate

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mzohaibqc/svelte-toasts/issues/3#issuecomment-869255349, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIBRK4U5WQEWBGCSFZE7DLTU7AY7ANCNFSM47LPETLA .

[ghostdevv]

@mzohaibqc that doesn't fix the issue of everything else using rems