Мод Убираем текст в пользовательском меню

[Skaiman]

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

Убираем текст в пользовательском меню - Скрытие текста в пользовательском меню

Убираем текст в пользовательском меню, "Оповещения", "Переписки", "Поиск".
В extra.less добавляем:

.p-navgroup {
    background: transparent;
    &-linkText {
        --alerts &,
        --search &,
        --conversations & {
            .p-navgroup-link& {
                display: none;   
            }
        }
    }
    &.p-discovery {
        margin: 0;
    }
}

В коде убран отступ поиска margin: 0; можно поставить свое значение или убрать совсем...

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

 

[Pokschubin]

Как добавить эффект Hover при наведение на иконки, чтобы они раскрывались с текстом?

 

[Skaiman]

Как добавить эффект Hover при наведение на иконки, чтобы они раскрывались с текстом?

С помощью css/ less

 

[Skaiman]

.p-navgroup {
    background: transparent;
    &-linkText {
        --alerts &,
        --search &,
        --conversations & {
            .p-navgroup-link& {
                font-size: 0;
                transition: .5s;
            }
        }
    }
    &-linkText {
        --alerts:hover &,
        --search:hover &,
        --conversations:hover & {
            .p-navgroup-link& {
                font-size: 100%;   
            }
        }
    }   
    &.p-discovery {
        margin: 0;
    }
}

Замеяем код из ресурса на этот, получаем:

 

[Pokschubin]

Я вот что еще добавил у себя

.p-navgroup-link, .p-navgroup-link.p-navgroup-link--user{

    display: block;
    height: 32px;
    max-width: 30px;
    text-align: left;
    color: #fff;
    overflow: hidden;
    transition: all 1s ease;
}

То что Вы дали мне не помогло

Сообщение автоматически объединено: 15.07.2018

.p-navgroup-link.p-navgroup-link--iconic .p-navgroup-linkText, .p-navgroup-link.p-navgroup-link--textual i {
    display: none;
}

.p-navgroup-link:hover,
.p-navgroup-link.p-navgroup-link--user:hover {
  background: #3498db;
  color: #ddd;
  max-width: 300px;
  transition: all 2.5s ease;
}

.p-navgroup-link,
.p-navgroup-link.p-navgroup-link--user {
  display: block;
  height: 32px;
  max-width: 30px;
  text-align: left;
  color: #fff;
  overflow: hidden;
  transition: all 1s ease;
}

.p-navgroup-link.p-navgroup-link--user {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
  max-width: 150px;
}

.p-navgroup-link.badgeContainer:hover,
.p-navgroup-link.badgeContainer.badgeContainer--highlighted {
  opacity: 1;
}

.p-navgroup-link.is-menuOpen {
  color: #edf6fd;
  text-decoration: none;
  background: rgba(71, 167, 235, 0.5);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.35);
  opacity: 1;
}

 

[Skaiman]

Я вот что еще добавил у себя

А как это все ведет себя в мобильной версии?

То что Вы дали мне не помогло

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

 

[Pokschubin]

Работает

 

[Skaiman]

Я там код заменил на LESS, как бы правильнее для extra.less

 

[Skaiman]

Заменяем на это:

.p-navgroup {
    background: transparent;
    &-linkText {
        --user &,
        --alerts &,
        --search &,
        --conversations & {
            .p-navgroup-link& {
                font-size: 0;
                transition: .5s;
            }
        }
    }
    &-linkText {
        --user:hover &,
        --alerts:hover &,
        --search:hover &,
        --conversations:hover & {
            .p-navgroup-link& {
                font-size: 100%;   
            }
        }
    }   
    &.p-discovery {
        margin: 0;
    }
}

получим:

 

[Pokschubin]

Я уже понял. Тестирую на UIX стили. При подключения стиля

.p-navgroup-link {
    border: none;
    &.p-navgroup-link--iconic {
        i:after {
            font: normal normal normal 18px/1 'Material Design Icons';
        }
    }
    &.p-navgroup-link {
        &--conversations {
            i:after {
                content: "\f1f0";
            }
        }
        &--alerts {
            i:after {
                content: "\f09c";
            }       
        }
        &--search {
            i:after {
                content: "\f349";
            }           
        }
    }
}

Поиск не выдвигается.

 

[Skaiman]

Поиск не выдвигается.

В UI.X для поиска свои классы присутствуют, я вот считаю, что эти уикс, больше проблем создают, чем красоты дефолтный самый лучший

 

[Pokschubin]

Это точно.

 

[Skaiman]

Skaiman обновил ресурс Убираем текст в пользовательском меню новой записью:

Устранение появления автобуса

В начальном варианте дал код для замены иконок на шрифт Material Design Icons и упустил иконку новых сообщений в мобильной версии Вылез автобус, иконка так совпала в шрифте Добавил иконку для новых сообщений

.p-navgroup-link {
    border: none;
    &.p-navgroup-link--iconic {
        i:after {
            font: normal normal normal 18px/1 'Material Design Icons';
        }
    }
    &.p-navgroup-link {
        &--conversations {
            i:after {
                content...

Посмотреть подробности об этом обновлении...

 

[Pokschubin]

Тогда код

.p-navgroup {
    background: transparent;
    &-linkText {
        --alerts &,
        --search &,
        --conversations & {
            .p-navgroup-link& {
                display: none;   
            }
        }
    }
    &.p-discovery {
        margin: 0;
    }
}

надо отредактировать под --whatsnew

 

[Skaiman]

надо отредактировать под --whatsnew

Нет, та иконка появляется в мобильной версии, нет смысла скрывать текст, его нет

 

[Pokschubin]

Skaiman, Ясно. У меня нет мобилы опасная игрушка оказалась для меня.

 

[Skaiman]

У меня нет мобилы

Проверять отображение своих изменений можно и не на мобиле, F12, например дает такую возможность

или просто свернуть окно браузера и сузить его, что я и делаю чаще всего

 

[West]

Skaiman, а какой прогой ты гифки эти записываешь?

получим:

offtop

 

[Skaiman]

oCam

 

[Pokschubin]

Для кнопок регистрация и вход/авторизация

.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    font-family: FontAwesome;
    content: "\f090";
    color: #E6BB5C;
    padding-right: 5px;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
    font-family: FontAwesome;
    content: "\f084";
    color: #E6BB5C;
    padding-right: 5px;
}
.p-navgroup {
    background: transparent;
    &-linkText {
        --register &,
        --logIn & {
            .p-navgroup-link& {
                font-size: 0;
                transition: .5s;
            }
        }
    }
    &-linkText {
        --register:hover &,
        --logIn:hover & {
            .p-navgroup-link& {
                font-size: 100%;   
            }
        }
    }   
    &.p-discovery {
        margin: 0;
    }
}