at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user