core/topbar/header.scss

0001 // header part
0002 @import 'notify';
0003
0004 /*******************
0005  General Topbar
0006 *******************/
0007
0008 .topbar {
0009     position: relative;
0010     z-index: 50;
0011     background: $topbar;
0012     height: $topbar-height;
0013     .navbar-collapse {
0014         padding: 0;
0015         .navbar-nav {
0016             .app-search {
0017                 position: relative;
0018                 margin: 0;
0019                 a {
0020                     position: absolute;
0021                     top: 5px;
0022                     right: 10px;
0023                     color: #4c5667;
0024                 }
0025                 .form-control {
0026                     border: none;
0027                     font-size: 13px;
0028                     color: #4c5667;
0029                     padding-left: 20px;
0030                     padding-right: 40px;
0031                     background: rgba(255,255,255,.9);
0032                     box-shadow: none;
0033                     height: 30px;
0034                     font-weight: 600;
0035                     width: 180px;
0036                     display: inline-block;
0037                     line-height: 30px;
0038                     margin-top: 15px;
0039                     border-radius: 40px;
0040                     transition: .5s ease-out;
0041                     &:focus {
0042                         width: 300px;
0043                     }
0044                 }
0045             }
0046             .profile-pic {
0047                 color: $white;
0048                 padding: 0 14px 0 8px;
0049                 line-height: 60px;
0050                 min-height: 60px;
0051                 img {
0052                     margin-right: 10px;
0053                     &.img-circle {
0054                         border-radius: 50%;
0055                     }
0056                 }
0057             }
0058         }
0059     }
0060     .top-navbar {
0061         min-height: $topbar-height;
0062         padding: 0px;
0063         .dropdown-toggle::after {
0064             display: none;
0065         }
0066         .navbar-header {
0067             line-height: $topbar-navlink-height;
0068             .navbar-brand {
0069                 width: 240px;
0070                 display: flex;
0071                 align-items: center;
0072                 margin: 0px;
0073                 padding: $topbar-navbrand-padding;
0074                 .dark-logo {
0075                     display: none;
0076                 }
0077                 .logo-text {
0078                     padding-left: 5px;
0079                 }
0080                 .logo-icon{
0081                     margin-right: 5px;
0082                 }
0083             }
0084         }
0085         .navbar-nav>.nav-item>.nav-link {
0086            padding: $topbar-navlink-padding;
0087            font-size: $topbar-navlink-font-size;
0088            line-height: $topbar-navlink-height;
0089            height:$topbar-navlink-height;
0090
0091         }
0092         .navbar-nav>.nav-item{
0093
0094             &:hover{
0095                 background: $transparent-dark-bg;
0096             }
0097         }
0098     }
0099     .user-dd, .mailbox {
0100         min-width: 280px;
0101     }
0102     .nav-toggler, .topbartoggler{
0103         color:$theme-light;
0104         padding: 0 15px;
0105     }
0106 }
0107
0108
0109 .search-box {
0110     .app-search {
0111         z-index: 110;
0112         width: 100%;
0113         top: -1px;
0114         box-shadow: $shadow;
0115         display: none;
0116         left: 0px;
0117         .form-control {
0118             padding: 23px 40px 20px 23px;
0119             @extend %square;
0120             transition: $transitions;
0121             &:focus {
0122                 border-color: transparent;
0123             }
0124         }
0125         .srh-btn {
0126             position: absolute;
0127             top: 23px;
0128             cursor: pointer;
0129             right: 20px;
0130         }
0131     }
0132 }
0133
0134 /*******************
0135 Designed dropdown
0136 ******************/
0137 .topbar {
0138     .dropdown-menu{
0139         padding-top: 0px;
0140         border: 0px;
0141         box-shadow:1px 1px 15px rgba(0, 0, 0, 0.1);
0142         .with-arrow{
0143             position: absolute;
0144             height: 10px;
0145             overflow: hidden;
0146             width: 40px;
0147             top:-10px;
0148            >span {
0149             @extend %rotate45;
0150             background-color:$white;
0151             width:15px;
0152             height:15px;
0153             top: 3px;
0154             left: 15px;
0155             position:absolute;
0156             content: "";
0157             -moz-border-radius: 6px 0 0 0;
0158             border-radius: 6px 0 0 0;
0159             /*box-shadow:-3px -3px 8px rgba(0, 0, 0, 0.1);    */
0160            }
0161         }
0162         &.dropdown-menu-right {
0163             .with-arrow{
0164                 right: 0px;
0165                 >span {
0166                     right: 20px;
0167                     left:auto;
0168                 }
0169             }
0170         }
0171     }
0172 }
0173 /*******************
0174 Topbar Responsive
0175 ******************/
0176
0177 @media (max-width: 767px) {
0178     .topbar .top-navbar {
0179         .navbar-collapse.show, .navbar-collapse.collapsing {
0180             display: block;
0181             width: 100%;
0182             border-top: 1px solid $border-color;
0183         }
0184         .navbar-nav {
0185             flex-direction: row;
0186             .dropdown{
0187                 position: static;
0188             }
0189         }
0190         .navbar-nav>.nav-item>.nav-link{
0191             padding: 0 10px;
0192         }
0193         .navbar-header{
0194             display: flex;
0195             align-items: center;
0196             width: 100%;
0197             justify-content: space-between;
0198         }
0199         .dropdown-menu {
0200             position: absolute;
0201             width: 100%;
0202              .with-arrow{
0203                 display: none;
0204             }
0205         }
0206
0207     }
0208 }