Update the templates CSS to leverage CSS isolation (#24380)
* Template changes * Template changes + scope computation update * Template updates * tmp * Fix style path * Webassembly template changes * Update tests * Undo blazor.server.js changes * WebAssembly cleanups * Undo unwanted change * Undo another unwanted change * Fix server-side login combinator * update tests, switch from app to div id=app
This commit is contained in:
Javier Calvarro Nelson
GitHub
parent
28d5d49c21
commit
3cf39cf7e1
|
|
@ -30,6 +30,9 @@ namespace Templates.Test
|
|||
[QuarantinedTest("https://github.com/dotnet/aspnetcore/issues/20172")]
|
||||
public async Task BlazorServerTemplateWorks_NoAuth()
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
Project = await ProjectFactory.GetOrCreateProject("blazorservernoauth", Output);
|
||||
|
||||
var createResult = await Project.RunDotNetNewAsync("blazorserver");
|
||||
|
|
@ -88,6 +91,9 @@ namespace Templates.Test
|
|||
[QuarantinedTest]
|
||||
public async Task BlazorServerTemplateWorks_IndividualAuth(bool useLocalDB)
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
Project = await ProjectFactory.GetOrCreateProject("blazorserverindividual" + (useLocalDB ? "uld" : ""), Output);
|
||||
|
||||
var createResult = await Project.RunDotNetNewAsync("blazorserver", auth: "Individual", useLocalDB: useLocalDB);
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@ namespace Templates.Test
|
|||
[Fact]
|
||||
public async Task BlazorWasmStandaloneTemplate_Works()
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
var project = await ProjectFactory.GetOrCreateProject("blazorstandalone", Output);
|
||||
project.RuntimeIdentifier = "browser-wasm";
|
||||
|
||||
|
|
@ -81,6 +84,9 @@ namespace Templates.Test
|
|||
[QuarantinedTest("https://github.com/dotnet/aspnetcore/issues/20172")]
|
||||
public async Task BlazorWasmHostedTemplate_Works()
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
var project = await ProjectFactory.GetOrCreateProject("blazorhosted", Output);
|
||||
|
||||
var createResult = await project.RunDotNetNewAsync("blazorwasm", args: new[] { "--hosted" });
|
||||
|
|
@ -134,6 +140,9 @@ namespace Templates.Test
|
|||
[Fact]
|
||||
public async Task BlazorWasmStandalonePwaTemplate_Works()
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
var project = await ProjectFactory.GetOrCreateProject("blazorstandalonepwa", Output);
|
||||
project.RuntimeIdentifier = "browser-wasm";
|
||||
|
||||
|
|
@ -173,6 +182,9 @@ namespace Templates.Test
|
|||
[Fact]
|
||||
public async Task BlazorWasmHostedPwaTemplate_Works()
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
var project = await ProjectFactory.GetOrCreateProject("blazorhostedpwa", Output);
|
||||
|
||||
var createResult = await project.RunDotNetNewAsync("blazorwasm", args: new[] { "--hosted", "--pwa" });
|
||||
|
|
@ -266,6 +278,9 @@ namespace Templates.Test
|
|||
|
||||
private async Task BlazorWasmHostedTemplate_IndividualAuth_Works(bool useLocalDb)
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
var project = await ProjectFactory.GetOrCreateProject("blazorhostedindividual" + (useLocalDb ? "uld" : ""), Output);
|
||||
|
||||
var createResult = await project.RunDotNetNewAsync("blazorwasm", args: new[] { "--hosted", "-au", "Individual", useLocalDb ? "-uld" : "" });
|
||||
|
|
@ -333,6 +348,9 @@ namespace Templates.Test
|
|||
[QuarantinedTest("https://github.com/dotnet/aspnetcore/issues/23639")]
|
||||
public async Task BlazorWasmStandaloneTemplate_IndividualAuth_Works()
|
||||
{
|
||||
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
|
||||
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");
|
||||
|
||||
var project = await ProjectFactory.GetOrCreateProject("blazorstandaloneindividual", Output);
|
||||
project.RuntimeIdentifier = "browser-wasm";
|
||||
|
||||
|
|
|
|||
|
|
@ -14,11 +14,10 @@
|
|||
<base href="~/" />
|
||||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||||
<link href="css/site.css" rel="stylesheet" />
|
||||
<link href="_content/BlazorServerWeb-CSharp/_framework/scoped.styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<app>
|
||||
<component type="typeof(App)" render-mode="ServerPrerendered" />
|
||||
</app>
|
||||
<component type="typeof(App)" render-mode="ServerPrerendered" />
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
<environment include="Staging,Production">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="top-row px-4 auth">
|
||||
<LoginDisplay />
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
<div class="main">
|
||||
<div class="top-row px-4 auth">
|
||||
<LoginDisplay />
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="top-row px-4">
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
<div class="main">
|
||||
<div class="top-row px-4">
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.top-row a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.top-row:not(.auth) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-row.auth {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row a, .top-row .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,97 +14,10 @@ a, .btn-link {
|
|||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
app {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main .top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.main .top-row > a, .main .top-row .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.main .top-row a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.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 .navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.sidebar .oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.sidebar .nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.valid.modified:not([type=checkbox]) {
|
||||
outline: 1px solid #26b050;
|
||||
}
|
||||
|
|
@ -135,50 +48,3 @@ app {
|
|||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.main .top-row:not(.auth) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main .top-row.auth {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main .top-row a, .main .top-row .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
app {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.main .top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ namespace ComponentsWebAssembly_CSharp
|
|||
public static async Task Main(string[] args)
|
||||
{
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("app");
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
|
||||
#if (!Hosted || NoAuth)
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="top-row px-4 auth">
|
||||
<LoginDisplay />
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
<div class="main">
|
||||
<div class="top-row px-4 auth">
|
||||
<LoginDisplay />
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="top-row px-4">
|
||||
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
<div class="main">
|
||||
<div class="top-row px-4">
|
||||
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
|
||||
</div>
|
||||
|
||||
<div class="content px-4">
|
||||
@Body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.top-row a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.top-row:not(.auth) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-row.auth {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row a, .top-row .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,97 +14,10 @@ a, .btn-link {
|
|||
border-color: #1861ac;
|
||||
}
|
||||
|
||||
app {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main .top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.main .top-row > a, .main .top-row .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.main .top-row a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.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 .navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.sidebar .oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.sidebar .nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.valid.modified:not([type=checkbox]) {
|
||||
outline: 1px solid #26b050;
|
||||
}
|
||||
|
|
@ -129,56 +42,9 @@ app {
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.main .top-row:not(.auth) {
|
||||
display: none;
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.main .top-row.auth {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main .top-row a, .main .top-row .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
app {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.main .top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<base href="/" />
|
||||
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="css/app.css" rel="stylesheet" />
|
||||
<link href="_framework/scoped.styles.css" rel="stylesheet" />
|
||||
<!--#if PWA -->
|
||||
<link href="manifest.json" rel="manifest" />
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<app>Loading...</app>
|
||||
<div id="app">Loading...</div>
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
An unhandled error has occurred.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<PropertyGroup>
|
||||
<TreatWarningsAsErrors>true</TreatWarningsAsErrors>
|
||||
<RestoreAdditionalProjectSources>${RestoreAdditionalProjectSources}</RestoreAdditionalProjectSources>
|
||||
|
||||
<!-- This sets an option which prevents the tests from rolling forward into a newer shared framework. -->
|
||||
<UserRuntimeConfig>$(MSBuildThisFileDirectory)runtimeconfig.norollforward.json</UserRuntimeConfig>
|
||||
</PropertyGroup>
|
||||
|
|
|
|||
|
|
@ -921,7 +921,9 @@
|
|||
"Properties/launchSettings.json",
|
||||
"Shared/LoginDisplay.razor",
|
||||
"Shared/MainLayout.razor",
|
||||
"Shared/MainLayout.razor.css",
|
||||
"Shared/NavMenu.razor",
|
||||
"Shared/NavMenu.razor.css",
|
||||
"Shared/SurveyPrompt.razor",
|
||||
"wwwroot/favicon.ico",
|
||||
"wwwroot/css/site.css",
|
||||
|
|
@ -958,7 +960,9 @@
|
|||
"Properties/launchSettings.json",
|
||||
"Shared/LoginDisplay.razor",
|
||||
"Shared/MainLayout.razor",
|
||||
"Shared/MainLayout.razor.css",
|
||||
"Shared/NavMenu.razor",
|
||||
"Shared/NavMenu.razor.css",
|
||||
"Shared/SurveyPrompt.razor",
|
||||
"wwwroot/favicon.ico",
|
||||
"wwwroot/css/site.css",
|
||||
|
|
@ -995,7 +999,9 @@
|
|||
"Properties/launchSettings.json",
|
||||
"Shared/LoginDisplay.razor",
|
||||
"Shared/MainLayout.razor",
|
||||
"Shared/MainLayout.razor.css",
|
||||
"Shared/NavMenu.razor",
|
||||
"Shared/NavMenu.razor.css",
|
||||
"Shared/SurveyPrompt.razor",
|
||||
"wwwroot/favicon.ico",
|
||||
"wwwroot/css/site.css",
|
||||
|
|
@ -1031,7 +1037,9 @@
|
|||
"Pages/_Host.cshtml",
|
||||
"Properties/launchSettings.json",
|
||||
"Shared/MainLayout.razor",
|
||||
"Shared/MainLayout.razor.css",
|
||||
"Shared/NavMenu.razor",
|
||||
"Shared/NavMenu.razor.css",
|
||||
"Shared/SurveyPrompt.razor",
|
||||
"wwwroot/favicon.ico",
|
||||
"wwwroot/css/site.css",
|
||||
|
|
@ -1068,7 +1076,9 @@
|
|||
"Properties/launchSettings.json",
|
||||
"Shared/LoginDisplay.razor",
|
||||
"Shared/MainLayout.razor",
|
||||
"Shared/MainLayout.razor.css",
|
||||
"Shared/NavMenu.razor",
|
||||
"Shared/NavMenu.razor.css",
|
||||
"Shared/SurveyPrompt.razor",
|
||||
"wwwroot/favicon.ico",
|
||||
"wwwroot/css/site.css",
|
||||
|
|
@ -1105,7 +1115,9 @@
|
|||
"Properties/launchSettings.json",
|
||||
"Shared/LoginDisplay.razor",
|
||||
"Shared/MainLayout.razor",
|
||||
"Shared/MainLayout.razor.css",
|
||||
"Shared/NavMenu.razor",
|
||||
"Shared/NavMenu.razor.css",
|
||||
"Shared/SurveyPrompt.razor",
|
||||
"wwwroot/favicon.ico",
|
||||
"wwwroot/css/site.css",
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ Integration with static web assets:
|
|||
<_ScopedCssExtension>.rz.scp.css</_ScopedCssExtension>
|
||||
<ResolveStaticWebAssetsInputsDependsOn>$(ResolveStaticWebAssetsInputsDependsOn);_CollectAllScopedCssAssets;AddScopedCssBundle</ResolveStaticWebAssetsInputsDependsOn>
|
||||
<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>$(ResolveCurrentProjectStaticWebAssetsInputsDependsOn);_AddGeneratedScopedCssFiles</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
|
||||
<GetCurrentProjectStaticWebAssetsDependsOn Condition="'$(UseBlazorWebAssembly)' == 'true'">$(GetCurrentProjectStaticWebAssetsDependsOn);IncludeScopedCssBundle;</GetCurrentProjectStaticWebAssetsDependsOn>
|
||||
</PropertyGroup>
|
||||
|
||||
<Target Name="ResolveScopedCssInputs">
|
||||
|
|
@ -68,7 +69,7 @@ Integration with static web assets:
|
|||
NOTE: This target is called as part of an incremental build scenario in VS. Do not perform any work
|
||||
outside of calculating RazorComponent items in this target.
|
||||
-->
|
||||
<DiscoverDefaultScopedCssItems Condition="'$(EnableDefaultScopedCssItems)'=='true'" Content="@(None);@(Content)">
|
||||
<DiscoverDefaultScopedCssItems Condition="'$(EnableDefaultScopedCssItems)' == 'true'" Content="@(None);@(Content)">
|
||||
<Output TaskParameter="DiscoveredScopedCssInputs" ItemName="_DiscoveredScopedCssInputs" />
|
||||
</DiscoverDefaultScopedCssItems>
|
||||
|
||||
|
|
@ -207,6 +208,33 @@ Integration with static web assets:
|
|||
</ItemGroup>
|
||||
</Target>
|
||||
|
||||
<Target Name="IncludeScopedCssBundle" Condition="'$(ScopedCssDisableBundling)' != 'true'" DependsOnTargets="_CollectAllScopedCssAssets;_AddGeneratedScopedCssFiles">
|
||||
<PropertyGroup>
|
||||
<_ScopedCssOutputPath>$(_ScopedCssIntermediatePath)_framework\scoped.styles.css</_ScopedCssOutputPath>
|
||||
<_ScopedCssOutputFullPath>$([System.IO.Path]::Combine('$(MSBuildProjectFileDirectory)', '$(_ScopedCssIntermediatePath)_framework\scoped.styles.css'))</_ScopedCssOutputFullPath>
|
||||
</PropertyGroup>
|
||||
<ItemGroup>
|
||||
<!-- When bundling is enabled we want to remove all identified generated scoped css files from the list of static web assets so that
|
||||
they are not copied to the output folder. -->
|
||||
<StaticWebAsset Remove="@(_AllScopedCss)" Condition="'$(ScopedCssDisableBundling)' != 'true'" />
|
||||
<!-- https://github.com/dotnet/aspnetcore/issues/24245 -->
|
||||
<StaticWebAsset Include="$(_ScopedCssOutputPath)" Condition="@(_AllScopedCss) != ''">
|
||||
<SourceType></SourceType>
|
||||
<SourceId>$(PackageId)</SourceId>
|
||||
<ContentRoot>$(_ScopedCssIntermediatePath)</ContentRoot>
|
||||
<BasePath>$(StaticWebAssetBasePath)</BasePath>
|
||||
<RelativePath>_framework/scoped.styles.css</RelativePath>
|
||||
</StaticWebAsset>
|
||||
<_ExternalStaticWebAsset Include="$(_ScopedCssOutputPath)" Condition="@(_AllScopedCss) != ''">
|
||||
<SourceType>generated</SourceType>
|
||||
<SourceId>$(PackageId)</SourceId>
|
||||
<ContentRoot>$(_ScopedCssIntermediatePath)</ContentRoot>
|
||||
<BasePath>$(StaticWebAssetBasePath)</BasePath>
|
||||
<RelativePath>_framework/scoped.styles.css</RelativePath>
|
||||
</_ExternalStaticWebAsset>
|
||||
</ItemGroup>
|
||||
</Target>
|
||||
|
||||
<Target Name="BundleScopedCssFiles" Condition="'$(ScopedCssDisableBundling)' != 'true' and '@(_AllScopedCss)' != ''" BeforeTargets="GetCopyToOutputDirectoryItems;_StaticWebAssetsComputeFilesToPublish" DependsOnTargets="_GenerateScopedCssFiles">
|
||||
<!-- Incrementalism is built into the task itself. -->
|
||||
<ConcatenateCssFiles FilesToProcess="@(_AllScopedCss)" OutputFile="$(_ScopedCssOutputPath)" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue