@intellias/menu 1.0.0

package/components/notifications-sidebar/NotificationsSidebar.scss

@@ -0,0 +1,665 @@
+@use "sass:map";
+@import "../../scss/components/utils";
+@import "../../scss/components/variables";
+
+.notifications-sidebar {
+    position: relative;
+    color: map.get($intems-colors, "text-primary");
+    .row {
+        margin-bottom: 0;
+        box-sizing: inherit;
+        .col {
+            padding: 0 0.75rem;
+        }
+    }
+
+    .col {
+        .row {
+            margin-left: -0.75rem;
+            margin-right: -0.75rem;
+        }
+    }
+    .v-dropdown-menu__container {
+        width: fit-content;
+        max-width: none;
+        min-width: none;
+        .v-dropdown-menu__header {
+            .note-title-row {
+                border-bottom: 1px map.get($intems-colors, "border") solid;
+                padding: 0 3px 0 13px;
+                margin-bottom: 10px;
+
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .col.s10 {
+                    height: 50px;
+                    line-height: 50px;
+                    font-weight: bold;
+                }
+                .col.s8 {
+                    height: 50px;
+                    line-height: 50px;
+                    margin-left: 0;
+                    font-weight: bold;
+                }
+                .col.s2 {
+                    height: 50px;
+                    line-height: 50px;
+                    margin-left: 5px;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 30px 0 0;
+                }
+                .sub-menu {
+                    border: 1px map.get($intems-colors, "border") solid;
+                    border-radius: 2px;
+                    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+                    padding-left: 0px;
+                    li {
+                        min-height: 30px;
+                        line-height: 30px;
+                        width: 100%;
+                        display: block;
+                        &:hover,
+                        &:active {
+                            &:not(.is-disabled) {
+                                background-color: map.get($intems-colors, "primary-container-tag");
+                            }
+                        }
+                        a {
+                            color: map.get($intems-colors, "text-primary");
+                            font-size: 16px;
+                            line-height: 17px;
+                            padding: 10px 16px;
+                            cursor: pointer;
+
+                            &.is-disabled {
+                                color: rgba(0, 0, 0, 0.42);
+                                cursor: not-allowed;
+                                opacity: 0.5;
+                                text-decoration: none;
+                                pointer-events: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .v-dropdown-menu__body {
+            .main-dropdown {
+                width: 370px;
+                height: auto !important;
+                transform: none !important;
+
+                @media #{$small-and-down} {
+                    position: fixed;
+                    width: 100% !important;
+                }
+
+                .default-tabs {
+                    height: 38px;
+                    line-height: 24px;
+                    padding-left: 0;
+                    list-style-type: none;
+                    position: relative;
+                    overflow-x: hidden;
+                    overflow-y: hidden;
+                    width: 100%;
+                    background-color: map.get($intems-colors, "surface-primary");
+                    margin: 0 auto;
+                    white-space: nowrap;
+                    border-bottom: 1px map.get($intems-colors, "border") solid;
+                    button {
+                        clear: inherit;
+                        min-height: auto;
+                        width: 50%;
+                        line-height: 28px;
+                        background-color: map.get($intems-colors, "surface-primary");
+                        border: none;
+                        cursor: pointer;
+                        &.tab {
+                            height: 20px;
+                            display: inline-block;
+                            text-align: center;
+                            padding: 0;
+                            margin: 0;
+
+                            font-size: $font-size-12;
+                            text-transform: initial;
+                            padding: 0px 10px;
+                            color: map.get($intems-colors, "text-tertiary");
+                            background-color: inherit;
+
+                            &.active,
+                            &:focus,
+                            &:hover,
+                            &:focus.active {
+                                background-color: inherit;
+                                color: map.get($intems-colors, "text-primary");
+                            }
+
+                            .counter {
+                                font-weight: bold;
+                                text-align: center;
+                                font-size: $font-size-10;
+                                border-radius: 10px;
+                                padding: 2px 6px;
+                                color: map.get($intems-colors, "text-on-color");
+                                background-color: map.get($intems-colors, "accent");
+                                margin-left: 4px;
+                            }
+                            &:focus,
+                            &:hover {
+                                background-color: inherit;
+                            }
+                        }
+                    }
+                    .indicator {
+                        background-color: map.get($intems-colors, "primary");
+                        margin: 0 25px;
+                        width: initial;
+                        height: 3px;
+                        width: 140px !important;
+
+                        position: absolute;
+                        bottom: 0;
+                        height: 2px;
+                        will-change: left, right;
+                        transition: background-color 0.3s;
+                        transition: transform 0.4s ease, width 0.4s ease;
+                    }
+                }
+                .notification-content {
+                    padding: 0;
+                    margin-left: 0;
+                    width: 100%;
+                    height: fit-content;
+                    .notifications-list {
+                        .tab-content {
+                            min-height: 120px;
+                            max-height: 70vh;
+
+                            .preloader {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+
+                                margin: 20px auto;
+                                left: 38%;
+                                display: inline-block;
+                                position: relative;
+                                width: 80px;
+                                height: 80px;
+                            }
+                            .note {
+                                &:hover .manage-notification {
+                                    display: inline-block;
+                                }
+                                &.read {
+                                    background-color: map.get($intems-colors, "disable");
+                                }
+                                &:not(.read) {
+                                    border-left: 3px solid map.get($intems-colors, "orangish");
+                                }
+                                .row {
+                                    position: relative;
+                                    display: flex;
+                                }
+                                border-bottom: 1px map.get($intems-colors, "border") solid;
+                                &:last-child {
+                                    border-bottom: none;
+                                }
+                                padding: 20px 25px;
+                                margin: 0 -0.75rem;
+                                i.category-icon {
+                                    width: 28px;
+                                    height: 28px !important;
+                                }
+                                .new-notification {
+                                    position: absolute;
+                                    width: 9px;
+                                    height: 9px;
+                                    border-radius: 5px;
+                                    background-color: map.get($intems-colors, "accent");
+                                    top: 0;
+                                    right: 10px;
+                                }
+                                .manage-notification {
+                                    position: absolute;
+                                    right: 10px;
+                                    display: none;
+                                    i {
+                                        height: 16px;
+                                        &:before {
+                                            background-color: map.get($intems-colors, "icon");
+                                        }
+                                        &.visibility {
+                                            height: 18px;
+                                            width: 18px;
+                                            &:hover:before {
+                                                background-color: map.get($intems-colors, "information");
+                                            }
+                                        }
+                                        &.delete:hover:before {
+                                            background-color: map.get($intems-colors, "error");
+                                        }
+                                    }
+                                }
+                                .reject-color {
+                                    color: map.get($intems-colors, "error");
+                                }
+                                .note-title-col {
+                                    padding-left: 4px;
+
+                                    .text-muted {
+                                        font-size: 0.8rem;
+                                        color: #64748b;
+                                    }
+                                }
+                                .action-buttons {
+                                    height: 21px;
+                                }
+                            }
+                        }
+                        overflow-y: hidden;
+                        box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 0.12);
+                        border-top: 1px map.get($intems-colors, "border") solid;
+                        line-height: 18px;
+                    }
+                }
+            }
+        }
+    }
+
+    .notification-href {
+        padding: 0 15px 21px;
+        font-size: $font-size-18;
+    }
+
+    a {
+        color: map.get($intems-colors, "primary");
+        display: inline;
+        padding: 0;
+        font-size: inherit;
+        &:hover {
+            background-color: initial;
+        }
+    }
+
+    .primary-text {
+        font-size: $font-size-14 !important;
+        line-height: 1.29;
+        font-weight: bold;
+    }
+    .view-all-row {
+        border-top: 1px map.get($intems-colors, "border") solid;
+        line-height: 49px;
+    }
+
+    .ps__rail-x {
+        display: none !important;
+    }
+    .has-unread {
+        display: inline-block;
+        position: absolute;
+        top: 12px;
+        right: 7px;
+        height: 9px;
+        width: 9px;
+        border-radius: 50%;
+        background-color: map.get($intems-colors, "accent-top-menu");
+    }
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.5s;
+    }
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+    }
+}
+.bell-animation {
+    -webkit-animation: ring 5.6s 0.5s ease-in-out infinite;
+    -webkit-transform-origin: 50% 4px;
+    -moz-animation: ring 5.6s 0.5s ease-in-out infinite;
+    -moz-transform-origin: 50% 4px;
+    animation: ring 5.6s 0.5s ease-in-out infinite;
+    transform-origin: 50% 4px;
+}
+
+@-webkit-keyframes ring {
+    0% {
+        -webkit-transform: rotate(0);
+    }
+    1% {
+        -webkit-transform: rotate(32deg);
+    }
+    3% {
+        -webkit-transform: rotate(-30deg);
+    }
+    5% {
+        -webkit-transform: rotate(42deg);
+    }
+    7% {
+        -webkit-transform: rotate(-40deg);
+    }
+    9% {
+        -webkit-transform: rotate(36deg);
+    }
+    11% {
+        -webkit-transform: rotate(-34deg);
+    }
+    13% {
+        -webkit-transform: rotate(32deg);
+    }
+    15% {
+        -webkit-transform: rotate(-30deg);
+    }
+    17% {
+        -webkit-transform: rotate(30deg);
+    }
+    19% {
+        -webkit-transform: rotate(-28deg);
+    }
+    21% {
+        -webkit-transform: rotate(28deg);
+    }
+    23% {
+        -webkit-transform: rotate(-26deg);
+    }
+    25% {
+        -webkit-transform: rotate(26deg);
+    }
+    27% {
+        -webkit-transform: rotate(-24deg);
+    }
+    29% {
+        -webkit-transform: rotate(24deg);
+    }
+    31% {
+        -webkit-transform: rotate(-22deg);
+    }
+    33% {
+        -webkit-transform: rotate(23deg);
+    }
+    35% {
+        -webkit-transform: rotate(-21deg);
+    }
+    37% {
+        -webkit-transform: rotate(22deg);
+    }
+    39% {
+        -webkit-transform: rotate(-20deg);
+    }
+    41% {
+        -webkit-transform: rotate(21deg);
+    }
+    43% {
+        -webkit-transform: rotate(-19deg);
+    }
+    45% {
+        -webkit-transform: rotate(18deg);
+    }
+    47% {
+        -webkit-transform: rotate(-16deg);
+    }
+    50% {
+        -webkit-transform: rotate(14deg);
+    }
+    52% {
+        -webkit-transform: rotate(-12deg);
+    }
+    54% {
+        -webkit-transform: rotate(10deg);
+    }
+    56% {
+        -webkit-transform: rotate(-8deg);
+    }
+    58% {
+        -webkit-transform: rotate(6deg);
+    }
+    60% {
+        -webkit-transform: rotate(-4deg);
+    }
+    62% {
+        -webkit-transform: rotate(2deg);
+    }
+    64% {
+        -webkit-transform: rotate(-1deg);
+    }
+    66% {
+        -webkit-transform: rotate(1deg);
+    }
+
+    70% {
+        -webkit-transform: rotate(0);
+    }
+    100% {
+        -webkit-transform: rotate(0);
+    }
+}
+
+@-moz-keyframes ring {
+    0% {
+        -moz-transform: rotate(0);
+    }
+    1% {
+        -moz-transform: rotate(32deg);
+    }
+    3% {
+        -moz-transform: rotate(-30deg);
+    }
+    5% {
+        -moz-transform: rotate(42deg);
+    }
+    7% {
+        -moz-transform: rotate(-40deg);
+    }
+    9% {
+        -moz-transform: rotate(36deg);
+    }
+    11% {
+        -moz-transform: rotate(-34deg);
+    }
+    13% {
+        -moz-transform: rotate(32deg);
+    }
+    15% {
+        -moz-transform: rotate(-30deg);
+    }
+    17% {
+        -moz-transform: rotate(30deg);
+    }
+    19% {
+        -moz-transform: rotate(-28deg);
+    }
+    21% {
+        -moz-transform: rotate(28deg);
+    }
+    23% {
+        -moz-transform: rotate(-26deg);
+    }
+    25% {
+        -moz-transform: rotate(26deg);
+    }
+    27% {
+        -moz-transform: rotate(-24deg);
+    }
+    29% {
+        -moz-transform: rotate(24deg);
+    }
+    31% {
+        -moz-transform: rotate(-22deg);
+    }
+    33% {
+        -moz-transform: rotate(23deg);
+    }
+    35% {
+        -moz-transform: rotate(-21deg);
+    }
+    37% {
+        -moz-transform: rotate(22deg);
+    }
+    39% {
+        -moz-transform: rotate(-20deg);
+    }
+    41% {
+        -moz-transform: rotate(21deg);
+    }
+    43% {
+        -moz-transform: rotate(-19deg);
+    }
+    45% {
+        -moz-transform: rotate(18deg);
+    }
+    47% {
+        -moz-transform: rotate(-16deg);
+    }
+    50% {
+        -moz-transform: rotate(14deg);
+    }
+    52% {
+        -moz-transform: rotate(-12deg);
+    }
+    54% {
+        -moz-transform: rotate(10deg);
+    }
+    56% {
+        -moz-transform: rotate(-8deg);
+    }
+    58% {
+        -moz-transform: rotate(6deg);
+    }
+    60% {
+        -moz-transform: rotate(-4deg);
+    }
+    62% {
+        -moz-transform: rotate(2deg);
+    }
+    64% {
+        -moz-transform: rotate(-1deg);
+    }
+    66% {
+        -moz-transform: rotate(1deg);
+    }
+
+    70% {
+        -moz-transform: rotate(0);
+    }
+    100% {
+        -moz-transform: rotate(0);
+    }
+}
+
+@keyframes ring {
+    0% {
+        transform: rotate(0);
+    }
+    1% {
+        transform: rotate(32deg);
+    }
+    3% {
+        transform: rotate(-30deg);
+    }
+    5% {
+        transform: rotate(42deg);
+    }
+    7% {
+        transform: rotate(-40deg);
+    }
+    9% {
+        transform: rotate(36deg);
+    }
+    11% {
+        transform: rotate(-34deg);
+    }
+    13% {
+        transform: rotate(32deg);
+    }
+    15% {
+        transform: rotate(-30deg);
+    }
+    17% {
+        transform: rotate(30deg);
+    }
+    19% {
+        transform: rotate(-28deg);
+    }
+    21% {
+        transform: rotate(28deg);
+    }
+    23% {
+        transform: rotate(-26deg);
+    }
+    25% {
+        transform: rotate(26deg);
+    }
+    27% {
+        transform: rotate(-24deg);
+    }
+    29% {
+        transform: rotate(24deg);
+    }
+    31% {
+        transform: rotate(-22deg);
+    }
+    33% {
+        transform: rotate(23deg);
+    }
+    35% {
+        transform: rotate(-21deg);
+    }
+    37% {
+        transform: rotate(22deg);
+    }
+    39% {
+        transform: rotate(-20deg);
+    }
+    41% {
+        transform: rotate(21deg);
+    }
+    43% {
+        transform: rotate(-19deg);
+    }
+    45% {
+        transform: rotate(18deg);
+    }
+    47% {
+        transform: rotate(-16deg);
+    }
+    50% {
+        transform: rotate(14deg);
+    }
+    52% {
+        transform: rotate(-12deg);
+    }
+    54% {
+        transform: rotate(10deg);
+    }
+    56% {
+        transform: rotate(-8deg);
+    }
+    58% {
+        transform: rotate(6deg);
+    }
+    60% {
+        transform: rotate(-4deg);
+    }
+    62% {
+        transform: rotate(2deg);
+    }
+    64% {
+        transform: rotate(-1deg);
+    }
+    66% {
+        transform: rotate(1deg);
+    }
+
+    70% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(0);
+    }
+}