diff --git a/browser/IgBlazorSamples.Gulp/tasks/Transformer.ts b/browser/IgBlazorSamples.Gulp/tasks/Transformer.ts index aa45680c4c..180ab791e7 100644 --- a/browser/IgBlazorSamples.Gulp/tasks/Transformer.ts +++ b/browser/IgBlazorSamples.Gulp/tasks/Transformer.ts @@ -1218,12 +1218,12 @@ class PackageDependency { // used in updateCodeViewer script to serialize JSON files class CodeViewer { - public path: string; public hasRelativeAssetsUrls: Boolean; - public content: string; public isMain: Boolean; public fileExtension: string; public fileHeader: string; + public path: string; + public content: string; constructor(filePath: string, content: string, fileExtension: string, fileHeader: string, isMain: Boolean) { @@ -1231,10 +1231,10 @@ class CodeViewer { // jsonContent = jsonContent.replace(/\/\//g, "/"); this.hasRelativeAssetsUrls = false; - this.path = filePath; - this.content = jsonContent; this.isMain = isMain; this.fileExtension = fileExtension; this.fileHeader = fileHeader; + this.path = filePath; + this.content = jsonContent; } } \ No newline at end of file diff --git a/browser/IgBlazorSamples.Gulp/tasks/gulp-samples.js b/browser/IgBlazorSamples.Gulp/tasks/gulp-samples.js index 5aadb211cd..22d403e66b 100644 --- a/browser/IgBlazorSamples.Gulp/tasks/gulp-samples.js +++ b/browser/IgBlazorSamples.Gulp/tasks/gulp-samples.js @@ -94,6 +94,7 @@ var sampleSource = [ // igConfig.SamplesCopyPath + '/excel/spreadsheet/**/App.razor', // igConfig.SamplesCopyPath + '/gauges/bullet-graph/animation/App.razor', + // igConfig.SamplesCopyPath + '/charts/data-chart/data-annotation-multiple-with-stocks/App.razor', // igConfig.SamplesCopyPath + '/grids/**/binding-live-data/App.razor', // igConfig.SamplesCopyPath + '/grids/**/overview/App.razor', // igConfig.SamplesCopyPath + '/grids/**/column-types/App.razor', @@ -1105,10 +1106,11 @@ function updateCodeViewer(cb) { // path = path.replace("/", "-"); var codeViewPath = "../IgBlazorSamples.Client/wwwroot/code-viewer" + path + ".json"; - // log("generating " + codeViewPath); + log("generating " + codeViewPath); var content = "{\r\n \"sampleFiles\":\r\n"; var contentItems = []; + var dataFiles = []; for (const file of sample.SourceFiles) { // console.log("SourceFiles " + file.Name); @@ -1131,12 +1133,12 @@ function updateCodeViewer(cb) { //code = code.replace(/\n\n/gm, '\n'); var item = new CodeViewer(file.Path, code, "razor", "razor", true); contentItems.push(item); - } - else if (file.isProgramCS()) { + + } else if (file.isProgramCS()) { var item = new CodeViewer(file.Path, file.Content, "cs", "MODULES", true); contentItems.push(item); - } - else if (file.isCS()) { + + } else if (file.isCS()) { var name = file.Name.toLowerCase(); var header = "DATA"; if (sample.DataFilesCount > 1) { @@ -1144,10 +1146,29 @@ function updateCodeViewer(cb) { header = isGenerator ? "DATA GENERATOR" : "DATA SOURCE"; } var item = new CodeViewer(file.Path, file.Content, "cs", header, true); - contentItems.push(item); + // contentItems.push(item); + dataFiles.push(item); } } + if (dataFiles.length === 1) { + contentItems.push(dataFiles[0]); + } else if (dataFiles.length > 1) { + // combining multiple data files into one data source + var dataPath = dataFiles[0].path; + var dataFolder = dataPath.substring(0, dataPath.lastIndexOf("/")); + var dataContent = "// NOTE this file contains multiple data sources:\r\n"; + + for (let i = 0; i < dataFiles.length; i++) { + const data = dataFiles[i]; + dataContent += "\r\n\r\n" + "// Data Source #" + (i+1) + "\r\n"; + dataContent += data.content + "\r\n"; + } + + var dataItem = new CodeViewer(dataFolder + "/DataSources.cs", dataContent, "cs", "DATA", true); + contentItems.push(dataItem); + } + if (sample.PublicFiles_JS.length > 0) { for(const file of sample.PublicFiles_JS) { var item = new CodeViewer(file.Path, file.Content, "js", "js", true); diff --git a/samples/layouts/avatar/styling/App.razor b/samples/layouts/avatar/styling/App.razor new file mode 100644 index 0000000000..3c18487a4a --- /dev/null +++ b/samples/layouts/avatar/styling/App.razor @@ -0,0 +1,18 @@ +@using IgniteUI.Blazor.Controls + + +
+ + +
+ + + +
+
+@code { + +} \ No newline at end of file diff --git a/samples/layouts/avatar/styling/BlazorClientApp.csproj b/samples/layouts/avatar/styling/BlazorClientApp.csproj new file mode 100644 index 0000000000..eb9d390416 --- /dev/null +++ b/samples/layouts/avatar/styling/BlazorClientApp.csproj @@ -0,0 +1,25 @@ + + + + net9.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + + + + + diff --git a/samples/layouts/avatar/styling/BlazorClientApp.sln b/samples/layouts/avatar/styling/BlazorClientApp.sln new file mode 100644 index 0000000000..8e75057474 --- /dev/null +++ b/samples/layouts/avatar/styling/BlazorClientApp.sln @@ -0,0 +1,24 @@ +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 16 +VisualStudioVersion = 16.0.29613.14 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18} + EndGlobalSection +EndGlobal diff --git a/samples/layouts/avatar/styling/Program.cs b/samples/layouts/avatar/styling/Program.cs new file mode 100644 index 0000000000..94d62733c6 --- /dev/null +++ b/samples/layouts/avatar/styling/Program.cs @@ -0,0 +1,28 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor( + typeof(IgbAvatarModule) + ); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/layouts/avatar/styling/Properties/launchSettings.json b/samples/layouts/avatar/styling/Properties/launchSettings.json new file mode 100644 index 0000000000..468407d277 --- /dev/null +++ b/samples/layouts/avatar/styling/Properties/launchSettings.json @@ -0,0 +1,27 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44385 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "applicationUrl": "https://localhost:5001;http://localhost:4200" + } + } +} diff --git a/samples/layouts/avatar/styling/README.md b/samples/layouts/avatar/styling/README.md new file mode 100644 index 0000000000..8eb1ce640a --- /dev/null +++ b/samples/layouts/avatar/styling/README.md @@ -0,0 +1,70 @@ + + + +This folder contains implementation of Blazor application with example of Styling feature using [Avatar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2019 + +NOTE: VS 2019 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2019** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/layouts/avatar/styling/_Imports.razor b/samples/layouts/avatar/styling/_Imports.razor new file mode 100644 index 0000000000..b4bad03986 --- /dev/null +++ b/samples/layouts/avatar/styling/_Imports.razor @@ -0,0 +1,8 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using Infragistics.Samples diff --git a/samples/layouts/avatar/styling/wwwroot/index.css b/samples/layouts/avatar/styling/wwwroot/index.css new file mode 100644 index 0000000000..020cee8b07 --- /dev/null +++ b/samples/layouts/avatar/styling/wwwroot/index.css @@ -0,0 +1,52 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://static.infragistics.com/xplatform/css/samples/ +*/ +.sizes .size-small { + --ig-size: var(--ig-size-small); +} + +.sizes .size-medium { + --ig-size: var(--ig-size-medium); +} + +.sizes .size-large, +.size-large { + --ig-size: var(--ig-size-large); +} + +.container { + display: flex; + flex-direction: row; + justify-content: space-around; + gap: 10px; + margin-top: 20px; +} + +.sizes { + display: flex; + flex-direction: row; + gap: 10px; +} + +igc-avatar::part(base) { + background: var(--ig-success-100); + border: 2px solid var(--ig-error-500); +} + +igc-avatar::part(initials) { + color: var(--ig-success-500-contrast); + background: var(--ig-error-500); + padding: 5px 10px; + margin: 10px; + border-radius: 50px; + /* border: 1px solid greenyellow; */ +} + +igc-avatar::part(image) { + border-radius: 20px; + padding: 5px; + border: 2px solid var(--ig-primary-500); +} + + diff --git a/samples/layouts/avatar/styling/wwwroot/index.html b/samples/layouts/avatar/styling/wwwroot/index.html new file mode 100644 index 0000000000..326db39e58 --- /dev/null +++ b/samples/layouts/avatar/styling/wwwroot/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + diff --git a/samples/layouts/stepper/styling/App.razor b/samples/layouts/stepper/styling/App.razor new file mode 100644 index 0000000000..2ed1f35bbe --- /dev/null +++ b/samples/layouts/stepper/styling/App.razor @@ -0,0 +1,98 @@ +@using IgniteUI.Blazor.Controls + +
+
+ + Horizontal + Vertical + + + Grow + Fade + None + + + Slide + Fade + None + + + ms + +
+ + + Personal Info + + + NEXT + + + Delivery address + + + PREVIOUS + NEXT + + + Payment + + PayPal (n@mail.com; 18/02/2021) + Visa (**** **** **** 1234; 12/23) + MasterCard (**** **** **** 5678; 12/24) + + PREVIOUS + SUBMIT + + + Delivery status +

Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.

+ PREVIOUS + RESET + + +
+ +@code { + private IgbStepper stepper; + + public void Previous() + { + this.stepper.Prev(); + } + + public void Next() + { + this.stepper.Next(); + } + + public void Reset() + { + this.stepper.Reset(); + } + + public void OrientationChange(IgbSelectItemComponentEventArgs args) + { + StepperOrientation orientation = Enum.Parse(args.Detail.Value); + this.stepper.Orientation = orientation; + } + + public void VerticalAnimationChange(IgbSelectItemComponentEventArgs args) + { + StepperVerticalAnimation animation = Enum.Parse(args.Detail.Value); + this.stepper.VerticalAnimation = animation; + } + + public void HorizontalAnimationChange(IgbSelectItemComponentEventArgs args) + { + HorizontalTransitionAnimation animation = Enum.Parse(args.Detail.Value); + this.stepper.HorizontalAnimation = animation; + } + + public void AnimationDurationChange(IgbComponentValueChangedEventArgs args) + { + double duration; + double.TryParse(args.Detail.ToString(), out duration); + this.stepper.AnimationDuration = duration; + } +} diff --git a/samples/layouts/stepper/styling/BlazorClientApp.csproj b/samples/layouts/stepper/styling/BlazorClientApp.csproj new file mode 100644 index 0000000000..a4db6409f5 --- /dev/null +++ b/samples/layouts/stepper/styling/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net9.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219 + + + + + + + + + + diff --git a/samples/layouts/stepper/styling/BlazorClientApp.sln b/samples/layouts/stepper/styling/BlazorClientApp.sln new file mode 100644 index 0000000000..9e5d1c0c34 --- /dev/null +++ b/samples/layouts/stepper/styling/BlazorClientApp.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 16 +VisualStudioVersion = 16.0.29613.14 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18} + EndGlobalSection +EndGlobal diff --git a/samples/layouts/stepper/styling/Program.cs b/samples/layouts/stepper/styling/Program.cs new file mode 100644 index 0000000000..56f0e59cf4 --- /dev/null +++ b/samples/layouts/stepper/styling/Program.cs @@ -0,0 +1,36 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; + +// required for registering IgniteUIBlazor +using IgniteUI.Blazor.Controls; + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + + // registering Infragistics Blazor + builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule), + typeof(IgbRadioGroupModule), + typeof(IgbRadioModule), + typeof(IgbInputModule), + typeof(IgbSwitchModule), + typeof(IgbButtonModule)); + + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/layouts/stepper/styling/Properties/launchSettings.json b/samples/layouts/stepper/styling/Properties/launchSettings.json new file mode 100644 index 0000000000..1c8c27f43c --- /dev/null +++ b/samples/layouts/stepper/styling/Properties/launchSettings.json @@ -0,0 +1,29 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:6883", + "sslPort": 44317 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "applicationUrl": "https://localhost:5001;http://localhost:4200", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/samples/layouts/stepper/styling/ReadMe.md b/samples/layouts/stepper/styling/ReadMe.md new file mode 100644 index 0000000000..154d45398c --- /dev/null +++ b/samples/layouts/stepper/styling/ReadMe.md @@ -0,0 +1,70 @@ + + + +This folder contains implementation of Blazor application with example of Styling feature using [Stepper](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2019 + +NOTE: VS 2019 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2019** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/layouts/stepper/styling/_Imports.razor b/samples/layouts/stepper/styling/_Imports.razor new file mode 100644 index 0000000000..b4bad03986 --- /dev/null +++ b/samples/layouts/stepper/styling/_Imports.razor @@ -0,0 +1,8 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using Infragistics.Samples diff --git a/samples/layouts/stepper/styling/wwwroot/index.css b/samples/layouts/stepper/styling/wwwroot/index.css new file mode 100644 index 0000000000..f2cd3f4e78 --- /dev/null +++ b/samples/layouts/stepper/styling/wwwroot/index.css @@ -0,0 +1,59 @@ +.settings { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.125rem; + background: hsl(var(--ig-gray-100)); + padding: 1.125rem; + border: 1px solid hsl(var(--ig-gray-300)); + border-radius: .25rem; + margin-bottom: 2rem; + } + + :root { + --color-teal: rgba(77, 182, 172, 1); + --color-dark-navy: rgba(26, 35, 126, 1); + --color-aqua-gray: rgba(208, 236, 236, 1); + --color-white: rgba(255, 255, 255, 1); + + --color-teal-hover: rgba(26, 35, 126, 1); + --color-teal-shadow: rgba(77, 182, 172, 0.5); + } + + igc-button::part(base) { + margin: 1rem 0.5rem 0 0; + background-color: var(--color-teal); + color: var(--color-white); + font-weight: 600; + transition: background-color 0.25s ease, transform 0.1s ease; + } + + igc-button:hover::part(base) { + background-color: var(--color-dark-navy); + } + + igc-button:active::part(base) { + transform: scale(0.96); + } + + igc-step::part(title) { + color: var(--color-dark-navy); + font-variant: small-caps; + font-weight: bold; + } + + igc-step::part(indicator) { + border-radius: 12px 6px 12px 6px; + background-color: var(--color-aqua-gray); + color: var(--color-dark-navy); + transition: all 0.2s ease; + } + + igc-step[active]::part(indicator) { + background-color: var(--color-teal); + box-shadow: 0 2px 8px var(--color-teal-shadow); + transform: scale(1.04); + } + + igc-step[active]:active::part(indicator) { + transform: scale(1.08); + } \ No newline at end of file diff --git a/samples/layouts/stepper/styling/wwwroot/index.html b/samples/layouts/stepper/styling/wwwroot/index.html new file mode 100644 index 0000000000..04f406214d --- /dev/null +++ b/samples/layouts/stepper/styling/wwwroot/index.html @@ -0,0 +1,38 @@ + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + +