From e8c9952a2b5a933e2b781adbf36e61a0510e35d2 Mon Sep 17 00:00:00 2001 From: Adrian Wright Date: Thu, 26 Sep 2019 12:29:37 +0100 Subject: [PATCH] Add .sidebar to .nav-item so to just target the nav in the template and not any other .nav-item's in the html --- .../Client/wwwroot/css/site.css | 71 ++++++++------ .../StandaloneApp/wwwroot/css/site.css | 71 ++++++++------ .../BlazorServerApp/wwwroot/css/site.css | 92 ++++++++--------- .../ComponentsApp.Server/wwwroot/css/site.css | 69 ++++++++----- .../wwwroot/css/site.css | 98 +++++++++---------- 5 files changed, 223 insertions(+), 178 deletions(-) diff --git a/src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css/site.css b/src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css/site.css index 22f9ecb710..426ac972d6 100644 --- a/src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css/site.css +++ b/src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css/site.css @@ -1,9 +1,19 @@ -@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); +@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } +a, .btn-link { + color: #0366d6; +} + +.btn-primary { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; +} + app { position: relative; display: flex; @@ -21,10 +31,15 @@ app { } .main .top-row { - background-color: #e6e6e6; + background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; } + .main .top-row > a { + margin-left: 1.5rem; + } + .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } @@ -44,38 +59,38 @@ app { top: -2px; } -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; + .sidebar .nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; } - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } - - .nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; + .sidebar .nav-item:first-of-type { + padding-top: 1rem; } - .nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; + .sidebar .nav-item:last-of-type { + padding-bottom: 1rem; } + .sidebar .nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + + .sidebar .nav-item a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } + + .sidebar .nav-item a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } + .content { padding-top: 1.1rem; } diff --git a/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css b/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css index fa2c7f19b7..612b7666bd 100644 --- a/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css +++ b/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css @@ -1,9 +1,19 @@ -@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); +@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } +a, .btn-link { + color: #0366d6; +} + +.btn-primary { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; +} + app { position: relative; display: flex; @@ -21,10 +31,15 @@ app { } .main .top-row { - background-color: #e6e6e6; + background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; } + .main .top-row > a { + margin-left: 1.5rem; + } + .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } @@ -44,38 +59,38 @@ app { top: -2px; } -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; + .sidebar .nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; } - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } - - .nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; + .sidebar .nav-item:first-of-type { + padding-top: 1rem; } - .nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; + .sidebar .nav-item:last-of-type { + padding-bottom: 1rem; } + .sidebar .nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + + .sidebar .nav-item a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } + + .sidebar .nav-item a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } + .content { padding-top: 1.1rem; } diff --git a/src/Components/Samples/BlazorServerApp/wwwroot/css/site.css b/src/Components/Samples/BlazorServerApp/wwwroot/css/site.css index 17b0a5e617..426ac972d6 100644 --- a/src/Components/Samples/BlazorServerApp/wwwroot/css/site.css +++ b/src/Components/Samples/BlazorServerApp/wwwroot/css/site.css @@ -30,66 +30,66 @@ app { flex: 1; } -.main .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; -} + .main .top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + } -.main .top-row > a { - margin-left: 1.5rem; -} + .main .top-row > a { + margin-left: 1.5rem; + } .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } -.sidebar .top-row { - background-color: rgba(0,0,0,0.4); -} + .sidebar .top-row { + background-color: rgba(0,0,0,0.4); + } -.sidebar .navbar-brand { - font-size: 1.1rem; -} + .sidebar .navbar-brand { + font-size: 1.1rem; + } -.sidebar .oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; -} + .sidebar .oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; + } -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} + .sidebar .nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; + } -.nav-item:first-of-type { - padding-top: 1rem; -} + .sidebar .nav-item:first-of-type { + padding-top: 1rem; + } -.nav-item:last-of-type { - padding-bottom: 1rem; -} + .sidebar .nav-item:last-of-type { + padding-bottom: 1rem; + } -.nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; -} + .sidebar .nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } -.nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; -} + .sidebar .nav-item a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } -.nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} + .sidebar .nav-item a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } .content { padding-top: 1.1rem; diff --git a/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css b/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css index 2789bc7b8d..612b7666bd 100644 --- a/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css +++ b/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css @@ -4,6 +4,16 @@ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } +a, .btn-link { + color: #0366d6; +} + +.btn-primary { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; +} + app { position: relative; display: flex; @@ -21,10 +31,15 @@ app { } .main .top-row { - background-color: #e6e6e6; + background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; } + .main .top-row > a { + margin-left: 1.5rem; + } + .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } @@ -44,38 +59,38 @@ app { top: -2px; } -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; + .sidebar .nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; } - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } - - .nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; + .sidebar .nav-item:first-of-type { + padding-top: 1rem; } - .nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; + .sidebar .nav-item:last-of-type { + padding-bottom: 1rem; } + .sidebar .nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + + .sidebar .nav-item a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } + + .sidebar .nav-item a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } + .content { padding-top: 1.1rem; } diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css/site.css b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css/site.css index 0ddeb1311e..426ac972d6 100644 --- a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css/site.css +++ b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css/site.css @@ -9,9 +9,9 @@ a, .btn-link { } .btn-primary { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; } app { @@ -30,66 +30,66 @@ app { flex: 1; } -.main .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; -} + .main .top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + } -.main .top-row > a { - margin-left: 1.5rem; -} + .main .top-row > a { + margin-left: 1.5rem; + } .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } -.sidebar .top-row { - background-color: rgba(0,0,0,0.4); -} + .sidebar .top-row { + background-color: rgba(0,0,0,0.4); + } -.sidebar .navbar-brand { - font-size: 1.1rem; -} + .sidebar .navbar-brand { + font-size: 1.1rem; + } -.sidebar .oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; -} + .sidebar .oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; + } -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} + .sidebar .nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; + } -.nav-item:first-of-type { - padding-top: 1rem; -} + .sidebar .nav-item:first-of-type { + padding-top: 1rem; + } -.nav-item:last-of-type { - padding-bottom: 1rem; -} + .sidebar .nav-item:last-of-type { + padding-bottom: 1rem; + } -.nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; -} + .sidebar .nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } -.nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; -} + .sidebar .nav-item a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } -.nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} + .sidebar .nav-item a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } .content { padding-top: 1.1rem;