Улучшенные чекбоксы

Улучшенные чекбоксы

Hope

Premium
Сообщения
48,305
Решения
22
Реакции
71,876
Баллы
40,905
Hope добавил(а) новый ресурс:

Улучшенные чекбоксы - Улучшаем стандартные чекбоксы XenForo 2.

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

Данная модификация затемнит чекбоксы, когда они отключены и выделит их при наведении курсора мыши.

В шаблон extra.less добавляем:
Less:
/* Better Checkboxes */

// Edit these values

@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

@controlLabelColor: @xf-textColorMuted;
@controlLabelColor--active: @xf-textColor;

@controlCheckedWeight: bold; // normal for outline, bold for solid
@cursor: pointer;

// From...

Узнать больше об этом ресурсе...
 
Обновление кода - теперь поддерживаются радиокнопки:
Код:
/* Better Checkboxes */

// Edit these values

@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

@controlLabelColor: @xf-textColorMuted;
@controlLabelColor--active: @xf-textColor;

@controlCheckedWeight: bold; // normal for outline, bold for solid
@cursor: pointer;

// From core_input.less
.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra
{
    .iconic,
    &.dataList-cell--fa > a
    {
        > i
        {
            color: @controlColor;
        }

        &:hover > i
        {
            color: @controlColor--hover;
        }
    }
}

// Don't apply to off-canvas controls
.formRow .iconic > input[type=checkbox],
.formRow .iconic > input[type=radio] {

    + i:before,
    + i:after {
        transition: @xf-animationSpeed opacity;
    }
    + i:after {
        font-weight: @controlCheckedWeight;
    }
    ~ * {
        transition: @xf-animationSpeed color;
    }
    ~ span.iconic-label {
        color: @controlLabelColor;
    }
    &:checked ~ span.iconic-label {
        color: @controlLabelColor--active;
    }
    &:checked + i {
        color: @controlColor--hover;
    }
}

// Change the cursor
.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra,
.structItem-extraInfo
{
    .iconic:hover {
        cursor: @cursor;
    }
}
 
  • Мне нравится
Реакции: Hope
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу