search

nzbin / three-dots

🔮 CSS loading animations made with single element.
https://nzbin.github.io/three-dots/
MIT License
1.33k stars 131 forks source link

Can't have two different `dot-pulse` colors with Sass #14

Closed pszalko closed 3 years ago

pszalko commented 3 years ago

My use case is to have two different colors of dot-pulse animation on the same page when extending Sass modules. For example: I use white dot-pulse on dark background and blue dot-pulse on white.

The following code does not work:

.dot-primary-sm {
    $dot-width: 2px;
    $dot-height: 2px;
    $dot-spacing: 6px;
    $dot-color: $trgl-brand-color;

    @import '~three-dots/sass/three-dots';
}

.dot-white-sm {
    $dot-width: 2px;
    $dot-height: 2px;
    $dot-spacing: 6px;
    $dot-color: $white;

    @import '~three-dots/sass/three-dots';
}

I suppose the issue is caused by box-shadow property that overrides color in keyframe animation.

pszalko commented 3 years ago

@nzbin Please merge and release new version if possible :)

nzbin commented 3 years ago

Many thanks. v0.2.1 has released.