aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/alert.style.js9
-rw-r--r--src/components/badge.style.js3
-rw-r--r--src/components/chat/chat.vue2
-rw-r--r--src/components/chat_list_item/chat_list_item.vue2
-rw-r--r--src/components/menu_item.style.js3
-rw-r--r--src/components/mobile_nav/mobile_nav.vue25
-rw-r--r--src/components/navigation/navigation_entry.vue6
-rw-r--r--src/components/navigation/navigation_pins.vue13
-rw-r--r--src/components/notifications/notifications.vue2
-rw-r--r--src/components/settings_modal/tabs/theme_tab/preview.vue2
-rw-r--r--src/components/side_drawer/side_drawer.vue6
-rw-r--r--src/components/timeline/timeline.scss11
12 files changed, 28 insertions, 56 deletions
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 081031d7..5881e833 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -17,10 +17,17 @@ export default {
{
directives: {
background: '--text',
- opacity: 0.8
+ opacity: 0.5
}
},
{
+ parent: {
+ component: 'Alert'
+ },
+ component: 'Border',
+ textColor: '--parent'
+ },
+ {
variant: 'error',
directives: {
background: '--cRed'
diff --git a/src/components/badge.style.js b/src/components/badge.style.js
index 3ac7d8c0..37833cdb 100644
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@@ -6,8 +6,7 @@ export default {
'Icon'
],
variants: {
- normal: '.neutral',
- notification: '.notification'
+ notification: '.-notification'
},
defaultRules: [
{
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index b1e5468c..fc94cc71 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -61,7 +61,7 @@
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
- class="badge badge-notification unread-chat-count unread-message-count"
+ class="badge -notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 69ad609b..cbae2d11 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -36,7 +36,7 @@
/>
<div
v-if="chat.unread > 0"
- class="badge badge-notification unread-chat-count"
+ class="badge -notification unread-chat-count"
>
{{ chat.unread }}
</div>
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 6475395a..3c70bd9f 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -6,7 +6,8 @@ export default {
'Icon',
'Input',
'Border',
- 'ButtonUnstyled'
+ 'ButtonUnstyled',
+ 'Badge'
],
states: {
hover: ':hover',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 489f3866..2e7590b9 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
/>
<div
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
- class="badge alert-dot"
+ class="badge -dot -notification"
/>
</button>
<NavigationPins class="pins" />
@@ -37,14 +37,14 @@
/>
<div
v-if="unseenNotificationsCount"
- class="badge alert-dot"
+ class="badge -dot -notification"
/>
</button>
</div>
</nav>
<aside
v-if="currentUser"
- class="mobile-notifications-drawer"
+ class="panel mobile-notifications-drawer"
:class="{ '-closed': !notificationsOpen }"
@touchstart.stop="notificationsTouchStart"
@touchmove.stop="notificationsTouchMove"
@@ -54,7 +54,7 @@
{{ $t('notifications.notifications') }}
<span
v-if="unseenCountBadgeText"
- class="badge badge-notification unseen-count"
+ class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span>
</span>
<span class="spacer" />
@@ -165,19 +165,6 @@
display: flex;
}
- .alert-dot {
- border-radius: 100%;
- height: 8px;
- width: 8px;
- position: absolute;
- left: calc(50% - 4px);
- top: calc(50% - 4px);
- margin-left: 6px;
- margin-top: -6px;
- background-color: $fallback--cRed;
- background-color: var(--badgeNotification, $fallback--cRed);
- }
-
.mobile-notifications-drawer {
width: 100%;
height: 100vh;
@@ -238,10 +225,6 @@
height: calc(100vh - var(--navbar-height));
overflow-x: hidden;
overflow-y: scroll;
- color: $fallback--text;
- color: var(--text, $fallback--text);
- background-color: $fallback--bg;
- background-color: var(--bg, $fallback--bg);
.notifications {
padding: 0;
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ed805944..1189f76d 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -34,7 +34,7 @@
<slot />
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
- class="badge badge-notification"
+ class="badge -notification"
>
{{ getters[item.badgeGetter] }}
</div>
@@ -100,5 +100,9 @@
margin-right: -0.8em;
}
}
+
+ .badge {
+ margin: 0 0.8em;
+ }
}
</style>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 48a4dcbd..931d5325 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
>{{ item.iconLetter }}</span>
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
- class="badge alert-dot"
+ class="badge -dot -notification"
/>
</router-link>
</span>
@@ -36,17 +36,6 @@
overflow: hidden;
height: 100%;
- .alert-dot {
- border-radius: 100%;
- height: 0.5em;
- width: 0.5em;
- position: absolute;
- right: calc(50% - 0.75em);
- top: calc(50% - 0.5em);
- background-color: $fallback--cRed;
- background-color: var(--badgeNotification, $fallback--cRed);
- }
-
.pinned-item {
position: relative;
flex: 1 0 3em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index a0025182..eb128450 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -18,7 +18,7 @@
{{ $t('notifications.notifications') }}
<span
v-if="unseenCountBadgeText"
- class="badge badge-notification unseen-count"
+ class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span>
</div>
<div
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 5230f3e9..4054a440 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -5,7 +5,7 @@
<div class="panel-heading">
<div class="title">
{{ $t('settings.style.preview.header') }}
- <span class="badge badge-notification">
+ <span class="badge -notification">
99
</span>
</div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 09588767..1c6e5802 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -82,7 +82,7 @@
/> {{ $t("nav.chats") }}
<span
v-if="unreadChatCount"
- class="badge badge-notification"
+ class="badge -notification"
>
{{ unreadChatCount }}
</span>
@@ -111,7 +111,7 @@
/> {{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
- class="badge badge-notification"
+ class="badge -notification"
>
{{ followRequestCount }}
</span>
@@ -205,7 +205,7 @@
/> {{ $t("nav.announcements") }}
<span
v-if="unreadAnnouncementCount"
- class="badge badge-notification"
+ class="badge -notification"
>
{{ unreadAnnouncementCount }}
</span>
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 64c7de76..7f886dc3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,17 +1,6 @@
@import "../../variables";
.Timeline {
- .alert-dot {
- border-radius: 100%;
- height: 8px;
- width: 8px;
- position: absolute;
- left: calc(50% - 4px);
- top: calc(50% - 4px);
- margin-left: 6px;
- margin-top: -6px;
- }
-
.alert-badge {
font-size: 0.75em;
line-height: 1;
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 11:10:54 +0000