File: /mnt/data/smarthr-co-in/demo/laravel_06/assets/scss/layout/_header.scss
/*-----------------
6. Header
-----------------------*/
header {
background: $white;
position: relative;
box-shadow: 0px 4px 34px 0px rgba(229, 229, 229, 0.25);
left: 0;
top: 0;
width: 100%;
z-index: 999;
@extend %animation-effect;
@include transition(all 0.9s);
&.fixed {
position: fixed !important;
top: 0 !important;
left: 0;
width: 100%;
z-index: 100;
@include transition(all 0.9s);
background-color: $white;
-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.logo {
a {
float: left;
img {
float: left;
max-height: 32px;
}
}
}
.header-nav {
.main-menu-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
position: relative;
padding: 8px 0;
margin-bottom: 0;
.main-nav {
>li {
padding: 13px 0;
>a {
color: $gray-900;
font-size: $font-size-16;
font-weight: $font-weight-medium;
@include respond-below(lg) {
font-size: $font-size-14;
}
@include respond-below(lg) {
color: $white;
}
&:hover {
color: $primary;
}
}
.submenu {
li {
position: relative;
&.active {
color: $primary;
>a {
color: $primary;
}
}
a {
display: block;
padding: 10px 15px 10px;
clear: both;
white-space: nowrap;
color: $black;
-webkit-transition: all .35s ease;
transition: all .35s ease;
width: 100%;
position: relative;
font-weight: $font-weight-medium;
@include respond-below(lg) {
padding: 10px;
color: $white;
font-size: $font-size-12;
}
&:hover {
color: $primary;
padding-left: 20px;
}
}
}
}
.login-link {
display: none;
}
}
}
}
}
.navbar-header {
.navbar-brand {
display: inline-block;
padding: 0;
line-height: 0;
@include respond-below(lg) {
margin-right: 0;
}
}
.logo {
@include respond-below(sm) {
display: none;
}
}
.logo-small {
display: none;
@include respond-below(sm) {
display: block;
width: 100%;
text-align: center;
}
}
#mobile_btn {
display: none;
margin-right: 30px;
@include respond-below(lg) {
display: inline-block;
line-height: 0;
}
@include respond-below(sm) {
left: 0;
margin-right: 0;
padding: 0 0px;
position: absolute;
z-index: 99;
}
.bar-icon {
display: inline-block;
width: 31px;
span {
background-color: $primary;
display: block;
float: left;
height: 3px;
margin-bottom: 7px;
width: 31px;
border-radius: 2px;
margin-bottom: 5px;
&:nth-child(2) {
width: 20px;
}
&:nth-child(3) {
width: 16px;
margin-bottom: 0;
}
}
}
}
@include respond-below(lg) {
display: -webkit-box;
display: -ms-flexbox;
display: inline-flex;
align-items: center;
}
@include respond-below(sm) {
width: 100%;
}
}
.main-menu-wrapper {
margin: 0 15px 0;
.menu-header {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 60px;
padding: 0 20px;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
display: none;
@include respond-below(lg) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 65px;
align-items: center;
background: $white;
}
.menu-logo {
img {
@include respond-below(lg) {
width: 160px;
}
}
}
.menu-close {
font-size: 18px;
color: $primary;
}
}
.main-nav {
>li {
.submenu {
>li {
.submenu {
left: 100%;
top: 0;
margin-top: 10px;
@include respond-below(lg) {
left: 0;
}
}
}
}
}
}
.main-nav {
>li {
.submenu {
>li.has-submenu {
>a {
&::after {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
right: 15px;
top: 12px;
font-size: 13px;
}
}
}
}
}
}
.main-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
&:last-child {
margin-right: 0;
}
> li {
@include respond-below(xl) {
margin-right: 10px !important;
&:last-child {
margin-right: 0;
border: 0;
}
}
@include respond-below(lg) {
margin-right: 0 !important;
&:last-child {
margin-right: 0;
border: 0;
}
}
&.active, &:hover {
>a {
display: block;
background: $primary-gradient;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 10px;
border-radius: 5px;
padding: 1px;
background: $primary-gradient;
-webkit-mask:
linear-gradient($white 0 0) content-box,
linear-gradient($white 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
}
}
a {
i {
font-size: $font-size-12;
margin-left: 3px;
}
@include respond-below(lg) {
display: block;
line-height: 20px;
padding: 12px 15px;
font-size: $font-size-14;
font-weight: $font-weight-medium;
color: $white;
i {
font-size: $font-size-14;
@include respond-below(lg) {
float: right;
margin-top: 5px;
font-size: $font-size-14;
}
}
}
}
&:last-child {
margin-right: 0;
}
@include respond-below(lg) {
border-bottom: 1px solid $black;
padding: 0;
}
@include respond-above(lg) {
display: block;
position: relative;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
}
@include respond-below(xl) {
margin-right: 20px;
}
ul {
@include respond-above(lg) {
background-color: $white ;
border-radius: 5px;
box-shadow: 0 0 3px rgb(0 0 0 / 10%);
display: block;
font-size: $font-size-14;
left: 0;
margin: 0;
min-width: 200px;
opacity: 0;
padding: 0;
position: absolute;
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
top: 100%;
visibility: hidden;
z-index: 1000;
}
}
}
@include respond-above(lg) {
li.has-submenu {
&:hover {
>.submenu {
visibility: visible;
opacity: 1;
margin-top: 0;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
border-radius: 2px;
border-top: 1px solid $primary;
}
}
}
}
@include respond-below(lg) {
.has-submenu {
ul {
display: none;
background: $primary;
}
}
}
li.login-link {
display: none;
@include respond-below(lg) {
display: block;
}
}
}
}
.header-btn {
.btn {
@include respond-below(xl) {
display: none;
}
}
}
.dropdown-toggle {
&::after {
display: none;
}
}
}
.menu-opened {
.main-menu-wrapper {
transform: translateX(0);
body {
overflow: hidden;
}
}
}
.header-topbar {
padding: 10px 0;
position: relative;
p {
a {
color: $light-900;
font-weight: $font-weight-bold;
position: relative;
&:hover {
color: $light-100;
opacity: 0.8;
}
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
background: $light;
width: 100%;
height: 1px;
}
}
}
}
.offcanvas-info {
background: $white none repeat scroll 0 0;
position: fixed;
right: 0;
top: 0;
width: 350px;
height: 100%;
-webkit-transform: translateX(calc(100% + 80px));
-moz-transform: translateX(calc(100% + 80px));
-ms-transform: translateX(calc(100% + 80px));
-o-transform: translateX(calc(100% + 80px));
transform: translateX(calc(100% + 80px));
-webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
-moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
z-index: 99999;
overflow-y: scroll;
overscroll-behavior-y: contain;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.offcanvas-info.show {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.offcanvas-wrap {
position: relative;
height: 100%;
padding: 24px;
.offcanvas-detail {
.offcanvas-close {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background-color: $danger;
position: relative;
z-index: 9;
cursor: pointer;
color: $white;
}
.offcanvas__contact {
margin-top: 20px;
.header-button {
.theme-btn {
width: 100%;
padding: 16px 40px;
}
}
}
}
}
.offcanvas-overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 900;
top: 0;
opacity: 0;
visibility: hidden;
right: 0;
}
.offcanvas-overlay.overlay-open {
opacity: 0.8;
visibility: visible;
}
@media (max-width: 575px) {
.offcanvas-info {
width: 300px;
}
.offcanvas-wrap {
padding: 20px;
}
}