core-plugin-notifications/styles.less at stable · LaswitchTech/core-plugin-notifications · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
.notifications-menu {
    > button {
        i {
            height: 2.25rem;
            width: 1.5rem
        }
        span {
            padding:8px;
            display: none;
        }
    }
    >.dropdown-menu {
        min-width:400px !important;
        max-width:500px !important;

        .header {
            .badge {
                display: none;
            }
        }

        .notifications-list {
            max-height:500px;
            overflow:auto;
            background-color: var(--bs-body-bg);

            .notification-row {
                transition: 0.3s ease;
                cursor: pointer;
                border-top: var(--bs-border-width) solid var(--bs-border-color);
                position: relative;
                background-color: transparent;
                overflow: hidden;

                .notification-title {
                    line-height:1.2;
                    overflow:hidden;
                    display:-webkit-box;
                    -webkit-line-clamp:1;
                    -webkit-box-orient:vertical;
                }

                .meta {
                    font-size:.7rem;
                    text-wrap: nowrap;
                    position: absolute;
                    top: 0px;
                    right: 0px;

                    .created {
                        padding:.125rem .4rem;
                        border-radius:999px;
                        background-color: var(--bs-tertiary-bg);
                        text-wrap: nowrap;
                    }

                    .category {
                        padding:.125rem .4rem;
                        border-radius:999px;
                        background-color: var(--bs-primary);
                        text-wrap: nowrap;
                        color: var(--bs-light);
                    }
                }

                > * { position: relative; z-index: 1; }

                &::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    left: auto;
                    right: 0;
                    width: 0%;
                    background-color: var(--bs-body-bg);
                    z-index: 0;
                    transition:
                        width 2s ease,
                        background-color 2s ease;
                }

                &:hover {
                    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
                    transform: translateX(-4px);

                    &::after {
                        width: 100%;
                        background-color: var(--bs-primary);
                    }
                }

                &.list-group-item {
                    background-color: transparent !important;
                }
            }
        }
    }
    &:has(.notification-row) {
        > button {
            span {
                display: inline-block;
            }
        }
        >.dropdown-menu {
            .header {
                .badge {
                    display: inline-block;
                }
            }
        }
    }
}