fix(game-ui): 분할 버튼 이음새를 하나로 연결
공용 split primitive가 내부 모서리와 구분선을 소유하게 해 Lumen 규칙의 cascade 덮어쓰기를 막습니다. 공통·국가 메뉴의 desktop/mobile 및 상호작용 상태를 Chromium 회귀로 고정합니다.
This commit is contained in:
@@ -153,3 +153,18 @@
|
||||
border-color: var(--legacy-button-border);
|
||||
background: var(--legacy-button-bg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Split controls share one outer silhouette. Keep the main control's right
|
||||
* border as the subtle divider while removing every inner corner and the
|
||||
* toggle's overlapping left border. These rules intentionally follow the
|
||||
* Lumen family so its border shorthand cannot restore the inner rounding.
|
||||
*/
|
||||
.legacy-split-button > .main-menu-link {
|
||||
border-radius: 5.25px 0 0 5.25px;
|
||||
}
|
||||
|
||||
.legacy-split-button > .legacy-split-button__toggle {
|
||||
border-left-width: 0;
|
||||
border-radius: 0 5.25px 5.25px 0;
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-else class="main-menu-split">
|
||||
<div v-else class="main-menu-split legacy-split-button">
|
||||
<MainNavigationLink
|
||||
:link="entry.main"
|
||||
:enabled="isNavigationConfigured(entry.main)"
|
||||
@@ -67,7 +67,7 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
|
||||
lumen-variant="navigation"
|
||||
/>
|
||||
<button
|
||||
class="main-menu-button main-menu-split__toggle legacy-button legacy-button--navigation"
|
||||
class="main-menu-button main-menu-split__toggle legacy-split-button__toggle legacy-button legacy-button--navigation"
|
||||
type="button"
|
||||
:data-menu-id="entry.id"
|
||||
:aria-label="`${entry.main.label} 하위 메뉴`"
|
||||
@@ -131,12 +131,6 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
|
||||
min-width: 28px;
|
||||
width: 28px;
|
||||
padding: 0;
|
||||
border-left-width: 0;
|
||||
border-radius: 0 5.25px 5.25px 0;
|
||||
}
|
||||
|
||||
.main-menu-split > :deep(.main-menu-link) {
|
||||
border-radius: 5.25px 0 0 5.25px;
|
||||
}
|
||||
|
||||
.menu-caret {
|
||||
|
||||
@@ -35,7 +35,7 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
|
||||
:active="isActive(entry)"
|
||||
lumen-variant="lumen"
|
||||
/>
|
||||
<div v-else-if="entry.kind === 'split'" class="nation-menu-split">
|
||||
<div v-else-if="entry.kind === 'split'" class="nation-menu-split legacy-split-button">
|
||||
<MainNavigationLink
|
||||
:link="entry.main"
|
||||
:enabled="isNationNavigationEnabled(entry.main, access)"
|
||||
@@ -43,7 +43,7 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
|
||||
lumen-variant="lumen"
|
||||
/>
|
||||
<button
|
||||
class="main-menu-button nation-menu-split__toggle legacy-button legacy-button--lumen"
|
||||
class="main-menu-button nation-menu-split__toggle legacy-split-button__toggle legacy-button legacy-button--lumen"
|
||||
type="button"
|
||||
:data-menu-id="entry.id"
|
||||
:aria-label="`${entry.main.label} 하위 메뉴`"
|
||||
@@ -108,12 +108,6 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
|
||||
min-width: 28px;
|
||||
width: 28px;
|
||||
padding: 0;
|
||||
border-left-width: 0;
|
||||
border-radius: 0 5.25px 5.25px 0;
|
||||
}
|
||||
|
||||
.nation-menu-split > :deep(.main-menu-link) {
|
||||
border-radius: 5.25px 0 0 5.25px;
|
||||
}
|
||||
|
||||
.menu-caret {
|
||||
|
||||
Reference in New Issue
Block a user