SWREI/switched
0
0
Fork 0
Code

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-10 14:37:32 +09:00
parent 17fa5667b8
commit d0755b5ce8
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/frontend/src/ui/_common_/common.vue
View File

@ -9,8 +9,15 @@
<XUpload v-if="uploads.length > 0"/>
<TransitionGroup :name="$store.state.animation ? 'notification' : ''" tag="div" class="notifications">
<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" class="notification"/>
<TransitionGroup
tag="div" :class="$style.notifications"
:move-class="$store.state.animation ? $style.transition_notification_move : ''"
:enter-active-class="$store.state.animation ? $style.transition_notification_enterActive : ''"
:leave-active-class="$store.state.animation ? $style.transition_notification_leaveActive : ''"
:enter-from-class="$store.state.animation ? $style.transition_notification_enterFrom : ''"
:leave-to-class="$store.state.animation ? $style.transition_notification_leaveTo : ''"
>
<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" :class="$style.notification"/>
</TransitionGroup>
<XStreamIndicator/>
@ -73,11 +80,14 @@ if ($i) {
}
</script>
<style lang="scss" scoped>
.notification-move, .notification-enter-active, .notification-leave-active {
<style lang="scss" module>
.transition_notification_move,
.transition_notification_enterActive,
.transition_notification_leaveActive {
transition: opacity 0.3s, transform 0.3s !important;
}
.notification-enter-from, .notification-leave-to {
.transition_notification_enterFrom,
.transition_notification_leaveTo {
opacity: 0;
transform: translateX(-250px);
}
@ -91,25 +101,27 @@ if ($i) {
padding: 0 32px;
pointer-events: none;
container-type: inline-size;
}
> .notification {
& + .notification {
margin-top: 8px;
}
.notification {
& + .notification {
margin-top: 8px;
}
}
@media (max-width: 500px) {
@media (max-width: 500px) {
.notifications {
top: initial;
bottom: calc(var(--minBottomSpacing) + var(--margin));
padding: 0 var(--margin);
display: flex;
flex-direction: column-reverse;
}
> .notification {
& + .notification {
margin-top: 0;
margin-bottom: 8px;
}
.notification {
& + .notification {
margin-top: 0;
margin-bottom: 8px;
}
}
}