@posiwise/shared-components 0.0.10 → 0.0.12

package/assets/scss/dashboard/_chat.scss

@@ -0,0 +1,250 @@
+.chat-application {
+    overflow: hidden;
+
+    @include media-breakpoint-down(md) {
+        emoji-mart {
+            bottom: 100px;
+            left: 320px;
+        }
+    }
+
+    @include media-breakpoint-down(sm) {
+        .chat-app-window {
+            height: calc(100% - 132px);
+            margin-left: 0 !important;
+        }
+
+        .chat-app-form {
+            margin-left: 0 !important;
+        }
+
+        .chat-name {
+            margin-left: 0 !important;
+            margin-top: 10px;
+        }
+
+        .chat-sidebar {
+            left: 0;
+        }
+
+        emoji-mart {
+            bottom: 72px;
+            left: 0;
+        }
+    }
+
+    .content-wrapper {
+        padding: 0 !important;
+    }
+
+    .chat-sidebar {
+        background: rgb(255 255 255);
+        border-right: 1px solid rgb(228 231 237);
+        height: calc(100vh - 92px);
+        position: fixed;
+        vertical-align: top;
+        width: 300px;
+        z-index: 999;
+    }
+
+    .chat-fixed-search {
+        background: $white;
+        border-bottom: 1px solid rgb(228 231 237);
+        border-right: 1px solid rgb(228 231 237);
+        position: fixed;
+        width: 300px;
+        z-index: 999;
+    }
+
+    .users-list-padding {
+        padding-top: 55px;
+
+        .list-group-item {
+            height: 70px;
+        }
+    }
+
+    .list-group-item-heading {
+        font-weight: 500;
+
+        span {
+            font-size: 0.8rem;
+            font-weight: 400;
+        }
+    }
+
+    .chat-name {
+        border-bottom: 1px solid rgb(228 231 237);
+        margin-left: 300px;
+        min-height: 55px;
+    }
+
+    .chat-app-window {
+        background: url('/assets/img/dashboard/chat/message_bg.png');
+        background-color: rgb(255 255 255);
+        height: calc(100% - 140px);
+        margin-left: 300px;
+        overflow-y: scroll;
+        position: relative;
+        text-align: center;
+
+        .content {
+            padding: 10px;
+        }
+    }
+
+    .chat-app-form {
+        margin-left: 300px;
+        overflow: hidden;
+        padding: 20px 10px;
+        position: relative;
+
+        .emoji-container {
+            border-right: 1px solid rgb(204 204 204);
+        }
+
+        input[type='text'] {
+            border-radius: 5px;
+            height: 36px;
+        }
+    }
+
+    .chats {
+        padding: 10px 0 0;
+
+        .chat-body {
+            display: block;
+            margin: 10px 30px 0 0;
+            overflow: hidden;
+
+            .chat-content {
+                background-color: map-get($primary, base);
+                border-radius: 4px;
+                clear: both;
+                color: rgb(255 255 255);
+                display: block;
+                float: right;
+                margin: 0 20px 10px 100px;
+                padding: 8px 15px;
+                position: relative;
+                text-align: right;
+
+                .message-time {
+                    color: rgb(134 133 133);
+                    left: -64px;
+                    position: absolute;
+                }
+
+                &::before {
+                    border: 5px solid transparent;
+                    border-left-color: map-get($primary, base);
+                    content: '';
+                    height: 0;
+                    position: absolute;
+                    right: -10px;
+                    top: 10px;
+                    width: 0;
+                }
+
+                + .chat-content::before {
+                    border-color: transparent;
+                }
+
+                p {
+                    color: $font-color-contrast;
+                    margin: 0;
+                }
+
+                &.with-attachment {
+                    background-color: transparent;
+
+                    img {
+                        display: block;
+                        width: 400px;
+                    }
+                }
+            }
+        }
+
+        .chat-avatar {
+            float: right;
+
+            .avatar {
+                margin-top: -10px;
+                width: 50px;
+            }
+        }
+
+        .time {
+            color: $gray-500;
+            font-size: 12px;
+            margin: 40px 0;
+            text-align: center;
+        }
+
+        .chat-left {
+            .message-time {
+                left: unset !important;
+                right: -64px;
+            }
+
+            .chat-avatar {
+                float: left;
+            }
+
+            .chat-body {
+                margin-left: 30px;
+                margin-right: 0;
+            }
+
+            .chat-content {
+                background-color: $body-bg;
+                color: map-get($brown, base);
+                float: left;
+                margin: 0 100px 10px 20px;
+                text-align: left;
+
+                + .chat-content::before {
+                    border-color: transparent;
+                }
+
+                &::before {
+                    border-left-color: transparent;
+                    border-right-color: lighten($body-bg, 18%);
+                    left: -10px;
+                    right: auto;
+                }
+
+                p {
+                    color: $font-color-main;
+                    margin: 0;
+                }
+            }
+        }
+    }
+
+    .form-control-position {
+        cursor: pointer;
+
+        &.control-position-right {
+            cursor: pointer;
+            right: 18px;
+            top: 2px;
+        }
+    }
+
+    p {
+        &.list-group-item-text {
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    emoji-mart {
+        bottom: 100px;
+        left: 540px;
+        position: absolute;
+    }
+}

package/assets/scss/dashboard/_coming-soon.scss

@@ -0,0 +1,34 @@
+// ================================================================================================
+//     File Name: coming-soon
+//     Description: Coming Soon pages custom scss
+// ================================================================================================
+
+/* ========== Coming Soon Background Image ========= */
+.comingsoonVideo .app-content .coming-soon-content {
+    z-index: 99;
+}
+
+.clockCard {
+    border-radius: 0.5rem;
+    float: left;
+}
+
+.getting-started {
+    border-radius: 60px;
+    font-size: 2.4rem;
+    min-width: 360px;
+}
+
+.countdownFormat {
+    font-size: 16px;
+    padding-bottom: 0;
+}
+
+.socialIcon i {
+    font-size: 28px;
+    padding: 5px;
+}
+
+.clockFormat {
+    border-radius: 60px;
+}

package/assets/scss/dashboard/_components.scss

@@ -0,0 +1,229 @@
+//.media-list {
+//    &.media-bordered {
+//        .media {
+//            border-top: 1px solid rgb(228 231 237);
+//            padding: 1rem 0;
+//
+//            &:first-child {
+//                border-top: 0;
+//            }
+//        }
+//    }
+//}
+
+.d-flex {
+    img,
+    iframe {
+        margin-right: 1rem !important;
+    }
+
+    .d-flex + a {
+        img {
+            margin-left: 1rem;
+            margin-right: 0 !important;
+        }
+    }
+
+    .d-flex.text-end + a {
+        img {
+            margin-left: 0;
+        }
+    }
+    //
+    //.media-body,
+    //.media-left,
+    //.media-right {
+    //    padding-top: 0;
+    //}
+    //
+    //.round-media {
+    //    border-radius: 50%;
+    //}
+}
+
+// Calendar
+
+.ngb-dp-weekday {
+    color: map-get($primary, base) !important;
+}
+
+// Switch
+
+.switch.checked {
+    background: map-get($primary, base) !important;
+}
+
+// Sweet Alert
+
+.swal2-modal {
+    .swal2-confirm {
+        background-color: map-get($primary, base) !important;
+    }
+
+    .swal2-cancel {
+        background-color: map-get($default, base) !important;
+    }
+}
+
+.swal2-container {
+    min-width: 400;
+}
+
+.swal2-icon.swal2-warning {
+    border-color: map-get($default, base) !important;
+    color: map-get($default, base) !important;
+}
+
+// Toastrs
+
+.toast-success {
+    background-color: map-get($success, base) !important;
+}
+
+.toast-warning {
+    background-color: map-get($warning, base) !important;
+}
+
+.toast-danger {
+    background-color: map-get($danger, base) !important;
+}
+
+.toast-info {
+    background-color: map-get($info, base) !important;
+}
+
+// Accordion
+
+.accordion-heading {
+    background: rgb(23 105 225);
+    color: rgb(255 255 255);
+    font-size: 14px;
+    padding: 6px;
+}
+
+.action-card {
+    border: 1px solid rgb(204 204 204);
+    border-radius: 5px;
+    border-style: dashed;
+}
+
+.accordion-title > a {
+    &::before {
+        content: '\f054';
+        display: inline-block;
+        font-family: 'Font Awesome 5 Pro', sans-serif;
+        font-size: 14px;
+        padding-right: 5px;
+        width: 30px;
+    }
+}
+
+.accordion-title > a.collapsed::before {
+    content: '\f078';
+}
+
+.accordion-title > a {
+    color: rgb(70 70 70);
+    font-size: 20px;
+}
+
+ngb-accordion {
+    [role='tabpanel'] {
+        padding: 0 2.5rem !important;
+    }
+
+    .dashboard {
+        border-bottom: 2px solid $body-bg;
+        margin: 0;
+    }
+}
+
+// hopscotch
+
+div.hopscotch-bubble .hopscotch-nav-button.next {
+    background-color: map-get($primary, base) !important;
+    background-image: linear-gradient(
+        to bottom,
+        map-get($primary, base) 0%,
+        map-get($primary, base) 100%
+    ) !important;
+    border-color: map-get($primary, base) !important;
+    color: rgb(255 255 255);
+    margin: 0 0 0 10px;
+}
+
+/***************************************
+***** tooltip styling here  ******
+****************************************/
+
+.info-circle {
+    position: relative;
+
+    &::after {
+        color: rgb(0 0 0) !important;
+        content: '\f05a' !important;
+        font-family: 'Font Awesome 5 Pro', sans-serif;
+        font-size: initial;
+        font-weight: 900;
+        position: absolute;
+        right: -20px;
+        top: -2px;
+    }
+
+    .tooltiptext {
+        border-radius: 6px;
+        bottom: calc(100% + 10px);
+        color: rgb(255 255 255);
+        font: 12px/1.3 $mainFontFamily !important;
+        font-size: 18px;
+        letter-spacing: 0;
+        padding: 10px;
+        position: absolute;
+        right: -105px;
+        text-align: center;
+        text-transform: none;
+        visibility: hidden;
+        width: 200px;
+        z-index: 9999;
+
+        &::after {
+            border-bottom: 15px solid transparent;
+            border-left: 15px solid transparent;
+            border-right: 15px solid transparent;
+            border-top: 15px solid rgb(0 48 63);
+            bottom: -28px;
+            content: '';
+            height: 0;
+            left: 90px;
+            position: absolute;
+            width: 0;
+        }
+    }
+
+    &:hover {
+        .tooltiptext {
+            visibility: visible;
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .info-circle {
+        .tooltiptext {
+            left: -80px;
+
+            &::after {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+
+    .dashboard {
+        .dashboard-body {
+            padding: 15px 5px !important;
+
+            // padding: 15px !important;
+        }
+    }
+}

package/assets/scss/dashboard/_email.scss

@@ -0,0 +1,184 @@
+// Variables
+$sideber-border: rgb(228 231 237);
+$sideber-width: 500px;
+
+.email-application {
+    .email-app-sidebar {
+        background: rgb(255 255 255);
+        border-right: 1px solid $sideber-border;
+        height: calc(100vh - 150px);
+        position: fixed;
+        width: 250px;
+        z-index: 3;
+
+        .email-app-sidebar-content {
+            height: 100%;
+            padding: 20px 25px;
+            position: relative;
+        }
+    }
+
+    .email-app-content {
+        margin-top: 0;
+        min-height: 100%;
+        padding: 0;
+    }
+
+    .email-app-list-mails {
+        background-color: rgb(255 255 255);
+        height: calc(100vh - 212px);
+        overflow-y: hidden;
+        padding: 0;
+        position: relative;
+        width: 100%;
+    }
+
+    .email-app-mail-content {
+        background-color: rgb(255 255 255);
+        float: left;
+        min-height: calc(100vh - 212px);
+        padding: 0;
+        position: relative;
+        transition: all 0.5s ease-in-out;
+        width: 100%;
+    }
+
+    .email-app-mail-content-detail {
+        max-height: calc(100vh - 212px);
+        overflow-y: auto;
+        padding: 30px;
+        position: relative;
+    }
+
+    .hide-email-content {
+        transform: translate3d(-110%, 0, 0);
+        transition: all 0.5s ease-in-out;
+    }
+
+    .email-app-menu {
+        .mb-3-compose {
+            border-bottom: 1px solid $sideber-border;
+        }
+
+        .list-group-messages {
+            border-bottom: 1px solid $sideber-border;
+
+            a {
+                font-size: 1.1rem;
+                padding: 0.85rem 1rem;
+            }
+        }
+    }
+
+    .email-app-list {
+        height: 100%;
+        padding: 1rem 0;
+        position: relative;
+
+        p {
+            margin-bottom: 0.2rem;
+        }
+    }
+
+    .list-group-item.active,
+    .list-group-item.active:hover,
+    .list-group-item.active:focus {
+        color: rgb(255 255 255);
+    }
+
+    .avatar-md {
+        width: 40px;
+    }
+
+    .avatar img {
+        border: 0;
+        border-radius: 1000px;
+        height: auto;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .avatar-md span.text-circle {
+        height: 40px;
+        width: 40px;
+    }
+
+    .avatar span.text-circle {
+        background: rgb(186 191 199);
+        color: rgb(255 255 255);
+        display: table-cell;
+        font-size: 1.2rem;
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    .email-app-content-wrapper {
+        height: calc(100% - 30px);
+        overflow-y: scroll;
+
+        .email-app-options,
+        .email-app-title {
+            border-bottom: 1px solid $sideber-border;
+        }
+    }
+
+    .chat-fixed-search {
+        background-color: rgb(255 255 255);
+        padding: 2rem 1rem;
+        z-index: 999;
+
+        fieldset {
+            border-bottom: 1px solid $sideber-border;
+        }
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .email-app-list-mails {
+        border-right: 1px solid rgb(230 236 245);
+        float: left;
+        width: 30% !important;
+    }
+
+    .email-application .email-app-mail-content {
+        width: 70%;
+    }
+}
+
+@include media-breakpoint-between(md, lg) {
+    .email-app-list-mails {
+        border-right: 1px solid rgb(230 236 245);
+        float: left;
+        width: 35% !important;
+    }
+
+    .email-application .email-app-mail-content {
+        width: 65%;
+    }
+}
+
+@include media-breakpoint-up(xl) {
+    .email-app-content {
+        margin-left: 250px;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .email-app-mail-content {
+        height: 100%;
+        left: 15px !important;
+        max-height: calc(100vh - 150px);
+        position: absolute !important;
+        top: 0 !important;
+        transition: all 1s ease-in-out;
+        width: 98% !important;
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .email-application {
+        .email-app-sidebar {
+            left: 0;
+        }
+    }
+}

package/assets/scss/dashboard/_fixed-navbar.scss

@@ -0,0 +1,18 @@
+.app-sidebar {
+    z-index: 5;
+}
+
+.navbar {
+    @include card-shadow;
+
+    background-color: $whiteColor;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 4;
+}
+
+.main-panel {
+    margin-top: 85px;
+}