at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -0,0 +1,15 @@
|
||||
// Variables
|
||||
|
||||
$spacer-lg : 3rem;
|
||||
$spacer-sm : 1.5rem;
|
||||
|
||||
$layout-spacer-lg : 3rem;
|
||||
$layout-spacer-x : 1.5rem;
|
||||
|
||||
$app-sidebar-width : 280px;
|
||||
$app-sidebar-width-collapsed : 80px;
|
||||
|
||||
$logo-height : 23px;
|
||||
$logo-width : 97px;
|
||||
|
||||
$app-header-height : 60px;
|
||||
@@ -0,0 +1,14 @@
|
||||
// Variables
|
||||
|
||||
@import "layout-variables";
|
||||
|
||||
@import "generic/generic-base";
|
||||
@import "generic/animations";
|
||||
|
||||
@import "header/header-base";
|
||||
@import "sidebar/sidebar-base";
|
||||
@import "main/main-base";
|
||||
@import "footer/footer-base";
|
||||
|
||||
@import "elements/page-title/page-title-base";
|
||||
@import "elements/search-box/search-box";
|
||||
@@ -0,0 +1,124 @@
|
||||
// Page title
|
||||
|
||||
.app-page-title {
|
||||
padding: $grid-gutter-width;
|
||||
margin: (-$grid-gutter-width) (-$grid-gutter-width) ($grid-gutter-width);
|
||||
position: relative;
|
||||
|
||||
.page-title-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title-heading,
|
||||
.page-title-subheading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-title-heading {
|
||||
font-size: $h5-font-size;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title-subheading {
|
||||
padding: 3px 0 0;
|
||||
font-size: $font-size-base;
|
||||
opacity: .6;
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
margin: 3px 0 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-actions {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.breadcrumb {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-icon {
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
padding: ($layout-spacer-x / 1.8);
|
||||
margin: 0 ($grid-gutter-width) 0 0;
|
||||
background: $white;
|
||||
box-shadow: $box-shadow-default;
|
||||
@include border-radius($border-radius);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&.rounded-circle {
|
||||
margin: 0 ($grid-gutter-width / 1.5) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& + .RRT__container {
|
||||
margin-top: -($grid-gutter-width / 1.3);
|
||||
}
|
||||
|
||||
& + .rc-tabs {
|
||||
// to fix width issue in firefox
|
||||
max-width: calc(100vw - 322px);
|
||||
margin: (-($grid-gutter-width)) (-($grid-gutter-width / 2)) (($grid-gutter-width * 1.3));
|
||||
}
|
||||
@media only screen and (max-width: 812px) and (min-width: 360px) {
|
||||
& + .rc-tabs {
|
||||
// to fix width issue in firefox
|
||||
max-width: calc(100vw - 0px);
|
||||
margin: (-($grid-gutter-width)) (-($grid-gutter-width / 2)) (($grid-gutter-width * 1.3));
|
||||
}
|
||||
}
|
||||
|
||||
&.app-page-title-simple {
|
||||
margin: 0;
|
||||
background: none !important;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-icon-rounded {
|
||||
.page-title-icon {
|
||||
@include border-radius(50px);
|
||||
}
|
||||
}
|
||||
|
||||
.closed-sidebar .rc-tabs{
|
||||
max-width: calc(100vw - 140px);
|
||||
}
|
||||
@media only screen and (max-width: 812px) and (min-width: 360px) {
|
||||
.closed-sidebar .rc-tabs{
|
||||
max-width: calc(100vw - 0px);
|
||||
}
|
||||
}
|
||||
|
||||
// Body Tabs
|
||||
|
||||
.body-tabs {
|
||||
&.body-tabs-layout {
|
||||
margin-inline-start: -($grid-gutter-width);
|
||||
margin-inline-end: -($grid-gutter-width);
|
||||
padding: 0 $grid-gutter-width;
|
||||
border-top: 0;
|
||||
border-bottom: $gray-300 solid 1px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
// Search Box
|
||||
|
||||
$search-box-size: 42px;
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
margin-inline-end: ($nav-link-padding-x / 1.5);
|
||||
|
||||
.input-holder {
|
||||
height: $search-box-size;
|
||||
width: $search-box-size;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0 70px 0 20px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
outline: none;
|
||||
transform: translate(0, 60px);
|
||||
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
|
||||
transition-delay: 0.3s;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: $search-box-size;
|
||||
height: $search-box-size;
|
||||
border: none;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: rgba(0,0,0,.06);
|
||||
@include border-radius(30px);
|
||||
|
||||
span {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 4px;
|
||||
height: 11px;
|
||||
left: 9px;
|
||||
top: 13px;
|
||||
border-radius: 2px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
border-radius: 16px;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
opacity: 0 !important;
|
||||
transform: rotate(-180deg);
|
||||
transition: all .2s cubic-bezier(0.285, -0.450, 0.935, 0.110);
|
||||
transition-delay: 0.1s;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: $primary;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
left: 9px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
width: 330px;
|
||||
|
||||
.input-holder {
|
||||
width: 290px;
|
||||
border-radius: 50px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
|
||||
|
||||
.search-input {
|
||||
opacity: 1;
|
||||
transform: translate(0, 11px);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: $search-box-size;
|
||||
height: $search-box-size;
|
||||
margin: 0;
|
||||
border-radius: 30px;
|
||||
|
||||
span {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
left: 300px;
|
||||
opacity: .6 !important;
|
||||
transform: rotate(45deg);
|
||||
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
|
||||
transition-delay: 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& + .header-megamenu {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// Fixed Header
|
||||
|
||||
.fixed-footer {
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 7;
|
||||
|
||||
.app-footer__inner {
|
||||
margin-inline-start: $app-sidebar-width;
|
||||
box-shadow: 0.3rem -0.46875rem 2.1875rem rgba(darken($primary, 50%), .02),
|
||||
0.3rem -0.9375rem 1.40625rem rgba(darken($primary, 50%), .02),
|
||||
0.3rem -0.25rem 0.53125rem rgba(darken($primary, 50%), .04),
|
||||
0.3rem -0.125rem 0.1875rem rgba(darken($primary, 50%), .02);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.app-main .app-main__outer {
|
||||
// padding-bottom: $app-header-height;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
&.closed-sidebar {
|
||||
.app-footer {
|
||||
.app-footer__inner {
|
||||
margin-inline-start: $app-sidebar-width-collapsed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// Footer base
|
||||
|
||||
.app-footer {
|
||||
height: $app-header-height;
|
||||
|
||||
.app-footer__inner {
|
||||
padding: 0 $layout-spacer-x 0 ($layout-spacer-x / 2);
|
||||
height: $app-header-height;
|
||||
transition: all .2s;
|
||||
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
.app-footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-footer-right {
|
||||
margin-inline-start: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer Dots Section
|
||||
|
||||
.footer-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
.dots-separator {
|
||||
height: 40px;
|
||||
margin: 0 ($layout-spacer-x / 2.5);
|
||||
width: 1px;
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
.dot-btn-wrapper {
|
||||
padding: .5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
opacity: .7;
|
||||
transition: opacity .2s;
|
||||
|
||||
.badge-abs {
|
||||
right: 50%;
|
||||
|
||||
&.badge-dot-sm {
|
||||
top: -2px;
|
||||
margin-inline-end: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.dot-btn-icon {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer Modifiers
|
||||
|
||||
@import "fixed-footer";
|
||||
@@ -0,0 +1,45 @@
|
||||
// Sidebar Animation
|
||||
|
||||
.SidebarAnimation-appear {
|
||||
transform: translateX(-30px);
|
||||
opacity: 0;
|
||||
|
||||
&.SidebarAnimation-appear-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: all .4s linear;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Animation
|
||||
|
||||
.TabsAnimation-appear {
|
||||
@extend .animated;
|
||||
@extend .fadeInUp;
|
||||
}
|
||||
|
||||
// Header Animation
|
||||
|
||||
.HeaderAnimation-appear {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
|
||||
&.HeaderAnimation-appear-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all .4s linear;
|
||||
}
|
||||
}
|
||||
|
||||
// Main Animation
|
||||
|
||||
.MainAnimation-appear {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
|
||||
&.MainAnimation-appear-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all .4s linear;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// General
|
||||
|
||||
a,
|
||||
button,
|
||||
.btn {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
// Header Base
|
||||
|
||||
.app-header {
|
||||
height: $app-header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: all .2s;
|
||||
|
||||
&.header-shadow {
|
||||
box-shadow: $box-shadow-default;
|
||||
}
|
||||
|
||||
.app-header__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex: 1;
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
|
||||
.app-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.header-user-info {
|
||||
& > .widget-heading,
|
||||
& > .widget-subheading {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > .widget-subheading {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
width: $app-sidebar-width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: width .2s;
|
||||
|
||||
.logo-src {
|
||||
height: 39px;
|
||||
width: 170px;
|
||||
// height: $logo-height;
|
||||
// width: $logo-width;
|
||||
background: url(../images/logo/logo-small.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__menu,
|
||||
.app-header__mobile-menu {
|
||||
display: none;
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
background-color: $light;
|
||||
color: $primary;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&-icon {
|
||||
font-size: 2rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Header Modifiers
|
||||
|
||||
@import "modifiers/fixed-header";
|
||||
@import "modifiers/header-dots";
|
||||
@import "modifiers/header-megamenu";
|
||||
@import "modifiers/header-buttons";
|
||||
//@import "modifiers/header-horizontal";
|
||||
|
||||
// Header Themes
|
||||
|
||||
@import "themes/header-light";
|
||||
@import "themes/header-dark";
|
||||
//@import "themes/header-inverted";
|
||||
@@ -0,0 +1,25 @@
|
||||
// Fixed Header
|
||||
|
||||
.fixed-header {
|
||||
.app-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
|
||||
.app-header__logo {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding-top: $app-header-height;
|
||||
}
|
||||
|
||||
&:not(.fixed-sidebar):not(.closed-sidebar) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// Header Buttons
|
||||
|
||||
.header-btn-lg {
|
||||
padding-inline-start: ($layout-spacer-x);
|
||||
margin-inline-start: ($layout-spacer-x);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 50%;
|
||||
background: $border-color;
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .header-btn-lg {
|
||||
padding-inline-start: ($layout-spacer-x) !important;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: unset;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// Header Dots
|
||||
|
||||
.header-dots {
|
||||
margin-inline-start: auto;
|
||||
display: flex;
|
||||
|
||||
& > .dropdown {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.icon-wrapper-alt {
|
||||
margin: 0;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
overflow: visible;
|
||||
|
||||
.language-icon {
|
||||
@include border-radius(30px);
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -22px 0 0 -20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
opacity: .1;
|
||||
transition: opacity .2s;
|
||||
@include border-radius(40px);
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
svg {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.icon-wrapper-bg {
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// Header Horizontal
|
||||
|
||||
.app-horizontal-header-layout {
|
||||
.app-header__logo {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-dots {
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
.header-btn-lg:first-child {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-menu {
|
||||
background: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex: 1;
|
||||
padding: 0 $layout-spacer-x;
|
||||
height: $app-header-height;
|
||||
}
|
||||
|
||||
.horizontal-nav-menu {
|
||||
.metismenu-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.visible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.metismenu-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.metismenu-link {
|
||||
padding: ($layout-spacer-x / 2.5) $layout-spacer-x;
|
||||
color: $gray-800;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.metismenu-icon {
|
||||
margin-inline-end: 0.5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > .metismenu-link {
|
||||
color: $primary;
|
||||
background: $dropdown-link-hover-bg;
|
||||
|
||||
.metismenu-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
position: absolute;
|
||||
background: $dropdown-border-color;
|
||||
box-shadow: $box-shadow-default;
|
||||
background: $dropdown-bg;
|
||||
padding: $layout-spacer-x;
|
||||
visibility: hidden !important;
|
||||
z-index: 25;
|
||||
min-width: 20rem;
|
||||
@include border-bottom-radius($dropdown-border-radius);
|
||||
|
||||
.metismenu-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.metismenu-link {
|
||||
padding: ($layout-spacer-x / 4) ($layout-spacer-x);
|
||||
display: block;
|
||||
color: $gray-800;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.metismenu-container {
|
||||
visibility: visible !important;
|
||||
|
||||
.metismenu-item > .metismenu-link {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// Header Mega Menu
|
||||
|
||||
.header-megamenu {
|
||||
&.nav {
|
||||
& > li > .nav-link {
|
||||
color: $gray-600;
|
||||
padding-inline-start: ($nav-link-padding-x / 1.5);
|
||||
padding-inline-end: ($nav-link-padding-x / 1.5);
|
||||
|
||||
.badge-pill {
|
||||
padding: 5px 7px;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
// Header Dark
|
||||
|
||||
.app-header {
|
||||
&.header-text-dark {
|
||||
.app-header-left > .nav > li > .nav-link {
|
||||
color: rgba(0,0,0,.7);
|
||||
|
||||
.nav-link-icon {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba(0,0,0,1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
.icon-wrapper-alt {
|
||||
|
||||
svg {
|
||||
fill: rgba(0,0,0,.7);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(0,0,0,.1) !important;
|
||||
transition: all .2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: rgba(0,0,0,.95);
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(0,0,0,.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-content-left {
|
||||
|
||||
& > .btn-group > .btn-link,
|
||||
.widget-heading,
|
||||
.widget-subheading {
|
||||
color: rgba(0,0,0,.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
.input-holder {
|
||||
.search-icon {
|
||||
background: rgba(0,0,0,.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.input-holder {
|
||||
background: rgba(0,0,0,.1);
|
||||
|
||||
.search-input {
|
||||
color: rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
background: rgba(0,0,0,.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg {
|
||||
&::before {
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg,
|
||||
.header__pane {
|
||||
.hamburger-inner,
|
||||
.hamburger.is-active .hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(0, 0, 0, .8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper .input-holder .search-icon span::after {
|
||||
border-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.search-wrapper .close::before,
|
||||
.search-wrapper .close::after,
|
||||
.search-wrapper .input-holder .search-icon span::before {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
.logo-src {
|
||||
background: url(../images/logo/logo-small.png);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
// Header Light
|
||||
|
||||
.app-header {
|
||||
&.header-text-light {
|
||||
.app-header-left > .nav > li > .nav-link {
|
||||
color: rgba(255, 255, 255, .7);
|
||||
|
||||
.nav-link-icon {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-right {
|
||||
.icon-wrapper-alt {
|
||||
|
||||
svg {
|
||||
fill: rgba(255, 255, 255, .7);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(255, 255, 255, .1) !important;
|
||||
transition: all .2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: rgba(255, 255, 255, .95);
|
||||
}
|
||||
|
||||
.icon-wrapper-bg {
|
||||
background: rgba(255, 255, 255, .15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header-btn-lg {
|
||||
|
||||
& .widget-content-left .btn-group > .btn-link,
|
||||
.widget-heading,
|
||||
.widget-subheading {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.header-user-info {
|
||||
& > .btn-shadow {
|
||||
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, .1), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
.input-holder {
|
||||
.search-icon {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder,
|
||||
&:-ms-input-placeholder,
|
||||
&:-moz-placeholder,
|
||||
&::-moz-placeholder {
|
||||
color: rgba(255, 255, 255, .5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.input-holder {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
|
||||
.search-input {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg {
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-lg,
|
||||
.header__pane {
|
||||
.hamburger-inner,
|
||||
.hamburger.is-active .hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(255, 255, 255, .8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper .input-holder .search-icon span::after {
|
||||
border-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.search-wrapper .close::before,
|
||||
.search-wrapper .close::after,
|
||||
.search-wrapper .input-holder .search-icon span::before {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
.logo-src {
|
||||
background: url(../images/logo/logo-small.png);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__mobile-menu {
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background: rgba(255, 255, 255, .9);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
// Main Base
|
||||
|
||||
.app-main {
|
||||
z-index: 8;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.app-main__outer {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
z-index: 12;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.app-main__inner {
|
||||
padding: $grid-gutter-width $grid-gutter-width 0;
|
||||
flex: 1;
|
||||
|
||||
& > .RRT__container {
|
||||
& > .RRT__panel {
|
||||
margin-top: $grid-gutter-width;
|
||||
}
|
||||
|
||||
& > .body-tabs-layout {
|
||||
.RRT__tab {
|
||||
margin-top: (-($layout-spacer-x / 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate Section Tabs
|
||||
|
||||
.body-tabs-shadow-btn {
|
||||
|
||||
.app-main__inner {
|
||||
& > .RRT__container {
|
||||
& > .RRT__panel {
|
||||
margin-top: ($grid-gutter-width / 1.5);
|
||||
}
|
||||
|
||||
.body-tabs-layout {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
|
||||
.RRT__showmore {
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.RRT__tab {
|
||||
margin-top: $nav-link-padding-y;
|
||||
}
|
||||
|
||||
.RRT__tab--selected {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
& + .RRT__inkbar-wrapper {
|
||||
position: absolute;
|
||||
top: ($nav-link-padding-y * 2.2);
|
||||
z-index: 5;
|
||||
|
||||
.RRT__inkbar {
|
||||
height: 35px;
|
||||
margin-top: 0;
|
||||
@include border-radius($border-radius);
|
||||
box-shadow:
|
||||
0 16px 26px -10px rgba($primary, 0.56),
|
||||
0 4px 25px 0px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba($primary, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Themes
|
||||
|
||||
@import "themes/main-white";
|
||||
@import "themes/main-gray";
|
||||
//@import "themes/main-inverted-blue";
|
||||
//@import "themes/main-inverted-black";
|
||||
@@ -0,0 +1,84 @@
|
||||
// Theme Gray
|
||||
|
||||
// Variables
|
||||
|
||||
$app-container-bg: #ffffff;
|
||||
$app-sidebar-bg: #ffffff;
|
||||
$app-header-bg: #f8f9fa;
|
||||
$app-header-logo-bg: rgba(0, 0, 0, .03);
|
||||
|
||||
// Content
|
||||
|
||||
.app-theme-gray {
|
||||
|
||||
&.app-container {
|
||||
background: $app-container-bg;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
background: $app-sidebar-bg;
|
||||
border-right: $gray-300 solid 1px;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
background: rgba(0, 0, 0, .03);
|
||||
}
|
||||
|
||||
.app-footer,
|
||||
.app-header {
|
||||
background: $app-header-bg;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
border-top: $gray-300 solid 1px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
border-right: rgba(0, 0, 0, .1) solid 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
.app-header__logo {
|
||||
background: $app-header-logo-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
box-shadow: 0 0 0 0 transparent !important;
|
||||
|
||||
& > .card-body {
|
||||
|
||||
& > .card-title {
|
||||
text-transform: none;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: normal;
|
||||
border-bottom: $gray-300 solid 1px;
|
||||
position: relative;
|
||||
padding: 0 0 ($card-spacer-y * 1.5);
|
||||
margin: 0 0 ($card-spacer-y * 1.5);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
background: $primary;
|
||||
@include border-radius(30px);
|
||||
height: 5px;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-inner-layout__sidebar {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Theme White
|
||||
|
||||
// Variables
|
||||
|
||||
$app-container-bg: #f1f4f6;
|
||||
$app-sidebar-bg: #ffffff;
|
||||
$app-header-bg: #fafbfc;
|
||||
$app-header-logo-bg: rgba(255, 255, 255, .9);
|
||||
|
||||
// Content
|
||||
|
||||
.app-theme-white {
|
||||
|
||||
&.app-container {
|
||||
background: $app-container-bg;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
background: $app-sidebar-bg;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
background: rgba(255, 255, 255, .55);
|
||||
}
|
||||
|
||||
.app-footer .app-footer__inner,
|
||||
.app-header {
|
||||
background: $app-header-bg;
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
.app-header__logo {
|
||||
background: rgba($app-header-bg, .1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,929 @@
|
||||
// Responsive
|
||||
|
||||
@media only screen and (max-width: 1320px) {
|
||||
.header-user-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.app-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
flex: 0 0 $app-sidebar-width !important;
|
||||
width: $app-sidebar-width !important;
|
||||
transform: translateX(-$app-sidebar-width);
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-open {
|
||||
.app-sidebar {
|
||||
transform: translateX(0);
|
||||
|
||||
.app-sidebar__inner {
|
||||
.app-sidebar__heading {
|
||||
text-indent: initial;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
text-indent: initial;
|
||||
padding: 0 $layout-spacer-x 0 45px;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: initial;
|
||||
left: 5px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
&.visible {
|
||||
padding: 0.5em 0 0 2rem;
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
.metismenu-link {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
width: auto !important;
|
||||
|
||||
.logo-src {
|
||||
width: $logo-width !important;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-sidebar .app-sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-mobile-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
.app-main__outer {
|
||||
padding-inline-start: 0 !important;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
justify-content: space-between;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
order: 2;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.app-header__content {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
box-shadow: $box-shadow-default;
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
top: 0;
|
||||
transition: all 0.2s;
|
||||
background: $white;
|
||||
@include border-radius(50px);
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.header-btn-lg {
|
||||
margin-inline-start: 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
.hamburger-box {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
& + .header-btn-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-left {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.header-mobile-open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: $app-header-height + 20;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__mobile-menu {
|
||||
display: flex;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.app-header__menu {
|
||||
display: flex;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&.header-text-light {
|
||||
.app-header__menu {
|
||||
& > span .btn,
|
||||
& > .btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-mobile-open {
|
||||
background: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu {
|
||||
position: fixed !important;
|
||||
z-index: 50;
|
||||
left: 5% !important;
|
||||
top: 50% !important;
|
||||
width: 90% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
min-width: 10px !important;
|
||||
|
||||
.btn-icon-vertical .btn-icon-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: initial;
|
||||
|
||||
.arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
text-align: center;
|
||||
|
||||
.page-title-heading,
|
||||
.page-title-wrapper {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-title-actions {
|
||||
margin: ($grid-gutter-width / 2) auto 0;
|
||||
}
|
||||
|
||||
.page-title-actions,
|
||||
.page-title-subheading {
|
||||
.breadcrumb-item,
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
|
||||
.app-footer .app-footer__inner {
|
||||
.app-footer-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-footer-left {
|
||||
width: 100%;
|
||||
|
||||
.footer-dots {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
&.closed-sidebar {
|
||||
.app-footer {
|
||||
.app-footer__inner {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Components
|
||||
|
||||
.widget-content {
|
||||
.widget-numbers {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 650px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.body-tabs.body-tabs-layout {
|
||||
&.body-tabs-big {
|
||||
display: block !important;
|
||||
|
||||
.RRT__tab {
|
||||
display: inline-block !important;
|
||||
padding: 0 $layout-spacer-x !important;
|
||||
}
|
||||
|
||||
.RRT__showmore {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ReactTable .-pagination {
|
||||
.-center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.-previous {
|
||||
padding-inline-end: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-transparent.list-group-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tabs-lg-alternate.card-header {
|
||||
& > .nav .nav-item {
|
||||
.widget-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-head {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
.app-page-title .page-title-icon,
|
||||
.ui-theme-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
&.responsive-center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
padding: $layout-spacer-x;
|
||||
|
||||
.nav,
|
||||
.btn-actions-pane-right {
|
||||
margin: ($layout-spacer-x / 2) 0 0;
|
||||
|
||||
.d-inline-block.ml-2 {
|
||||
width: 100% !important;
|
||||
text-align: start;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 650px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 850px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.-hide-paging .-pagination .-center {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.app-main .app-main__inner {
|
||||
padding: 15px 15px 0;
|
||||
}
|
||||
|
||||
.mbg-3,
|
||||
body .card.mb-3 {
|
||||
margin-bottom: ($grid-gutter-width / 2) !important;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
padding: ($grid-gutter-width / 2);
|
||||
margin: (-($grid-gutter-width / 2)) (-($grid-gutter-width / 2))
|
||||
$grid-gutter-width;
|
||||
}
|
||||
|
||||
.body-tabs.body-tabs-layout {
|
||||
margin-inline-start: (-($grid-gutter-width / 2));
|
||||
margin-inline-end: (-($grid-gutter-width / 2));
|
||||
padding: 0 ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.app-main .app-main__inner > .RRT__container > .RRT__panel {
|
||||
margin-top: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu {
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
body .card-header {
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: ($layout-spacer-x / 2) $layout-spacer-x;
|
||||
text-align: center;
|
||||
|
||||
.btn-actions-pane-right {
|
||||
padding: ($layout-spacer-x / 2) 0 0;
|
||||
}
|
||||
|
||||
.actions-icon-btn {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
&.card-header-tab {
|
||||
.card-header-title {
|
||||
display: inline-flex !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
& > .nav {
|
||||
margin: ($layout-spacer-x / 2) 0 (-($layout-spacer-x / 2));
|
||||
display: table !important;
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-responsive-sm,
|
||||
.profile-responsive {
|
||||
.dropdown-menu-header .menu-header-content.btn-pane-right {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.avatar-icon-wrapper {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.menu-header-btn-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm .slick-slider .slick-prev {
|
||||
left: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.slick-slider-sm .slick-slider .slick-next {
|
||||
right: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
|
||||
.profile-responsive {
|
||||
.dropdown-menu-header .menu-header-content.btn-pane-right {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.avatar-icon-wrapper {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.menu-header-btn-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] {
|
||||
// Responsive
|
||||
|
||||
@media only screen and (max-width: 1320px) {
|
||||
.header-user-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.app-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
flex: 0 0 $app-sidebar-width !important;
|
||||
width: $app-sidebar-width !important;
|
||||
transform: translateX($app-sidebar-width);
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-open {
|
||||
.app-sidebar {
|
||||
transform: translateX(0);
|
||||
|
||||
.app-sidebar__inner {
|
||||
.app-sidebar__heading {
|
||||
text-indent: initial;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
text-indent: initial;
|
||||
padding: 0 45px 0 $layout-spacer-x;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: initial;
|
||||
right: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
&.visible {
|
||||
padding: 0.5em 2rem 0 0;
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
.metismenu-link {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
width: auto !important;
|
||||
|
||||
.logo-src {
|
||||
width: $logo-width !important;
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-sidebar .app-sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-mobile-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
.app-main__outer {
|
||||
padding-right: 0 !important;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
justify-content: space-between;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
order: 2;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.app-header__content {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
box-shadow: $box-shadow-default;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 90%;
|
||||
top: 0;
|
||||
transition: all 0.2s;
|
||||
background: $white;
|
||||
@include border-radius(50px);
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.header-btn-lg {
|
||||
margin-right: 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
.hamburger-box {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
& + .header-btn-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header-left {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.header-mobile-open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: $app-header-height + 20;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__mobile-menu {
|
||||
display: flex;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.app-header__menu {
|
||||
display: flex;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&.header-text-light {
|
||||
.app-header__menu {
|
||||
& > span .btn,
|
||||
& > .btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-mobile-open {
|
||||
background: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
right: 5% !important;
|
||||
top: 50% !important;
|
||||
width: 90% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
min-width: 10px !important;
|
||||
|
||||
.btn-icon-vertical .btn-icon-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: initial;
|
||||
|
||||
.arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
text-align: center;
|
||||
|
||||
.page-title-heading,
|
||||
.page-title-wrapper {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-title-actions {
|
||||
margin: ($grid-gutter-width / 2) auto 0;
|
||||
}
|
||||
|
||||
.page-title-actions,
|
||||
.page-title-subheading {
|
||||
.breadcrumb-item,
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
|
||||
.app-footer .app-footer__inner {
|
||||
.app-footer-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-footer-left {
|
||||
width: 100%;
|
||||
|
||||
.footer-dots {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
&.closed-sidebar {
|
||||
.app-footer {
|
||||
.app-footer__inner {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Components
|
||||
|
||||
.widget-content {
|
||||
.widget-numbers {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 650px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.body-tabs.body-tabs-layout {
|
||||
&.body-tabs-big {
|
||||
display: block !important;
|
||||
|
||||
.RRT__tab {
|
||||
display: inline-block !important;
|
||||
padding: 0 $layout-spacer-x !important;
|
||||
}
|
||||
|
||||
.RRT__showmore {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ReactTable .-pagination {
|
||||
.-center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.-previous {
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-transparent.list-group-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tabs-lg-alternate.card-header {
|
||||
& > .nav .nav-item {
|
||||
.widget-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-head {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
.app-page-title .page-title-icon,
|
||||
.ui-theme-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
&.responsive-center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
padding: $layout-spacer-x;
|
||||
|
||||
.nav,
|
||||
.btn-actions-pane-right {
|
||||
margin: ($layout-spacer-x / 2) 0 0;
|
||||
|
||||
.d-inline-block.ml-2 {
|
||||
width: 100% !important;
|
||||
text-align: right;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 650px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.slick-slider-sm {
|
||||
.slick-slider {
|
||||
max-width: 850px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.-hide-paging .-pagination .-center {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.app-main .app-main__inner {
|
||||
padding: 15px 15px 0;
|
||||
}
|
||||
|
||||
.mbg-3,
|
||||
body .card.mb-3 {
|
||||
margin-bottom: ($grid-gutter-width / 2) !important;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
padding: ($grid-gutter-width / 2);
|
||||
margin: (-($grid-gutter-width / 2)) (-($grid-gutter-width / 2))
|
||||
$grid-gutter-width;
|
||||
}
|
||||
|
||||
.body-tabs.body-tabs-layout {
|
||||
margin-left: (-($grid-gutter-width / 2));
|
||||
margin-right: (-($grid-gutter-width / 2));
|
||||
padding: 0 ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.app-main .app-main__inner > .RRT__container > .RRT__panel {
|
||||
margin-top: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.popover,
|
||||
.dropdown-menu {
|
||||
width: 80%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
body .card-header {
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: ($layout-spacer-x / 2) $layout-spacer-x;
|
||||
text-align: center;
|
||||
|
||||
.btn-actions-pane-right {
|
||||
padding: ($layout-spacer-x / 2) 0 0;
|
||||
}
|
||||
|
||||
.actions-icon-btn {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
&.card-header-tab {
|
||||
.card-header-title {
|
||||
display: inline-flex !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
& > .nav {
|
||||
margin: ($layout-spacer-x / 2) 0 (-($layout-spacer-x / 2));
|
||||
display: table !important;
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-responsive-sm,
|
||||
.profile-responsive {
|
||||
.dropdown-menu-header .menu-header-content.btn-pane-right {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.avatar-icon-wrapper {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.menu-header-btn-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider-sm .slick-slider .slick-prev {
|
||||
right: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.slick-slider-sm .slick-slider .slick-next {
|
||||
left: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
|
||||
.profile-responsive {
|
||||
.dropdown-menu-header .menu-header-content.btn-pane-right {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.avatar-icon-wrapper {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.menu-header-btn-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
// Sidebar Base
|
||||
|
||||
.app-sidebar {
|
||||
width: $app-sidebar-width;
|
||||
display: flex;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
min-width: $app-sidebar-width;
|
||||
position: relative;
|
||||
flex: 0 0 $app-sidebar-width;
|
||||
margin-top: -$app-header-height;
|
||||
padding-top: $app-header-height;
|
||||
transition: all .2s;
|
||||
|
||||
.app-sidebar__inner {
|
||||
padding: 2px ($layout-spacer-x) $layout-spacer-x;
|
||||
}
|
||||
|
||||
.scrollbar-container {
|
||||
z-index: 15;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-sidebar-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.05;
|
||||
background-size: cover;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&.sidebar-shadow {
|
||||
box-shadow: 7px 0 60px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-transform: uppercase;
|
||||
font-size: $font-size-xs;
|
||||
margin: ($layout-spacer-x / 2) 0;
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-mobile-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #333;
|
||||
opacity: .6;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
// Sidebar Components
|
||||
|
||||
@import "modifiers/navmenu-vertical";
|
||||
|
||||
// Sidebar Modifiers
|
||||
|
||||
@import "themes/sidebar-light";
|
||||
@import "themes/sidebar-dark";
|
||||
//@import "themes/sidebar-inverted";
|
||||
|
||||
|
||||
@import "modifiers/fixed-sidebar";
|
||||
@import "modifiers/closed-sidebar";
|
||||
@@ -0,0 +1,417 @@
|
||||
// Closed Sidebar
|
||||
|
||||
// Sidebar Menu Hover
|
||||
|
||||
.closed-sidebar {
|
||||
.app-sidebar {
|
||||
transition: all .3s ease;
|
||||
width: $app-sidebar-width-collapsed;
|
||||
min-width: $app-sidebar-width-collapsed;
|
||||
flex: 0 0 $app-sidebar-width-collapsed;
|
||||
z-index: 13;
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: -999em;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $dropdown-link-hover-bg;
|
||||
text-indent: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
text-indent: -99rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: 0;
|
||||
left: 50%;
|
||||
margin-inline-start: -17px;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
&.visible {
|
||||
padding: 0;
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
flex: 0 0 $app-sidebar-width !important;
|
||||
width: $app-sidebar-width !important;
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: initial;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
text-indent: initial;
|
||||
padding: 0 $layout-spacer-x 0 45px;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: initial;
|
||||
left: 5px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
&.visible {
|
||||
padding: .5em 0 0 2rem;
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
.metismenu-link {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.sidebar-mobile-open) {
|
||||
|
||||
.app-sidebar {
|
||||
.scrollbar-container {
|
||||
position: static;
|
||||
height: auto;
|
||||
overflow: initial !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.scrollbar-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.closed-sidebar-mobile) {
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
width: 160px;
|
||||
|
||||
.logo-src {
|
||||
background: url(../images/logo/logo-square-small.png)
|
||||
no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.fixed-sidebar {
|
||||
.app-main__outer {
|
||||
padding-inline-start: $app-sidebar-width-collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header:not(.fixed-sidebar) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-sidebar-mobile {
|
||||
.app-sidebar,
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
width: auto;
|
||||
display: flex;
|
||||
|
||||
.header__pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
width: $app-sidebar-width-collapsed;
|
||||
padding: 0 $layout-spacer-x !important;
|
||||
|
||||
.logo-src {
|
||||
display: block !important;
|
||||
margin: 0 auto;
|
||||
width: $logo-width - 76;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width;
|
||||
|
||||
.logo-src {
|
||||
width: $logo-width;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-footer {
|
||||
.app-footer__inner {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right to Left language
|
||||
|
||||
[dir="rtl"] .closed-sidebar {
|
||||
.app-sidebar {
|
||||
transition: all .3s ease;
|
||||
width: $app-sidebar-width-collapsed;
|
||||
min-width: $app-sidebar-width-collapsed;
|
||||
flex: 0 0 $app-sidebar-width-collapsed;
|
||||
z-index: 13;
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: -999em;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $dropdown-link-hover-bg;
|
||||
text-indent: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
text-indent: -99rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: 0;
|
||||
right: 50%;
|
||||
margin-right: -17px;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
&.visible {
|
||||
padding: 0;
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
flex: 0 0 $app-sidebar-width !important;
|
||||
width: $app-sidebar-width !important;
|
||||
|
||||
.app-sidebar__inner {
|
||||
|
||||
.app-sidebar__heading {
|
||||
text-indent: initial;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
text-indent: initial;
|
||||
padding: 0 45px 0 $layout-spacer-x;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
text-indent: initial;
|
||||
right: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.metismenu-state-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
&.visible {
|
||||
padding: .5em 2rem 0 0;
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
.metismenu-link {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.sidebar-mobile-open) {
|
||||
|
||||
.app-sidebar {
|
||||
.scrollbar-container {
|
||||
position: static;
|
||||
height: auto;
|
||||
overflow: initial !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.scrollbar-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.closed-sidebar-mobile) {
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
width: 160px;
|
||||
|
||||
.logo-src {
|
||||
background: url(../images/logo/logo-square-small.png)
|
||||
no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.fixed-sidebar {
|
||||
.app-main__outer {
|
||||
padding-right: $app-sidebar-width-collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header:not(.fixed-sidebar) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-sidebar-mobile {
|
||||
.app-sidebar,
|
||||
.app-header {
|
||||
.app-header__logo {
|
||||
width: auto;
|
||||
display: flex;
|
||||
|
||||
.header__pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
width: $app-sidebar-width-collapsed;
|
||||
padding: 0 $layout-spacer-x !important;
|
||||
|
||||
.logo-src {
|
||||
display: block !important;
|
||||
margin: 0 auto;
|
||||
width: $logo-width - 76;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width;
|
||||
|
||||
.logo-src {
|
||||
width: $logo-width;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-footer {
|
||||
.app-footer__inner {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
// Fixed Sidebar
|
||||
|
||||
.fixed-sidebar {
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
.app-main__outer {
|
||||
z-index: 9;
|
||||
padding-inline-start: $app-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.fixed-header) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
margin-inline-start: $app-sidebar-width;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
//z-index: 12;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-sidebar {
|
||||
&:not(.fixed-header) {
|
||||
.app-header {
|
||||
margin-inline-start: $app-sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width-collapsed;
|
||||
padding: 0;
|
||||
|
||||
.logo-src {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right to Left language
|
||||
|
||||
[dir='rtl'] .fixed-sidebar {
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
.app-main__outer {
|
||||
z-index: 9;
|
||||
padding-right: $app-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.fixed-header) {
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
margin-right: $app-sidebar-width;
|
||||
|
||||
.app-header__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
//z-index: 12;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-sidebar {
|
||||
&:not(.fixed-header) {
|
||||
.app-header {
|
||||
margin-right: $app-sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
.app-header__logo {
|
||||
width: $app-sidebar-width-collapsed;
|
||||
padding: 0;
|
||||
|
||||
.logo-src {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__pane {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
// Navigation Menu Vertical
|
||||
|
||||
.vertical-nav-menu {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.metismenu-container,
|
||||
.metismenu-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.metismenu-container {
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
transition: transform .2s, height 300ms, color 300ms, background-color 300ms;
|
||||
display: block;
|
||||
line-height: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 $layout-spacer-x 0 45px;
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
color: $gray-800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background: $dropdown-link-hover-bg;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
//transform: scale(1.02);
|
||||
|
||||
i.metismenu-icon {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
background: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&.has-active-child,
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
i.metismenu-state-icon,
|
||||
i.metismenu-icon {
|
||||
text-align: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
font-size: 1.5rem;
|
||||
opacity: .3;
|
||||
transition: color 300ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
transition: transform 300ms;
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
&:focus {
|
||||
outline-color: $secondary;
|
||||
}
|
||||
|
||||
&.rotate-minus-90 {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
transition: padding 300ms;
|
||||
|
||||
&.visible {
|
||||
padding: .5em 0 0 2rem;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
width: 3px;
|
||||
background: $dropdown-link-hover-bg;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 2.3em;
|
||||
line-height: 2.3em;
|
||||
color: $gray-600;
|
||||
margin: 0 0 3px;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
background: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right to Left language
|
||||
|
||||
[dir="rtl"] .vertical-nav-menu {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.metismenu-container,
|
||||
.metismenu-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.metismenu-container {
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
transition: transform .2s, height 300ms, color 300ms, background-color 300ms;
|
||||
display: block;
|
||||
line-height: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 45px 0 $layout-spacer-x;
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
color: $gray-800;
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
background: $dropdown-link-hover-bg;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
//transform: scale(1.02);
|
||||
|
||||
i.metismenu-icon {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
background: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&.has-active-child,
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
i.metismenu-state-icon,
|
||||
i.metismenu-icon {
|
||||
text-align: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
font-size: 1.5rem;
|
||||
opacity: .3;
|
||||
transition: color 300ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i.metismenu-state-icon {
|
||||
transition: transform 300ms;
|
||||
right: auto;
|
||||
left: 0;
|
||||
|
||||
&.rotate-minus-90 {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-container {
|
||||
transition: padding 300ms;
|
||||
|
||||
&.visible {
|
||||
padding: .5em 2rem 0 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
width: 3px;
|
||||
background: $dropdown-link-hover-bg;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
& > .metismenu-item > .metismenu-link {
|
||||
height: 2.3em;
|
||||
line-height: 2.3em;
|
||||
color: $gray-600;
|
||||
margin: 0 0 3px;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.metismenu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
background: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu-link {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
// Sidebar Light
|
||||
|
||||
.app-sidebar {
|
||||
&.sidebar-text-dark {
|
||||
border-right: 0 !important;
|
||||
|
||||
.app-sidebar__heading {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
|
||||
&::before {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
.metismenu-container {
|
||||
.metismenu-link {
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&.metismenu-container {
|
||||
&.visible {
|
||||
.metismenu-item > .metismenu-link {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
i.metismenu-state-icon,
|
||||
i.metismenu-icon {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.ps__rail-y:hover {
|
||||
.ps__thumb-y {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
// Sidebar Light
|
||||
|
||||
.app-sidebar {
|
||||
&.sidebar-text-light {
|
||||
border-right: 0 !important;
|
||||
|
||||
.app-sidebar__heading {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.metismenu {
|
||||
.metismenu-container {
|
||||
.metismenu-link {
|
||||
color: rgba(255, 255, 255, .7);
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&.metismenu-container {
|
||||
&.visible {
|
||||
.metismenu-item > .metismenu-link {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.metismenu-state-icon,
|
||||
i.metismenu-icon {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.ps__rail-y:hover {
|
||||
.ps__thumb-y {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
.logo-src {
|
||||
background: url(../images/logo/logo-small.png);
|
||||
}
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user