Светящийся Редактор Froala

[sparco1988]

sparco1988 разместил(а) новый ресурс:

Светящийся Редактор Froala - Светящийся редактор при наведении

Добавьте следующее в свой шаблон extra.less для создания светящейся рамки вокруг редактора Forala, когда фокус находится на нём, а пользователи печатают.

/* GLOWING EDITOR */
@-webkit-keyframes glow {
    to {
        border-color: #626262;
        -webkit-box-shadow: 0 0 4px #626262;
        -moz-box-shadow: 0 0 4px #626262;
        box-shadow: 0 0 4px #626262;
    }
}
.fr-box.fr-basic {
    &.is-focused {
        -webkit-animation: glow 1.0s infinite alternate...

Посмотреть страницу этого ресурса...

 

[DetectorDevil]

Посмотреть вложение f66.mp4

@-webkit-keyframes glow {
    0%, 30%, 60%, 90% {
        border-color: #ff0000;
        -webkit-box-shadow: 0 0 4px #ff0000;
        -moz-box-shadow: 0 0 4px #ff0000;
        box-shadow: 0 0 4px #ff0000;
    }
    10%, 40%, 70%, 100% {
        border-color: #00ff00;
        -webkit-box-shadow: 0 0 4px #00ff00;
        -moz-box-shadow: 0 0 4px #00ff00;
        box-shadow: 0 0 4px #00ff00;
    }
    20%, 50%, 80% {
        border-color: #0000ff;
        -webkit-box-shadow: 0 0 4px #0000ff;
        -moz-box-shadow: 0 0 4px #0000ff;
        box-shadow: 0 0 4px #0000ff;
    }
}
.fr-box.fr-basic {
    &.is-focused {
        -webkit-animation: glow 18s infinite alternate;
        -webkit-transition: border 18s linear, box-shadow 1.0s linear;
        -moz-transition: border 18s linear, box-shadow 1.0s linear;
        transition: border 18s linear, box-shadow 1.0s linear;
    }
}