style: 侧边栏增加用户登录信息
This commit is contained in:
Argo Zhang
parent
f877747c3b
commit
997de2fe2c
|
|
@ -1,5 +1,13 @@
|
|||
@model NavigatorBarModel
|
||||
<aside>
|
||||
<div class="bg"></div>
|
||||
<div class="nav-brand justify-content-center">
|
||||
<span>@Model.Title</span>
|
||||
</div>
|
||||
<div class="nav-header flex-fill align-items-center">
|
||||
<img src="@Url.Content(Model.Icon)" />
|
||||
<span class="d-inline-block font-weight-bold flex-fill">@Model.DisplayName</span>
|
||||
</div>
|
||||
<!-- sidebar menu start-->
|
||||
<ul class="sidebar nav nav-pills flex-column flex-nowrap">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,30 @@
|
|||
.header .nav {
|
||||
margin-right: 15px;
|
||||
justify-content: flex-end;
|
||||
.header {
|
||||
transition: margin-left .3s ease-in-out;
|
||||
}
|
||||
|
||||
.header .nav {
|
||||
margin-right: 15px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header nav, userinfo, .userinfo .dropdown-toggle:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .sidebar-toggle-box {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header .sidebar-toggle-box span {
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar-open .header {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.userinfo .badge {
|
||||
|
|
@ -11,6 +35,14 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-toggle, .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.userinfo .shadow-default {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item {
|
||||
border-bottom: solid 1px #e9ecef;
|
||||
padding: 0.25rem 1.5rem;
|
||||
|
|
@ -22,7 +54,7 @@
|
|||
|
||||
.userinfo .dropdown-item img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
height: auto;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -30,6 +62,10 @@
|
|||
padding: 0.25rem 0.625rem;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item a:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item a i {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
|
@ -44,112 +80,80 @@
|
|||
color: #777;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:last-child a:hover {
|
||||
color: #333;
|
||||
aside {
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
aside .bg {
|
||||
background-color: #337ab7;
|
||||
height: 3px;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
aside .nav-brand {
|
||||
height: 55px;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px #ddd;
|
||||
background: #fff;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
aside .nav-brand span, .header .sidebar-toggle-box {
|
||||
color: #333;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.header {
|
||||
margin-left: 210px;
|
||||
}
|
||||
|
||||
.header .sidebar-toggle-box span {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-toggle-box .fa-bars {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
|
||||
color: rgb(51, 122, 183);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
padding: 3px 8px;
|
||||
color: rgba(51, 122, 183, 0.9);
|
||||
transition: color .3s linear;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:hover, .nav-link .navbar-nav .active > .nav-link:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.dropdown-item:hover, .nav .dropdown-item:nth-of-type(odd):hover, .dropdown-item:active, .dropdown-item.active,
|
||||
.bootstrap-table .export .dropdown-menu li:hover {
|
||||
background-color: #77afd5;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.breadcrumb, .pagination-detail {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.card-header, .modal-header, .popover-header {
|
||||
background-color: #5899c8;
|
||||
border-color: #3581b8;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.header .navbar {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
|
||||
.header .nav-item.active {
|
||||
border-bottom: solid 1px #307eb6;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-top-color: #84bbe2;
|
||||
}
|
||||
|
||||
.card, .modal-footer, .form-control, .popover, .date .input-group-text,
|
||||
.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger),
|
||||
.form-select-input:hover {
|
||||
border-color: #84bbe2;
|
||||
}
|
||||
|
||||
.card .card-header, .modal-header {
|
||||
background-image: linear-gradient(to bottom, #5893be 0%, #63a6d7 100%);
|
||||
}
|
||||
|
||||
.card .card-header, a[data-toggle="collapse"], .modal-header, .modal-header .close, .popover-header,
|
||||
.card .card-header a, .modal-header a,
|
||||
.card .card-header a:hover,
|
||||
.close:not(:disabled):not(.disabled):hover,
|
||||
.close:not(:disabled):not(.disabled):focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .card-header a {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: #467fa7;
|
||||
}
|
||||
|
||||
.breadcrumb > li + li:before, .breadcrumb, .pagination-detail, .form-select-append {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], .date .form-control, .date .input-group-text,
|
||||
.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger) {
|
||||
background-color: rgba(84, 189, 220, 0.21);
|
||||
}
|
||||
|
||||
.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
|
||||
border-right-color: #305873;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.breadcrumb {
|
||||
border-color: rgba(81, 152, 203, 0.8)
|
||||
}
|
||||
|
||||
.sidebar-open .header .sidebar-toggle-box span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
aside {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
aside .bg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
aside .sidebar {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
aside .nav-brand, aside .nav-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
aside .nav-header {
|
||||
padding: 0.625rem 0.625rem 0.625rem 0.625rem;
|
||||
border-bottom: solid 1px rgba(221, 221, 221, 0.5);
|
||||
}
|
||||
|
||||
aside .nav-header img {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
aside .nav-header span {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,15 @@ body {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
aside .bg, aside .nav-brand, aside .nav-header, .header .nav, .userinfo .dropdown-item:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header .nav {
|
||||
display: none;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -101,10 +104,6 @@ body {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userinfo .dropdown-item a {
|
||||
text-align: center;
|
||||
color: #777;
|
||||
|
|
|
|||
Loading…
Reference in New Issue