From 991c2c6ef958205388a8ebeb7622f97dd7b077fa Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 22 Aug 2019 13:13:29 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=20AdminLTE=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8B=20nav-brand=20=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Bootstrap.Admin/wwwroot/css/lte.css | 157 +++++++++++++------------- Bootstrap.Admin/wwwroot/css/theme.css | 9 +- 2 files changed, 82 insertions(+), 84 deletions(-) diff --git a/Bootstrap.Admin/wwwroot/css/lte.css b/Bootstrap.Admin/wwwroot/css/lte.css index 89b386a7..bc50aa8b 100644 --- a/Bootstrap.Admin/wwwroot/css/lte.css +++ b/Bootstrap.Admin/wwwroot/css/lte.css @@ -68,9 +68,9 @@ border: none !important; } -.userinfo .shadow-default, .nav [data-toggle="dropdown"], .nav [data-toggle="dropdown"]:hover { - box-shadow: none; -} + .userinfo .shadow-default, .nav [data-toggle="dropdown"], .nav [data-toggle="dropdown"]:hover { + box-shadow: none; + } .userinfo .dropdown-item { border-bottom: solid 1px rgba(255, 255, 255, 0.4); @@ -135,25 +135,20 @@ aside { padding: 0 0.625rem; } - aside .nav-brand a { - display: flex; - justify-content: center; - align-items: center; - } - - aside .nav-brand span, .header .sidebar-toggle-box { - font-size: 1.25rem; + aside .nav-brand a { white-space: nowrap; } - .header .sidebar-toggle-box .fa { - font-size: 1rem; - } aside .nav-brand img, aside:hover .nav-brand img { width: 2.125rem; height: auto; border-radius: 0.42rem; - margin-right: 0.25rem; + } + + aside .nav-brand span { + line-height: 2.125rem; + vertical-align: middle; + margin-left: 6px; } aside .nav-link span { @@ -161,17 +156,6 @@ aside { white-space: nowrap; } -.sidebar-open aside .nav-brand img, .sidebar-open aside:hover .nav-brand img { - opacity: 0; - visibility: hidden; - width: 2.125rem; - height: auto; - border-radius: 0.42rem; - position: absolute; - top: 11px; - left: 9px; -} - aside .nav-link span { display: inline-block; white-space: nowrap; @@ -180,11 +164,11 @@ aside { .main-content { transition: margin-left .3s linear; } - - .main-header .breadcrumb { - margin-top: -10px; - padding: 8px 0; - } + +.main-header .breadcrumb { + margin-top: -10px; + padding: 8px 0; +} .main-header { display: block; @@ -228,9 +212,9 @@ aside .nav-brand { color: #eee; } -.sidebar-toggle-box:hover, aside .nav-brand a:hover, .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover, .sidebar .nav-link:hover, .userinfo .dropdown-item:hover, .userinfo .dropdown-item a:hover, .userinfo .dropdown-item:last-child a:hover { - color: #fff; -} + .sidebar-toggle-box:hover, aside .nav-brand a:hover, .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover, .sidebar .nav-link:hover, .userinfo .dropdown-item:hover, .userinfo .dropdown-item a:hover, .userinfo .dropdown-item:last-child a:hover { + color: #fff; + } .sidebar .nav-sidebar .has-treeview .nav-link.active { background-color: rgba(60, 141, 188, 0.8); @@ -241,8 +225,7 @@ aside .nav-brand { } .sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"], -.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before -{ +.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before { background-color: rgba(59, 141, 188, 0.7); } @@ -275,7 +258,7 @@ footer { background: #2c3b41; } -@media (max-width:768px){ +@media (max-width:768px) { body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-group-text, .popover-header { font-size: 0.75rem; } @@ -285,16 +268,17 @@ footer { padding: 0.375rem 1rem; } - .form-inline .form-group{ - margin-bottom:0.75rem; + .form-inline .form-group { + margin-bottom: 0.75rem; } + .form-inline .form-group .control-label { margin-bottom: 0.125rem; } - .modal-body, .card-body { - padding: 0.5rem 0.75rem 0 0.75rem; - } + .modal-body, .card-body { + padding: 0.5rem 0.75rem 0 0.75rem; + } .modal-footer { padding: 0.5rem; @@ -331,10 +315,6 @@ footer { display: none; } - .sidebar-open .header .sidebar-toggle-box span { - opacity: 1; - } - aside { top: 0; } @@ -344,9 +324,9 @@ footer { transition: top .3s linear; } - aside .sub .nav-tem, .sidebar-open aside:hover .sidebar .sub .nav-item { - margin-left: 10px; - } + aside .sub .nav-tem, .sidebar-open aside:hover .sidebar .sub .nav-item { + margin-left: 10px; + } aside .nav-brand, .sidebar-open aside:hover .nav-brand, aside .nav-header { display: flex; @@ -360,51 +340,66 @@ footer { aside .nav-header a { white-space: nowrap; } - + aside .nav-header img, .sidebar-open aside:hover .nav-header img { width: 3.75rem; height: 3.75rem; border-radius: 50%; } - aside .nav-header span, .sidebar-open aside:hover .nav-header span { - color: #eee; + aside .nav-header span, .sidebar-open aside:hover .nav-header span { + color: #eee; + } + + aside .sub .nav-link, .userinfo .dropdown-item, aside .sidebar .sub .nav-item, aside, aside .nav-header img { + transition: all .3s linear; + } + + aside .nav-link span, aside .nav-brand span, aside .nav-header span, aside .nav-brand img { + transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease; + } + + .sidebar-open .header { + margin-left: 3.375rem; + } + + .sidebar-open .header .sidebar-toggle-box span { + opacity: 1; } - aside .sub .nav-link, .userinfo .dropdown-item, aside .sidebar .sub .nav-item, aside, aside .nav-header img { - transition: all .3s linear; - } - - aside .nav-link span, aside .nav-brand span, aside .nav-header span, aside .nav-brand img { - transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease; - } + .sidebar-open aside { + z-index: 15; + } .sidebar-open aside:hover { width: 13.375rem; - z-index: 15; } - .sidebar-open .header { - margin-left: 3.375rem; - } - - .sidebar-open aside { - transform: translate(0); - width: 3.375rem; - } - - .sidebar-open aside .nav-item span, .sidebar-open aside .nav-header span, .sidebar-open .nav-brand span { - opacity: 0; - visibility: hidden; - margin-left: -10px; + .sidebar-open aside:hover .nav-brand img { + margin-left: 0; } + .sidebar-open aside { + transform: translate(0); + width: 3.375rem; + } + + .sidebar-open aside .nav-item span, .sidebar-open aside .nav-header span, .sidebar-open .nav-brand span { + opacity: 0; + visibility: hidden; + margin-left: -10px; + } + + .sidebar-open aside .nav-brand img { + margin-left: 112px; + } + .sidebar-open aside .nav-header img { width: 2.25rem; height: 2.25rem; } - .sidebar-open aside .nav-brand img, .sidebar-open aside:hover .nav-brand span, .sidebar-open aside:hover .nav-header span, .sidebar-open aside:hover .nav-item span { + .sidebar-open aside:hover .nav-brand span, .sidebar-open aside:hover .nav-header span, .sidebar-open aside:hover .nav-item span { opacity: 1; visibility: visible; } @@ -417,12 +412,12 @@ footer { top: 115px; } - .sidebar-open .main-content { - margin-left: 3.375rem; - transition: margin-left .3s linear; - } + .sidebar-open .main-content { + margin-left: 3.375rem; + transition: margin-left .3s linear; + } - .sidebar-open aside .sidebar .sub .nav-item { - margin-left: 0; - } + .sidebar-open aside .sidebar .sub .nav-item { + margin-left: 0; + } } diff --git a/Bootstrap.Admin/wwwroot/css/theme.css b/Bootstrap.Admin/wwwroot/css/theme.css index 269131b6..16a8784f 100644 --- a/Bootstrap.Admin/wwwroot/css/theme.css +++ b/Bootstrap.Admin/wwwroot/css/theme.css @@ -286,12 +286,12 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou transform: rotate(-90deg); } - .sidebar .nav-sidebar > .nav-item > .nav-link:hover, + .sidebar .nav-sidebar > .nav-item > .nav-link:hover, .sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"], .sidebar .show .nav-item .nav-link:hover:before, .sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before, .sidebar .nav-sidebar .nav-link.active { - background-color: rgba(255,255,255,.1); + background-color: rgba(255,255,255,.1); } .sidebar .nav-sidebar .show .nav-link, .sidebar .nav-sidebar .collapsing .nav-link { @@ -310,9 +310,12 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou transition: all .3s linear; } +.sidebar-toggle-box, .nav-brand span { + font-size: 1.25rem; +} + .sidebar-toggle-box { display: block; - font-size: 1.25rem; color: #777; flex: 1 1 auto; padding: 12px 0;