共通スタイルをくくりだす
This commit is contained in:
kakkokari-gtyih
parent
aab487f17f
commit
7474ba62be
|
|
@ -7,17 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
|
||||
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
|
||||
<div class="main">
|
||||
<template v-for="item in items">
|
||||
<button v-if="item.action" :key="item.text" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
|
||||
<template v-for="item in items" :key="item.text">
|
||||
<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
|
||||
<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
|
||||
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA v-else :key="item.text" v-click-anime :to="item.to" class="item" @click.passive="close()">
|
||||
<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
|
||||
<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
|
||||
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
</template>
|
||||
|
|
@ -123,27 +123,11 @@ function close() {
|
|||
position: absolute;
|
||||
top: 32px;
|
||||
left: 16px;
|
||||
font-size: 8px;
|
||||
display: inline-flex;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: 700;
|
||||
background: var(--indicator);
|
||||
height: 1.5em;
|
||||
min-width: 1.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
top: 16px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
|
|
|
|||
|
|
@ -155,6 +155,25 @@ hr {
|
|||
background: currentColor;
|
||||
}
|
||||
|
||||
._indicateCounter {
|
||||
display: inline-flex;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: 700;
|
||||
background: var(--indicator);
|
||||
height: 1.5em;
|
||||
min-width: 1.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding: .125em .25em;
|
||||
line-height: 1.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
._noSelect {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
|
||||
<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
|
||||
<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
</component>
|
||||
|
|
@ -133,24 +133,6 @@ function more(ev: MouseEvent) {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.itemIndicateValueIcon {
|
||||
display: inline-flex;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: 700;
|
||||
background: var(--navIndicator);
|
||||
height: 1.5em;
|
||||
min-width: 1.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.root:not(.iconOnly) {
|
||||
.body {
|
||||
width: var(--nav-width);
|
||||
|
|
@ -338,6 +320,7 @@ function more(ev: MouseEvent) {
|
|||
animation: none;
|
||||
left: auto;
|
||||
right: 40px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -502,6 +485,13 @@ function more(ev: MouseEvent) {
|
|||
color: var(--navIndicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
top: 4px;
|
||||
left: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" class="indicator">
|
||||
<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
|
||||
<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
</component>
|
||||
|
|
@ -227,24 +227,6 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
left: auto;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
& > .itemIndicateValueIcon {
|
||||
display: inline-flex;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: 700;
|
||||
background: var(--navIndicator);
|
||||
height: 1.5em;
|
||||
min-width: 1.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
|
||||
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -491,24 +491,10 @@ body {
|
|||
color: var(--indicator);
|
||||
font-size: 16px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
.navButtonIndicateValueIcon {
|
||||
display: inline-flex;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: 700;
|
||||
background: var(--navIndicator);
|
||||
height: 1em;
|
||||
min-width: 1em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
font-size: .75em;
|
||||
line-height: 1em;
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
|
||||
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -450,24 +450,10 @@ $widgets-hide-threshold: 1090px;
|
|||
color: var(--indicator);
|
||||
font-size: 16px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
.navButtonIndicateValueIcon {
|
||||
display: inline-flex;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: 700;
|
||||
background: var(--navIndicator);
|
||||
height: 1em;
|
||||
min-width: 1em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
font-size: .75em;
|
||||
line-height: 1em;
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue