diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor new file mode 100644 index 0000000000..eddb670a3a --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor @@ -0,0 +1,29 @@ + + + + Dialog + + + + This is the body content of the dialog. + + + + Close + + + + +@code +{ + [CascadingParameter] + public required IDialogInstance Dialog { get; set; } + + [Inject] + public required IDialogService DialogService { get; set; } + + private async Task btnOK_Click() + { + await Dialog.CloseAsync(DialogResult.Ok("Yes")); + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor new file mode 100644 index 0000000000..14acb028cb --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor @@ -0,0 +1,10 @@ +
+ + + Accordion panel 1 + + + Accordion panel 2 + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor new file mode 100644 index 0000000000..75516b6e70 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor @@ -0,0 +1,17 @@ +
+ + Default + + + Primary + + + Outline + + + Subtle + + + Transparent + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor new file mode 100644 index 0000000000..c74f2937c0 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor @@ -0,0 +1,49 @@ +
+ + + + + + + + +
+ +@code { + private static Icon ResourcesIcon(bool active = false) => + active ? new Icons.Filled.Size24.AppFolder() + : new Icons.Regular.Size24.AppFolder(); + + private static Icon ConsoleLogsIcon(bool active = false) => + active ? new Icons.Filled.Size24.SlideText() + : new Icons.Regular.Size24.SlideText(); + + private static Icon StructuredLogsIcon(bool active = false) => + active ? new Icons.Filled.Size24.SlideTextSparkle() + : new Icons.Regular.Size24.SlideTextSparkle(); + + private static Icon TracesIcon(bool active = false) => + active ? new Icons.Filled.Size24.GanttChart() + : new Icons.Regular.Size24.GanttChart(); + + private static Icon MetricsIcon(bool active = false) => + active ? new Icons.Filled.Size24.ChartMultiple() + : new Icons.Regular.Size24.ChartMultiple(); + private static Icon StickerSheetIcon(bool active = false) => + active ? new Icons.Filled.Size24.Sticker() + : new Icons.Regular.Size24.Sticker(); +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor new file mode 100644 index 0000000000..4d946c151a --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor @@ -0,0 +1,22 @@ +@using static FluentUI.Demo.SampleData.Olympics2024 +
+ + +
+@code +{ + Task OnSearchAsync(OptionsSearchEventArgs e) + { + e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase)) + .OrderBy(i => i.Name); + + return Task.CompletedTask; + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor new file mode 100644 index 0000000000..c3a60245e9 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor @@ -0,0 +1,6 @@ +
+ + + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor new file mode 100644 index 0000000000..e9658cce7c --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor @@ -0,0 +1,14 @@ +
+ + Filled + + + Ghost + + + Outline + + + Tint + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor new file mode 100644 index 0000000000..00cd3ed070 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor @@ -0,0 +1,17 @@ +
+ + Default + + + Primary + + + Outline + + + Subtle + + + Transparent + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor new file mode 100644 index 0000000000..e862d5ca04 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor @@ -0,0 +1,23 @@ +
+ +
+ +@code { + + private static readonly DateTime Today = DateTime.Today; + private static readonly DateTime StartOfMonth = new DateTime(Today.Year, Today.Month, 1); + + private DateTime SelectedDay = Today; + private DateTime PickerDay = StartOfMonth; + private DateTime SelectedMonth = Today; + private DateTime PickerMonth = StartOfMonth; + private DateTime SelectedYear = Today; + private DateTime PickerYear = StartOfMonth; + + private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20; + private bool DisableMonth(DateTime date) => date.Month == 3 || date.Month == 8; + private bool DisableYear(DateTime date) => date.Year == 2026 || date.Year == 2027; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor new file mode 100644 index 0000000000..58f8b2625d --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor @@ -0,0 +1,5 @@ +
+ + Hello! This is a card. + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor new file mode 100644 index 0000000000..cf6c0e37e9 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor @@ -0,0 +1,13 @@ +
+ + + + +
+ +@code { + bool value1 = true; + bool value2 = true; + bool value3; + bool? value4; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor new file mode 100644 index 0000000000..1e2295aad0 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor @@ -0,0 +1,5 @@ +
+ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor new file mode 100644 index 0000000000..3e07121d76 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor @@ -0,0 +1,12 @@ +
+ +
+ +@code { + IEnumerable Countries = SampleData.Olympics2024.Countries; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor new file mode 100644 index 0000000000..2730e30997 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor @@ -0,0 +1,10 @@ +
+ + Description content + + + Description content + + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor new file mode 100644 index 0000000000..6102dfebd6 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor @@ -0,0 +1,6 @@ +
+ + + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor new file mode 100644 index 0000000000..3c8f61219d --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor @@ -0,0 +1,21 @@ +
+ + + + + + +@code { + PaginationState pagination = new PaginationState() { ItemsPerPage = 2 }; + + record Person(int PersonId, string Name, DateOnly BirthDate); + + IQueryable people = new[] + { + new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)), + new Person(10944, "António Langa", new DateOnly(1991, 12, 1)), + new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)), + }.AsQueryable(); + +} +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor new file mode 100644 index 0000000000..b1f2cfe07e --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor @@ -0,0 +1,7 @@ +
+ +
+ +@code{ + private DateTime SelectedValue { get; set; } = DateTime.Today.AddDays(-2); +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor new file mode 100644 index 0000000000..a8794ecf3c --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor @@ -0,0 +1,24 @@ +@inject IDialogService DialogService +
+ + Open Dialog + +
+ +@code +{ + + private async Task OpenDialogAsync() + { + var result = await DialogService.ShowDialogAsync(options => + { + options.Modal = true; + options.Size = DialogSize.Small; + + }); + + + } +} + diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor new file mode 100644 index 0000000000..4c393effe5 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor @@ -0,0 +1,12 @@ +
+ + + Text + + + Brand + + + Subtle + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor new file mode 100644 index 0000000000..1e32d33afc --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor @@ -0,0 +1,4 @@ +
+ + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor new file mode 100644 index 0000000000..79f3776337 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor new file mode 100644 index 0000000000..85394ae4d4 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor @@ -0,0 +1,26 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + Submit + + + +@code { + private class Model + { + [Required] + [StringLength(10, MinimumLength = 3, ErrorMessage = "Identifier must be between 3 and 10 characters.")] + public string Identifier { get; set; } = string.Empty; + } + + private Model model = new Model(); + +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor new file mode 100644 index 0000000000..62c978d467 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor @@ -0,0 +1,11 @@ +
+ +
+ +@code +{ + static string Text = SampleData.Text.GenerateLoremIpsum(1,50); + string Highlight = "Lorem"; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor new file mode 100644 index 0000000000..e0549f8bcc --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor @@ -0,0 +1,4 @@ +
+ + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor new file mode 100644 index 0000000000..471547dec8 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor new file mode 100644 index 0000000000..5744feb637 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor @@ -0,0 +1 @@ +
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md new file mode 100644 index 0000000000..bf3bff0653 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md @@ -0,0 +1,17 @@ +--- +title: Sticker Sheet +order: 0004 +category: 10|Get Started +route: /sticker-sheet +icon: Sticker +--- + +# Sticker Sheet + +All* the Fluent UI Blazor Components on one page! Overlay components like Dialog and Drawer render a trigger button; click it to open them. + +Many of the components have additional options that can greatly alter the way they look and behave. Use the navigation menu to go to each component's documentation page for more details. + +_* Components that require additional setup or context to function properly or that do not have a simple visual representation are not included in this sticker sheet._ + +{{ StickerSheet sourcecode=false }} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor new file mode 100644 index 0000000000..ac12d30109 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor @@ -0,0 +1,112 @@ +@using FluentUI.Demo.Client.Documentation.GetStarted.Cards +
+
+ @foreach (var card in cards) + { +
+ @card.Title + +
+ } +
+
+ +@code { + private List cards = new List(); + + protected override void OnInitialized() + { + cards.Add(new StickerCard { Title = "Accordion", Type = typeof(FluentAccordionCard) }); + cards.Add(new StickerCard { Title = "Anchor Button", Type = typeof(FluentAnchorButtonCard) }); + cards.Add(new StickerCard { Title = "App Bar", Type = typeof(FluentAppBarCard) }); + cards.Add(new StickerCard { Title = "Autocomplete", Type = typeof(FluentAutocompleteCard) }); + cards.Add(new StickerCard { Title = "Avatar", Type = typeof(FluentAvatarCard) }); + + cards.Add(new StickerCard { Title = "Badge", Type = typeof(FluentBadgeCard) }); + cards.Add(new StickerCard { Title = "Button", Type = typeof(FluentButtonCard) }); + + cards.Add(new StickerCard { Title = "Calendar", Type = typeof(FluentCalendarCard) }); + cards.Add(new StickerCard { Title = "Card", Type = typeof(FluentCardCard) }); + + cards.Add(new StickerCard { Title = "Checkbox", Type = typeof(FluentCheckboxCard) }); + cards.Add(new StickerCard { Title = "ColorPicker", Type = typeof(FluentColorPickerCard) }); + cards.Add(new StickerCard { Title = "ComboBox", Type = typeof(FluentComboboxCard) }); + cards.Add(new StickerCard { Title = "Compound Button", Type = typeof(FluentCompoundButtonCard) }); + cards.Add(new StickerCard { Title = "Counter Badge", Type = typeof(FluentCounterBadgeCard) }); + + cards.Add(new StickerCard { Title = "Data Grid", Type = typeof(FluentDataGridCard) }); + cards.Add(new StickerCard { Title = "Date Picker", Type = typeof(FluentDatePickerCard) }); + cards.Add(new StickerCard { Title = "Dialog", Type = typeof(FluentDialogCard) }); + cards.Add(new StickerCard { Title = "Divider", Type = typeof(FluentDividerCard) }); + + cards.Add(new StickerCard { Title = "Emoji", Type = typeof(FluentEmojiCard) }); + + cards.Add(new StickerCard { Title = "Field", Type = typeof(FluentFieldCard) }); + + cards.Add(new StickerCard { Title = "Highlighter", Type = typeof(FluentHighlighterCard) }); + + cards.Add(new StickerCard { Title = "Icon", Type = typeof(FluentIconCard) }); + cards.Add(new StickerCard { Title = "Image", Type = typeof(FluentImageCard) }); + cards.Add(new StickerCard { Title = "Input File", Type = typeof(FluentInputFileCard) }); + + cards.Add(new StickerCard { Title = "Label Info", Type = typeof(FluentLabelInfoCard) }); + cards.Add(new StickerCard { Title = "Label", Type = typeof(FluentLabelCard) }); + cards.Add(new StickerCard { Title = "Link", Type = typeof(FluentLinkCard) }); + cards.Add(new StickerCard { Title = "List Base", Type = typeof(FluentListBaseCard) }); + cards.Add(new StickerCard { Title = "Listbox", Type = typeof(FluentListboxCard) }); + + cards.Add(new StickerCard { Title = "Menu Button", Type = typeof(FluentMenuButtonCard) }); + cards.Add(new StickerCard { Title = "Menu", Type = typeof(FluentMenuCard) }); + cards.Add(new StickerCard { Title = "Message Bar Provider", Type = typeof(FluentMessageBarProviderCard) }); + cards.Add(new StickerCard { Title = "Message Bar", Type = typeof(FluentMessageBarCard) }); + cards.Add(new StickerCard { Title = "Message Box", Type = typeof(FluentMessageBoxCard) }); + cards.Add(new StickerCard { Title = "Multi Splitter", Type = typeof(FluentMultiSplitterCard) }); + + cards.Add(new StickerCard { Title = "Nav", Type = typeof(FluentNavCard) }); + cards.Add(new StickerCard { Title = "Number Input", Type = typeof(FluentNumberInputCard) }); + + cards.Add(new StickerCard { Title = "Option", Type = typeof(FluentOptionCard) }); + cards.Add(new StickerCard { Title = "Overflow Item", Type = typeof(FluentOverflowItemCard) }); + cards.Add(new StickerCard { Title = "Overflow", Type = typeof(FluentOverflowCard) }); + cards.Add(new StickerCard { Title = "Overlay", Type = typeof(FluentOverlayCard) }); + + cards.Add(new StickerCard { Title = "Paginator", Type = typeof(FluentPaginatorCard) }); + cards.Add(new StickerCard { Title = "Popover", Type = typeof(FluentPopoverCard) }); + cards.Add(new StickerCard { Title = "Presence Badge", Type = typeof(FluentPresenceBadgeCard) }); + cards.Add(new StickerCard { Title = "Progress Bar", Type = typeof(FluentProgressBarCard) }); + cards.Add(new StickerCard { Title = "Pull To Refresh", Type = typeof(FluentPullToRefreshCard) }); + + cards.Add(new StickerCard { Title = "Radio Group", Type = typeof(FluentRadioGroupCard) }); + cards.Add(new StickerCard { Title = "Rating Display", Type = typeof(FluentRatingDisplayCard) }); + + cards.Add(new StickerCard { Title = "Select", Type = typeof(FluentSelectCard) }); + cards.Add(new StickerCard { Title = "Skeleton", Type = typeof(FluentSkeletonCard) }); + cards.Add(new StickerCard { Title = "Slider", Type = typeof(FluentSliderCard) }); + cards.Add(new StickerCard { Title = "Sortable List", Type = typeof(FluentSortableListCard) }); + cards.Add(new StickerCard { Title = "Spinner", Type = typeof(FluentSpinnerCard) }); + cards.Add(new StickerCard { Title = "Split Button", Type = typeof(FluentSplitButtonCard) }); + cards.Add(new StickerCard { Title = "Switch", Type = typeof(FluentSwitchCard) }); + + cards.Add(new StickerCard { Title = "Tabs", Type = typeof(FluentTabsCard) }); + cards.Add(new StickerCard { Title = "Text Area", Type = typeof(FluentTextAreaCard) }); + cards.Add(new StickerCard { Title = "Text Input", Type = typeof(FluentTextInputCard) }); + cards.Add(new StickerCard { Title = "Text", Type = typeof(FluentTextCard) }); + cards.Add(new StickerCard { Title = "Time Picker", Type = typeof(FluentTimePickerCard) }); + cards.Add(new StickerCard { Title = "Toast", Type = typeof(FluentToastCard) }); + cards.Add(new StickerCard { Title = "Toggle Button", Type = typeof(FluentToggleButtonCard) }); + cards.Add(new StickerCard { Title = "Tooltip", Type = typeof(FluentTooltipCard) }); + cards.Add(new StickerCard { Title = "Tree View", Type = typeof(FluentTreeViewCard) }); + + cards.Add(new StickerCard { Title = "Validation", Type = typeof(FluentFormValidationCard) }); + + cards.Add(new StickerCard { Title = "Wizard", Type = typeof(FluentWizardCard) }); + + } + + + private class StickerCard + { + public required string Title { get; set; } + public required Type Type { get; set; } + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css b/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css index a30d3de7e9..e87ce727d7 100644 --- a/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css +++ b/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css @@ -23,9 +23,9 @@ body { --demo-notification-height: 0px; } -body:has(fluent-message-bar.demo-notification) { - --demo-notification-height: 60px; -} + body:has(fluent-message-bar.demo-notification) { + --demo-notification-height: 60px; + } .demo-notification { height: var(--demo-notification-height); @@ -49,12 +49,12 @@ body:has(fluent-message-bar.demo-notification) { z-index: 1000; } -#blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; -} + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; @@ -62,9 +62,9 @@ body:has(fluent-message-bar.demo-notification) { color: white; } -.blazor-error-boundary::after { - content: "An error has occurred." -} + .blazor-error-boundary::after { + content: "An error has occurred." + } /* loading-progress */ @@ -76,19 +76,19 @@ body:has(fluent-message-bar.demo-notification) { margin: 20vh auto 1rem auto; } -.loading-progress circle { - fill: none; - stroke: #e0e0e0; - stroke-width: 0.6rem; - transform-origin: 50% 50%; - transform: rotate(-90deg); -} + .loading-progress circle { + fill: none; + stroke: #e0e0e0; + stroke-width: 0.6rem; + transform-origin: 50% 50%; + transform: rotate(-90deg); + } -.loading-progress circle:last-child { - stroke: #1b6ec2; - stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; - transition: stroke-dasharray 0.05s ease-in-out; -} + .loading-progress circle:last-child { + stroke: #1b6ec2; + stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; + transition: stroke-dasharray 0.05s ease-in-out; + } .loading-progress-text { position: absolute; @@ -97,6 +97,44 @@ body:has(fluent-message-bar.demo-notification) { inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } -.loading-progress-text:after { - content: var(--blazor-load-percentage-text, "Loading"); -} \ No newline at end of file + .loading-progress-text:after { + content: var(--blazor-load-percentage-text, "Loading"); + } + +.sticker-sheet-root { + background: var(--colorNeutralBackground2); + color: var(--colorNeutralForeground1); + padding: var(--spacingVerticalXL) var(--spacingHorizontalXL); + border-radius: var(--borderRadiusXLarge); +} + +.sticker-sheet { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); + gap: var(--spacingHorizontalL); + padding: var(--spacingVerticalS) 0 var(--spacingVerticalXXXL); +} + +.sticker-card { + border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + border-radius: var(--borderRadiusXLarge); + padding: var(--spacingVerticalL) var(--spacingHorizontalL); + background: var(--colorNeutralBackground1); + display: inline-flex; + flex-direction: column; + gap: var(--spacingVerticalM); +} + +.sticker-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacingHorizontalM); + align-items: center; +} + +.sticker-col { + display: flex; + flex-direction: column; + gap: var(--spacingVerticalM); + align-items: stretch; +}