diff --git a/packages/vkui/src/components/Group/Group.module.css b/packages/vkui/src/components/Group/Group.module.css index 85a9e7cefa..bf345c5168 100644 --- a/packages/vkui/src/components/Group/Group.module.css +++ b/packages/vkui/src/components/Group/Group.module.css @@ -32,6 +32,11 @@ display: none; } +.Group__separator--spacing { + position: relative; + box-sizing: border-box; +} + /* stylelint-disable-next-line selector-max-universal */ .Group--mode-plain + * + .Group__separator--separator { display: block; @@ -46,11 +51,29 @@ .Group--mode-card + .Group__separator--spacing { display: block; + block-size: 16px; + padding-block: 8px; + padding-inline: 0; +} + +.Group--sizeX-compact.Group--mode-card + .Group__separator--spacing { + display: block; + block-size: 8px; + padding-block: 4px; } @media (--sizeX-regular) { .Group--sizeX-none.Group--mode-none + .Group__separator--spacing { display: block; + block-size: 16px; + padding-block: 8px; + padding-inline: 0; + } +} +@media (--sizeX-compact) { + .Group--sizeX-none.Group--mode-card + .Group__separator--spacing { + block-size: 8px; + padding-block: 4px; } } @@ -107,6 +130,15 @@ position: relative; } +.Group--sizeX-compact.Group--mode-card { + border-radius: var(--vkui--size_border_radius_promo--regular); +} + +@media (--sizeX-compact) { + .Group--sizeX-none.Group--mode-card { + border-radius: var(--vkui--size_border_radius_promo--regular); + } +} @media (--sizeX-regular) { .Group--sizeX-none.Group--mode-none { background: var(--vkui--color_background_content); @@ -118,16 +150,16 @@ .Group--sizeX-compact.Group--mode-card:first-of-type { border-start-start-radius: 0; border-start-end-radius: 0; - border-end-end-radius: var(--vkui--size_border_radius_paper--regular); - border-end-start-radius: var(--vkui--size_border_radius_paper--regular); + border-end-end-radius: var(--vkui--size_border_radius_promo--regular); + border-end-start-radius: var(--vkui--size_border_radius_promo--regular); } @media (--sizeX-compact) { .Group--sizeX-none.Group--mode-card:first-of-type { border-start-start-radius: 0; border-start-end-radius: 0; - border-end-end-radius: var(--vkui--size_border_radius_paper--regular); - border-end-start-radius: var(--vkui--size_border_radius_paper--regular); + border-end-end-radius: var(--vkui--size_border_radius_promo--regular); + border-end-start-radius: var(--vkui--size_border_radius_promo--regular); } } @@ -174,13 +206,11 @@ } } -.Group--mode-plain + .Group__separator, .Group--mode-plain + .Group__separator + .Group__separator { padding-block: 8px; } @media (--sizeX-compact) { - .Group--sizeX-none.Group--mode-none + .Group__separator, .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator { padding-block: 8px; } @@ -193,8 +223,7 @@ color: var(--vkui--color_text_secondary); } -.Group .Group, -.Group .Group + .Group__separator { +.Group .Group { padding-inline: 0; } diff --git a/packages/vkui/src/components/Group/Group.tsx b/packages/vkui/src/components/Group/Group.tsx index 65215f3fb4..e9fc6703d3 100644 --- a/packages/vkui/src/components/Group/Group.tsx +++ b/packages/vkui/src/components/Group/Group.tsx @@ -8,7 +8,6 @@ import { AppRootContext } from '../AppRoot/AppRootContext'; import { ModalRootContext } from '../ModalRoot/ModalRootContext'; import { RootComponent } from '../RootComponent/RootComponent'; import { Separator } from '../Separator/Separator'; -import { Spacing } from '../Spacing/Spacing'; import { Footnote } from '../Typography/Footnote/Footnote'; import styles from './Group.module.css'; @@ -136,9 +135,8 @@ export const Group = ({ {separator !== 'hide' && ( -