-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Мобильная версия страниц Регистрации и Логина #118
Conversation
@media (min-width: 1440px) { | ||
.orange-ball_user { | ||
left: 64px; | ||
top: 15px; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
мы можем сокращать код scss вложив @media для .orange-ball_user в класс .orange-ball_user. таким образом
.orange-ball_user {
position: absolute;
left: calc(52px + (100vw - 768px) * 0.017);
top: calc((100vw - 768px) * 0.022);
@media (min-width: 1440px) {
left: 64px;
top: 15px;
}
}
это может помочь быстрее ориентировать к какому классу относится media при поддержке кода в дальнейшем
это можно сделать в этом файле, а также во всех scss файлах ниже😌
Предлагаю при мерже всегда делать squash, чтобы не запутаться в большом количестве коммитов🤘🏼 |
Да, это обязательно. |
Кажется, ты еще не везде во всем проекте опечатку класса исправила в файлах scss, не забудь, пожалуйста, перед мержем заглянуть поправить🤓 |
display: block; | ||
} | ||
|
||
.user-container { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Лучше сначала селектор блока .user-container
, а потом селектор элемента .user-container__container
padding: 24px 16px 38px; | ||
} | ||
|
||
.user-container_register-confirm { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Так как тут модификаторы, то в целом можно записать во вложенных стилях так:
.user-container {
...
padding: 24px 16px 38px;
&_register-confirm {
...
}
&_login {
padding-bottom: 142px;
}
&_recovery {
...
}
}
Но Таня уже предложила подкорректировать доку, так что можем обсудить
cursor: pointer; | ||
} | ||
|
||
.register__text { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Получилось, что сначала идут селекторы для блока register
, потом селекторы для блока checkbox
, причём начинаются с селекторов элементов, а потом опять селекторы для блока register
|
||
&:hover { | ||
cursor: pointer; | ||
} | ||
} | ||
|
||
.password-visibility_opened { | ||
background-image: url("../../images/password__visibility_opened.svg"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Не в тему этого ПР, но в css используем одинарные кавычки (во всяком случае до этого момента так казалось), так что если есть желание, то можно заменить, чтобы привести к единообразию
Чисто предложение: так как один и тот же путь по папки images
используется дважды в этом файле, то можно добавить в начала файла переменную:
$images-path: '../../images';
Тогда стиль тут будет:
background-image: url('#{$images-path}/password__visibility_opened.svg');
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Спасибо!
Можно склеивать (сквошивать)
Добавила адаптив для страниц Регистрации и Логина.
Добавила два стандартных шрифта в srandard-fonts.