mazer-rails 0.1.1 → 0.1.2

data/assets/stylesheets/components/_icons.scss

@@ -0,0 +1,48 @@
+.bi {
+    width: 1rem;
+    height: 1rem;
+    &.bi-middle {
+        &:before {
+            vertical-align: middle;
+        }
+    }
+    &.bi-sub {
+        &:before {
+            vertical-align: sub;
+        }
+    }
+}
+.stats-icon {
+    width: 3rem;
+    height:3rem;
+    border-radius: .5rem;
+    background-color: black;
+    float: right;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+        color: #fff;
+        font-size: 1.7rem;
+    }
+    &.purple {
+        background-color: #9694ff;
+    }
+    &.blue {
+        background-color: #57caeb;
+    }
+    &.red {
+        background-color: #ff7976;
+    }
+    &.green {
+        background-color: #5ddab4;
+    }
+    @media (max-width: 767px) {
+        float: left;
+        margin-bottom: .4rem;
+    }
+}
+
+.burger-btn {
+    display:none;
+}

data/assets/stylesheets/components/_modal.scss

@@ -0,0 +1,46 @@
+.modal {
+    .modal-content {
+        box-shadow: -8px 12px 18px 0 rgba(25,42,70,.13);
+        border: none;
+    }
+    .modal-full {
+        max-width: 94%
+    }
+    .white {
+        color: white;
+    }
+    .modal-header {
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        .modal-title {
+            font-size: $modal-header-font-size;
+        }
+        .close {
+            padding: 7px 10px;
+            border-radius: 50%;
+            background:none;
+            border: none;
+            &:hover {
+                background: $gray-300
+            }
+        }
+        i, svg {
+            font-size: 12px;
+            height: 12px;
+            width: 12px;
+        }
+    }
+    .modal-footer {
+        padding: $modal-inner-padding;
+    }
+
+    &.modal-borderless {
+        .modal-header {
+            border-bottom: 0;
+        }
+        .modal-footer {
+            border-top: 0;
+        }
+    }
+}

data/assets/stylesheets/components/_navbar.scss

