/*-------------------------------------------------- [Dropdown Menu v2] ----------------------------------------------------*/ .dropdown-menu-v2 { margin-right: 10px !important; } /*-------------------------------------------------- [Header] ----------------------------------------------------*/ .page-header { margin: 0; padding: 0; background: $color-default; border-bottom-color: $color-dark-gray; /* Navbar */ .navbar { z-index: 0; border: none; position: static; margin-bottom: 0; border-radius: 0; /* Container Fluid */ .container-fluid { padding-right: 0; } } /* Navbar Brand */ .navbar-brand { height: $header-width-height; max-height: $header-width-height; line-height: $header-line-height; border-right: 1px solid $color-dark-gray; img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } } /* Topbar Actions */ .topbar-actions { float: right; /* Search box */ .search-form { float: left; position: relative; display: inline-block; background: $color-default; .input-group { display: inherit; .form-control { box-shadow: none; border-radius: 0; position: relative; padding-right: 40px; border-top: none; border-bottom: none; color: #4e5962; background: $color-default; width: $header-search-width; height: $header-width-height; font-size: $header-search-text-size; border-left-color: $color-dark-gray; border-right-color: $color-dark-gray; @include placeholder($color: #4e5962); } .input-group-btn { width: 0; height: $header-width-height; .btn.submit { z-index: 2; color: #4e5962; margin-left: -44px; > i { font-size: 16px; } } } } } /* Notification */ .btn-group-notification { .btn { background: none; width: $header-width-height; height: $header-width-height; box-shadow: none !important; position: static !important; .badge { padding: 0; height: auto; font-size: 20px !important; min-width: auto; font-weight: 500; line-height: 1.4; background: none; text-align: center; color: $color-blue; box-shadow: none !important; } } .dropdown-menu-v2 { padding: 0; min-width: 300px; &:before { border-color: transparent transparent #21282e transparent; } .external { padding: 15px; display: block; overflow: hidden; background: #21282e; letter-spacing: 0.5px; h3 { margin: 0; z-index: 1; padding: 0; float: left; color: #bbb; font-size: 13px; line-height: 1.4; max-width: 200px; position: relative; } a { padding: 0; clear: none; font-size: 13px; font-weight: 300; text-align: right; color: $color-blue; text-transform: lowercase; } } .dropdown-menu-list { > li { display: block; padding: 15px; border-top: 1px solid #2e353c; &:before, &:after { display: table; content: " "; } &:after { clear: both; } &:first-child { border-top: none; } &:hover { background: #21282e; } > a { color: #606e7a; overflow: hidden; .details { float: left; max-width: 215px; .label { float: left; padding: 5px; margin-right: 10px; } } .time { float: right; font-size: 12px; padding: 4px 8px; background: $color-default; } &:hover { text-decoration: none; } } } } } } /* User Activity */ .btn-group-img { .btn { padding: 0; border-radius: 0; line-height: normal; background: #333c43; height: $header-width-height; border-left: 1px solid $color-dark-gray; > span { padding: 9px; line-height: 1.4; color: $color-blue; display: inline-block; vertical-align: middle; text-transform: uppercase; } > img { text-align: center; vertical-align: middle; height: $header-width-height; } } } } } /* Page Header Fixed */ .page-header-fixed { .page-content { margin-top: 80px; } } /* Stylesheet design for under max-width: 479px */ @media (max-width: 479px) { /* 479px */ .page-header { /* Navbar */ .navbar { &:before { top: 59px; height: 2px; width: 100%; content: " "; border-width: 1px; position: absolute; border-color: $color-dark-gray; border-top-style: solid; } } /* Navbar Brand */ .navbar-brand { float: none; display: block; img { margin: 0 auto; display: block; text-align: center; } } /* Topbar Actions */ .topbar-actions { /* Search box */ .search-form { z-index: 9; margin-left: 0; background: $color-default; width: $header-width-height; &.open { right: 0; left: 10px; display: block; position: absolute; width: 100% !important; margin-left: -10px !important; .input-group { width: 100%; display: table; .form-control { border-right: none; z-index: 9 !important; width: 100% !important; } .btn.submit { display: table-cell; } } } .form-control { width: 0 !important; padding-right: 44px !important; } .input-group-btn { .btn.submit { margin-left: -49px !important; } } } /* Notification */ .btn-group-notification { .dropdown-menu-v2 { right: -85px; &:before { right: 100px; } } } } } } /* Stylesheet design between 480px to 767px */ @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { .page-header { .topbar-actions { /* Search box */ .search-form { .input-group { .form-control { width: 175px; } } } } } } /* Stylesheet design for max-width: 767px */ @media (max-width: $screen-xs-max) { .page-header { /* Navbar */ .navbar { /* Container Fluid */ .container-fluid { padding-right: 15px; } /* Navbar Brand */ .navbar-brand { border-right: none; } } } } /* Stylesheet design for min-width: 768px */ @media (min-width: $screen-sm-min) { /* 768px */ .page-header { /* Search box */ .search-form { .form-control { @include cubic-transition($delay: 0, $duration:300ms, $property: (all)); } &.open { .input-group { .form-control { width: $header-search-expand-width; @include cubic-transition($delay: 0, $duration:300ms, $property: (all)); } } } } } } /* Page header fixed for above 992px */ @media (max-width: $screen-md-min) { /* 992px */ /* Page Header Fixed */ .page-header-fixed { .navbar-fixed-top { position: static; } .page-content { margin-top: 20px; } } }