Develop #4428
Develop #4428
Conversation
src/index.html
Outdated
| <a | ||
| href="#" | ||
| class="search-form__search-icon search-form__search-icon--large" | ||
| ></a> |
There was a problem hiding this comment.
I thought it should be interactive in future - like buttons, so to do that I used a
src/style/blocks/page.css
Outdated
| html, | ||
| input { |
There was a problem hiding this comment.
| html, | |
| input { | |
| html { |
src/style/blocks/search-form.css
Outdated
| height: 42px; | ||
| } | ||
|
|
||
| /* #endregion */ |
src/style/blocks/search-form.css
Outdated
|
|
||
| /* #region hover */ | ||
| .search-form--large:hover { | ||
| box-shadow: 0 4px 4px #00000040; |
There was a problem hiding this comment.
use variables for all colors
src/style/style.css
Outdated
| @import 'blocks/search-form.css'; | ||
| @import 'blocks/search-icon.css'; |
There was a problem hiding this comment.
can we move it to one file?
src/index.html
Outdated
| <a | ||
| href="#" | ||
| class="search-form__search-icon" | ||
| ></a> |
There was a problem hiding this comment.
why y need links in this place?use span
src/style/blocks/input.css
Outdated
| .search-form__input--small:focus { | ||
| text-shadow: none; | ||
| } | ||
|
|
||
| .search-form--small .search-form__input:active { | ||
| text-shadow: none; | ||
| } | ||
|
|
||
| .search-form--small .search-form__input:hover { | ||
| text-shadow: none; | ||
| } |
There was a problem hiding this comment.
you are duplicating too much code
src/style/blocks/page.css
Outdated
| } | ||
|
|
||
| html, | ||
| .search-form__input { |
There was a problem hiding this comment.
this class should not be here
src/style/blocks/search-form.css
Outdated
| .search-form--large:hover { | ||
| box-shadow: 0 4px 4px var(--box-shadow-dark-color); | ||
| } | ||
|
|
||
| .search-form--small:hover { | ||
| box-shadow: 0 3px 8px var(--box-shadow-darker-color); | ||
| } |
There was a problem hiding this comment.
you can use it for general class. do not duplicate
There was a problem hiding this comment.
I don't quite understand. How do I combine them if they have different styles?
src/style/blocks/search-form.css
Outdated
| .search-form--large .search-form__search-icon { | ||
| min-height: 19px; | ||
| min-width: 19px; | ||
| margin: 0 17px 0 26px; | ||
| } | ||
|
|
||
| .search-form--small .search-form__search-icon { | ||
| min-height: 11px; | ||
| min-width: 11px; | ||
| margin: 0 9px 0 13px; | ||
| } |
There was a problem hiding this comment.
why not just .search-form__search-icon?
There was a problem hiding this comment.
I added modifier only to the parent block and elements of these blocks has different styles, so that was the only solution I could think of
src/style/blocks/input.css
Outdated
| .search-form--large .search-form__input { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .search-form--small .search-form__input { | ||
| font-size: 14px; | ||
| font-weight: 400; |
There was a problem hiding this comment.
you can create a generic class for input and modifiers.
always use onle 1 class, otherwise it will confuse you and make your code less readable
DEMO LINK
TEST REPORT LINK
Icon implemented using background-image CSS property
Inputs are written inside of 'form' tag with correctly passed attributes
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️