definicao de layout
This commit is contained in:
927
public/assets/scss/theme/_header.scss
Normal file
927
public/assets/scss/theme/_header.scss
Normal file
@@ -0,0 +1,927 @@
|
||||
$header-size: 76px;
|
||||
|
||||
/**=====================
|
||||
05. Header CSS Start
|
||||
==========================**/
|
||||
|
||||
%common {
|
||||
border-left-color: $dark-color;
|
||||
transition: $sidebar-transition;
|
||||
}
|
||||
%for-animated-hover {
|
||||
box-shadow: 0 0 12px 3px rgba(25,124,207,0.05);
|
||||
transform: translateY(30px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
left: 0;
|
||||
}
|
||||
%for-animated-hover-box{
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
visibility: visible;
|
||||
&:before{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid $white;
|
||||
content: "";
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
&:after{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid $light-background;
|
||||
content: "";
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
%sidebar-icon {
|
||||
display: block;
|
||||
transform: rotateX(0deg);
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
color: $light-background;
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
margin-top: -70px;
|
||||
padding: 10px 0;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
|
||||
position: absolute;
|
||||
width: 245px;
|
||||
margin-left: 115px;
|
||||
}
|
||||
/*======= Page Header css Start ======= */
|
||||
.page-wrapper{
|
||||
.page-main-header{
|
||||
position: $main-header-position;
|
||||
top: $main-header-top;
|
||||
z-index: $main-header-z-index;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: $sidebar-transition;
|
||||
background-color: $white;
|
||||
box-shadow: $main-header-shadow;
|
||||
&.open{
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transition: $sidebar-transition;
|
||||
}
|
||||
|
||||
}
|
||||
.page-body-wrapper{
|
||||
background-color: $light-background;
|
||||
.page-body{
|
||||
min-height: calc(100vh - #{$header-size});
|
||||
margin-top: $header-size;
|
||||
padding: $page-body-padding;
|
||||
position: relative;
|
||||
transition: 0.5s;
|
||||
background-color: $light-background;
|
||||
}
|
||||
.page-header{
|
||||
// padding-top: $page-header-padding;
|
||||
padding-bottom: $page-header-padding;
|
||||
.row{
|
||||
align-items: center;
|
||||
h3{
|
||||
font-size: $page-title-font-size;
|
||||
margin-bottom: $page-title-margin-bottom;
|
||||
font-weight: $page-title-font-weight;
|
||||
text-transform: $page-title-text-tranform;
|
||||
small{
|
||||
display: $page-small-title-display;
|
||||
font-size: $page-small-title-font-size;
|
||||
margin-bottom: $page-small-title-margin-bottom;
|
||||
text-transform: $page-small-title-text-transform;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb{
|
||||
background-color: $transparent-color;
|
||||
padding: 0 ;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
li{
|
||||
color: $light-font;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.breadcrumb-item{
|
||||
&+.breadcrumb-item{
|
||||
&:before{
|
||||
content: $breadcrumb-content;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*======= Page Header css ends ======= */
|
||||
|
||||
|
||||
/**======Main Header css Start ======**/
|
||||
.page-main-header{
|
||||
max-width: 100vw;
|
||||
.main-header-right{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.main-header-left {
|
||||
display:flex;
|
||||
width:290px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $main-header-right-padding;
|
||||
border-right: 1px solid $light-gray;
|
||||
.dark-logo-wrapper{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.left-menu-header {
|
||||
padding: $main-header-right-padding;
|
||||
ul{
|
||||
li{
|
||||
.search-form{
|
||||
.search-bg{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
width: 100%;
|
||||
i{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
.nav-menus {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
.profile-dropdown{
|
||||
width: 160px;
|
||||
top: 57px;
|
||||
right: -12px;
|
||||
padding: 10px;
|
||||
li{
|
||||
padding: 10px !important;
|
||||
svg{
|
||||
width: 16px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggle-sidebar {
|
||||
cursor: pointer;
|
||||
padding:5px 8px;
|
||||
border-radius:5px;
|
||||
transition:all 0.3s ease;
|
||||
svg {
|
||||
width: 20px;
|
||||
color: $primary-color;
|
||||
}
|
||||
&:hover{
|
||||
background-color:rgba($primary-color, 0.1);
|
||||
}
|
||||
}
|
||||
.vertical-mobile-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.nav-left{
|
||||
i{
|
||||
margin-right: 20px;
|
||||
}
|
||||
input:focus{
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
.left-menu-header {
|
||||
ul {
|
||||
li {
|
||||
i {
|
||||
color: $primary-color;
|
||||
}
|
||||
.search-form {
|
||||
font-family: $font-roboto;
|
||||
input {
|
||||
padding: 0 20px;
|
||||
border: none;
|
||||
background: $transparent-color;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-weight: 500;
|
||||
&::placeholder {
|
||||
color: $theme-body-sub-title-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-right{
|
||||
text-align: left;
|
||||
ul{
|
||||
li{
|
||||
svg{
|
||||
vertical-align: $main-header-right-nav-icon-align;
|
||||
width: $main-header-right-nav-icon-size;
|
||||
height: $main-header-right-nav-icon-size;
|
||||
path{
|
||||
color: $main-header-right-nav-icon-color;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.mode{
|
||||
.mode-moon,.mode-sun{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.mode-sun{
|
||||
opacity:0;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
&.show{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
i{
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.onhover-show-div {
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
padding: 0 0;
|
||||
}
|
||||
.btn-primary-light {
|
||||
padding:6px 20px;
|
||||
font-weight:600;
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
path {
|
||||
color: $primary-color;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
&:focus,&:hover {
|
||||
background-color:$primary-color !important;
|
||||
color: $white;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
svg {
|
||||
path {
|
||||
color: $white;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right-menu {
|
||||
ul {
|
||||
justify-content:flex-end;
|
||||
li {
|
||||
position:relative;
|
||||
.notification {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -9px;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.profile-media {
|
||||
.media-body {
|
||||
margin-left: 15px;
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: rgba($theme-body-font-color, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color:rgba($primary-color,0.1);
|
||||
.media {
|
||||
.media-body{
|
||||
>span{
|
||||
color: $dark-card-inbox;
|
||||
}
|
||||
p{
|
||||
color:$primary-color ;
|
||||
}
|
||||
}
|
||||
p{
|
||||
color:$primary-color ;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
svg{
|
||||
stroke:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-user{
|
||||
font-size: 16px;
|
||||
}
|
||||
>ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> li{
|
||||
position: relative;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
margin-right: 20px;
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
span{
|
||||
letter-spacing: 0.9px;
|
||||
.fa {
|
||||
color: $gray-60;
|
||||
}
|
||||
ul{
|
||||
left: inherit;
|
||||
right: -10px;
|
||||
width: 130px;
|
||||
&:before,&:after{
|
||||
left: inherit;
|
||||
right: 10px;
|
||||
}
|
||||
li{
|
||||
display: block;
|
||||
a{
|
||||
font-size: 14px;
|
||||
color: $dark-color;
|
||||
i{
|
||||
margin-left: 10px;
|
||||
font-size: 13px;
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag-icon{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.chat-dropdown {
|
||||
width: 330px;
|
||||
top: 49px;
|
||||
right: 0;
|
||||
left: unset;
|
||||
li {
|
||||
padding: 15px;
|
||||
+ li {
|
||||
border-top: $card-border-color;
|
||||
}
|
||||
.media {
|
||||
img {
|
||||
width: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.media-body {
|
||||
> span {
|
||||
font-weight: 600;
|
||||
color : $primary-color !important;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color : $dark-color !important;
|
||||
}
|
||||
}
|
||||
>p{
|
||||
color: $gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before, &:after {
|
||||
right: 10px !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.bookmark-dropdown {
|
||||
width:300px;
|
||||
top:50px;
|
||||
left:unset;
|
||||
right:0;
|
||||
border-radius:8px;
|
||||
padding:15px;
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
.form-group {
|
||||
.input-group {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
background-color: $transparent-color;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border-left: none;
|
||||
font-size: 13px;
|
||||
&::placeholder {
|
||||
color: $gray-60;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
&:hover {
|
||||
background-color: $light-background;
|
||||
.bookmark-icon{
|
||||
color:$primary-color;
|
||||
}
|
||||
}
|
||||
.bookmark-icon {
|
||||
margin-right: 15px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
&.add-to-bookmark {
|
||||
font-weight: 500;
|
||||
transition: all 0.5s ease;
|
||||
.pull-right {
|
||||
svg {
|
||||
color: $bookmark-icon-color;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color:$primary-color;
|
||||
.bookmark-icon {
|
||||
stroke: $primary-color;
|
||||
}
|
||||
.pull-right {
|
||||
svg {
|
||||
color: $bookmark-icon-color;
|
||||
fill: $bookmark-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification-box {
|
||||
position: relative;
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
.dot-animated {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: -6px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
background-color: $danger-color;
|
||||
animation: fadeIn 2s ease infinite;
|
||||
}
|
||||
}
|
||||
.notification-dropdown{
|
||||
top: 52px;
|
||||
width: 300px;
|
||||
right: -20px !important;
|
||||
left: unset;
|
||||
li {
|
||||
padding: 15px !important;
|
||||
.badge-primary {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
color: $primary-color;
|
||||
}
|
||||
.media {
|
||||
.notification-bg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.bg-light-primary {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
color: $primary-color;
|
||||
}
|
||||
&.bg-light-secondary {
|
||||
background-color: rgba($secondary-color, 0.1);
|
||||
color: $secondary-color;
|
||||
svg {
|
||||
path {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-light-success {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
color: $success-color;
|
||||
}
|
||||
&.bg-light-danger {
|
||||
background-color: rgba($danger-color, 0.1);
|
||||
color: $danger-color;
|
||||
path {
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-body {
|
||||
p {
|
||||
font-weight:700;
|
||||
margin-bottom:0;
|
||||
}
|
||||
span {
|
||||
font-size:12px;
|
||||
color:$gray-60;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
}
|
||||
+ li {
|
||||
border-top: $card-border-color;
|
||||
}
|
||||
&.noti-primary{
|
||||
&:hover{
|
||||
background-color:rgba($primary-color,0.1);
|
||||
}
|
||||
}
|
||||
&.noti-secondary{
|
||||
&:hover{
|
||||
background-color: rgba($secondary-color,0.1);
|
||||
.media {
|
||||
.media-body {
|
||||
p{
|
||||
color: $secondary-color;
|
||||
}
|
||||
span{
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.noti-success{
|
||||
&:hover{
|
||||
background-color: rgba($success-color,0.1);
|
||||
.media {
|
||||
.media-body {
|
||||
p{
|
||||
color:$success-color;
|
||||
}
|
||||
span{
|
||||
color:$success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.noti-danger{
|
||||
&:hover{
|
||||
background-color: rgba($danger-color,0.1);
|
||||
.media {
|
||||
.media-body {
|
||||
p{
|
||||
color: $danger-color;
|
||||
}
|
||||
span{
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
&:hover{
|
||||
.notification-bg{
|
||||
&.bg-light-primary{
|
||||
background-color: $primary-color;
|
||||
color:$white;
|
||||
}
|
||||
&.bg-light-secondary{
|
||||
background-color: $secondary-color;
|
||||
color:$white;
|
||||
svg {
|
||||
path {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-light-success{
|
||||
background-color:$success-color;
|
||||
color:$white;
|
||||
svg{
|
||||
color:$white;
|
||||
path{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-light-danger{
|
||||
background-color: $danger-color;
|
||||
color:$white;
|
||||
path{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before, &:after {
|
||||
right: 28px !important;
|
||||
left: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
li{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.onhover-dropdown{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
&:hover{
|
||||
.onhover-show-div{
|
||||
@extend %for-animated-hover-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.onhover-show-div {
|
||||
top: 80px;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
background-color:$white;
|
||||
border: 1px solid $light-background;
|
||||
transition: all linear 0.3s;
|
||||
@extend %for-animated-hover;
|
||||
li{
|
||||
a{
|
||||
svg{
|
||||
margin-top: 0 !important;
|
||||
path, line{
|
||||
color: $theme-body-font-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**======Main Header css Ends ======**/
|
||||
|
||||
/** ===== Vertical Menu css Start=====**/
|
||||
.vertical-menu-main{
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
width: 100%
|
||||
}
|
||||
.vertical-menu-mt{
|
||||
margin-top: 148px !important;
|
||||
margin-left: 0 !important;
|
||||
.custom-card{
|
||||
.card-header{
|
||||
img{
|
||||
margin-top: -146px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vertical-menu-main{
|
||||
#main-nav{
|
||||
#main-menu{
|
||||
li{
|
||||
a{
|
||||
svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mega-menu {
|
||||
width: 1500px !important;
|
||||
max-width: 1500px !important;
|
||||
padding: 0;
|
||||
left:-120px !important;
|
||||
top: 65px !important;
|
||||
}
|
||||
}
|
||||
/** ===== Vertical Menu css Ends=====**/
|
||||
|
||||
/*=======Mega menu css start=======*/
|
||||
.mega-menu {
|
||||
perspective: inherit;
|
||||
position: static !important;
|
||||
padding-top: 5px;
|
||||
.default-according{
|
||||
.card{
|
||||
.btn-link{
|
||||
font-weight: 500;
|
||||
color: gray;
|
||||
}
|
||||
.card-body{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.onhover-show-div{
|
||||
width: 1500px;
|
||||
}
|
||||
.card-body{
|
||||
padding: 20px;
|
||||
}
|
||||
.title {
|
||||
color: $theme-body-font-color;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid $light-semi-gray;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
div {
|
||||
>div {
|
||||
a {
|
||||
margin-bottom: 0px;
|
||||
display: inline-block;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-nav-img {
|
||||
position: static;
|
||||
.desk {
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
}
|
||||
.list-unstyled {
|
||||
div {
|
||||
a{
|
||||
padding: 8px 35px 8px 0;
|
||||
transition: $sidebar-transition;
|
||||
&:hover{
|
||||
padding: 8px 35px 8px 10px;
|
||||
transition: $sidebar-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.galleria div {
|
||||
margin-bottom: 5px;
|
||||
&:hover {
|
||||
transform: translateY(4px) scale(1.04);
|
||||
}
|
||||
}
|
||||
.galleria-list .galleria > div {
|
||||
width: 25%;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
color: $black;
|
||||
transition: ease-in 0.3s;
|
||||
> a {
|
||||
display: block;
|
||||
margin: 5px 0 10px;
|
||||
padding: 0 0!important;
|
||||
}
|
||||
img {
|
||||
border-radius: 3px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.username {
|
||||
font-size: 12px;
|
||||
color: $theme-body-font-color;
|
||||
margin-bottom: 5px;
|
||||
small {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: $theme-body-sub-title-color;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drilldown {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
a{
|
||||
width: 100%;
|
||||
&:hover{
|
||||
background-color: transparent;
|
||||
color:$primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drilldown-sub { display: none; }
|
||||
.drilldown-back { font-weight: bold; }
|
||||
}
|
||||
/*=======Mega menu css end=======*/
|
||||
|
||||
|
||||
// responsive header
|
||||
@media only screen and (max-width: 1366px) {
|
||||
.profile-dropdown {
|
||||
&.onhover-show-div {
|
||||
// right: 0;
|
||||
// left: unset !important;
|
||||
left:0;
|
||||
right:unset !important;
|
||||
&:before, &:after {
|
||||
right: 10px !important;
|
||||
left: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @media only screen and (max-width: 1200px) {
|
||||
// .page-main-header{
|
||||
// .main-header-right{
|
||||
// .nav-right{
|
||||
// .btn-primary-light{
|
||||
// padding: 6px 12px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.page-main-header {
|
||||
.main-header-right {
|
||||
.nav-right {
|
||||
>ul {
|
||||
>li {
|
||||
padding: 6px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.page-main-header {
|
||||
.main-header-right {
|
||||
.nav-right {
|
||||
.notification-dropdown {
|
||||
top: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
05. Header CSS Ends
|
||||
==========================**/
|
||||
Reference in New Issue
Block a user