Представляю Вам три варианта тумблера с различными цветовыми решениями, а так же
с различными анимациями переключения.
Под каждый стиль кнопки создан scss-файл: neon.scss, scaled.scss
и
style.scss.
В начале каждого файла заданы переменные, с помощью которых можно с легкостью изменить цветовую палитру или
размер каждой кнопки.
В зависимости от заданного размера кнопки будет меняться ее содержимое, данный подход облегчит написание
адаптивной верстки.
Что не получилось:
Менять размер стороны кнопки в зависимости от содержимого. Без использования js я не смогу реализовать плавную анимацию, при этом сохранив "резиновость" кнопки.
Я решила поставить анимацию в приоритет и размеры сторон кнопки задала в процентах.
Что можно сделать лучше:
• При минимальном размере кнопки, когда отображается только стрелочка, можно изменить размеры сторон кнопки так, чтобы они были равны.
Это могло бы решить проблему разной ширины сторон кнопки, однако является "костылем".
Изменение высоты для каждой кнопки отдельно. На данный момент отдельно можно поменять только ширину, высота изменяется сразу для всех кнопок.
• Настроить webpack для компиляции и оптимизации css.