Uron/laravelEcomm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

integarting admin dashboard

Browse Source
This commit is contained in:
UronShrestha
2024-07-12 12:51:02 +05:45
parent 2510de390a
commit 1550ab5d30
1758 changed files with 313760 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
public/Dashboard/scss/vertical-layout-light/_layouts.scss Normal file
View File

@ -0,0 +1,397 @@
/* Layouts */
// Sidebar Mini
.sidebar-mini {
@media (min-width: 992px) {
.navbar {
.navbar-brand-wrapper {
width: $sidebar-width-mini;
}
.navbar-menu-wrapper {
width: calc(100% - #{$sidebar-width-mini});
}
}
.sidebar {
width: $sidebar-width-mini;
.nav {
.nav-item {
padding: 0;
.nav-link {
@include display-flex;
@include align-items(center);
@include justify-content(center);
@include flex-direction(column);
text-align: center;
position: relative;
border-bottom: none;
.menu-title {
display: block;
margin: auto;
}
.badge {
margin-left: 5px;
display: none;
}
i {
&.menu-icon {
display:block;
margin-right: auto;
margin-left: auto;
margin-bottom: .625rem;
}
&.menu-arrow {
display: inline-block;
margin-left: 5px;
position: absolute;
top: 50%;
right: 20px;
@include transform(translateY(-50%));
}
}
}
}
&.sub-menu {
.nav-item {
&::before {
display: none;
}
}
}
}
}
.main-panel {
width: calc(100% - #{$sidebar-width-mini});
}
&:not(.sidebar-icon-only) {
//Apply these styles only when sidebar-mini is not collapsed to icon-only mode
.sidebar {
.nav {
&.sub-menu {
padding: 0;
border-top: none;
.nav-item {
.nav-link {
padding: .75rem 0 .75rem .15rem;
margin-left: auto;
margin-right: auto;
display: block;
text-align: left;
width: 66%;
}
}
}
}
}
}
}
}
// Sidebar Icon Only
.sidebar-icon-only {
@media (min-width: 992px) {
.navbar {
.navbar-brand-wrapper {
width: $sidebar-width-icon;
.brand-logo {
display: none;
}
.brand-logo-mini {
display: inline-block;
}
}
.navbar-menu-wrapper {
width: calc(100% - #{$sidebar-width-icon});
}
}
.sidebar {
width: $sidebar-width-icon;
.nav {
overflow: visible;
margin-left: 0;
margin-right: 0;
.nav-item {
position: relative;
.nav-link {
display: block;
padding-left: .5rem;
padding-right: .5rem;
text-align: center;
position: static;
.menu-title,
.badge,.menu-sub-title {
display: none;
}
.menu-title {
@include border-radius(0 5px 5px 0px);
background: $sidebar-light-menu-hover-bg;
@at-root #{selector-append(".rtl", &)} {
@include border-radius(5px 0 0 5px);
}
}
i {
&.menu-icon {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
&.menu-arrow {
display: none;
}
}
&[aria-expanded] {
.menu-title {
@include border-radius(0 5px 0 0px);
@at-root #{selector-append(".rtl", &)} {
@include border-radius(5px 0 0 0);
}
}
}
}
.collapse {
display: none;
}
&.hover-open {
.nav-link {
.menu-title {
@include display-flex;
@include align-items(center);
background: $sidebar-light-menu-hover-bg;
@at-root #{selector-append(".sidebar-dark", &)} {
background: $icon-only-menu-bg-dark;
}
padding: 0.5rem 1.4rem;
left: $sidebar-width-icon;
position: absolute;
text-align: left;
top: 0;
bottom: 0;
width: $icon-only-collapse-width;
z-index: 1;
line-height: 1.8;
-webkit-box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
@at-root #{selector-append(".rtl", &)} {
left: auto;
right: $sidebar-width-icon;
text-align: left;
-webkit-box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0.25);
box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0.25);
}
@at-root #{selector-append(".sidebar-dark", &)} {
color: $white;
}
&:after {
display: none;
}
}
&:hover {
.menu-title {
background: $sidebar-light-menu-hover-bg;
@at-root #{selector-append(".sidebar-dark", &)} {
background: $icon-only-menu-bg-dark;
}
}
}
}
.collapse,
.collapsing {
display: block;
background: $icon-only-menu-bg-light;
@include border-radius(0 0 5px 0);
@at-root #{selector-append(".sidebar-dark", &)} {
background: $icon-only-menu-bg-dark;
}
position: absolute;
left: $sidebar-width-icon;
width: $icon-only-collapse-width;
-webkit-box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25);
box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25);
@at-root #{selector-append(".rtl", &)} {
left: auto;
right:$sidebar-width-icon;
@include border-radius(0 0 0 5px);
-webkit-box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25);
box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25);
}
}
}
}
&:not(.sub-menu) {
.nav-item {
&.active {
border-radius: 0;
}
&:hover {
.nav-link {
border-radius: 0;
}
}
}
}
&.sub-menu {
padding: $sidebar-icon-only-submenu-padding;
@at-root #{selector-append(".sidebar-dark", &)} {
background: $icon-only-menu-bg-dark;
}
.nav-item {
.nav-link {
text-align: left;
padding-left: 20px;
}
}
}
}
}
.main-panel {
width: calc(100% - #{$sidebar-width-icon});
}
}
}
// Hidden Sidebar
.sidebar-hidden {
@media (min-width: 992px) {
.sidebar {
transition: width $action-transition-duration $action-transition-timing-function;
-webkit-transition: width $action-transition-duration $action-transition-timing-function;
-moz-transition: width $action-transition-duration $action-transition-timing-function;
-ms-transition: width $action-transition-duration $action-transition-timing-function;
width: 0;
}
.main-panel {
width: 100%;
}
}
}
// Absolute sidebar with overlay to content
.sidebar-absolute {
@media (min-width: 992px) {
.page-body-wrapper {
position: relative;
.sidebar {
-webkit-transition: none;
transition: none;
}
}
&:not(.sidebar-hidden) {
.sidebar {
position: absolute;
height: 100%;
-webkit-box-shadow: 0 0 3px 1px #a7a3a3;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
/* Firefox 3.5 - 3.6 */
box-shadow: 0 0 3px 1px #a7a3a3;
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
}
.main-panel {
width: 100%;
-webkit-transition: none;
transition: none;
}
}
}
//Fixed sidebar
.sidebar-fixed {
@media(min-width: 992px) {
.sidebar {
position: fixed;
max-height: auto;
.nav {
max-height: calc(100vh - #{$navbar-height});
overflow: auto;
position: relative;
&.sub-menu {
max-height: none;
}
&:not(.sub-menu) {
padding-bottom: 3rem;
}
}
}
.main-panel {
margin-left: $sidebar-width-lg;
}
&.sidebar-icon-only {
.main-panel {
margin-left: $sidebar-width-icon;
}
}
}
}
//Boxed layout
.boxed-layout {
@media (min-width: 992px) {
.container-scroller {
background: $boxed-layout-bg;
padding: 0 calc((100% - #{$boxed-container-width}) / 2);
}
.navbar {
&.fixed-top {
margin: auto;
max-width: $boxed-container-width;
}
}
}
}
//RTL layout
.rtl {
direction: rtl;
text-align: right;
.sidebar {
.nav {
padding-right: 0;
&.sub-menu {
padding: $rtl-sidebar-submenu-padding;
@at-root #{selector-append(".sidebar-icon-only", &)} {
padding-right: 0rem;
.nav-item {
.nav-link {
padding-right: 3rem;
text-align: right;
&:before {
right: 1.75rem;
}
}
}
}
}
}
}
.product-chart-wrapper,
.settings-panel .tab-content .tab-pane .scroll-wrapper,
.sidebar-fixed .nav,
.table-responsive,
ul.chats {
&::-webkit-scrollbar {
width: 0.5em;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
&::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
}
}

399
public/Dashboard/scss/vertical-layout-light/_navbar.scss Normal file
View File

@ -0,0 +1,399 @@
/* Navbar */
.navbar {
font-weight: 400;
transition:background $action-transition-duration $action-transition-timing-function;
-webkit-transition:background $action-transition-duration $action-transition-timing-function;
-moz-transition:background $action-transition-duration $action-transition-timing-function;
-ms-transition:background $action-transition-duration $action-transition-timing-function;
-webkit-box-shadow:0px 5px 21px -5px #CDD1E1;
-moz-box-shadow: 0px 5px 21px -5px #CDD1E1;
box-shadow:0px 5px 21px -5px #CDD1E1;
.sidebar-dark & {
box-shadow: none;
}
.navbar-brand-wrapper {
background: $white;
.sidebar-dark & {
background: $sidebar-dark-bg;
}
transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
-webkit-transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
-moz-transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
-ms-transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
width: $sidebar-width-lg;
height: $navbar-height;
.navbar-brand {
color: lighten(color(gray-dark), 20%);
font-size: 1.5rem;
margin-right: 0;
padding: .25rem 0;
&.brand-logo-mini {
display: none;
}
&:active,
&:focus,
&:hover {
color: lighten(color(gray-dark), 10%);
}
img {
// width: calc(#{$sidebar-width-lg} - 130px );
max-width: 100%;
height: 34px;
margin: auto;
vertical-align: middle;
}
}
.brand-logo-mini {
padding-left: 0;
text-align: center;
img {
width: calc(#{$sidebar-width-icon} - 30px );
max-width: 100%;
margin: auto;
}
}
}
.navbar-menu-wrapper {
background: $navbar-default-bg;
transition: width $action-transition-duration $action-transition-timing-function;
-webkit-transition: width $action-transition-duration $action-transition-timing-function;
-moz-transition: width $action-transition-duration $action-transition-timing-function;
-ms-transition: width $action-transition-duration $action-transition-timing-function;
color: $navbar-menu-color;
padding-right: 2.375rem;
padding-left: 2.375rem;
width: calc(100% - #{$sidebar-width-lg});
height: $navbar-height;
@media (max-width: 991px) {
width: calc(100% - 55px);
padding-left: 15px;
padding-right: 11px;
}
.navbar-toggler {
border: 0;
color: inherit;
font-size: 1.25rem;
padding: 0;
border-radius: 0;
&:not(.navbar-toggler-right) {
@media (max-width: 991px) {
display: none;
}
transform: rotate(0deg);
@include transition(transform .3s linear);
.sidebar-icon-only & {
transform: rotate(180deg);
}
}
&.navbar-toggler-right{
@media (max-width:991px){
padding-left: 15px;
padding-right: 0;
}
}
.sidebar-dark & {
padding-left: 2.375rem;
}
}
.navbar-nav {
@extend .d-flex;
@extend .flex-row;
@extend .align-items-center;
.nav-item {
margin-left: 1rem;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
.nav-link {
color: inherit;
font-size: $navbar-font-size;
}
&.nav-search {
margin-left: 2rem;
.input-group {
border-radius: 4px;
padding: .75rem;
.form-control,
.input-group-text {
background: transparent;
border: 0;
color: $black;
padding: 0;
}
.input-group-text {
i {
font-size: 1.25rem;
color: $navbar-menu-color;
}
}
.form-control {
margin-left: .7rem;
@include placeholder {
color: #6c7383;
}
}
}
}
&.nav-settings {
@extend .align-self-stretch;
@extend .align-items-center;
margin: 0;
.nav-link {
padding: 0;
text-align: center;
height: 34px;
}
i {
font-size: 1.25rem;
vertical-align: middle;
}
}
&.nav-profile {
@extend .d-flex;
@extend .align-items-center;
margin-left: .2rem;
img {
width: 40px;
height: 40px;
border-radius: 100%;
}
&.dropdown {
.dropdown-toggle {
&:after {
display: none;
}
}
}
}
&.dropdown {
.dropdown-menu {
@extend .dropdownAnimation;
border: none;
-webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
}
.navbar-dropdown {
position: absolute;
font-size: 0.9rem;
margin-top: 0;
right: 0;
left: auto;
top: 70px;
.rtl & {
right: auto;
left: 0;
}
.dropdown-item {
@extend .d-flex;
@extend .align-items-center;
margin-bottom: 0;
padding: 0.687rem 1.562rem;
cursor: pointer;
i {
font-size: 17px;
}
.badge {
margin-left: 2.5rem;
}
.ellipsis {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.rtl & {
i {
@extend .mr-0;
margin-left: 10px;
}
.badge {
margin-left: 0;
margin-right: 2.5rem;
}
}
}
.dropdown-divider {
margin: 0;
}
}
i {
margin-right: .5rem;
vertical-align: middle;
}
@media (max-width: 991px) {
position: static;
.navbar-dropdown {
left: 20px;
right: 20px;
top: $navbar-height;
width: calc(100% - 40px);
}
}
.count-indicator {
position: relative;
padding: 0;
text-align: center;
i {
font-size: 1.25rem;
margin-right: 0;
vertical-align: middle;
}
.count {
position: absolute;
left: 36%;
width: 12px;
height: 12px;
border-radius: 100%;
background: theme-color(primary);
top: 1px;
border: 1px solid $white;
}
&:after {
display: none;
}
}
}
}
&.navbar-nav-right {
@extend .align-self-stretch;
@extend .align-items-stretch;
.nav-item {
@extend .d-flex;
@extend .align-items-center;
&.nav-settings {
@extend .d-none;
@extend .d-lg-flex;
}
}
@media (min-width: 992px) {
margin-left: auto;
.rtl & {
margin-left: 0;
margin-right: auto;
}
}
}
}
}
/* Navbar color variations */
@each $color, $value in $theme-colors {
&.navbar-#{$color} {
.navbar-menu-wrapper {
background: $value;
}
&:not(.navbar-light) {
.navbar-menu-wrapper {
.navbar-toggler {
color: $white;
}
.nav-item {
.nav-link {
color: $white;
}
&.nav-search {
.input-group {
.form-control {
color: $white;
@include placeholder {
color: $white;
}
}
.input-group-text {
i {
color: $white;
}
}
}
}
}
}
}
}
&.navbar-light {
.navbar-menu-wrapper {
background: $white;
border-left: 1px solid $border-color;
.navbar-toggler {
color: theme-color(dark);
}
.nav-item {
.nav-link {
color: theme-color(dark);
}
&.nav-search {
.input-group {
background: rgba(theme-color(dark), .24);
}
}
}
}
}
&.navbar-dark {
.navbar-menu-wrapper {
border-left-color: darken($border-color, 50%);
}
}
&.navbar-danger {
.navbar-menu-wrapper {
.nav-item {
.nav-link {
&.count-indicator {
.count {
background: theme-color(primary);
}
}
}
}
}
}
}
}
@media (max-width:991px) {
.navbar {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
.navbar-brand-wrapper {
width: 55px;
.navbar-brand {
&.brand-logo {
display: none;
}
&.brand-logo-mini {
display: inline-block;
}
}
}
}
.navbar-collapse {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 0.5rem;
}
}
@media (max-width:480px) {
.navbar {
.navbar-brand-wrapper {
width: 55px;
.brand-logo-mini{
padding-top: 0px;
}
}
}
}

312
public/Dashboard/scss/vertical-layout-light/_settings-panel.scss Normal file
View File

@ -0,0 +1,312 @@
/* Settings Panel */
.settings-panel {
border-left: 1px solid $border-color;
display: block;
position: fixed;
top:$navbar-height;
right: -$settings-panel-width;
bottom: 0;
width: $settings-panel-width;
height: 100vh;
min-height: 100%;
background: $white;
@include transition-duration($action-transition-duration);
@include transition-timing-function($action-transition-timing-function);
@include transition-property(right, box-shadow);
z-index: 9999;
.nav-tabs {
@include display-flex;
@include justify-content(center);
width: auto;
margin:0;
padding: 0;
background: $white;
.nav-item {
border: none;
.nav-link {
background: transparent;
text-align: center;
border: none;
@include display-flex;
@include align-items(center);
color: $body-color;
@include transition-duration(0.4s);
transition-property: color;
-webkit-transition-property: color;
@include justify-content(center);
&.active {
background: transparent;
color: theme-color(primary);
}
}
}
}
.tab-content {
border: none;
padding: 20px 0 0px 0;
.tab-pane {
&.scroll-wrapper {
position: relative;
max-height: 100vh;
height: 100%;
padding-bottom: 180px;
}
}
}
.settings-heading {
padding: 16px 0 13px 35px;
font-size: $default-font-size;
font-family: $type1;
font-weight: 500;
line-height: 1;
color: rgba(0, 0, 0, 0.9);
opacity: 0.9;
margin-bottom: 0;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
.rtl & {
padding: 16px 35px 13px 0;
text-align: right;
}
}
small.settings-heading {
.rtl &{
padding: 16px 0 13px 12px;
}
}
.sidebar-bg-options {
padding: 13px 35px;
@include display-flex;
@include align-items(center);
font-size: $default-font-size;
line-height: 1;
color: lighten($black, 35%);
background: $white;
@include transition-duration($action-transition-duration);
@include transition-property(background);
&.selected {
background: color(gray-lightest);
}
.rtl & {
.rounded-circle {
@extend .mr-0;
@extend .ml-3;
}
}
}
.color-tiles {
@include display-flex;
@include justify-content(space-around);
@include flex-wrap(wrap);
margin: 0px 35px 10px 35px;
padding-top: 15px;
.tiles {
@extend .img-ss;
@extend .rounded-circle;
margin: 10px 18px;
@include display-flex;
@include align-items(center);
@include justify-content(center);
&:before {
content: "";
width: 0px;
height: 0px;
opacity: 0;
background: rgba($black , 0.3);
@include border-radius(100%);
border: 0;
@include transition-duration($action-transition-duration);
@include transition-timing-function($action-transition-timing-function);
}
&.selected {
&:before {
width: 10px;
height: 10px;
opacity: 1;
border-width: $border-width;
}
}
&.primary {
@extend .bg-primary;
}
&.success {
@extend .bg-success;
}
&.warning {
@extend .bg-warning;
}
&.danger {
@extend .bg-danger;
}
&.light {
@extend .bg-light;
border:1px solid lighten(color(gray),60%);
}
&.info {
@extend .bg-info;
}
&.dark {
@extend .bg-dark;
}
&.default {
@extend .bg-light;
border: 1px solid lighten(color(gray), 60%);
}
}
}
.chat-list {
padding-left: 0;
.list {
padding: 0.4rem 0.8rem;
@include display-flex;
@include justify-content(space-between);
border-bottom: $border-width solid $border-color;
&:last-child {
border-bottom: none;
}
.profile {
position: relative;
margin-right: 1rem;
img {
width:2.50rem;
height: 2.50rem;
@include border-radius(100%);
}
span {
height: 0.75rem;
width: 0.75rem;
position: absolute;
bottom: 0.34rem;
right: 0;
border: 0.13rem solid $white;
@include border-radius(100%);
&.online {
background: theme-color(success);
}
&.offline{
background: theme-color(warning);
}
}
}
.info {
margin-right: auto;
p {
display: block;
margin-bottom: 0;
@extend %ellipsor;
&:last-child {
opacity: 0.5;
font-size: 0.8rem;
.rtl & {
text-align: right;
}
}
}
}
&.active {
background: theme-color(light);
}
}
}
&.open {
right:0;
}
.settings-close {
position: absolute;
top: 16px;
right: 10px;
color: theme-color(primary);
background: transparent;
@include border-radius(4px);
padding: 0 3px;
cursor: pointer;
@include transition-duration(0.2s);
z-index: 999;
&:hover{
background: rgba($white,0.3);
}
.rtl & {
right: unset;
left: 10px;
}
}
.events{
p{
font-family: $type1;
font-weight: 400;
}
.rtl & {
p{
text-align: right;
}
i{
@extend .mr-0;
@extend .ml-2;
}
}
}
.rtl & {
right: unset;
left: -$settings-panel-width;
@include transition-property(left);
.chat-list{
padding-right: 0;
.list{
.profile{
margin-right: 0;
margin-left: 1rem;
}
.info{
margin-right: 0;
margin-left: auto;
.badge {
margin-right: 10px;
}
}
}
}
&.open{
left: 0;
right: unset;
}
}
}
#theme-settings{
.settings-close{
top: 12px;
background: transparent;
}
}
#settings-trigger{
position: fixed;
bottom: 40px;
right: 30px;
height: 45px;
width: 45px;
background: theme-color(primary);
z-index: 99;
@include display-flex;
@include align-items(center);
@include justify-content(center);
@include border-radius(100%);
@extend .fadeInUp;
@include animation-duration(1s);
@include animation-delay(1s);
@include animation-fill-mode(both);
i{
color: $white;
font-size: 1rem;
line-height: 1rem;
@extend .infinite-spin;
}
.rtl &{
right: auto;
left: 30px;
}
@media (max-width: 991px){
display: none;
}
}

293
public/Dashboard/scss/vertical-layout-light/_sidebar.scss Normal file
View File

@ -0,0 +1,293 @@
/* Sidebar */
.sidebar {
min-height: calc(100vh - #{$navbar-height});
background: $sidebar-light-bg;
font-family: $type1;
font-weight: 500;
padding: 0;
width: $sidebar-width-lg;
z-index: 11;
transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
-webkit-transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
-moz-transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
-ms-transition: width $action-transition-duration $action-transition-timing-function, background $action-transition-duration $action-transition-timing-function;
.nav {
overflow: hidden;
flex-wrap: nowrap;
flex-direction: column;
margin-bottom: 60px;
.nav-item {
@include transition-duration(0.25s);
transition-property: background;
-webkit-transition-property: background;
.collapse {
z-index: 999;
}
.nav-link {
@include display-flex;
@include align-items(center);
white-space: nowrap;
padding: $sidebar-menu-padding-top $sidebar-menu-padding-right $sidebar-menu-padding-bottom $sidebar-menu-padding-left;
color: $sidebar-light-menu-color;
border-radius: 8px;
@include transition-duration(0.45s);
transition-property: color;
-webkit-transition-property: color;
i {
color: inherit;
&.menu-icon {
font-size: $sidebar-icon-font-size;
line-height: 1;
margin-right: 1rem;
.rtl & {
margin-left: 2rem;
margin-right: 0;
}
color: $sidebar-light-menu-icon-color;
&:before {
vertical-align: middle;
}
}
&.menu-arrow {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: auto;
margin-right: 0;
color: $sidebar-light-menu-arrow-color;
.rtl & {
margin-left: 0;
margin-right: auto;
}
&:before {
content: "\e649";
font-family: "themify";
font-style: normal;
display: block;
font-size: 0.687rem;
line-height: 10px;
@include transition(all .2s ease-in);
}
}
}
.menu-title {
color: inherit;
display: inline-block;
font-size: $sidebar-menu-font-size;
line-height: 1;
vertical-align: middle;
}
.badge {
margin-left: auto;
.rtl & {
margin-left: 0;
margin-right: auto;
}
}
&[aria-expanded="true"] {
i {
&.menu-arrow {
&:before {
@include rotate(90);
}
}
}
}
}
&.active {
border-radius: 8px;
> .nav-link {
background: $sidebar-light-menu-active-bg;
position: relative;
i,
.menu-title,
.menu-arrow {
color: $sidebar-light-menu-active-color;
}
i {
&.menu-arrow {
&::before {
content: "\e64b";
}
}
}
}
}
&:hover {
> .nav-link {
i,
.menu-title,
.menu-arrow {
color: $sidebar-light-menu-active-color;
}
}
}
}
&:not(.sub-menu) {
margin-top: 1.45rem;
margin-left: 1rem;
margin-right: 1rem;
> .nav-item {
margin-top: .2rem;
&:hover {
> .nav-link, &[aria-expanded="true"] {
background: $sidebar-light-menu-hover-bg;
color: $sidebar-light-menu-hover-color;
}
}
> .nav-link {
margin: 0;
&[aria-expanded="true"] {
border-radius: 8px 8px 0 0;
background: $sidebar-light-menu-hover-bg;
color: $sidebar-light-menu-active-color;
}
}
&.active {
background: $sidebar-light-menu-hover-bg;
}
}
}
&.sub-menu {
margin-bottom: 0;
margin-top:0;
list-style: none;
padding: $sidebar-submenu-padding;
background: $sidebar-light-menu-hover-bg;
padding-bottom: 12px;
.nav-item {
padding: 0;
&::before {
content: '';
width: 5px;
height: 5px;
position: absolute;
margin-top: 16px;
border-radius: 50%;
background: #b2b2b2;
}
.nav-link {
color: $sidebar-light-submenu-color;
padding: $sidebar-submenu-item-padding;
position: relative;
font-size: $sidebar-submenu-font-size;
line-height: 1;
height: auto;
border-top: 0;
&:hover {
color: $sidebar-light-submenu-hover-color;
}
&.active {
color: $sidebar-light-submenu-active-color;
background: transparent;
}
}
&:hover {
background: transparent;
}
}
}
}
}
//sidebar color variation
.sidebar-dark {
.sidebar {
background: $sidebar-dark-bg;
.nav {
.nav-item {
.nav-link {
color: $sidebar-dark-menu-color;
i {
color: inherit;
&.menu-icon {
color: $sidebar-dark-menu-icon-color;
}
}
.menu-title {
color: inherit;
}
&[aria-expanded="true"] {
.menu-title {
color: $sidebar-dark-submenu-color;
}
}
}
&.active {
> .nav-link {
background: $sidebar-dark-menu-active-bg;
.menu-title,
i {
color: $sidebar-dark-menu-active-color;
}
}
}
}
&:not(.sub-menu) {
> .nav-item {
&:hover {
> .nav-link {
background: $sidebar-dark-menu-hover-bg;
color: $sidebar-dark-menu-hover-color;
}
}
.nav-link {
&[aria-expanded="true"] {
background: #1a1f26;
}
}
}
}
&.sub-menu {
background: #1a1f26;
.nav-item {
.nav-link {
color: $sidebar-dark-submenu-color;
&:before {
color: lighten($sidebar-dark-submenu-color, 10%);
}
&.active {
color: $sidebar-dark-menu-active-color;
background: transparent;
}
&:hover {
color: $sidebar-dark-submenu-hover-color;
}
}
&:hover {
background: transparent;
}
}
}
}
}
}
/* style for off-canvas menu*/
@media screen and (max-width: 991px) {
.sidebar-offcanvas {
position: fixed;
max-height: calc(100vh - #{$navbar-height});
top: $navbar-height;
bottom: 0;
overflow: auto;
right: -$sidebar-width-lg;
-webkit-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
&.active {
right: 0;
}
}
}

81
public/Dashboard/scss/vertical-layout-light/_variables.scss Normal file
View File

@ -0,0 +1,81 @@
////////// SIDEBAR ////////
$sidebar-width-lg: 235px;
$sidebar-width-mini: 185px;
$sidebar-width-icon: 70px;
$sidebar-light-bg: #fff;
$sidebar-light-menu-color: #6C7383;
$sidebar-light-submenu-color: #fff;
$sidebar-light-menu-active-bg: theme-color(primary);
$sidebar-light-menu-active-color: #fff;
$sidebar-light-menu-hover-bg: theme-color(primary);
$sidebar-light-menu-hover-color: #fff;
$sidebar-light-submenu-hover-color: $white;
$sidebar-light-submenu-active-color: $white;
$sidebar-light-menu-icon-color: $sidebar-light-menu-color;
$sidebar-light-menu-arrow-color: #686868;
$sidebar-light-profile-name-color: #404852;
$sidebar-light-profile-title-color: #8d9498;
$sidebar-dark-bg: #232227;
$sidebar-dark-menu-color: #FFFFFF;
$sidebar-dark-menu-active-bg: #4B49AC;
$sidebar-dark-menu-active-color: $white;
$sidebar-dark-menu-hover-bg: #4B49AC;
$sidebar-dark-menu-hover-color: #fff;
$sidebar-dark-submenu-color: $sidebar-dark-menu-color;
$sidebar-dark-submenu-hover-bg: initial;
$sidebar-dark-submenu-hover-color: #9a94a7;
$sidebar-dark-menu-icon-color: $sidebar-dark-menu-color;
$sidebar-dark-profile-name-color: #ffffff;
$sidebar-dark-profile-title-color: #8d9498;
$sidebar-menu-font-size: .875rem;
$sidebar-menu-padding-left: 1rem;
$sidebar-menu-padding-right: 1.937rem;
$sidebar-menu-padding-top: .8125rem;
$sidebar-menu-padding-bottom: .8125rem;
$sidebar-submenu-padding: .25rem 0 0 3.07rem;
$sidebar-submenu-font-size: .875rem;
$sidebar-submenu-item-padding: .7rem 1rem;
$sidebar-icon-font-size: 1rem;
$sidebar-arrow-font-size: .625rem;
$sidebar-profile-bg: transparent;
$sidebar-profile-padding: 0 1.625rem 2.25rem 1.188rem;
$sidebar-mini-menu-padding: .8125rem 1rem .8125rem 1rem;
$sidebar-icon-only-menu-padding: .5rem 1.625rem .5rem 1.188rem;
$sidebar-icon-only-submenu-padding: 0 0 0 1.5rem;
$sidebar-box-shadow: 6px 16px 31px -18px #b7bcd1;
$rtl-sidebar-submenu-padding: 0 4.5rem 0 0;
$icon-only-collapse-width: 190px;
$icon-only-menu-bg-light: $sidebar-light-bg;
$icon-only-menu-bg-dark: $sidebar-dark-bg;
///////// SIDEBAR ////////
///////// BOXED LAYOUT ///////
$boxed-container-width: 1200px;
$boxed-layout-bg: #c6c8ca;
///////// BOXED LAYOUT ///////
///////// SETTINGS PANEL ////////
$settings-panel-width: 300px;
///////// NAVBAR ////////
$navbar-default-bg: $white;
$navbar-height: 60px;
$navbar-menu-color: #6C7383;
$navbar-font-size: 1rem;
$navbar-icon-font-size: .9375rem;
///////// NAVBAR ////////

36
public/Dashboard/scss/vertical-layout-light/_vertical-wrapper.scss Normal file
View File

@ -0,0 +1,36 @@
.page-body-wrapper {
min-height: calc(100vh - #{$navbar-height});
@include display-flex();
@include flex-direction(row);
padding-left: 0;
padding-right: 0;
padding-top: $navbar-height;
&.full-page-wrapper {
width: 100%;
min-height: 100vh;
padding-top: 0;
}
}
.main-panel {
transition: width $action-transition-duration $action-transition-timing-function, margin $action-transition-duration $action-transition-timing-function;
width: calc(100% - #{$sidebar-width-lg});
min-height: calc(100vh - #{$navbar-height});
@include display-flex();
@include flex-direction(column);
@media (max-width: 991px) {
margin-left: 0;
width: 100%;
}
}
.content-wrapper {
background: $content-bg;
padding: 2.375rem 2.375rem;
width: 100%;
@include flex-grow(1);
@media(max-width: 767px) {
padding: 1.5rem 1.5rem;
}
}

7
public/Dashboard/scss/vertical-layout-light/style.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../common/light/common";
@import "variables";
@import "vertical-wrapper";
@import "sidebar";
@import "navbar";
@import "layouts";
@import "settings-panel"