Init(Core): Change repo
This commit is contained in:
33
public/assets/scss/custom/structure/_footer.scss
Normal file
33
public/assets/scss/custom/structure/_footer.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// _footer.scss
|
||||
//
|
||||
|
||||
.footer {
|
||||
bottom: 0;
|
||||
padding: 20px calc(#{$grid-gutter-width} / 2);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: $footer-color;
|
||||
right: 250px;
|
||||
height: $footer-height;
|
||||
background-color: $footer-bg;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.footer {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Enlarge menu
|
||||
.vertical-collpsed {
|
||||
.footer {
|
||||
right: $sidebar-collapsed-width;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.footer {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
24
public/assets/scss/custom/structure/_general.scss
Normal file
24
public/assets/scss/custom/structure/_general.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
body{
|
||||
font-family: $font-family-base;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $headings-font-family;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
p,
|
||||
.line-height-p,
|
||||
address {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.line-height-h {
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
code {
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
}
|
||||
377
public/assets/scss/custom/structure/_horizontal-nav.scss
Normal file
377
public/assets/scss/custom/structure/_horizontal-nav.scss
Normal file
@@ -0,0 +1,377 @@
|
||||
//
|
||||
// _horizontal.scss
|
||||
//
|
||||
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
|
||||
.navbar-brand-box {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-top: $header-height;
|
||||
padding: 0 $grid-gutter-width $footer-height $grid-gutter-width;
|
||||
}
|
||||
|
||||
.page-title-box{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#page-topbar {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.topnav {
|
||||
padding: 0 calc(#{$grid-gutter-width} / 2);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: $header-height;
|
||||
z-index: 100;
|
||||
background: $topnav-bg;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
|
||||
.topnav-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: $sidebar-menu-item-color;
|
||||
line-height: 70px;
|
||||
i{
|
||||
font-size: 15px;
|
||||
}
|
||||
&:focus, &:hover{
|
||||
color: $sidebar-menu-item-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item{
|
||||
color: $sidebar-menu-item-color;
|
||||
&.active, &:hover{
|
||||
color: $sidebar-menu-item-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item{
|
||||
.nav-link.active{
|
||||
color: $sidebar-menu-item-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
&.active{
|
||||
>a {
|
||||
color: $sidebar-menu-item-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.container-fluid,
|
||||
.navbar-header {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.topnav {
|
||||
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
padding: 0 1.1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: .5rem 1.5rem;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&.mega-dropdown{
|
||||
.mega-dropdown-menu{
|
||||
right: 0px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius;
|
||||
|
||||
.arrow-down {
|
||||
&::after {
|
||||
left: 15px;
|
||||
transform: rotate(135deg) translateY(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
right: 100%;
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
>.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-menu {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
border-color: initial;
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px 0;
|
||||
content: "";
|
||||
height: .4em;
|
||||
display: inline-block;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
margin-right: 7px;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
transform-origin: top;
|
||||
transition: all .3s ease-out;
|
||||
width: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.topnav-menu {
|
||||
.navbar-nav {
|
||||
li {
|
||||
&:last-of-type {
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
|
||||
.topnav {
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding: 0.75rem 1.1rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.dropdown-mega-menu-xl,
|
||||
.dropdown-mega-menu-lg{
|
||||
width: auto;
|
||||
|
||||
.row{
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
line-height: 1.8;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
&::after {
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
body[data-layout="horizontal"][data-topbar="light"] {
|
||||
.topnav{
|
||||
background-color: $primary;
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
color: rgba($white, 0.5);
|
||||
|
||||
&:focus, &:hover{
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown{
|
||||
&.active{
|
||||
>a {
|
||||
color: rgba($white, 0.9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colored Topbar
|
||||
|
||||
body[data-layout="horizontal"][data-topbar="colored"],
|
||||
body[data-layout="horizontal"][data-topbar="dark"] {
|
||||
#page-topbar{
|
||||
background-color: $primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-search {
|
||||
|
||||
.form-control {
|
||||
background-color: rgba($topbar-search-bg,0.07);
|
||||
color: $white;
|
||||
}
|
||||
span,
|
||||
input.form-control::-webkit-input-placeholder {
|
||||
color: rgba($white,0.5);
|
||||
}
|
||||
}
|
||||
.header-item {
|
||||
color: $header-dark-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $header-dark-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
.dropdown.show {
|
||||
.header-item{
|
||||
background-color: rgba($white,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-effect .waves-ripple {
|
||||
background: rgba($white, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
i {
|
||||
color: $header-dark-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.topnav{
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
color: rgba($white, 0.5);
|
||||
|
||||
&:focus, &:hover{
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown{
|
||||
&.active{
|
||||
>a {
|
||||
color: rgba($white, 0.9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-layout="horizontal"][data-topbar="dark"] {
|
||||
#page-topbar {
|
||||
background-color: $header-dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// light Topbar
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
|
||||
.logo-light {
|
||||
display: $display-none;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: $display-block;
|
||||
}
|
||||
}
|
||||
|
||||
203
public/assets/scss/custom/structure/_layouts.scss
Normal file
203
public/assets/scss/custom/structure/_layouts.scss
Normal file
@@ -0,0 +1,203 @@
|
||||
//
|
||||
// _layouts.scss
|
||||
//
|
||||
|
||||
body[data-layout-size="boxed"] {
|
||||
|
||||
.container-fluid{
|
||||
max-width: 100% !important;
|
||||
}
|
||||
background-color: $boxed-body-bg;
|
||||
#layout-wrapper {
|
||||
background-color: $body-bg;
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
box-shadow: $box-shadow;
|
||||
&::before{
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#page-topbar {
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 0 auto;
|
||||
max-width: calc(#{$boxed-layout-width} - #{$sidebar-width});
|
||||
}
|
||||
|
||||
&.vertical-collpsed {
|
||||
.footer {
|
||||
max-width: calc(#{$boxed-layout-width} - #{$sidebar-collapsed-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Horizontal Boxed Layout
|
||||
|
||||
body[data-layout="horizontal"][data-layout-size="boxed"]{
|
||||
.footer{
|
||||
max-width:1300px;
|
||||
}
|
||||
.container-fluid, .navbar-header {
|
||||
max-width: $boxed-layout-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Detached layout
|
||||
|
||||
body[data-layout="detached"]{
|
||||
@include media-breakpoint-up(lg) {
|
||||
.container-fluid{
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
#page-topbar{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toggle-btn{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand-box{
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.vertical-menu{
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
margin-top: 35px;
|
||||
|
||||
.user-img{
|
||||
img{
|
||||
padding: 6px;
|
||||
border: 2px dashed $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-menu{
|
||||
padding-bottom: 90px
|
||||
}
|
||||
|
||||
|
||||
.page-content{
|
||||
margin-top: 16px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.main-content{
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.page-title-box{
|
||||
padding-bottom: $grid-gutter-width;
|
||||
.page-title{
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.container-fluid{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-content{
|
||||
padding: calc(#{$header-height} + 0px) $grid-gutter-width $footer-height $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-wrapper{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 165px;
|
||||
background: $bg-gradient;
|
||||
box-shadow: -1px 0 7px 0 rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: url("../images/bg-effect.png") center;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background-size: cover;
|
||||
opacity: 0.03;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content{
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-brand-box{
|
||||
float: right;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.navbar-header{
|
||||
padding: 0px;
|
||||
|
||||
.card-img-overlay{
|
||||
background-color: rgba($black, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
right: 0;
|
||||
.container-fluid{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-box{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.page-title{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.breadcrumb-item{
|
||||
>a {
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
&.active, +.breadcrumb-item::before{
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
body[data-topbar=colored] #page-topbar {
|
||||
background: $bg-gradient;
|
||||
}
|
||||
}
|
||||
22
public/assets/scss/custom/structure/_page-head.scss
Normal file
22
public/assets/scss/custom/structure/_page-head.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Page-title
|
||||
//
|
||||
|
||||
.page-title-box {
|
||||
|
||||
|
||||
.breadcrumb {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
62
public/assets/scss/custom/structure/_right-sidebar.scss
Normal file
62
public/assets/scss/custom/structure/_right-sidebar.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
//
|
||||
// right-sidebar.scss
|
||||
//
|
||||
|
||||
.right-bar {
|
||||
background-color: $card-bg;
|
||||
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
|
||||
display: block;
|
||||
position: fixed;
|
||||
transition: all 200ms ease-out;
|
||||
width: $rightbar-width;
|
||||
z-index: 9999;
|
||||
float: left !important;
|
||||
left: -($rightbar-width + 10px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
.right-bar-toggle {
|
||||
background-color: lighten($dark, 7%);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
line-height: 24px;
|
||||
color: $gray-200;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($dark, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rightbar overlay
|
||||
.rightbar-overlay {
|
||||
background-color: rgba($dark, 0.55);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
z-index: 9998;
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.right-bar-enabled {
|
||||
.right-bar {
|
||||
left: 0;
|
||||
}
|
||||
.rightbar-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.right-bar {
|
||||
overflow: auto;
|
||||
.slimscroll-menu {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
285
public/assets/scss/custom/structure/_topbar.scss
Normal file
285
public/assets/scss/custom/structure/_topbar.scss
Normal file
@@ -0,0 +1,285 @@
|
||||
//
|
||||
// _header.scss
|
||||
//
|
||||
|
||||
#page-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1002;
|
||||
background-color: $header-bg;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.075);
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
height: $header-height;
|
||||
padding: 0 0 0 calc(#{$grid-gutter-width} / 2);
|
||||
|
||||
.dropdown.show {
|
||||
.header-item {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
padding: 0 1.5rem;
|
||||
text-align: center;
|
||||
width: $navbar-brand-box-width;
|
||||
}
|
||||
|
||||
.logo {
|
||||
line-height: 70px;
|
||||
|
||||
.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.app-search {
|
||||
padding: calc(#{$header-height - 38px} / 2) 0;
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
height: 38px;
|
||||
padding-right: 40px;
|
||||
padding-left: 20px;
|
||||
background-color: $topbar-search-bg;
|
||||
box-shadow: none;
|
||||
border-radius: 7px;
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
line-height: 39px;
|
||||
right: 13px;
|
||||
top: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Mega menu
|
||||
|
||||
.megamenu-list {
|
||||
li{
|
||||
position: relative;
|
||||
padding: 5px 0px;
|
||||
line-height: 1.6;
|
||||
a{
|
||||
color: $dropdown-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-brand-box {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: calc(#{$header-height} + #{$grid-gutter-width / 2}) $grid-gutter-width $footer-height $grid-gutter-width;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
height: $header-height;
|
||||
box-shadow: none !important;
|
||||
color: $header-item-color;
|
||||
border: 0;
|
||||
border-radius: 0px;
|
||||
|
||||
&:hover {
|
||||
color: $header-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header-profile-user {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
background-color: $gray-300;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: $header-item-color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
.media {
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown with Icons
|
||||
.dropdown-icon-item {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
padding: 15px 0 9px;
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
color: $gray-600;
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Full Screen
|
||||
.fullscreen-enable {
|
||||
[data-toggle="fullscreen"] {
|
||||
.mdi-fullscreen::before {
|
||||
content: "\F294";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-topbar="dark"],
|
||||
body[data-topbar="colored"] {
|
||||
#page-topbar {
|
||||
background-color: $header-dark-bg;
|
||||
}
|
||||
.navbar-header {
|
||||
.dropdown.show {
|
||||
.header-item {
|
||||
background-color: rgba($white, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-effect .waves-ripple {
|
||||
background: rgba($white, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
color: $header-dark-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $header-dark-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header-profile-user {
|
||||
background-color: rgba($white, 0.25);
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
i {
|
||||
color: $header-dark-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-search {
|
||||
|
||||
.form-control {
|
||||
background-color: rgba($topbar-search-bg,0.07);
|
||||
color: $white;
|
||||
}
|
||||
span,
|
||||
input.form-control::-webkit-input-placeholder {
|
||||
color: rgba($white,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-topbar="colored"] {
|
||||
#page-topbar{
|
||||
background: $header-bg;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
.dropdown.show {
|
||||
.header-item {
|
||||
background-color: rgba($white, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-effect .waves-ripple {
|
||||
background: rgba($white, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navbar-header {
|
||||
.dropdown {
|
||||
position: static;
|
||||
|
||||
.dropdown-menu {
|
||||
right: 10px !important;
|
||||
left: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.navbar-brand-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
625
public/assets/scss/custom/structure/_vertical.scss
Normal file
625
public/assets/scss/custom/structure/_vertical.scss
Normal file
@@ -0,0 +1,625 @@
|
||||
//
|
||||
// _menu.scss
|
||||
//
|
||||
|
||||
.metismenu {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mm-collapse {
|
||||
display: none;
|
||||
|
||||
&:not(.mm-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mm-show {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.mm-collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: .35s;
|
||||
transition-property: height, visibility;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vertical-menu {
|
||||
min-width: $sidebar-width;
|
||||
max-width: $sidebar-width;
|
||||
z-index: 1001;
|
||||
background: $sidebar-bg;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-right: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
padding: 0 15px 10px 15px;
|
||||
margin-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sidebar-menu {
|
||||
padding: 0 0 30px 0;
|
||||
|
||||
.mm-active {
|
||||
>.has-arrow {
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
content: "\F140";
|
||||
font-family: 'Material Design Icons';
|
||||
display: block;
|
||||
float: left;
|
||||
transition: transform .2s;
|
||||
font-size: 1rem;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: .625rem 1.5rem;
|
||||
color: $sidebar-menu-item-color;
|
||||
position: relative;
|
||||
font-size: 14.4px;
|
||||
transition: all .4s;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
min-width: 1.75rem;
|
||||
padding-top: .0625em;
|
||||
padding-bottom: .0625em;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.40625rem;
|
||||
vertical-align: middle;
|
||||
color: $sidebar-menu-item-icon-color;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
|
||||
a {
|
||||
padding: .475rem 3.5rem .475rem 1.5rem;
|
||||
font-size: 14px;
|
||||
color: $sidebar-menu-sub-item-color;
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding: .4rem 4.5rem .4rem 1.5rem;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
padding: 12px 20px !important;
|
||||
letter-spacing: .05em;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: $sidebar-menu-item-icon-color;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.mm-active {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
.active {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
> i {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.vertical-menu {
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
body.sidebar-enable {
|
||||
.vertical-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Enlarge menu
|
||||
@media (min-width: 992px) {
|
||||
.vertical-collpsed {
|
||||
|
||||
.main-content {
|
||||
margin-right: $sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
width: $sidebar-collapsed-width !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Side menu
|
||||
.vertical-menu {
|
||||
|
||||
.user-wid{
|
||||
display: none;
|
||||
}
|
||||
position: absolute;
|
||||
max-width: $sidebar-collapsed-width !important;
|
||||
min-width: $sidebar-collapsed-width !important;
|
||||
z-index: 5;
|
||||
|
||||
.simplebar-mask,
|
||||
.simplebar-content-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
#sidebar-menu {
|
||||
|
||||
.menu-title,
|
||||
.badge,
|
||||
.collapse.in {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav.collapse {
|
||||
height: inherit !important;
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
> a {
|
||||
padding: 15px 20px;
|
||||
min-height: 55px;
|
||||
transition: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.45rem;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> a {
|
||||
position: relative;
|
||||
width: calc(190px + #{$sidebar-collapsed-width});
|
||||
color: $primary;
|
||||
background-color: darken($sidebar-bg, 4%);
|
||||
transition: none;
|
||||
|
||||
i{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
>ul {
|
||||
display: block;
|
||||
right: $sidebar-collapsed-width;
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
height: auto !important;
|
||||
box-shadow: -3px 5px 10px 0 rgba(54, 61, 71, .1);
|
||||
|
||||
ul {
|
||||
box-shadow: -3px 5px 10px 0 rgba(54, 61, 71, .1);
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: none;
|
||||
padding: 8px 20px;
|
||||
position: relative;
|
||||
width: 190px;
|
||||
z-index: 6;
|
||||
color: $sidebar-menu-sub-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 5px 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
background-color: $sidebar-bg;
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
>ul {
|
||||
display: block;
|
||||
right: 190px;
|
||||
height: auto !important;
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
>a {
|
||||
span.pull-right {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 12px;
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
a {
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body[data-sidebar="dark"] {
|
||||
.vertical-menu {
|
||||
background: $sidebar-dark-bg;
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color: $sidebar-dark-menu-item-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-icon-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
li {
|
||||
|
||||
a {
|
||||
color: $sidebar-dark-menu-sub-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Enlarge menu
|
||||
&.vertical-collpsed {
|
||||
min-height: 1200px;
|
||||
// Side menu
|
||||
.vertical-menu {
|
||||
|
||||
// Sidebar Menu
|
||||
#sidebar-menu {
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
|
||||
&:hover {
|
||||
> a {
|
||||
background: lighten($sidebar-dark-bg, 2%);
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
i{
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
>ul {
|
||||
a{
|
||||
color: $sidebar-dark-menu-sub-item-color;
|
||||
&:hover{
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul{
|
||||
background-color: $sidebar-dark-bg;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul{
|
||||
|
||||
li{
|
||||
&.mm-active .active{
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
i{
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.mm-active {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
> i {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
}
|
||||
.active {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
color: $sidebar-dark-menu-item-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.main-content {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Compact Sidebar
|
||||
|
||||
body[data-sidebar-size="small"] {
|
||||
@media (min-width: 992px) {
|
||||
.navbar-brand-box{
|
||||
width: $sidebar-width-sm;
|
||||
}
|
||||
}
|
||||
.vertical-menu{
|
||||
min-width: $sidebar-width-sm;
|
||||
max-width: $sidebar-width-sm;
|
||||
text-align: center;
|
||||
}
|
||||
.main-content {
|
||||
margin-right: $sidebar-width-sm;
|
||||
}
|
||||
.footer {
|
||||
right: $sidebar-width-sm;
|
||||
}
|
||||
.has-arrow:after,
|
||||
.badge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
ul li {
|
||||
a{
|
||||
i{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
ul.sub-menu {
|
||||
li a{
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vertical-collpsed {
|
||||
.main-content {
|
||||
margin-right: $sidebar-collapsed-width;
|
||||
}
|
||||
.vertical-menu {
|
||||
#sidebar-menu{
|
||||
text-align: right;
|
||||
>ul{
|
||||
>li{
|
||||
>a {
|
||||
i{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
right: $sidebar-collapsed-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// colored sidebar
|
||||
|
||||
body[data-sidebar="colored"] {
|
||||
.vertical-menu{
|
||||
background-color: $primary;
|
||||
}
|
||||
.navbar-brand-box{
|
||||
background-color: $primary;
|
||||
.logo-dark{
|
||||
display: none;
|
||||
}
|
||||
.logo-light{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-active {
|
||||
color: $white !important;
|
||||
> i, .active {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
ul {
|
||||
li {
|
||||
&.menu-title{
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
|
||||
a{
|
||||
color: rgba($white, 0.5);
|
||||
i{
|
||||
color: rgba($white, 0.5);
|
||||
}
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
li {
|
||||
a{
|
||||
color: rgba($white,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-collpsed {
|
||||
.vertical-menu {
|
||||
#sidebar-menu{
|
||||
>ul{
|
||||
>li{
|
||||
&:hover>a{
|
||||
background-color: lighten($primary, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul{
|
||||
li{
|
||||
&.mm-active {
|
||||
.active{
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user