Tutorial 2x Better Checkboxes - Cải thiện checkbox cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,770
Được Like
8,422
Better Checkboxes - Cải thiện checkbox cho XenForo 2

Chèn CSS đơn giản này để thêm một tinh chỉnh UI tinh tế hơn cho các checkbox của bạn. Đầu tiên, chúng ta sẽ làm mờ dần các hộp và nhãn không được check thành màu dịu hơn, giúp mang lại cho chúng vẻ ngoài "không hoạt động". Tiếp theo, chúng tôi đánh dấu màu checkbox khi di chuột qua một tùy chọn. Khi một hộp được chọn, chúng tôi sẽ thay đổi màu nhãn trở lại bình thường, cho nó xuất hiện "bật". Chúng tôi sẽ áp dụng chuyển tiếp mờ dần bằng cách sử dụng giá trị @ xf-baseAnimationSpeed, sau đó tùy ý đặt con trỏ và trọng lượng biểu tượng được kiểm tra (outline với solid).

better-checkboxes-sample.gif

Đoạn mã CSS

Dán đoạn code sau vào template Extra.less của bạn:
Mã:
/* 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] {

    + 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;
    }
}

Chỉnh sửa các giá trị

Bạn chỉ cần chỉnh sửa các dòng sau nếu cần, nhưng các giá trị mặc định sẽ tự hoạt động tốt:
Mã:
@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

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

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

@controlColors đặt màu của các biểu tượng checkbox (lưu ý rằng @controlColor--hover cũng được sử dụng cho trạng thái đã chọn). @controlLabelColors ảnh hưởng đến văn bản nhãn khi hộp được chọn hoặc không được chọn. Cuối cùng, bạn có thể làm cho các hộp được check chắc chắn bằng cách sử dụng 'bold' và thay đổi con trỏ.

Một vài lưu ý

Mặc dù điều này được mở rộng một chút để thực hiện các chỉnh sửa thân thiện với người mới bắt đầu, bạn có thể tối ưu hóa điều này bằng kiến thức CSS. Hơn nữa, vì điều này đang được đưa vào Extra.less, các biến @control không ghi đè lên các biến trong core_input.less - vì vậy chúng tôi cần sao chép một số mã từ template đó. Điều này có thể tránh được thông qua một addon với Template Modifications. Đối với parent selector, chúng tôi sử dụng input[type="checkbox] để khai báo các tổ hợp sibling dễ dàng.

Chúc các bạn thành công.


Nguồn: xenforo.com​
 
Top Bottom