Hover Эффект для actionBar

[25517]

25517 добавил(а) новый ресурс:

Hover Эффект для actionBar - Hover Эффект для actionBar...

По мотивам Убираем текст и оставляем иконки , решил добавить hover эффект для иконок.
Добавляем в extra.less

.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
        
        &:hover{
            font-size: 100%;
            text-decoration:none;
            color: @xf-paletteColor3;
        }
        &:before {
            font-size: 15px...

Узнать больше об этом ресурсе...

 

[25517]

25517 обновил(а) ресурс Hover Эффект для actionBar новой записью:

Обновил код...

Забыл указать некоторые иконки --> исправил...
Добавил код для мобильной версии...

Узнать больше об этом обновлении...

 

[AwS]

Подскажите пожалуйста как сделать что-бы при нажатии на "мне нравится" кнопка/иконка становились другого цвета?

 

[Skaiman]

AwS,

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[AwS]

AwS,

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Благодарю)
Буду изучать

 

[BLAEKC]

возникла проблема.

При установке данного кода пропадает иконка симпатии



меняю в коде Like на Reaction появляеться в таком виде


Как исправить?

 

[25517]

BLAEKC, а кто-то говорил, что это будет работать с 2.1 и выше ?

 

[BLAEKC]

BLAEKC, а кто-то говорил, что это будет работать с 2.1 и выше ?

Посмотреть вложение 135562

дак нет, так то все норм. Но вот с лайком проблемка...

 

[Skaiman]

там класс сменился

 

[BLAEKC]

там класс сменился

есть информация, что именно нужно прописать? и бо Reaction вроде помогает появлению кнопки, но иконки нету

 

[25517]

BLAEKC, делал я что-то подобное однажды для своего старого форума.
Делалось это всё под себя, как будет возможность - доработаю и выложу сюда.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[BLAEKC]

BLAEKC, делал я что-то подобное однажды для своего старого форума.
Делалось это всё под себя, как будет возможность - доработаю и выложу сюда.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Посмотреть вложение 135564

Было бы не плохо... Так как сейчас пытаюсь решить данный момент, если решу - напишу в теме

Сделал поправку

.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
     
        &:hover{
            font-size: 100%;
            text-decoration:none;
            color: #c3c3c3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }
        &--inlineMod{
            font-size: 100%;
        }
        &--menuTrigger{
            font-size: 100%;
        }
        &--report:before {
            content: "\f071";
        }
        &--edit:before{
            content: "\f040";
        }
        &--delete:before{
            content: "\f00d";
        }
        &--ip:before{
            content: "\f002";
        }              
        &--reaction:before {
        content: "\f004";
        }  
        &--warn:before{
            content: "\f12a";
        }
        &--history:before{
            content: "\f1da";
        }
        &--spam:before{
            content: "\f024";
        }
            @media(max-width:910px){
            &:hover{
            font-size: 0;
            text-decoration:none;
            color: #c3c3c3;
            }
        }
    }
}

но теперь во такая беда))))


и по нажатию

BLAEKC, делал я что-то подобное однажды для своего старого форума.
Делалось это всё под себя, как будет возможность - доработаю и выложу сюда.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Посмотреть вложение 135564

с твоим кодом так же

В общем... Надеюсь не кто не пнет меня ногой и не скажет что я делаю хрень:

// Модификатор для actionBar
.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
      
        &:hover{
            font-size: 100%;
            text-decoration:none;
            color: #c3c3c3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }
        &--inlineMod{
            font-size: 100%;
        }
        &--menuTrigger{
            font-size: 100%;
        }
        &--report:before {
            content: "\f071";
        }
        &--edit:before{
            content: "\f040";
        }
        &--delete:before{
            content: "\f00d";
        }
        &--ip:before{
            content: "\f002";
        }               
        &--reaction:before {
        content: "\f004";
        }   
        &--warn:before{
            content: "\f12a";
        }
        &--history:before{
            content: "\f1da";
        }
        &--spam:before{
            content: "\f024";
        }
            @media(max-width:910px){
            &:hover{
            font-size: 0;
            text-decoration:none;
            color: #c3c3c3;
            }
        }
    }
}
// Убираем старую иконку лайка + убираем ее из списка, да бы был только список тех кто поставил лайк
.reaction.reaction--imageHidden.reaction--1 i {
    display: none;
}
.reaction--small.reaction--1 .reaction-sprite {
display: none;
}

.reactionSummary {
   display: none;
}

Если хрень - пните меня ногой!

 

[25517]

25517 обновил(а) ресурс Hover Эффект для actionBar новой записью:

Обновление для новых версий XF

• Небольшой рефакторинг
• Добавлена поддержка для новых версий XF

Узнать больше об этом обновлении...

 

[BLAEKC]

25517 обновил(а) ресурс Hover Эффект для actionBar новой записью:

Обновление для новых версий XF



Узнать больше об этом обновлении...

Здесь исправлено?

 

[facish]

Прекрасный эффект, спасибо
а есть возможность оставить текст для кнопки Жалобы к примеру

 

[25517]

facish, после &--inlineMod, &--menuTrigger, &--reaction, &:hover, &:hover .reaction-text добавить , &--report

 

[facish]

25517, спасибо
жаль что такой же метод не работает для кнопки реакции

 

[LUX-MEBEL]

25517, А не так ли будет?

        &--report { .m-faBefore(@fa-var-exclamation-triangle); }

 

[25517]

LUX-MEBEL, не так.

 

[LUX-MEBEL]

facish, Для реакции работает..
Автор в курсе, лезть не буду.