420 lines
18 KiB
CSS
420 lines
18 KiB
CSS
/* Navbar */
|
|
.page-body-wrapper {
|
|
min-height: calc(100vh - 63px);
|
|
background: #f3f4fa;
|
|
padding-left: 0;
|
|
padding-right: 0; }
|
|
.page-body-wrapper.full-page-wrapper {
|
|
width: 100%;
|
|
min-height: 100vh; }
|
|
|
|
.main-panel {
|
|
min-height: calc(100vh - 63px);
|
|
margin-left: auto; }
|
|
|
|
.content-wrapper {
|
|
padding: 1.5rem 0;
|
|
width: 100%;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1; }
|
|
|
|
@-webkit-keyframes dropdownAnimation {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0); }
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
-webkit-transform: translate3d(0, 0px, 0);
|
|
transform: translate3d(0, 0px, 0); } }
|
|
|
|
@keyframes dropdownAnimation {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0); }
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
-webkit-transform: translate3d(0, 0px, 0);
|
|
transform: translate3d(0, 0px, 0); } }
|
|
|
|
.navbar.horizontal-layout {
|
|
font-family: "Poppins", sans-serif;
|
|
background: #ffffff;
|
|
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08); }
|
|
.navbar.horizontal-layout .nav-top {
|
|
padding: 0px 15px; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper {
|
|
width: 185px;
|
|
height: 63px; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .navbar-brand {
|
|
color: #ffffff;
|
|
font-size: 1.5rem;
|
|
line-height: 55px;
|
|
margin-right: 0;
|
|
padding: 0.25rem 0; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .navbar-brand:active, .navbar.horizontal-layout .nav-top .navbar-brand-wrapper .navbar-brand:focus, .navbar.horizontal-layout .nav-top .navbar-brand-wrapper .navbar-brand:hover {
|
|
color: #424546; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .navbar-brand img {
|
|
max-width: 100%;
|
|
height: 28px;
|
|
margin: auto;
|
|
vertical-align: middle; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .brand-logo-mini {
|
|
display: none; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .brand-logo-mini img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
height: 28px;
|
|
margin-left: 0; }
|
|
@media (max-width: 576px) {
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper {
|
|
width: 70px; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .brand-logo {
|
|
display: none; }
|
|
.navbar.horizontal-layout .nav-top .navbar-brand-wrapper .brand-logo-mini {
|
|
display: block; } }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper {
|
|
color: #ffffff;
|
|
padding-left: 15px;
|
|
width: calc(100% - 185px);
|
|
position: relative; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box {
|
|
-webkit-transition: 0.3s ease;
|
|
transition: 0.3s ease;
|
|
-webkit-transition-property: position, width, height, background-color;
|
|
transition-property: position, width, height, background-color; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box .input-group-text {
|
|
padding-right: 0;
|
|
border-top: none;
|
|
border-right: none;
|
|
border-bottom: none; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box .form-control {
|
|
border: none;
|
|
font-weight: 600;
|
|
-webkit-transition: 0.3s ease;
|
|
transition: 0.3s ease;
|
|
-webkit-transition-property: position, width, height, background-color;
|
|
transition-property: position, width, height, background-color; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box .search-close {
|
|
display: none; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
z-index: 99;
|
|
height: 100%;
|
|
width: 100%; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .input-group-text {
|
|
font-size: 24px; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .form-control {
|
|
height: 100%;
|
|
font-size: 20px;
|
|
font-weight: 500; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .form-control::-webkit-input-placeholder {
|
|
font-size: inherit;
|
|
font-weight: inherit; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .form-control:-moz-placeholder {
|
|
font-size: inherit;
|
|
font-weight: inherit; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .form-control::-moz-placeholder {
|
|
font-size: inherit;
|
|
font-weight: inherit; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .form-control:-ms-input-placeholder {
|
|
font-size: inherit;
|
|
font-weight: inherit; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .search-box.search-mode .search-close {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
right: 0;
|
|
z-index: 99;
|
|
font-size: 24px;
|
|
padding: 10px;
|
|
color: #2196f3; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav .nav-item {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
|
|
color: #202339;
|
|
font-size: 12px;
|
|
vertical-align: middle; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i {
|
|
font-size: 1.25rem;
|
|
vertical-align: middle; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav.quick-link .nav-item .nav-link {
|
|
margin-right: 10px;
|
|
font-weight: 500;
|
|
font-size: 14px; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav.quick-link .nav-item.active .nav-link {
|
|
color: #2196f3; }
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-toggler {
|
|
display: none; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-toggler {
|
|
display: block;
|
|
padding-right: 0; } }
|
|
@media (max-width: 576px) {
|
|
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper {
|
|
width: calc(100% - 70px); } }
|
|
.navbar.horizontal-layout .nav-bottom {
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-transition-duration: 3s;
|
|
transition-duration: 3s;
|
|
-webkit-transition-property: position, left, right, top;
|
|
transition-property: position, left, right, top;
|
|
background: #0404FC; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom {
|
|
display: none; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation {
|
|
float: left;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50px;
|
|
z-index: 99;
|
|
background: #0404FC;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-property: background, -webkit-box-shadow;
|
|
transition-property: background, -webkit-box-shadow;
|
|
transition-property: background, box-shadow;
|
|
transition-property: background, box-shadow, -webkit-box-shadow; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation {
|
|
border: none; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item {
|
|
line-height: 1;
|
|
width: 16.66%;
|
|
text-align: center; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item {
|
|
display: block;
|
|
width: 100%;
|
|
border-right: none;
|
|
text-align: left;
|
|
background: #0404FC; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:last-child {
|
|
border-right: none; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link {
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
font-weight: 500;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
height: 50px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link {
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: start;
|
|
background: #0404FC; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .link-icon {
|
|
margin-right: 10px;
|
|
font-size: 1.3rem;
|
|
color: #ffffff; }
|
|
.rtl .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .link-icon {
|
|
margin-right: 0;
|
|
margin-left: 10px; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-arrow {
|
|
margin-left: 5px;
|
|
font-size: 15px;
|
|
display: inline-block;
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transition-duration: 0.25s;
|
|
transition-duration: 0.25s; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-arrow:before {
|
|
font: normal normal normal 24px/1 "Material Design Icons";
|
|
content: "\F35D";
|
|
font-size: inherit; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover .submenu {
|
|
display: block;
|
|
background: #ffffff; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link {
|
|
background: #0303e9; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link .menu-arrow {
|
|
-webkit-transform: rotate(-180deg);
|
|
transform: rotate(-180deg); }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.active > .nav-link {
|
|
background: #0303e9;
|
|
color: #ffffff; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.active > .nav-link .link-icon,
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.active > .nav-link .menu-arrow {
|
|
color: #ffffff; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu {
|
|
display: none;
|
|
-webkit-animation-name: dropdownAnimation;
|
|
animation-name: dropdownAnimation;
|
|
-webkit-animation-duration: 0.25s;
|
|
animation-duration: 0.25s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul {
|
|
list-style-type: none;
|
|
padding-left: 0; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li {
|
|
display: block;
|
|
line-height: 20px; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a {
|
|
display: block;
|
|
padding: 5px 10px;
|
|
font-weight: 600;
|
|
color: #000;
|
|
text-decoration: none;
|
|
text-align: left;
|
|
margin: 4px 0;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-property: background;
|
|
transition-property: background;
|
|
border-radius: 6px; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a:hover {
|
|
background: rgba(33, 150, 243, 0.1); }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li.active a {
|
|
background: rgba(33, 150, 243, 0.1); }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu {
|
|
position: relative;
|
|
top: -100%; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu {
|
|
top: 0; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu ul {
|
|
padding: 15px; }
|
|
@media (min-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu ul {
|
|
position: absolute;
|
|
width: calc(150% - 1px);
|
|
left: 0;
|
|
right: 0;
|
|
top: 50px;
|
|
z-index: 999;
|
|
background: #ffffff;
|
|
border-top: none;
|
|
-webkit-box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.06); } }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu ul {
|
|
position: relative;
|
|
top: 0;
|
|
padding-top: 20px;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none; } }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu ul {
|
|
padding: 0 23px; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu {
|
|
top: calc($navbar-bottom-height - 2px);
|
|
left: 0;
|
|
padding: 25px; }
|
|
@media (min-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu {
|
|
position: absolute;
|
|
width: calc(100% - 1px);
|
|
left: 0;
|
|
right: 0;
|
|
top: 50px;
|
|
z-index: 999;
|
|
background: #ffffff;
|
|
border-top: none;
|
|
-webkit-box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.06); } }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu {
|
|
position: relative;
|
|
top: 0;
|
|
padding-top: 20px;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none; } }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu .category-heading {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
color: #2196f3;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid rgba(242, 242, 242, 0.6); }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu {
|
|
padding: 20px 32px; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu .col-group-wrapper {
|
|
margin-left: 0;
|
|
margin-right: 0; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu .col-group-wrapper .col-group {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-bottom: 20px; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu .col-group-wrapper .col-group .category-heading {
|
|
margin-bottom: 0; }
|
|
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu .col-group-wrapper .col-group .category-heading:after {
|
|
display: none; } }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom.header-toggled {
|
|
display: block;
|
|
background: transparent;
|
|
height: 0px; } }
|
|
.navbar.horizontal-layout .nav-bottom.fixed-top {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999; }
|
|
@media (max-width: 768px) {
|
|
.navbar.horizontal-layout .nav-bottom.fixed-top {
|
|
position: relative; } }
|
|
.navbar.horizontal-layout .nav-bottom.fixed-top .page-navigation {
|
|
margin-bottom: 0;
|
|
border-bottom: none;
|
|
-webkit-box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 8px 5px 0 rgba(0, 0, 0, 0.06); }
|
|
|
|
/*# sourceMappingURL=style.css.map */
|