Skip to content

Commit e8c9952

Browse files
Adrian WrightSteveSandersonMS
authored andcommitted
Add .sidebar to .nav-item so to just target the nav in the template and not any other .nav-item's in the html
1 parent 1046cc2 commit e8c9952

File tree

5 files changed

+228
-183
lines changed
  • src
    • Components
      • Blazor
        • Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css
        • testassets/StandaloneApp/wwwroot/css
      • Samples/BlazorServerApp/wwwroot/css
      • test/testassets/ComponentsApp.Server/wwwroot/css
    • ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css

5 files changed

+228
-183
lines changed

src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css/site.css

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
1+
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
22

33
html, body {
44
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
55
}
66

7+
a, .btn-link {
8+
color: #0366d6;
9+
}
10+
11+
.btn-primary {
12+
color: #fff;
13+
background-color: #1b6ec2;
14+
border-color: #1861ac;
15+
}
16+
717
app {
818
position: relative;
919
display: flex;
@@ -21,10 +31,15 @@ app {
2131
}
2232

2333
.main .top-row {
24-
background-color: #e6e6e6;
34+
background-color: #f7f7f7;
2535
border-bottom: 1px solid #d6d5d5;
36+
justify-content: flex-end;
2637
}
2738

39+
.main .top-row > a {
40+
margin-left: 1.5rem;
41+
}
42+
2843
.sidebar {
2944
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
3045
}
@@ -44,38 +59,38 @@ app {
4459
top: -2px;
4560
}
4661

47-
.nav-item {
48-
font-size: 0.9rem;
49-
padding-bottom: 0.5rem;
50-
}
51-
52-
.nav-item:first-of-type {
53-
padding-top: 1rem;
54-
}
55-
56-
.nav-item:last-of-type {
57-
padding-bottom: 1rem;
62+
.sidebar .nav-item {
63+
font-size: 0.9rem;
64+
padding-bottom: 0.5rem;
5865
}
5966

60-
.nav-item a {
61-
color: #d7d7d7;
62-
border-radius: 4px;
63-
height: 3rem;
64-
display: flex;
65-
align-items: center;
66-
line-height: 3rem;
67-
}
67+
.sidebar .nav-item:first-of-type {
68+
padding-top: 1rem;
69+
}
6870

69-
.nav-item a.active {
70-
background-color: rgba(255,255,255,0.25);
71-
color: white;
71+
.sidebar .nav-item:last-of-type {
72+
padding-bottom: 1rem;
7273
}
7374

74-
.nav-item a:hover {
75-
background-color: rgba(255,255,255,0.1);
76-
color: white;
75+
.sidebar .nav-item a {
76+
color: #d7d7d7;
77+
border-radius: 4px;
78+
height: 3rem;
79+
display: flex;
80+
align-items: center;
81+
line-height: 3rem;
7782
}
7883

84+
.sidebar .nav-item a.active {
85+
background-color: rgba(255,255,255,0.25);
86+
color: white;
87+
}
88+
89+
.sidebar .nav-item a:hover {
90+
background-color: rgba(255,255,255,0.1);
91+
color: white;
92+
}
93+
7994
.content {
8095
padding-top: 1.1rem;
8196
}

src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
1+
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
22

33
html, body {
44
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
55
}
66

7+
a, .btn-link {
8+
color: #0366d6;
9+
}
10+
11+
.btn-primary {
12+
color: #fff;
13+
background-color: #1b6ec2;
14+
border-color: #1861ac;
15+
}
16+
717
app {
818
position: relative;
919
display: flex;
@@ -21,10 +31,15 @@ app {
2131
}
2232

2333
.main .top-row {
24-
background-color: #e6e6e6;
34+
background-color: #f7f7f7;
2535
border-bottom: 1px solid #d6d5d5;
36+
justify-content: flex-end;
2637
}
2738

39+
.main .top-row > a {
40+
margin-left: 1.5rem;
41+
}
42+
2843
.sidebar {
2944
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
3045
}
@@ -44,38 +59,38 @@ app {
4459
top: -2px;
4560
}
4661

47-
.nav-item {
48-
font-size: 0.9rem;
49-
padding-bottom: 0.5rem;
50-
}
51-
52-
.nav-item:first-of-type {
53-
padding-top: 1rem;
54-
}
55-
56-
.nav-item:last-of-type {
57-
padding-bottom: 1rem;
62+
.sidebar .nav-item {
63+
font-size: 0.9rem;
64+
padding-bottom: 0.5rem;
5865
}
5966

60-
.nav-item a {
61-
color: #d7d7d7;
62-
border-radius: 4px;
63-
height: 3rem;
64-
display: flex;
65-
align-items: center;
66-
line-height: 3rem;
67-
}
67+
.sidebar .nav-item:first-of-type {
68+
padding-top: 1rem;
69+
}
6870

69-
.nav-item a.active {
70-
background-color: rgba(255,255,255,0.25);
71-
color: white;
71+
.sidebar .nav-item:last-of-type {
72+
padding-bottom: 1rem;
7273
}
7374

74-
.nav-item a:hover {
75-
background-color: rgba(255,255,255,0.1);
76-
color: white;
75+
.sidebar .nav-item a {
76+
color: #d7d7d7;
77+
border-radius: 4px;
78+
height: 3rem;
79+
display: flex;
80+
align-items: center;
81+
line-height: 3rem;
7782
}
7883

84+
.sidebar .nav-item a.active {
85+
background-color: rgba(255,255,255,0.25);
86+
color: white;
87+
}
88+
89+
.sidebar .nav-item a:hover {
90+
background-color: rgba(255,255,255,0.1);
91+
color: white;
92+
}
93+
7994
.content {
8095
padding-top: 1.1rem;
8196
}

src/Components/Samples/BlazorServerApp/wwwroot/css/site.css

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -30,66 +30,66 @@ app {
3030
flex: 1;
3131
}
3232

33-
.main .top-row {
34-
background-color: #f7f7f7;
35-
border-bottom: 1px solid #d6d5d5;
36-
justify-content: flex-end;
37-
}
33+
.main .top-row {
34+
background-color: #f7f7f7;
35+
border-bottom: 1px solid #d6d5d5;
36+
justify-content: flex-end;
37+
}
3838

39-
.main .top-row > a {
40-
margin-left: 1.5rem;
41-
}
39+
.main .top-row > a {
40+
margin-left: 1.5rem;
41+
}
4242

4343
.sidebar {
4444
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
4545
}
4646

47-
.sidebar .top-row {
48-
background-color: rgba(0,0,0,0.4);
49-
}
50-
51-
.sidebar .navbar-brand {
52-
font-size: 1.1rem;
53-
}
54-
55-
.sidebar .oi {
56-
width: 2rem;
57-
font-size: 1.1rem;
58-
vertical-align: text-top;
59-
top: -2px;
60-
}
61-
62-
.nav-item {
63-
font-size: 0.9rem;
64-
padding-bottom: 0.5rem;
65-
}
66-
67-
.nav-item:first-of-type {
68-
padding-top: 1rem;
69-
}
47+
.sidebar .top-row {
48+
background-color: rgba(0,0,0,0.4);
49+
}
7050

71-
.nav-item:last-of-type {
72-
padding-bottom: 1rem;
73-
}
51+
.sidebar .navbar-brand {
52+
font-size: 1.1rem;
53+
}
7454

75-
.nav-item a {
76-
color: #d7d7d7;
77-
border-radius: 4px;
78-
height: 3rem;
79-
display: flex;
80-
align-items: center;
81-
line-height: 3rem;
82-
}
55+
.sidebar .oi {
56+
width: 2rem;
57+
font-size: 1.1rem;
58+
vertical-align: text-top;
59+
top: -2px;
60+
}
8361

84-
.nav-item a.active {
85-
background-color: rgba(255,255,255,0.25);
86-
color: white;
87-
}
62+
.sidebar .nav-item {
63+
font-size: 0.9rem;
64+
padding-bottom: 0.5rem;
65+
}
8866

89-
.nav-item a:hover {
90-
background-color: rgba(255,255,255,0.1);
91-
color: white;
92-
}
67+
.sidebar .nav-item:first-of-type {
68+
padding-top: 1rem;
69+
}
70+
71+
.sidebar .nav-item:last-of-type {
72+
padding-bottom: 1rem;
73+
}
74+
75+
.sidebar .nav-item a {
76+
color: #d7d7d7;
77+
border-radius: 4px;
78+
height: 3rem;
79+
display: flex;
80+
align-items: center;
81+
line-height: 3rem;
82+
}
83+
84+
.sidebar .nav-item a.active {
85+
background-color: rgba(255,255,255,0.25);
86+
color: white;
87+
}
88+
89+
.sidebar .nav-item a:hover {
90+
background-color: rgba(255,255,255,0.1);
91+
color: white;
92+
}
9393

9494
.content {
9595
padding-top: 1.1rem;

0 commit comments

Comments
 (0)