Dz input #22
Dz input #22
Conversation
|
Добавляю преподавателя (@GSemikozov) для код-ревью. |
|
Решение было обновлено, посмотрим что скажет @GSemikozov |
07-lection5/04-input/input.css
Outdated
| @@ -0,0 +1,72 @@ | |||
| .inputs { | |||
07-lection5/04-input/input.css
Outdated
| display: inline-block; | ||
| } | ||
|
|
||
| .input { |
07-lection5/04-input/input.css
Outdated
| padding-right: 40px; | ||
| } | ||
|
|
||
| .input_label { |
07-lection5/04-input/input.css
Outdated
| } | ||
|
|
||
| .input_label { | ||
| border: 1px solid #DDE2E5; |
07-lection5/04-input/input.css
Outdated
| border: 1px solid #374FC7; | ||
| } | ||
|
|
||
| .input_success:focus { |
There was a problem hiding this comment.
см выше (модификатор - у блока, а фокус - будет у элемента)
07-lection5/04-input/input.css
Outdated
| } | ||
|
|
||
| .input::placeholder { | ||
| font-family: 'Inter' sans-serif; |
There was a problem hiding this comment.
все лишнее и дублирует стили для самого инпута, так что уносим туда. Здесь - только цвет
07-lection5/04-input/input.css
Outdated
| height: 24px; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 310px; |
There was a problem hiding this comment.
а показываем нужную в зависимости от модификатора блока
07-lection5/04-input/index.html
Outdated
| <body> | ||
| <body> | ||
| <div class="inputs"> | ||
| <input type="text" class="input input_label" placeholder="Placeholder" /> |
There was a problem hiding this comment.
input_label - это не модификатор элемента, здесь это не нужно) зато нужен полноценный лейбл, который на макете сверху
07-lection5/04-input/index.html
Outdated
|
|
||
| <div class="inputs"> | ||
| <div class="input__icon input__icon_succes"> |
There was a problem hiding this comment.
и тогда иконки и инпут надо завернуть в общий враппер, чтоб они нормально позиционировались
| box-shadow: 0px 1px 1px 0px #339AF01A; | ||
| } | ||
|
|
||
| .input__success { |
| border: 1px solid #374FC7; | ||
| } | ||
|
|
||
| .input__success:focus { |
| border: 1px solid #374FC7; | ||
| } | ||
|
|
||
| .input__invalid { |
| transform: translateY(-50%); | ||
| } | ||
|
|
||
| .input__icon_succes { |
There was a problem hiding this comment.
.input_success .input__icon_succes { display: block; }
и ниже по аналогии
|
Добавляю преподавателя (@GSemikozov) для код-ревью. |
No description provided.