Dr. Front sonar-animasjon

sonar.css

.df-style-breakingnews--black {
    &[class*=df-fs],
    [class*=df-fs] {
        &::before { border-color:     var(--swatch-highlights-black) }
        &::after  { background-color: var(--swatch-highlights-black) }
    }
}

.df-style-breakingnews--white {
    &[class*=df-fs],
    [class*=df-fs] {
        &::before { border-color:     var(--swatch-highlights-white) }
        &::after  { background-color: var(--swatch-highlights-white) }
    }
}

.df-style-breakingnews--red {
    &[class*=df-fs],
    [class*=df-fs] {
        &::before { border-color:     var(--swatch-highlights-red) }
        &::after  { background-color: var(--swatch-highlights-red) }
    }
}

.df-style-breakingnews--black,
.df-style-breakingnews--white,
.df-style-breakingnews--red {
    &[class*=df-fs],
    [class*=df-fs] {
        position: relative;
        text-indent: 1em;
        display: block;
        &::before, &::after {
            content: '';
            border-radius: 100%;
            display: inline-block;
            animation: pulse 2s infinite  cubic-bezier(0, 0.5, 0.5, 1); /* cubic-bezier(0.6, 0, 0, 1); */
            position: absolute;
        }
        &::before {
            top: 0;
            left: 0;
            width: .9em;
            height: .9em;
            border-width: .2em;
            border-style: solid;
            animation-delay: .15s
        }
         &::after {
            width: .2em;
            height: .2em;
            left: .35em;
            top: .35em;
        }
    }
}