68 lines
1.7 KiB
HTML
68 lines
1.7 KiB
HTML
{% macro style() %}
|
|
<style type="text/css">
|
|
.offer-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.offer-checkbox {
|
|
/* Скрываем стандартный чекбокс */
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
|
|
/* Размер и базовый вид */
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
|
|
/* Плавные переходы */
|
|
transition: all 0.25s ease;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.offer-checkbox:hover {
|
|
background-color: #5e17988f;
|
|
|
|
box-shadow: 0 0 0 3px #5F179826;
|
|
}
|
|
|
|
.offer-checkbox:checked {
|
|
background-color: #5F1798;
|
|
box-shadow: 0 0 0 3px #5F179826;
|
|
}
|
|
|
|
/* Галочка внутри чекбокса */
|
|
.offer-checkbox:checked::after {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.285 6.293a1 1 0 00-1.414 0L9 16.172 5.129 12.3a1 1 0 00-1.414 1.414l4.95 4.95a1 1 0 001.414 0l10.586-10.586a1 1 0 000-1.414z'/%3E%3C/svg%3E");
|
|
background-size: 14px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* Состояние при наведении на весь label */
|
|
.offer-label:hover .offer-checkbox {
|
|
border-color: #5F1798;
|
|
}
|
|
|
|
/* Если чекбокс отключён */
|
|
.offer-checkbox:disabled {
|
|
background-color: #f5f5f5;
|
|
border-color: #ddd;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|
|
{% endmacro %} |