@@ -0,0 +1,280 @@
+
+.layout-navbar {
+    --navbar-height: 90px;
+}
+.layout-navbar.navbar-fixed {
+    display: block !important;
+}
+.navbar-fixed > header {
+    display: unset;
+    height: var(--navbar-height);
+}
+.navbar-fixed .navbar-top {
+    position: sticky;
+    background-color: var(--bs-body-bg);
+    z-index: 9;
+    top: 0;
+    width: inherit;
+}
+.navbar {
+    height: var(--navbar-height);
+    padding: 1.5rem;
+    .navbar-brand img {
+        height: 1.5rem;
+    }
+    .user-menu img {
+        width: 39px;
+        height: 39px
+    }
+
+    &.navbar-header {
+        li {
+            display: flex;
+            align-items: center;
+            &.nav-icon {
+                margin-right: .4rem;
+                .nav-link {
+                    display:block;
+                    padding: .4rem;
+                    border-radius: 50%;
+                    &:hover {
+                        background-color: $gray-200;
+                    }
+                }
+            }
+        }
+        .dropdown > a {
+            color: $gray-600;
+            font-weight: 600;
+            
+            svg {
+                height: 24px;
+                width: 24px;
+            }
+            &:after {
+                display:none;
+            }
+        }
+    }
+}
+
+.navbar-top {
+    .notification-dropdown {
+        min-width: 20rem;
+    }
+    .notification-item {
+        margin-bottom: .4rem;
+        a {
+            color: $body-color;
+        }
+        p {
+            margin-bottom: 0;
+        }
+    }
+
+    .notification-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        color: white;
+        text-align: center;
+        vertical-align: middle;
+        i {
+            vertical-align: -moz-middle-with-baseline;
+            font-size: 20px;
+        }
+    }
+}
+
+.layout-horizontal {
+    .header-top {
+        background-color: $horizontal-header-bg;
+        padding:1.1rem;
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .burger-btn i {
+            height: 20px;
+            display: inline-block;
+        }
+
+        .logo img {
+            height: 20px
+        }
+    }
+    .header-top-right {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+    }
+    .main-navbar  {
+        background-color: $horizontal-navbar-bg;
+        padding: 1rem;
+        ul {
+            list-style: none;
+            padding: 0;
+            display: flex;
+            gap: 2rem;
+            margin-bottom: 0;
+            .menu-link {
+                display: flex;
+                position: relative;
+                flex-direction: row;
+                padding: .4rem 0;
+                gap: .5rem;
+                align-items: center;
+                span {
+                    height: 20px;
+
+                    & > i {
+                        margin-right: 3px;
+                    }
+                }
+            }
+            & > .menu-item {
+                position: relative;
+                .menu-link {
+                    color: $gray-300;
+                }
+                &.has-sub .menu-link {
+                    padding-right: 1.3rem;
+                    &:after {
+                        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ccc" opacity="0.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" ></polyline></svg>');
+                        position: absolute;
+                        color: #fff;
+                        right: -3px;
+                        top: 7px;
+                        display: block;
+                    }
+                }
+                &:hover {
+                    .menu-link {
+                        color: white;
+                    }
+                    .submenu {
+                        visibility: visible;
+                        opacity: 1;
+                        top: 100%;
+                    }
+                }
+                
+            }
+        }
+        .submenu {
+            @include submenu;
+
+            .submenu-group-wrapper {
+                position: relative;
+            }
+
+            .submenu-group { 
+                display: table-cell;
+                padding: .5rem .3rem .3rem .5rem;
+                flex-wrap: wrap;
+                max-height: 200px;
+                min-width: 200px;
+    
+                .submenu-item { 
+                    position: relative;
+                    &.has-sub .submenu-link {
+                        position: relative;
+                        &:after {
+                            position: absolute;
+                            right: 10px;
+                            top: 50%;
+                            transform: translateY(-40%);
+                            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+                        }
+                    }
+                    a {
+                        padding: .6rem;
+                        padding-right: 2rem;
+                        color: $horizontal-submenu-link-color;
+                        display: block;
+                        &:hover {
+                            color: $horizontal-submenu-link-hover-color
+                        }
+                    }
+                    &:hover {
+                        .subsubmenu {
+                            visibility: visible;
+                            top: 0rem;
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+        }
+        .subsubmenu {
+            @include submenu;
+            gap: 0;
+            top: 1rem;
+            left: 100%;
+            display: flex;
+            padding: .5rem;
+            flex-direction: column;
+            border-radius: .3rem;
+            min-width: 200px;
+        }
+
+        @media screen and (max-width: 1199px) {
+            background-color: lighten($primary, 47%);
+            overflow: hidden;
+            padding: 1rem;
+            display: none;
+
+            &.active {
+                max-height: initial;
+            }
+            ul {
+                flex-direction: column;
+                gap: 0;
+
+                .menu-item {
+                    &.has-sub .menu-link:after {
+                        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23888" opacity="0.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" ></polyline></svg>') !important;
+                        top: unset;
+                    }
+                }
+                .menu-link {
+                    color: $gray-600 !important;
+                    padding: 1rem 0;
+                }
+            }
+            .submenu {
+                @include submenu-responsive;  
+                transition: all .2s; 
+                padding-top: 0;    
+                display: none;        
+                padding-bottom: 0;            
+                .submenu-group-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    max-height: unset;
+                }
+                .submenu-group {
+                    max-height: unset;
+                    padding: 0;
+                    min-width: unset;
+                    width: 100%;
+                }
+                &.active {
+                    display: block;
+                }
+            }
+            .subsubmenu {
+                @include submenu-responsive;
+                display: none;
+                &.active {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+#topbarUserDropdown:after {
+    margin-left: 1rem;
+}

data/assets/stylesheets/components/_navs.scss

@@ -0,0 +1,32 @@
+.nav-pills {
+    .nav-link {
+        &.active {
+            box-shadow: 0 2px 10px rgba(map-get($theme-colors, 'primary'), .5);
+        }
+    }
+}
+.nav-tabs {
+    border: none ;
+    .nav-link {
+        border: none;
+    }
+    .nav-link:hover {
+        border:none;
+        text-shadow: 0 0 2px rgba(map-get($theme-colors, 'primary'),.3);
+    }
+     .nav-link.active {
+        border: none; 
+        position: relative;
+        color: map-get($theme-colors, 'primary');
+        &:after {
+            content: '';
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            height: 2px;
+            background-color: map-get($theme-colors, 'primary');
+            left: 0;
+            box-shadow: 0 2px 5px rgba(map-get($theme-colors, 'primary'),.5);
+        }        
+     }
+}

data/assets/stylesheets/components/_pagination.scss

@@ -0,0 +1,39 @@
+.pagination {
+    @each $key, $value in $theme-colors {
+        &.pagination-#{$key} {
+            .page-item.active {
+                .page-link {
+                    background-color: $value;
+                    border-color: $value;
+                    box-shadow: 0 2px 5px rgba($value,.3);
+                }
+            }
+        }
+    }
+}
+.page-item {
+    &:not(.active) {
+        .page-link {
+            &:hover {
+                color: $pagination-hover-color
+            }
+        }
+    }
+    i, svg {
+        font-size: 13px;
+        width: 13px;
+        height: 13px;
+    }
+    .page-link {
+        font-size: .875rem;
+        &:focus {
+            box-shadow: none;
+        }
+    }
+    &:first-child {
+        margin-right: .4rem;
+    }
+    &:last-child {
+        margin-left: .4rem;
+    }
+}

data/assets/stylesheets/components/_progress.scss

@@ -0,0 +1,32 @@
+.progress {
+    @each $key, $value in $theme-colors {
+        &.progress-#{$key} {
+            overflow: visible;
+            .progress-bar {
+                background-color: $value;
+                border-radius: $progress-border-radius;
+            }
+        }
+    }
+    &.progress-sm {
+        height: .4rem;
+    }
+    &.progress-lg {
+        height: 1.5rem;
+    }
+
+    .progress-bar {
+        position: relative;
+        overflow: visible;
+
+        &.progress-label:before {
+            content: attr(aria-valuenow) '%';
+            position: absolute;
+            right: 0;
+            top: -1.3rem;
+            color: $gray-700;
+            font-size: .8rem;
+            
+        }
+    }
+}

data/assets/stylesheets/components/_sidebar.scss

@@ -0,0 +1,171 @@
+#sidebar {
+    &.active {
+        .sidebar-wrapper {
+            left: 0;
+        }
+    }
+    &:not(.active) {
+        .sidebar-wrapper {
+            left: -300px;
+        }
+        & ~ #main {
+            margin-left: 0;
+        }
+    }
+}
+.sidebar-wrapper {
+    width: 300px;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    z-index: 10;
+    overflow-y: auto;
+    background-color: $sidebar-bg;
+    bottom: 0;
+    transition: left .5s ease-out;
+    .sidebar-header {
+        padding: 2rem 2rem 1rem;
+        font-size: 2rem;
+        font-weight: bold;
+
+        img {
+            height: 1.2rem;
+        }
+    }
+    .sidebar-toggler.x {
+        position: absolute;
+        right: 1.75rem;
+        top: .25rem;
+        display:none;
+    }
+
+    .menu {
+        padding-left: 0;
+        margin-top: 2rem;
+        padding: 0 2rem;
+        font-weight: 600;
+        .sidebar-title {
+            padding: 0 1rem;
+            margin: 1.5rem 0 1rem;
+            font-size: 1rem;
+            list-style: none;
+            font-weight: 600;
+            color:  $sidebar-link-color;
+        }
+        
+        .sidebar-link {
+            display: block;
+            padding: .7rem 1rem;
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            border-radius: .5rem;
+            transition: all .5s;
+            text-decoration: none;
+            color: $sidebar-link-color;
+            svg,i {
+                color:#7c8db5;
+            }
+            i:before {
+                vertical-align: top;
+            }
+            span {
+                margin-left: 1rem;
+            }
+            &:hover {
+                background-color: $sidebar-link-hover-bg;
+            }
+        }
+        .sidebar-item {
+            list-style: none;
+            margin-top: .5rem;
+            position: relative;
+            &.has-sub {
+                .sidebar-link:after {
+                    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" style="fill:none;stroke:gray;stroke-width:1"></polyline></svg>');
+                    position: absolute;
+                    color: #ccc;
+                    right: 15px;
+                    top: 12px;
+                    display:block;
+                }
+            }
+            &.active {
+                &.has-sub {
+                    .sidebar-link:after {
+                        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" style="fill:none;stroke:white;stroke-width:1"></polyline></svg>');
+                    }
+                }
+                >.sidebar-link {
+                    background-color: $primary;
+                    span {
+                        color: #fff;
+                    }
+                    svg,i {
+                        fill: white;
+                        color:white;
+                    }
+
+                    &.has-sub:after {
+                        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" style="fill:none;stroke:white;stroke-width:1"></polyline></svg>');
+                    }
+                }
+            }
+        }
+        .submenu {
+            list-style: none;
+            display: none;
+            // max-height: 0;
+            transition: max-height 2s cubic-bezier(0, 0.55, 0.45, 1);
+            overflow: hidden;
+            &.active {
+                max-height: 999px;
+                display: block;
+            }
+            .submenu-item {
+                &.active {
+                    position:relative;
+                    & > a {
+                        color: $primary;
+                        font-weight: bold;
+                    }
+                }
+                a {
+                    padding: .7rem 2rem;
+                    display: block;
+                    color: $sidebar-submenu-color;
+                    font-size: .85rem;
+                    font-weight: 600;
+                    letter-spacing: .5px;
+                    transition: all .3s;
+                    &:hover {
+                        margin-left: .3rem;
+                        color: $sidebar-submenu-hover-color;
+                    }
+                }
+            }
+            
+        }
+    }
+}
+.sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9;
+}
+@media screen and (max-width: 1199px) {
+    .sidebar-wrapper {
+        position:absolute;
+        left: -300px;
+        .sidebar-toggler.x  {
+            display:block;
+        }
+    }
+}
+@media screen and (min-width: 1200px) {
+    
+}

data/assets/stylesheets/components/_table.scss

@@ -0,0 +1,36 @@
+.table td, .table thead th {
+    vertical-align: middle;
+}
+
+.table:not(.table-borderless) thead th {
+    border-bottom: 1px solid #dedede !important;
+}
+
+.table {
+    &.table-sm {
+        tr td, tr th {
+            padding: 1rem;
+        }
+    }
+    &.table-md {
+        tr td, tr th {
+            padding: 1rem;
+        }
+    }
+    &.table-lg {
+        tr td, tr th {
+            padding: 1.3rem;
+        }
+    }
+}
+
+.dataTable-table {
+    @extend .table
+}
+
+.dataTable-container {
+    overflow-x:auto
+}
+.dataTables_length {
+    margin-bottom: .5rem;
+}