Разместим колпак Санты на уголке аватара
Так же как видим есть нумерация, которая в таком же порядке, если их передать функции, будет показывать определённый колпак.
Что бы всё это заработало, достаточно добавить в
Где в миксине
Как видна на скрине ниже, по итогу у нас и показан колпак номер три, в чём можно убедиться посмотрев первый скрин с пронумерованными колпаками.
Так же как видим есть нумерация, которая в таком же порядке, если их передать функции, будет показывать определённый колпак.
Что бы всё это заработало, достаточно добавить в
extra.less, такой код и загрузить styles.
Less:
// xf2 Santa Cap ===================================================================================
.fox-santaCapAvatar(@capNum: false) {
@fox-santaCapPath: "/styles/xfi/santaCap";
.message-avatar-wrapper {
.avatar {
&:before {
& when not (@capNum = false) and (@capNum <= 5) {
background: transparent url('@{fox-santaCapPath}/santa_cap_@{capNum}.png') no-repeat;
}
content: "";
display: block;
position: absolute;
z-index: 99;
& when (@capNum >= 1) and (@capNum <= 2) {
right: -15px;
top: -19px;
height: 50px;
width: 44px;
}
& when (@capNum >= 3) and (@capNum <= 5) {
right: -26px;
top: -7px;
height: 64px;
width: 64px;
}
@media (max-width: @xf-responsiveMedium) {
display: none;
}
}
}
}
}
.fox-santaCapAvatar(3);Где в миксине
.fox-santaCapAvatar(3);, цифра 3, это порядковый номер картинки колпака Санты, который как раз и можно изменить от одного до пяти.Как видна на скрине ниже, по итогу у нас и показан колпак номер три, в чём можно убедиться посмотрев первый скрин с пронумерованными колпаками.
