HTML & CSS / SCSS #2
Conversation
…дели вместе с препроцессорами)
|
Сделал домашнее задание по CSS, в течении пары дней залью все на препроцессорах |
|
Выполнил домашнее задание по CSS и переделал его на препроцессоры |
| @@ -0,0 +1,62 @@ | |||
| .todos-add { | |||
|
|
||
| right: $right_clear-button; | ||
|
|
||
| @include zeroPaddingMargin(); |
There was a problem hiding this comment.
Я бы объединил в общий миксин очистки инпута аля cleanInput.
|
|
||
| @include fiftyLeftTop(); | ||
|
|
||
| margin: $margin_select-all-img; |
There was a problem hiding this comment.
Вот это уже перебор для переменных. Не надо загонять в них всё. В них должны быть загнаны общие моменты: цвета, общие отступы, значения основных шрифтов, основные размеры иконок, какие-то основные лайаутные вещи. Иначе, как в данном случае, мухи отделены от котлет с огромным количеством мяса. И изменять данный код будет в разы сложнее.
There was a problem hiding this comment.
Таких мест у вас много. Пожалуйса, найдите и поправьте остальные места сами.
| border-bottom: $brd-b_list-item; | ||
| } | ||
|
|
||
| .input-checkbox { |
There was a problem hiding this comment.
чекбокс должен быть описан в отдельном файле
| @@ -0,0 +1,128 @@ | |||
| .todos-list-item { | |||
There was a problem hiding this comment.
все файлы которые начинаются с todos- — проектные. Вы же не будете передавать их сторонним разработчикам в качестве библиотеки, поэтому стоит перенести их в папочку src/styles/project
|
|
||
| .input-checkbox_target:hover:checked ~ .input-checkbox_visual { | ||
| /* | ||
| какой цвет у кружочка чекбокса при наведении мыши? |
There was a problem hiding this comment.
Додумайте на основе ховера для неактивного
| } | ||
|
|
||
| .input-checkbox_target:checked ~ .input-checkbox_visual { | ||
| background: url($img_checbox_url) no-repeat 8px 8px; |
There was a problem hiding this comment.
Предлагаю попробовать сделать иконки без картинок.
Смотрите Anna Selezniova — Front-end As I See It
https://www.youtube.com/watch?v=B9SXHMei58c
| @include noBorders(); | ||
| } | ||
|
|
||
| .todos-list-item:hover > .todos-list-item_delete > .todos-list-item_delete_icon{ |
| $w_checkbox : 60px; | ||
| $h_checkbox : 60px; | ||
| $w_checkbox_visual : 36px; | ||
| $h_checkbox_visual : 36px; |
Сделал CSS без чекбоксов, их залью в течении недели вместе с препроцессорами