From acd73c1433a2a9a995dda5442fd7a44be62ca97f Mon Sep 17 00:00:00 2001 From: Argo-MacBookPro Date: Sun, 16 Sep 2018 14:41:21 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=BB=A3=E7=A0=81=EF=BC=9A?= =?UTF-8?q?=E6=95=B4=E5=90=88sidebar=E7=9B=B8=E5=85=B3=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=88=B0site.css=E6=A0=B7=E5=BC=8F=E8=A1=A8=E4=B8=AD=EF=BC=8C?= =?UTF-8?q?=E5=87=86=E5=A4=87Client=E4=BD=BF=E7=94=A8=E6=97=B6=E6=96=B9?= =?UTF-8?q?=E4=BE=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wwwroot/css/admin-responsive.css | 33 +------ Bootstrap.Admin/wwwroot/css/admin.css | 92 ------------------- .../wwwroot/css/site-responsive.css | 37 +++++++- Bootstrap.Admin/wwwroot/css/site.css | 92 +++++++++++++++++++ 4 files changed, 128 insertions(+), 126 deletions(-) diff --git a/Bootstrap.Admin/wwwroot/css/admin-responsive.css b/Bootstrap.Admin/wwwroot/css/admin-responsive.css index 0880f7e9..9e3f5198 100644 --- a/Bootstrap.Admin/wwwroot/css/admin-responsive.css +++ b/Bootstrap.Admin/wwwroot/css/admin-responsive.css @@ -9,20 +9,13 @@ } @media (min-width: 768px) { - .sidebar { - top: 98px; - bottom: 40px; - position: absolute; + .main-content { + position: fixed; overflow: auto; } } @media (min-width: 769px) { - .sidebar { - display: block; - width: 210px; - } - .main-content { margin-left: 210px; transition: none; @@ -31,23 +24,9 @@ .main-content.open { display: block; } - - aside { - transition: none; - transform: none; - top: 0; - right: auto; - } } @media (min-height: 672px) { - .sidebar { - top: 98px; - bottom: 40px; - position: absolute; - overflow: auto; - } - .main-content { position: fixed; overflow: auto; @@ -57,12 +36,4 @@ .main-content.open { display: block; } - - aside { - top: 0; - } - - .aside.open { - transform: translate(0); - } } diff --git a/Bootstrap.Admin/wwwroot/css/admin.css b/Bootstrap.Admin/wwwroot/css/admin.css index 77cbcc91..adbab6ce 100644 --- a/Bootstrap.Admin/wwwroot/css/admin.css +++ b/Bootstrap.Admin/wwwroot/css/admin.css @@ -60,98 +60,6 @@ text-align: left; } -aside { - transition: transform .4s ease-in-out; - transform: translate(-100%); - height: 100%; - position: absolute; - top: 98px; - bottom: 40px; - left: 0; - right: 0; - z-index: 5; -} - - aside.open { - transform: translate(0); - } - -.sidebar { - display: none; - overflow: auto; - width: 100%; - z-index: 5; - background: #2a3542; -} - -.sidebar-menu { - padding: 20px 0; - margin-bottom: 0; -} - - .sidebar-menu .dcjq-icon { - height: 17px; - width: 17px; - display: inline-block; - background: url(../images/nav-expand.png) no-repeat; - float: right; - margin-top: 3px; - } - - .sidebar-menu .active .dcjq-icon { - background-position: bottom; - } - - .sidebar-menu li { - margin: 5px 10px; - } - - .sidebar-menu li a { - color: #aeb2b7; - display: block; - padding: 15px 10px; - transition: all 0.3s ease; - border-radius: 4px; - } - - .sidebar-menu li a:hover, .sidebar-menu li a:focus { - background: #35404d; - color: #fff; - } - - .sidebar-menu li a.active { - color: #FF6C60; - } - - .sidebar-menu li a i { - width: 22px; - } - - .sidebar-menu li .sub { - padding-left: 0; - } - - .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a { - color: #FF6C60; - transition: all 0.3s ease; - display: block; - } - - .sidebar-menu li .sub li { - background: #35404D; - margin: 0; - padding: 0 10px 0 32px; - } - - .sidebar-menu li .sub li:last-child { - border-radius: 0 0 4px 4px; - padding-bottom: 10px; - } - - .sidebar-menu li .sub li a { - padding: 12px 0; - } - .affix { position: fixed; bottom: 95px; diff --git a/Bootstrap.Admin/wwwroot/css/site-responsive.css b/Bootstrap.Admin/wwwroot/css/site-responsive.css index d06405d6..b0a3ddbd 100644 --- a/Bootstrap.Admin/wwwroot/css/site-responsive.css +++ b/Bootstrap.Admin/wwwroot/css/site-responsive.css @@ -31,6 +31,13 @@ flex: 0 1 auto; } + .sidebar { + top: 98px; + bottom: 40px; + position: absolute; + overflow: auto; + } + .header { border-bottom: none; } @@ -42,10 +49,19 @@ .header, .site-footer { position: fixed; } +} - .main-content { - position: fixed; - overflow: auto; +@media (min-width: 769px) { + .sidebar { + display: block; + width: 210px; + } + + aside { + transition: none; + transform: none; + top: 0; + right: auto; } } @@ -58,4 +74,19 @@ .header, .site-footer { position: fixed; } + + .sidebar { + top: 98px; + bottom: 40px; + position: absolute; + overflow: auto; + } + + aside { + top: 0; + } + + .aside.open { + transform: translate(0); + } } diff --git a/Bootstrap.Admin/wwwroot/css/site.css b/Bootstrap.Admin/wwwroot/css/site.css index 25b41093..cefc2f07 100644 --- a/Bootstrap.Admin/wwwroot/css/site.css +++ b/Bootstrap.Admin/wwwroot/css/site.css @@ -10,6 +10,98 @@ body { -webkit-overflow-scrolling: touch; } +aside { + transition: transform .4s ease-in-out; + transform: translate(-100%); + height: 100%; + position: absolute; + top: 98px; + bottom: 40px; + left: 0; + right: 0; + z-index: 5; +} + + aside.open { + transform: translate(0); + } + +.sidebar { + display: none; + overflow: auto; + width: 100%; + z-index: 5; + background: #2a3542; +} + +.sidebar-menu { + padding: 20px 0; + margin-bottom: 0; +} + + .sidebar-menu .dcjq-icon { + height: 17px; + width: 17px; + display: inline-block; + background: url(../images/nav-expand.png) no-repeat; + float: right; + margin-top: 3px; + } + + .sidebar-menu .active .dcjq-icon { + background-position: bottom; + } + + .sidebar-menu li { + margin: 5px 10px; + } + + .sidebar-menu li a { + color: #aeb2b7; + display: block; + padding: 15px 10px; + transition: all 0.3s ease; + border-radius: 4px; + } + + .sidebar-menu li a:hover, .sidebar-menu li a:focus { + background: #35404d; + color: #fff; + } + + .sidebar-menu li a.active { + color: #FF6C60; + } + + .sidebar-menu li a i { + width: 22px; + } + + .sidebar-menu li .sub { + padding-left: 0; + } + + .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a { + color: #FF6C60; + transition: all 0.3s ease; + display: block; + } + + .sidebar-menu li .sub li { + background: #35404D; + margin: 0; + padding: 0 10px 0 32px; + } + + .sidebar-menu li .sub li:last-child { + border-radius: 0 0 4px 4px; + padding-bottom: 10px; + } + + .sidebar-menu li .sub li a { + padding: 12px 0; + } + ul li { list-style: none; }