MRK-5063: Компоненты: Новые стили чипсов в ките (evo-chip) (v6)#1282
MRK-5063: Компоненты: Новые стили чипсов в ките (evo-chip) (v6)#1282andreykiselev92 wants to merge 4 commits into6.xfrom
Conversation
harlamenko
force-pushed
the
6.x
branch
2 times, most recently
from
6feedbf to
808d226
Compare
| display: flex; | ||
| align-items: center; | ||
| --evo-chip-background-color: #{mixins.$color-background-grey}; | ||
| --evo-chip-background-color-hover: #{mix(mixins.$color-white, mixins.$color-background-grey, 20%)}; |
There was a problem hiding this comment.
Давай не будем этой функцией здесь пользоваться. Во-первых, она даёт немного мусорные результаты, а во-вторых, у нас есть стандартные цвета, на которые ориентируются другие компоненты:
$color-grey-hover
$color-grey-active
| $root: &; | ||
|
|
||
| border-radius: math.div($height, 2); | ||
| --evo-chip-height: 32px; |
There was a problem hiding this comment.
Внутренние переменные, до которых не достучаться извне, лучше называть с другим префиксом.
Я обычно называю так: --inner-chip-height
| } | ||
| &:hover, | ||
| #{$root}__input:focus ~ & { | ||
| background-color: var(--evo-chip-background-color-hover); |
There was a problem hiding this comment.
Чтобы не делать такие сложные конструкции с селекторами, которые сильно зависят от темплейта, заведи внутренние переменные:
--inner-background-color
--inner-text-color
--inner-cursor
и тд, примени их к нужным свойствам блоков и меняй их значение так, как тебе нужно.
| } | ||
|
|
||
| input { | ||
| &_size-large { |
There was a problem hiding this comment.
Опиши ещё размер normal явно, пожалуйста. Так будет гораздо чётче.
И обрати внимание, когда есть крестик или счётчик, правый отступ становится меньше:
Поэтому правый отступ можно было бы в отдельную переменную затолкать.
И можно также добавить БЭМ-модификаторы контейнеру, которые говорят о том, что у чипсы есть счётчик (has-counter) или крестик (is-closable). Так будет проще этот правый отступ применить.
| </span> | ||
| </div> | ||
|
|
||
| <div *ngIf="hasCounter" class="chip__counter">{{ counter }}</div> |
There was a problem hiding this comment.
Давай используем здесь evo-counter компонент и уберём лишние стили.
## [6.22.2](v6.22.1...v6.22.2) (2026-02-03) ### Bug Fixes * **icons:** add kuper logos ([35d99e1](35d99e1))
andreykiselev92
force-pushed
the
feature/MRK-5063_v6
branch
4 times, most recently
from
48a05b1 to
870492b
Compare
andreykiselev92
force-pushed
the
feature/MRK-5063_v6
branch
from
870492b to
f2bd698
Compare
andreykiselev92
force-pushed
the
feature/MRK-5063_v6
branch
from
f2bd698 to
3264023
Compare
4 participants
No description provided.