Animations

[jernejrostan]

Hi,

Just wondering why animations are not working for me. Did copy pasted your example code. Is it connected to icons, as you are using mdi for examples, i have font awesome icons?

Thx!

[hamed-ehtesham]

Hi @jernejrostan ,

Thank you for using this component,

it's not connected to icons, but you should import animations in your styles, if you are using Scss for example you should add following line to your Scss file:

@import '~pretty-checkbox/scss/extras/animation';

but if you just import the whole styles in your html there should be no problem.
something like following:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

[jernejrostan]

Hi @hamed-ehtesham ,

I did import it in main scss file that im using

@import '~pretty-checkbox/src/pretty-checkbox.scss';

And as i looked into source of this file it seems that it imports all files that are needed. Maybe im doing something wrong?

Thx

[hamed-ehtesham]

i just checked it with font awesome,

there is no problem with it, test if adding following line to your html fixes your problem:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

[jernejrostan]

I've tried this suggestions also, and no luck

Here's part of code

<fieldset class="form-group">
  <label for="code" class="control-label col-md-3">Vertical:</label>
  <div class="col-md-8">
    <p-radio class="p-icon p-curve p-pulse" name="vertical" color="info-o">
      <i slot="extra" class="icon fa fa-check"></i>
      Casino
    </p-radio>
    <p-radio class="p-icon p-curve p-pulse" name="vertical" color="info-o">
      <i slot="extra" class="icon fa fa-check"></i>
      Sportsbook
    </p-radio>
  </div>
</fieldset>

Im testing this un run dev mode. Cant figure out what is wrong.

[hamed-ehtesham]

I come across your problem eventually,

this problem has nothing to do with Font Awesome; mdi (and probably others) has (have) the same problem too.
sometimes animations doesn't apply to elements they're supposed to apply to, i checked the style of the element (label:before in p-pulse case) and animation property wasn't applied to it

i hope @lokesh-coder fix this problem in next version of library

you can also open an issue here

[jernejrostan]

thanks, i'll try to figure out solution before i bug them there :)

[marcosrocha85]

Anyway, why doesn't toggle have animations? I mean, I can see animations from almost every possible configurations from Pretty Checkbox, except toggle. From where I start searching from to help you develop that?

Either when we have color and off-color animations are disabled.

[bendwarn]

Where do you import pretty-checkbox.scss in? I found if we do that in scoped scss of single file component, styles would only apply to root because of vue's policy.