Бумажные кнопки, шаг 3 - Не засчитывает задание

Курсы §27. Плавные переходы
1

Первое задание засчитало а второе не засчитывает но визуально работает. Пробовал в трех браузерах. Черт, если там и есть бонус то мне кажется что я даже понял как его открыть епта… Я уже не знаю, это я туплю или нет… :cry:

.paper-btn-true input:checked ~ label {
background-color: #00e676;
}

.paper-btn-false input:checked ~ label {
background-color: #ff5252;
}

.paper-btn-true input:checked ~ label,
.paper-btn-false input:checked ~ label {
color: #f1f1f1;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}

.paper-btn input:checked ~ label {
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Курс http://htmlacademy.ru/courses/84/run/11

2

Ответ кроется в этой строчке =)

убери :checked.
Все анимации к начальному состоянию принято делать)

P.s. сразу предложение, @juwain, может лучше для всех свойств сделать плавный переход? а то цвет текста как-то рублено изменяется.

2 лайка
3

:flushed: Расслабился я

4

А бонус веселый, спасибо за наводку)

5

@juwain, Вить. А ведь еще 1 непонимание - зачем использовать “родственный селектор”, когда label идет всегда строго за инпутом, и другого лейбла нет, и у них всегда 1 родитель, в данном задании?
Может здесь логичней было бы использовать “соседний селектор”?

6

Думаю, переход цвета всё таки должен меняться мгновенно. Это сделано умышленно. :relieved:

7

Думаю, для единообразия уместен селектор ~.

1 лайк