@import "variables.less"; @import "elements.less"; /* Template Name: Moltran Dashboard Author: CoderThemes Email: coderthemes@gmail.com File: Topbar,Left-sidebar,Right-sidebar */ .topbar { -webkit-box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2); background: @white; box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2); left: 0px; position: fixed; right: 0; top: 0px; z-index: 999; .topbar-left { background-color: @light; float: left; height: 70px; position: relative; width: 180px; z-index: 1; } } .logo { color: @inverse!important; font-size: 18px; font-weight: 700; letter-spacing: .05em; line-height: 70px; text-transform: uppercase; h1 { height: 50px; margin: 0px auto; text-align: center; } i { color: #ee6e73; font-size: 30px; margin-right: 5px; } } .navbar-default { background-color: @white; border-radius: 0px; border: none; margin-bottom: 0px; .navbar-nav > .open > a { background-color: transparent; &:focus { background-color: transparent; } &:hover { background-color: transparent; } } } .nav > li > a { color: @lightdark3 !important; line-height: 70px; padding: 0px 15px; position: relative; i { font-size: 20px; } .badge { position: absolute; right: 10px; top: 18px; } } .profile { img { border: 2px solid #edf0f0; height: 36px; width: 36px; } } .dropdown-menu-lg { width: 300px; .list-group { margin-bottom: 0px; } .list-group-item { border: none; padding: 10px 20px; } .media-heading { margin-bottom: 0px; } .media-body { p { color: #828282; } } } .notifi-title { border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #000000; font-size: 16px; font-weight: 400; padding: 5px 0px 10px; } .navbar-form { border: none; box-shadow: none; padding: 0px; } .search-bar { background-color: transparent !important; border: none !important; box-shadow: none !important; color: @inverse; font-size: 16px; height: 50px; margin-top: 3px; } .btn-search { display: none; } input.search-bar { &::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } &:-moz-placeholder { color: rgba(0, 0, 0, 0.6); } &::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } &:-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } } .navbar-nav { margin: 0px; } .side-menu { bottom: 0; top: 0; width: 180px; z-index: 2; } .side-menu.left { background: #2f353f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); position: absolute; top: 70px; } body.fixed-left { .side-menu.left { bottom: 50px; height: @height; margin-bottom: -70px; margin-top: 0px; padding-bottom: 70px; position: fixed; } } .content-page { margin-left: 180px; overflow: hidden; } .content-page > .content { margin-bottom: 60px; margin-top: 70px; padding: 20px 5px 15px 5px; } .button-menu-mobile { background: transparent; border: none; color: #888888; font-size: 21px; line-height: 70px; padding: 0px 15px; &:hover { color: @inverse; } } .sidebar-inner { height: @height; } #sidebar-menu { text-align: center; } #sidebar-menu, #sidebar-menu ul, #sidebar-menu li, #sidebar-menu a { border: 0; font-weight: normal; line-height: 1; list-style: none; margin: 0; padding: 0; position: relative; text-decoration: none; } #sidebar-menu { background-color: #2f353f; padding-bottom: 50px; width: 100%; a { line-height: 1.3; } ul { ul { display: none; li { border-top: 0; } li.active { a { color: @white; } } a { color: #75798B; display: block; padding: 10px 25px; &:hover { color: @white; } i { margin-right: 5px; } } ul { a { padding-left: 80px; } } } } } #sidebar-menu > ul > li > a { color: #a7b1c2; display: block; padding: 15px 25px; background: #2f353f; &:hover { background: #272c35; text-decoration: none; } } #sidebar-menu > ul > li > a > span { vertical-align: middle; } #sidebar-menu > ul > li > a > span.pull-right { display: none; } #sidebar-menu > ul > li > a > i { display: block; font-size: 18px; line-height: 24px; } #sidebar-menu > ul > li > a > i.i-right { float: right; margin: 3px 0 0 0; } #sidebar-menu > ul > li > a.active { background: #272c35 !important; color: @white; } #sidebar-menu > ul > li > a.active.subdrop { background: #272c35 !important; } .subdrop { background: #272c35 !important; } .footer { left: 180px; } #wrapper.enlarged { #sidebar-menu { text-align: left !important; ul { li { a { i { display: inline-block; font-size: 18px; line-height: 17px; margin-left: 3px; margin-right: 15px; vertical-align: middle; width: 20px; } } } ul { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } } } .left.side-menu { padding-top: 80px; width: 70px; z-index: 5; #sidebar-menu > ul > li > a { &:hover { background-color: #272c35 !important; } &:active { background-color: #272c35 !important; } &:focus { background-color: #272c35 !important; } i { margin-right: 20px !important; margin-left: 0px !important; font-size: 20px; } } span.pull-right { display: none !important; } #sidebar-menu { ul > li { position: relative; white-space: nowrap; &:hover > a { position: relative; width: 260px; } &:hover > ul { display: block; left: 70px; position: absolute; width: 190px; a { background: @white; border-left: 3px solid #edf0f0; border: none; box-shadow: none; padding-left: 15px; position: relative; width: 190px; z-index: 6; &:hover { color: @inverse; } } } &:hover { a { span { display: inline; } } } } a.subdrop { color: @white !important; } ul > li > ul { display: none; } ul { ul { li { &:hover > ul { display: block; left: 190px; margin-top: -36px; position: absolute; width: 190px; } } li > a { span.pull-right { -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); position: absolute; right: 20px; top: 12px; transform: rotate(270deg); } } li.active { a{ color: @inverse; } } } } ul > li > a { span { display: none; padding-left: 10px; } } } .user-details { display: none; } } .content-page { margin-left: 70px; } .topbar { .topbar-left { width: 70px !important; .logo { span { display: none; opacity: 0; } i { margin-right: 0px; } } } } #sidebar-menu > ul > li { &:hover > a.open { :after { display: none; } } &:hover > a.active { :after { display: none; } } } } #wrapper.enlarged .footer { left: 70px; } .user-details { min-height: 80px; padding: 20px; position: relative; text-align: center; img { position: relative; z-index: 9999; } .pull-left { float: none !important; } .user-info { color: @lightdark4; position: relative; z-index: 99999; a.dropdown-toggle { color: @white; display: block; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; padding-top: 5px; } } } #wrapper.right-bar-enabled { .right-bar { right: 0; } .left-layout { left: 0; } } .side-bar.right-bar { float: right !important; right: -266px; top: 70px; } .side-bar { -moz-transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; background-color: @white; box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1); display: block; float: left; height: @height; overflow-y: auto; position: fixed; transition: all 200ms ease-out; width: 240px; } .right-bar { background: @white !important; z-index: 99 !important; h4 { border-bottom: 1px solid @light; padding-bottom: 10px; } } .contact-list { max-height: 600px; .list-group-item { border: none; &:hover { background: @light5; } } i.offline { color: @danger; } i.away { color: @warning; } } .contacts-list { .avatar { display: inline-block; float: left; margin-right: 5px; width: 30px; img { border-radius: 50%; width: @width; } } .list-group-item { span.name { color: #707780; display: inline-block; float: left; overflow: hidden; padding-left: 5px; padding-top: 6px; text-overflow: ellipsis; white-space: nowrap; width: 130px; } } i.online { color: #a0d269; } i { color: @lightgray; float: right; font-size: 9px; line-height: 30px; } }