@posiwise/shared-components 0.0.9 → 0.0.11

package/assets/scss/dashboard/_sidebar-content.scss

@@ -0,0 +1,632 @@
+.wrapper {
+    height: 100vh;
+    position: relative;
+    top: 0;
+
+    .content-header {
+        font-family: $mainFontFamily;
+        font-size: 1.6rem;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.25rem;
+        margin-top: 1.5rem;
+    }
+
+    .content-sub-header {
+        color: darken($body-bg, 60%);
+    }
+
+    .app-sidebar {
+        .sidebar-title {
+            color: rgb(204 204 204);
+            display: block;
+            font-size: 14px;
+            text-align: center;
+            text-transform: none;
+        }
+
+        .product-dropdown {
+            span {
+                border-bottom: 1px solid rgb(239 239 239);
+                display: block;
+                font-size: 0.8rem;
+                font-style: italic;
+            }
+        }
+    }
+
+    &.nav-collapsed {
+        .sidebar-header {
+            .dropdown-toggle::after {
+                bottom: -25px;
+                left: -34px;
+                top: auto;
+            }
+        }
+
+        .app-sidebar {
+            width: 60px;
+
+            &:hover {
+                width: 220px;
+
+                .sidebar-header {
+                    .dropdown-toggle::after {
+                        left: auto;
+                        top: 7px;
+                    }
+                }
+
+                .logo .text,
+                .sidebar-title {
+                    display: inline-block !important;
+                }
+
+                .nav li.has-sub > a::after {
+                    display: inherit;
+                }
+
+                .menu-title,
+                .badge {
+                    display: inline-block;
+                }
+
+                .logo .text {
+                    display: inline-block;
+                }
+
+                .nav-toggle {
+                    display: block !important;
+                }
+
+                .navigation {
+                    li:last-of-type,
+                    li:nth-last-child(1) {
+                        width: 220px;
+                    }
+                }
+            }
+
+            .menu-title {
+                display: none;
+            }
+
+            .badge {
+                display: none;
+            }
+
+            .logo .text,
+            .sidebar-title {
+                display: none !important;
+            }
+
+            .nav-toggle {
+                display: none !important;
+            }
+
+            .nav-close {
+                display: none !important;
+            }
+        }
+
+        .navigation {
+            li:last-of-type,
+            li:nth-last-child(1) {
+                width: 60px;
+            }
+        }
+
+        .navbar {
+            .navbar-header {
+                padding-left: 50px;
+            }
+        }
+
+        .main-panel {
+            .main-content {
+                padding-left: 60px;
+            }
+        }
+
+        footer {
+            padding-left: 60px;
+        }
+    }
+
+    &.menu-collapsed {
+        .app-sidebar {
+            .navigation li.has-sub > a::after {
+                display: none;
+            }
+        }
+    }
+}
+
+.app-sidebar,
+.off-canvas-sidebar {
+    bottom: 0;
+    font-family: feather, sans-serif;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 220px;
+    z-index: 4;
+
+    &.hide-sidebar {
+        transform: translate3d(-100%, 0, 0);
+        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .sidebar-content {
+        height: calc(100vh - 90px);
+        overflow: auto;
+        position: relative;
+        z-index: 4;
+    }
+
+    .logo-img img {
+        display: inline-block;
+        margin-right: 15px;
+        max-height: 30px;
+        width: 20px;
+    }
+
+    .logo-tim {
+        border: 1px solid $font-color-main;
+        border-radius: 50%;
+        display: block;
+        float: left;
+        height: 61px;
+        overflow: hidden;
+        width: 61px;
+
+        img {
+            height: 60px;
+            width: 60px;
+        }
+    }
+
+    .navigation {
+        list-style: none;
+        margin-bottom: 0;
+        padding-left: 0;
+        padding-top: 20px;
+
+        li {
+            display: block;
+            position: relative;
+
+            &.has-sub {
+                > a::after {
+                    content: '\e929';
+                    display: inline-block;
+                    font-family: $font-color-main;
+                    font-size: 1rem;
+                    position: absolute;
+                    right: 30px;
+                    top: 4px;
+                    transform: rotate(0);
+                    transition: -webkit-transform 0.2s ease-in-out;
+                }
+
+                > a {
+                    margin-bottom: 0;
+                }
+            }
+
+            &.open {
+                > a::after {
+                    transform: rotate(90deg);
+                }
+
+                > a {
+                    background: rgb(200 200 200 / 20%);
+                }
+            }
+
+            > a {
+                background-color: transparent;
+                color: $black;
+                display: block;
+                line-height: $font-size-base * 2;
+                margin: 0;
+                overflow: hidden;
+                padding: 2px 30px 2px 14px;
+                position: relative;
+                transition: all 300ms linear;
+
+                &::before {
+                    background: rgb(200 200 200 / 20%);
+                    border-right: solid 5px map-get($danger, base);
+                    content: '';
+                    display: block;
+                    height: 100%;
+                    left: -100%;
+                    position: absolute;
+                    top: 0;
+                    transition: 0.35s ease left;
+                    width: 100%;
+                    z-index: -1;
+                }
+            }
+
+            &:not(.open) {
+                > ul {
+                    display: none;
+                }
+            }
+
+            &:hover > a {
+                background: rgb(200 200 200 / 20%);
+                color: $black;
+            }
+
+            &.active > a {
+                &::before {
+                    left: 0;
+                }
+            }
+
+            &.active-link > a {
+                &::before {
+                    left: 0;
+                }
+            }
+
+            ul {
+                font-size: 1rem;
+                margin: 0;
+                overflow: hidden;
+                padding: 0;
+
+                li {
+                    a {
+                        display: block;
+                        padding: 2px 18px 2px 30px;
+                    }
+
+                    ul {
+                        li {
+                            a {
+                                padding: 8px 18px 8px 70px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .menu-title {
+            font-family: $mainFontFamily;
+            font-size: 0.9rem;
+            font-weight: 400;
+            height: auto;
+            letter-spacing: 0.6px;
+            margin: 0;
+            opacity: 1;
+            transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        .badge.rounded-pill {
+            font-weight: 300;
+            padding: 4px 8px;
+            position: absolute;
+            right: 10px;
+            top: 6px;
+            transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        i {
+            color: rgb(169 175 187);
+            float: left;
+            font-size: 16px;
+            line-height: 2.4rem;
+            margin-right: 10px;
+            text-align: center;
+            width: 30px;
+        }
+    }
+
+    .sidebar-background {
+        // position: absolute
+        background-position: center center;
+        background-size: cover;
+        display: block;
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: auto;
+
+        &::after {
+            background: rgb(255 255 255);
+            content: '';
+            display: block;
+            height: 100%;
+            opacity: 0.93;
+            position: absolute;
+            width: 100%;
+            z-index: 3;
+        }
+    }
+
+    .logo {
+        padding: 2px 15px;
+        position: relative;
+        z-index: 1024;
+
+        p {
+            color: $white;
+            float: left;
+            font-family: $mainFontFamily;
+            font-size: 20px;
+            line-height: 20px;
+            margin: 10px;
+        }
+
+        .logo-text {
+            color: $black;
+            display: block;
+            font-size: 1.2rem;
+            font-weight: 400;
+            letter-spacing: 2px;
+            padding: 5px 0;
+            text-align: left;
+            text-transform: uppercase;
+        }
+    }
+
+    .logo-tim {
+        border: 1px solid $font-color-main;
+        border-radius: 50%;
+        display: block;
+        float: left;
+        height: 61px;
+        overflow: hidden;
+        width: 61px;
+
+        img {
+            height: 60px;
+            width: 60px;
+        }
+    }
+
+    &::after,
+    &::before {
+        content: '';
+        display: block;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 2;
+    }
+
+    &::before {
+        opacity: 0.33;
+    }
+
+    &::after {
+        opacity: 1;
+        z-index: 3;
+    }
+
+    &[data-image]::after,
+    &.has-image::after {
+        opacity: 0.77;
+    }
+
+    // Background colors
+    &[data-background-color='white'] {
+        @include set-background-color($white);
+    }
+
+    &[data-background-color='black'] {
+        @include set-background-color($black);
+    }
+
+    &[data-background-color='primary'] {
+        @include set-background-color(map-get($primary, base));
+    }
+
+    &[data-background-color='info'] {
+        @include set-background-color(map-get($info, base));
+    }
+
+    &[data-background-color='success'] {
+        @include set-background-color(map-get($success, base));
+    }
+
+    &[data-background-color='warning'] {
+        @include set-background-color(map-get($warning, base));
+    }
+
+    &[data-background-color='danger'] {
+        @include set-background-color(map-get($danger, base));
+    }
+
+    // Gradient Background Colors
+    &[data-background-color='pomegranate'] {
+        @include set-gradient-background-color(#9b3cb7, #ff396f);
+    }
+
+    &[data-background-color='king-yna'] {
+        @include set-gradient-background-color(#1a2a6c, #b21f1f);
+    }
+
+    &[data-background-color='ibiza-sunset'] {
+        @include set-gradient-background-color(#ee0979, #ff6a00);
+    }
+
+    &[data-background-color='flickr'] {
+        @include set-gradient-background-color(#33001b, #ff0084);
+    }
+
+    &[data-background-color='purple-bliss'] {
+        @include set-gradient-background-color(#360033, #0b8793);
+    }
+
+    &[data-background-color='man-of-steel'] {
+        @include set-gradient-background-color(#780206, #061161);
+    }
+
+    &[data-background-color='custom-branding'] {
+        @include set-gradient-background-color(#00303f, #00303f);
+    }
+
+    &[data-background-color='purple-love'] {
+        @include set-gradient-background-color(#cc2b5e, #753a88);
+    }
+
+    // Menu anchor colors
+    &[data-background-color='white'] {
+        @include set-anchor-color($black);
+    }
+
+    &[data-background-color='black'] {
+        @include set-anchor-color($white);
+    }
+
+    &[data-background-color='red'] {
+        @include set-anchor-color($white);
+    }
+
+    // Logo Text Color
+    &[data-background-color='white'] {
+        @include set-logo-text-color($black);
+    }
+
+    &[data-color='blue'] {
+        @include set-background-color-button(map-get($info, base));
+    }
+
+    &[data-color='green'] {
+        @include set-background-color-button(map-get($success, base));
+    }
+
+    &[data-color='orange'] {
+        @include set-background-color-button(map-get($warning, base));
+    }
+
+    &[data-color='red'] {
+        @include set-background-color-button(map-get($danger, base));
+    }
+
+    &[data-color='purple'] {
+        @include set-background-color-button(map-get($primary, base));
+    }
+}
+
+.sidebar-header {
+    .org-text {
+        font-size: 14px;
+        width: 115px;
+    }
+
+    a.nav-toggle {
+        color: rgb(255 255 255 / 54%);
+        display: inline-block;
+        height: 20px;
+        line-height: 20px;
+        position: absolute;
+        right: 14px;
+        text-align: center;
+        top: 16px;
+        width: 20px;
+    }
+
+    a.nav-close {
+        color: rgb(255 255 255);
+        display: inline-block;
+        height: 20px;
+        line-height: 20px;
+        position: absolute;
+        right: 14px;
+        text-align: center;
+        top: 16px;
+        width: 20px;
+    }
+}
+
+.off-canvas-sidebar {
+    .navigation {
+        > li > a,
+        > li > a:hover {
+            color: $white;
+        }
+
+        > li > a:focus {
+            background: rgb(200 200 200 / 20%);
+        }
+    }
+}
+
+.main-panel {
+    @include transform-translate-x(0);
+    @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+    float: right; // overflow: auto;
+    min-height: 100%;
+    position: relative;
+    z-index: 2;
+
+    .main-content {
+        min-height: calc(100% - 30px);
+        padding-top: 5px;
+        position: relative;
+        transition: all 0.3s ease;
+    }
+
+    div {
+        .footer {
+            border-top: 1px solid rgb(231 231 231);
+        }
+    }
+
+    > .navbar {
+        margin-bottom: 0;
+    }
+}
+
+.bootstrap-navbar .navigation {
+    float: none;
+    margin-top: 20px;
+}
+
+.main-panel {
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+}
+
+.sidebar-sm {
+    .app-sidebar {
+        width: 220px;
+    }
+}
+
+.sidebar-lg {
+    .app-sidebar {
+        width: 280px;
+    }
+}
+
+ul.navigation.side-menu > li:last-child,
+ul.navigation.side-menu > li:nth-last-child(1) {
+    background-color: rgb(0 48 63);
+    bottom: 0;
+    position: fixed;
+    width: 220px;
+}
+
+ul.navigation.side-menu > li:nth-last-child(1) {
+    border-top: 0.5px solid rgb(255 255 255 / 12%);
+}
+
+.sidebar-header .dropdown-toggle::after {
+    color: rgb(255 255 255);
+    position: relative;
+    top: 7px;
+}

package/assets/scss/dashboard/_tables.scss

@@ -0,0 +1,17 @@
+// table styling
+.p-datatable {
+    table {
+        table-layout: auto !important;
+    }
+}
+
+.table-borderless {
+    tbody {
+        tr {
+            td,
+            th {
+                border: 0;
+            }
+        }
+    }
+}