From 8583171b76e67befbbdf324334b209dadcdbf2f1 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 10 Jan 2024 18:12:00 +0100 Subject: [PATCH] ui changes, slideritemselector fixes, popupalertbox, animations --- TIAMMobileApp/MauiProgram.cs | 3 + TIAMMobileApp/wwwroot/index.html | 1 + TIAMSharedUI/Pages/AppLaunch.razor | 2 +- .../Pages/Components/AuthComponent.razor | 3 +- .../Pages/Components/AuthComponent.razor.cs | 12 + .../Pages/Components/InputWizard.razor.cs | 10 +- TIAMSharedUI/Pages/User/Admin.razor | 41 +- TIAMSharedUI/Pages/User/HotelAdmin.razor | 198 + TIAMSharedUI/Pages/User/HotelAdmin.razor.cs | 12 + TIAMSharedUI/Pages/User/HotelComponent.razor | 10 +- .../Pages/User/MyServiceProviders.razor | 2 +- TIAMSharedUI/Pages/User/MyTransfers.razor | 4 + .../Pages/User/PermissionsComponent.razor | 5 + .../Pages/User/ProfileComponent.razor | 5 + TIAMSharedUI/Pages/User/ServiceProvider.razor | 8 +- .../Pages/User/SysAdminComponent.razor | 94 +- TIAMSharedUI/Shared/Components/Navbar.razor | 30 +- .../Shared/Components/PopupMessageBox.razor | 31 + .../Components/PopupMessageBox.razor.cs | 187 + TIAMSharedUI/Shared/MainLayout.razor | 11 +- TIAMSharedUI/Shared/NavMenu.razor | 5 +- TIAMSharedUI/Shared/SliderItemSelector.razor | 58 +- .../Shared/SliderItemSelector.razor.css | 13 +- TIAMSharedUI/Shared/Users/AdminNavMenu.razor | 78 +- TIAMSharedUI/TIAMSharedUI.csproj | 2 + .../wwwroot/blazorAnimationInterop.js | 12 + TIAMSharedUI/wwwroot/css/TourIAm.css | 31 +- TIAMSharedUI/wwwroot/css/animate.css | 4250 +++++++++++++++++ TIAMWebApp/Client/Program.cs | 2 + .../Client/Services/UserDataServiceWeb.cs | 2 + TIAMWebApp/Client/wwwroot/index.html | 4 +- 31 files changed, 4985 insertions(+), 141 deletions(-) create mode 100644 TIAMSharedUI/Pages/User/HotelAdmin.razor create mode 100644 TIAMSharedUI/Pages/User/HotelAdmin.razor.cs create mode 100644 TIAMSharedUI/Pages/User/PermissionsComponent.razor create mode 100644 TIAMSharedUI/Pages/User/ProfileComponent.razor create mode 100644 TIAMSharedUI/Shared/Components/PopupMessageBox.razor create mode 100644 TIAMSharedUI/Shared/Components/PopupMessageBox.razor.cs create mode 100644 TIAMSharedUI/wwwroot/blazorAnimationInterop.js create mode 100644 TIAMSharedUI/wwwroot/css/animate.css diff --git a/TIAMMobileApp/MauiProgram.cs b/TIAMMobileApp/MauiProgram.cs index 55f2f251..21b1cf04 100644 --- a/TIAMMobileApp/MauiProgram.cs +++ b/TIAMMobileApp/MauiProgram.cs @@ -6,6 +6,7 @@ using System.Resources; using AyCode.Interfaces.StorageHandlers; using TIAMWebApp.Shared.Application.Utility; using TIAMWebApp.Shared.Application.Services; +using BlazorAnimation; namespace TIAMMobileApp { @@ -55,6 +56,8 @@ namespace TIAMMobileApp builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddSingleton(x => new ResourceManager("TIAMWebApp.Shared.Application.Resources", typeof(Main).Assembly)); + + builder.Services.Configure(Guid.NewGuid().ToString(), c => { }); return builder.Build(); } } diff --git a/TIAMMobileApp/wwwroot/index.html b/TIAMMobileApp/wwwroot/index.html index 7a9cda67..703517a8 100644 --- a/TIAMMobileApp/wwwroot/index.html +++ b/TIAMMobileApp/wwwroot/index.html @@ -32,6 +32,7 @@ + diff --git a/TIAMSharedUI/Pages/AppLaunch.razor b/TIAMSharedUI/Pages/AppLaunch.razor index 412c987e..7baff830 100644 --- a/TIAMSharedUI/Pages/AppLaunch.razor +++ b/TIAMSharedUI/Pages/AppLaunch.razor @@ -42,7 +42,7 @@ Loading.... logToBrowserConsole = new LogToBrowserConsole(JSRuntime); //wait for 5 seconds - await Task.Delay(1000); + await Task.Delay(0001); if (!string.IsNullOrWhiteSpace(userDetailsStr)) { diff --git a/TIAMSharedUI/Pages/Components/AuthComponent.razor b/TIAMSharedUI/Pages/Components/AuthComponent.razor index bb1eec69..6401a689 100644 --- a/TIAMSharedUI/Pages/Components/AuthComponent.razor +++ b/TIAMSharedUI/Pages/Components/AuthComponent.razor @@ -1,4 +1,5 @@ - +@using TIAMSharedUI.Shared.Components +

AuthComponent:

Logged in: @IsLoggedIn

diff --git a/TIAMSharedUI/Pages/Components/AuthComponent.razor.cs b/TIAMSharedUI/Pages/Components/AuthComponent.razor.cs index 9956e312..4cd5a498 100644 --- a/TIAMSharedUI/Pages/Components/AuthComponent.razor.cs +++ b/TIAMSharedUI/Pages/Components/AuthComponent.razor.cs @@ -4,6 +4,7 @@ using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; +using TIAMSharedUI.Shared.Components; using TIAMWebApp.Shared.Application.Interfaces; namespace TIAMSharedUI.Pages.Components @@ -16,10 +17,21 @@ namespace TIAMSharedUI.Pages.Components [Inject] public IComponentUpdateService componentUpdateService { get; set; } + [CascadingParameter] + private PopupMessageBox PopupMessageBox { get; set; } = default!; + protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); IsLoggedIn = sessionService.IsAuthenticated; + await PopupMessageBox.ShowAsync("AuthComponent", "Initialized", null, null, null, PopupMessageBox.ButtonOk); + + if (await PopupMessageBox.Show("Cancel", "Cancel this stuff", + PopupMessageBox.ButtonNo, PopupMessageBox.ButtonYes) == PopupMessageBox.ButtonNo) + { + //Something is cancelled + //args.Cancel = true; + } componentUpdateService.CallRequestRefresh(); StateHasChanged(); } diff --git a/TIAMSharedUI/Pages/Components/InputWizard.razor.cs b/TIAMSharedUI/Pages/Components/InputWizard.razor.cs index daa70db9..acef020f 100644 --- a/TIAMSharedUI/Pages/Components/InputWizard.razor.cs +++ b/TIAMSharedUI/Pages/Components/InputWizard.razor.cs @@ -342,12 +342,13 @@ namespace TIAMSharedUI.Pages.Components else if (property.PropertyType == typeof(string) && string.Compare(attrList.CustomDataType, "TransferDestination", true) == 0) { - editor.OpenComponent(j); + editor.OpenComponent(j); + editor.AddAttribute(j++, "OwlId", "owlSelector" + _stepID); editor.AddAttribute(j++, "OnSliderChanged", EventCallback.Factory.Create(this, result => { LogToBrowserConsole.LogToBC($"Slider changed to {result}"); property.SetValue(Data, result); - LogToBrowserConsole.LogToBC($"Data.Destination = {property.GetValue(Data)}"); + LogToBrowserConsole.LogToBC($"bleh: {property.Name} = {property.GetValue(Data)}"); StateHasChanged(); // Add this line to refresh the UI })); @@ -357,7 +358,10 @@ namespace TIAMSharedUI.Pages.Components editor.AddAttribute(j++, "NullText", "Slide or type"); editor.AddAttribute(j++, "Text", property.GetValue(Data)); editor.AddAttribute(j++, "TextExpression", lambda); - editor.AddAttribute(j++, "TextChanged", EventCallback.Factory.Create(this, str => { property.SetValue(Data, str); })); + editor.AddAttribute(j++, "TextChanged", EventCallback.Factory.Create(this, str => { + property.SetValue(Data, str); + LogToBrowserConsole.LogToBC($"bleh: {property.Name} = {property.GetValue(Data)}"); + })); editor.CloseComponent(); } diff --git a/TIAMSharedUI/Pages/User/Admin.razor b/TIAMSharedUI/Pages/User/Admin.razor index 8ccc2f6e..1cddbcb1 100644 --- a/TIAMSharedUI/Pages/User/Admin.razor +++ b/TIAMSharedUI/Pages/User/Admin.razor @@ -1,4 +1,4 @@ -@page "/admin" +@page "/user/admin" @using TIAMSharedUI.Shared @using TIAMWebApp.Shared.Application.Models; @using TIAMWebApp.Shared.Application.Interfaces; @@ -16,26 +16,26 @@
+ + + + - - - - - - - -
- - + + + +
+ +
-
+
@@ -85,7 +85,7 @@
-
+
@@ -135,7 +135,7 @@
-
+
@@ -185,7 +185,6 @@
-
@@ -195,8 +194,8 @@ @code { - - + + bool isUserLoggedIn; int userType = 0; @@ -206,11 +205,11 @@ protected override async Task OnInitializedAsync() { - base.OnInitialized(); + base.OnInitialized(); + + - - } - + } diff --git a/TIAMSharedUI/Pages/User/HotelAdmin.razor b/TIAMSharedUI/Pages/User/HotelAdmin.razor new file mode 100644 index 00000000..592084bc --- /dev/null +++ b/TIAMSharedUI/Pages/User/HotelAdmin.razor @@ -0,0 +1,198 @@ +@page "/user/hoteladmin" +@using TIAMSharedUI.Shared +@using TIAMWebApp.Shared.Application.Models; +@using TIAMWebApp.Shared.Application.Interfaces; +@layout AdminLayout +@inject IPopulationStructureDataProvider DataProvider +@inject ISupplierService SupplierService +@inject IUserDataService UserDataService +Transfer + +
+

Dashboard

+

Have a nice day!

+
+ + + +
+ + + + +
+ + +
+
+
+
+
+
+ Panel title +

Subtitle

+
+ +
+
+
+
+
+
Some info
+

Budapest, Dózsa György út 35, 1146

+
+
+ +
+ +
+
    +
  • + PLACED +
    • +
  • WAITING FOR PICK UP
    • +
  • + FINISHED +
    • +
+ +
+

Some conclusion

+
+
+
+
+ + Modify +
+ + +
+
+
+
+
+
+
+
+
+ Panel title +

Subtitle

+
+ +
+
+
+
+
+
Some info
+

Budapest, Dózsa György út 35, 1146

+
+
+ +
+ +
+
    +
  • + PLACED +
    • +
  • WAITING FOR PICK UP
    • +
  • + FINISHED +
    • +
+ +
+

Some conclusion

+
+
+
+
+ + Modify +
+ + +
+
+
+
+
+
+
+
+
+ Panel title +

Subtitle

+
+ +
+
+
+
+
+
Some info
+

Budapest, Dózsa György út 35, 1146

+
+
+ +
+ +
+
    +
  • + PLACED +
    • +
  • WAITING FOR PICK UP
    • +
  • + FINISHED +
    • +
+ +
+

Some conclusion

+
+
+
+
+ + Modify +
+ + +
+
+
+
+
+ +
+ +
+ +
+ + +@code { + string Id = "2312-32132121-32123"; + bool isUserLoggedIn; + int userType = 0; + + protected override async Task OnInitializedAsync() + { + base.OnInitialized(); + + } + +} + diff --git a/TIAMSharedUI/Pages/User/HotelAdmin.razor.cs b/TIAMSharedUI/Pages/User/HotelAdmin.razor.cs new file mode 100644 index 00000000..b8ba5846 --- /dev/null +++ b/TIAMSharedUI/Pages/User/HotelAdmin.razor.cs @@ -0,0 +1,12 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace TIAMSharedUI.Pages.User +{ + public partial class Home + { + } +} diff --git a/TIAMSharedUI/Pages/User/HotelComponent.razor b/TIAMSharedUI/Pages/User/HotelComponent.razor index e390172c..4e477967 100644 --- a/TIAMSharedUI/Pages/User/HotelComponent.razor +++ b/TIAMSharedUI/Pages/User/HotelComponent.razor @@ -8,7 +8,7 @@
-
+
@@ -51,7 +51,7 @@
-
+
@@ -100,7 +100,7 @@
-
+
@@ -129,7 +129,7 @@
-
+
@@ -179,7 +179,7 @@
-
+
diff --git a/TIAMSharedUI/Pages/User/MyServiceProviders.razor b/TIAMSharedUI/Pages/User/MyServiceProviders.razor index 89e3cd6b..52b1e5d8 100644 --- a/TIAMSharedUI/Pages/User/MyServiceProviders.razor +++ b/TIAMSharedUI/Pages/User/MyServiceProviders.razor @@ -13,7 +13,7 @@
-
+
diff --git a/TIAMSharedUI/Pages/User/MyTransfers.razor b/TIAMSharedUI/Pages/User/MyTransfers.razor index 3dc53bcb..57aaeb48 100644 --- a/TIAMSharedUI/Pages/User/MyTransfers.razor +++ b/TIAMSharedUI/Pages/User/MyTransfers.razor @@ -13,6 +13,10 @@ @inject IStringLocalizer localizer Transfers +
+

Transfer management

+

Manage transfers here!

+
diff --git a/TIAMSharedUI/Pages/User/PermissionsComponent.razor b/TIAMSharedUI/Pages/User/PermissionsComponent.razor new file mode 100644 index 00000000..407304e0 --- /dev/null +++ b/TIAMSharedUI/Pages/User/PermissionsComponent.razor @@ -0,0 +1,5 @@ +

PermissionsComponent

+ +@code { + +} diff --git a/TIAMSharedUI/Pages/User/ProfileComponent.razor b/TIAMSharedUI/Pages/User/ProfileComponent.razor new file mode 100644 index 00000000..b7d6d303 --- /dev/null +++ b/TIAMSharedUI/Pages/User/ProfileComponent.razor @@ -0,0 +1,5 @@ +

ProfileComponent

+ +@code { + +} diff --git a/TIAMSharedUI/Pages/User/ServiceProvider.razor b/TIAMSharedUI/Pages/User/ServiceProvider.razor index 4b0abed5..d59e7e50 100644 --- a/TIAMSharedUI/Pages/User/ServiceProvider.razor +++ b/TIAMSharedUI/Pages/User/ServiceProvider.razor @@ -5,8 +5,14 @@ @layout AdminLayout @inject NavigationManager navigationManager +
+

Service provider: @Id

+

Manage your service provider details

+
+
- + +
@code { diff --git a/TIAMSharedUI/Pages/User/SysAdminComponent.razor b/TIAMSharedUI/Pages/User/SysAdminComponent.razor index d091ab58..a5932a1c 100644 --- a/TIAMSharedUI/Pages/User/SysAdminComponent.razor +++ b/TIAMSharedUI/Pages/User/SysAdminComponent.razor @@ -1,4 +1,6 @@ -@using TIAMSharedUI.Shared + +@using BlazorAnimation +@using TIAMSharedUI.Shared @using TIAMWebApp.Shared.Application.Models; @using TIAMWebApp.Shared.Application.Interfaces; @@ -6,44 +8,49 @@
-
-
-
-
- Transfers -

Summary

+ + +
+
+
+
+ Transfers +

Summary

+
+
- +
+ +
New
+

12

+
Scheduled
+

182

+
Finished
+

15665

+ +
+ + + +
+
+ + Manage transgfers +
+ +
-
- -
New
-

12

-
Scheduled
-

182

-
Finished
-

15665

- -
- - - -
-
- - Manage transgfers -
- - -
-
-
+ +
-
+ +
@@ -77,9 +84,11 @@
+
-
+ +
@@ -113,9 +122,11 @@
+
-
+ +
@@ -151,9 +162,11 @@
+
-
+ +
@@ -192,9 +205,11 @@
+
-
+ +
@@ -266,10 +281,7 @@
- - - - +
diff --git a/TIAMSharedUI/Shared/Components/Navbar.razor b/TIAMSharedUI/Shared/Components/Navbar.razor index ebcb8996..7759e8bd 100644 --- a/TIAMSharedUI/Shared/Components/Navbar.razor +++ b/TIAMSharedUI/Shared/Components/Navbar.razor @@ -53,23 +53,27 @@ } - @if(hasProperty) + else { + @if (hasProperty) + { +
  • + + @localizer.GetString("NavMenu.Admin") + + +
    • + }
  • - - @localizer.GetString("NavMenu.Admin") - - +
    + + @localizer.GetString("NavMenu.SignOut") + +
    +
    • } -
  • -
    - - @localizer.GetString("NavMenu.SignOut") - -
    - -
    • +
    diff --git a/TIAMSharedUI/Shared/Components/PopupMessageBox.razor b/TIAMSharedUI/Shared/Components/PopupMessageBox.razor new file mode 100644 index 00000000..c260d989 --- /dev/null +++ b/TIAMSharedUI/Shared/Components/PopupMessageBox.razor @@ -0,0 +1,31 @@ + + + @(new MarkupString(@MessageHtml)) + + + + + + + + \ No newline at end of file diff --git a/TIAMSharedUI/Shared/Components/PopupMessageBox.razor.cs b/TIAMSharedUI/Shared/Components/PopupMessageBox.razor.cs new file mode 100644 index 00000000..781fe3d2 --- /dev/null +++ b/TIAMSharedUI/Shared/Components/PopupMessageBox.razor.cs @@ -0,0 +1,187 @@ +using DevExpress.Blazor; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components; + +namespace TIAMSharedUI.Shared.Components +{ + /// + /// A MessageBox (async and synchronized) component to provide a way to show informational messages. + /// + public partial class PopupMessageBox + { + + public static readonly string ButtonOk = "Ok"; + public static readonly string ButtonCancel = "Cancel"; + public static readonly string ButtonYes = "Yes"; + public static readonly string ButtonNo = "No"; + + [Inject] + private NavigationManager Navigation { get; set; } = default!; + + /// + /// The MessageBox popup. This is a DxPopup that is called asynchronously so it is displayed and control returns + /// to the caller. + /// + private DxPopup MessageBoxPopup { get; set; } = default!; + + /// + /// The header text in the MessageBox popup. This is a MarkupString so do not put any user entered text in this! + /// + private string HeaderText { get; set; } = string.Empty; + + /// + /// The message text in the MessageBox popup. This is a MarkupString so do not put any user entered text in this! + /// + private string MessageHtml { get; set; } = string.Empty; + + private Func? OnClick { get; set; } + + private Func? OnClose { get; set; } + + /// + /// This is passed in in the call to Show() and returned in the calls to OnClick() and OnClose(). + /// + private object? Tag { get; set; } + + /// + /// Used to make the popup synchronous. + /// + private TaskCompletionSource _taskCompletionSource = new(); + + /// + public PopupMessageBox() + { + ButtonVisible = new bool[4]; + ButtonText = new string[4]; + } + + /// + /// Displays the MessageBox. This is a static object so you can't create multiple instances of it. But you + /// can create another instance in the onClick or onCLose calls as the existing instance will be closed by + /// then. + /// + /// The header text in the message box. + /// The main message in the message box. This is treated as html + /// so use HttpUtility.HtmlEncode() on any user generated text in the message. + /// Caller defined data returned in the OnClick/OnClose calls. + /// Will call this method when a button is clicked. Passes the button text as the parameter. + /// Will call this when the popup is closed. Including after receiving the onClick call. + /// The text for the button(s). Can be 1 .. 4 buttons. + /// The task for the underlying DxPopup.ShowAsync() call. + public Task ShowAsync(string header, string message, object? tag, Func? onClick, + Func? onClose, params string[] buttonText) + { + + HeaderText = header; + MessageHtml = message; + Tag = tag; + OnClick = onClick; + OnClose = onClose; + + if (buttonText.Length == 0 || buttonText.Length > 4) + throw new ArgumentOutOfRangeException(nameof(buttonText), "Must have between 1 and 4 buttons"); + Array.Clear(ButtonVisible); + Array.Clear(ButtonText); + for (var index = 0; index < buttonText.Length; index++) + { + ButtonVisible[index] = true; + ButtonText[index] = buttonText[index]; + } + + StateHasChanged(); + + return MessageBoxPopup.ShowAsync(); + } + + /// + /// Displays the MessageBox. Then when click OK, goes to the url. This is a static object so you can't create + /// multiple instances of it. + /// + /// The header text in the message box. + /// The main message in the message box. This is treated as html + /// so use HttpUtility.HtmlEncode() on any user generated text in the message. + /// The url to navigate to when click OK. + /// The task for the underlying DxPopup.ShowAsync() call. + public Task ShowThenRedirectAsync(string header, string message, string url) + { + return ShowAsync(header, message, null, + (_, _) => + { + Navigation.NavigateTo(url, false); + return Task.CompletedTask; + }, + null, PopupMessageBox.ButtonOk); + } + + /// + /// Displays the MessageBox synchronously. Returns the text of the button clicked. This is a static object + /// so you can't create multiple instances of it. But you can create another instance when it returns as the + /// existing instance will be closed by then. + /// + /// The header text in the message box. + /// The main message in the message box. This is treated as html + /// so use HttpUtility.HtmlEncode() on any user generated text in the message. + /// The text for the button(s). Can be 1 .. 4 buttons. + /// The text of the button clicked. + public Task Show(string header, string message, params string[] buttonText) + { + _taskCompletionSource = new TaskCompletionSource(); + + ShowAsync(header, message, null, ShowOnClick, null, buttonText); + + // we return the Task from the TaskCompletionSource that is not completed + return _taskCompletionSource.Task; + } + + private Task ShowOnClick(string buttonText, object? tag) + { + // as this is called from the OnClick handler, the popup has been closed. + + // sets the TaskCompletionSource to completed. Any await-ers will now complete + _taskCompletionSource.SetResult(buttonText); + return Task.FromResult(_taskCompletionSource); + } + + private string[] ButtonText { get; } + + private bool[] ButtonVisible { get; } + + private async Task Button0Click(MouseEventArgs arg) + { + // need to close before calling OnClick because OnClick may call ShowAsync again + await MessageBoxPopup.CloseAsync(); + if (OnClick != null) + await OnClick.Invoke(ButtonText[0], Tag); + } + + private async Task Button1Click(MouseEventArgs arg) + { + // need to close before calling OnClick because OnClick may call ShowAsync again + await MessageBoxPopup.CloseAsync(); + if (OnClick != null) + await OnClick.Invoke(ButtonText[1], Tag); + } + private async Task Button2Click(MouseEventArgs arg) + { + // need to close before calling OnClick because OnClick may call ShowAsync again + await MessageBoxPopup.CloseAsync(); + if (OnClick != null) + await OnClick.Invoke(ButtonText[2], Tag); + } + private async Task Button3Click(MouseEventArgs arg) + { + // need to close before calling OnClick because OnClick may call ShowAsync again + await MessageBoxPopup.CloseAsync(); + if (OnClick != null) + await OnClick.Invoke(ButtonText[3], Tag); + } + + private async Task PopupClosed(PopupClosedEventArgs arg) + { + // need to close before calling OnClose because OnClose may call ShowAsync again + await MessageBoxPopup.CloseAsync(); + if (OnClose != null) + await OnClose.Invoke(Tag); + } + } +} \ No newline at end of file diff --git a/TIAMSharedUI/Shared/MainLayout.razor b/TIAMSharedUI/Shared/MainLayout.razor index 9c6109c8..79f22140 100644 --- a/TIAMSharedUI/Shared/MainLayout.razor +++ b/TIAMSharedUI/Shared/MainLayout.razor @@ -24,17 +24,20 @@
    - - - @Body + + @Body +
    + + +
    @code { - + public PopupMessageBox PopupMessageBox { get; private set; } = default!; } diff --git a/TIAMSharedUI/Shared/NavMenu.razor b/TIAMSharedUI/Shared/NavMenu.razor index 1779cda6..86641371 100644 --- a/TIAMSharedUI/Shared/NavMenu.razor +++ b/TIAMSharedUI/Shared/NavMenu.razor @@ -35,8 +35,7 @@ Counter - - +
    @@ -69,7 +68,7 @@ @code { private bool collapseNavMenu = true; - + private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() diff --git a/TIAMSharedUI/Shared/SliderItemSelector.razor b/TIAMSharedUI/Shared/SliderItemSelector.razor index 6850e213..45f94ea5 100644 --- a/TIAMSharedUI/Shared/SliderItemSelector.razor +++ b/TIAMSharedUI/Shared/SliderItemSelector.razor @@ -14,9 +14,20 @@ border-bottom: 1px solid; } - - + #@OwlId .item { + height: 30vh; + overflow-y: hidden; + vertical-align: middle; + align-content: center; + } + + #@OwlId .item img { + display: block; + width: 100%; + height: auto; + } +
    -

    Please type an address or swipe to select from preset destinations!

    +

    Please type an address or swipe to select from preset destinations!

    + -@{ - var jsOwlId = OwlId; - logToBrowserConsole.LogToBC(jsOwlId); -} @@ -136,6 +167,7 @@ protected override void OnParametersSet() { logToBrowserConsole.LogToBC($"SliderItemSelector is initialized with OwlId: {OwlId}"); + base.OnParametersSet(); } @@ -144,6 +176,8 @@ if(firstRender) { var dotNetObjRef = DotNetObjectReference.Create(this); + JSRuntime.InvokeVoidAsync("setOwlId", OwlId); + JSRuntime.InvokeVoidAsync("InitOwl", OwlId); JSRuntime.InvokeVoidAsync("CStoJSCall", dotNetObjRef); } diff --git a/TIAMSharedUI/Shared/SliderItemSelector.razor.css b/TIAMSharedUI/Shared/SliderItemSelector.razor.css index ce6e0992..e02abfc9 100644 --- a/TIAMSharedUI/Shared/SliderItemSelector.razor.css +++ b/TIAMSharedUI/Shared/SliderItemSelector.razor.css @@ -1,12 +1 @@ -#owl-selector .item { - height: 30vh; - overflow-y: hidden; - vertical-align: middle; - align-content: center; -} - - #owl-selector .item img { - display: block; - width: 100%; - height: auto; - } + diff --git a/TIAMSharedUI/Shared/Users/AdminNavMenu.razor b/TIAMSharedUI/Shared/Users/AdminNavMenu.razor index b02451b8..8067cd22 100644 --- a/TIAMSharedUI/Shared/Users/AdminNavMenu.razor +++ b/TIAMSharedUI/Shared/Users/AdminNavMenu.razor @@ -29,41 +29,78 @@ Home
    + +
    Properties
    +
    - - Transfers + + System Admin
    + @if (expandSysAdminNav) + { +
    +
    + + Dashboard + +
    +
    + + Transfers + +
    + +
    + } +
    - - My profile + + Hotel Admin
    + @if (expandHotelAdminNav) + { +
    +
    + + Hotel Dashboard + +
    +
    + + Manage + +
    +
    + + Public profile + +
    +
    + + My earnings + +
    +
    + } + + + +
    Account
    -
    - - My services - -
    -
    - - My earnings - -
    -
    - - Settings - -
    + + +
    Signout @@ -74,7 +111,8 @@ @code { private bool collapseNavMenu = true; - + private bool expandSysAdminNav = false; + private bool expandHotelAdminNav = false; private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() diff --git a/TIAMSharedUI/TIAMSharedUI.csproj b/TIAMSharedUI/TIAMSharedUI.csproj index 7373f118..39dfd385 100644 --- a/TIAMSharedUI/TIAMSharedUI.csproj +++ b/TIAMSharedUI/TIAMSharedUI.csproj @@ -12,6 +12,8 @@ + + diff --git a/TIAMSharedUI/wwwroot/blazorAnimationInterop.js b/TIAMSharedUI/wwwroot/blazorAnimationInterop.js new file mode 100644 index 00000000..e5b40a06 --- /dev/null +++ b/TIAMSharedUI/wwwroot/blazorAnimationInterop.js @@ -0,0 +1,12 @@ +document.getElementsByTagName("head")[0].insertAdjacentHTML( + "beforeend", + ""); + + + +var AnimatedComponent = AnimatedComponent || {}; +AnimatedComponent.animationend = function (element, dotNet) { + element.addEventListener('animationend', function(e) { + if(e.target === this)dotNet.invokeMethodAsync("OnAnimationEnd") + }); +}; \ No newline at end of file diff --git a/TIAMSharedUI/wwwroot/css/TourIAm.css b/TIAMSharedUI/wwwroot/css/TourIAm.css index 139dad40..bbdde3fc 100644 --- a/TIAMSharedUI/wwwroot/css/TourIAm.css +++ b/TIAMSharedUI/wwwroot/css/TourIAm.css @@ -7,6 +7,10 @@ body { max-width: 100%; overflow-x: hidden; background-color: #e7e6f7; + background: url('https://images.unsplash.com/photo-1641326038434-01b0217c18f1?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); + background-attachment: fixed; + background-position: center; + background-size: cover; color: #58457b; } @@ -57,19 +61,42 @@ select { border-radius: 16px; /*box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;*/ overflow: hidden; - background-color: #d8dcef; + background-color: rgba( 255, 255, 255, 0.15 ); + /*color: #58457b;*/ + font-size: small; +} + +.mycard { +border-radius: 16px; + /*box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;*/ + overflow: hidden; + background: rgba( 255, 255, 255, 0.45 ); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 6px ); + -webkit-backdrop-filter: blur( 6px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); /*color: #58457b;*/ font-size: small; } .card .card-body { padding: 10px; + } /*My overrides end*/ /*my blazor overrides*/ +.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content { + background: rgba( 255, 255, 255, 0.45 ); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 6px ); + -webkit-backdrop-filter: blur( 6px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); +} .dxbl-col { padding-left:0px; @@ -81,7 +108,7 @@ select { --dxbl-grid-font-size: 0.75rem !important; --dxbl-grid-line-height: 1.3 !important; --dxbl-grid-min-width: 240px; - --dxbl-grid-bg: #e7e6f7; + --dxbl-grid-bg: #ffffff; --dxbl-grid-color: #58457b; color: darkslategrey !important; } diff --git a/TIAMSharedUI/wwwroot/css/animate.css b/TIAMSharedUI/wwwroot/css/animate.css new file mode 100644 index 00000000..c8089e1c --- /dev/null +++ b/TIAMSharedUI/wwwroot/css/animate.css @@ -0,0 +1,4250 @@ + +@charset "UTF-8"; +/*! + * animate.css - https://animate.style/ + * Version - 4.0.0 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2020 Animate.css + */ +:root { + --animate-duration: 1s; + --animate-delay: 1s; + --animate-repeat: 1; +} + +.animate__animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-duration: var(--animate-duration); + animation-duration: var(--animate-duration); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + + .animate__animated.animate__infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + } + + .animate__animated.animate__repeat-1 { + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-iteration-count: var(--animate-repeat); + animation-iteration-count: var(--animate-repeat); + } + + .animate__animated.animate__repeat-2 { + -webkit-animation-iteration-count: calc(1 * 2); + animation-iteration-count: calc(1 * 2); + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); + animation-iteration-count: calc(var(--animate-repeat) * 2); + } + + .animate__animated.animate__repeat-3 { + -webkit-animation-iteration-count: calc(1 * 3); + animation-iteration-count: calc(1 * 3); + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); + animation-iteration-count: calc(var(--animate-repeat) * 3); + } + + .animate__animated.animate__delay-1s { + -webkit-animation-delay: 1s; + animation-delay: 1s; + -webkit-animation-delay: var(--animate-delay); + animation-delay: var(--animate-delay); + } + + .animate__animated.animate__delay-2s { + -webkit-animation-delay: calc(1s * 2); + animation-delay: calc(1s * 2); + -webkit-animation-delay: calc(var(--animate-delay) * 2); + animation-delay: calc(var(--animate-delay) * 2); + } + + .animate__animated.animate__delay-3s { + -webkit-animation-delay: calc(1s * 3); + animation-delay: calc(1s * 3); + -webkit-animation-delay: calc(var(--animate-delay) * 3); + animation-delay: calc(var(--animate-delay) * 3); + } + + .animate__animated.animate__delay-4s { + -webkit-animation-delay: calc(1s * 4); + animation-delay: calc(1s * 4); + -webkit-animation-delay: calc(var(--animate-delay) * 4); + animation-delay: calc(var(--animate-delay) * 4); + } + + .animate__animated.animate__delay-5s { + -webkit-animation-delay: calc(1s * 5); + animation-delay: calc(1s * 5); + -webkit-animation-delay: calc(var(--animate-delay) * 5); + animation-delay: calc(var(--animate-delay) * 5); + } + + .animate__animated.animate__faster { + -webkit-animation-duration: calc(1s / 2); + animation-duration: calc(1s / 2); + -webkit-animation-duration: calc(var(--animate-duration) / 2); + animation-duration: calc(var(--animate-duration) / 2); + } + + .animate__animated.animate__fast { + -webkit-animation-duration: calc(1s * 0.8); + animation-duration: calc(1s * 0.8); + -webkit-animation-duration: calc(var(--animate-duration) * 0.8); + animation-duration: calc(var(--animate-duration) * 0.8); + } + + .animate__animated.animate__slow { + -webkit-animation-duration: calc(1s * 2); + animation-duration: calc(1s * 2); + -webkit-animation-duration: calc(var(--animate-duration) * 2); + animation-duration: calc(var(--animate-duration) * 2); + } + + .animate__animated.animate__slower { + -webkit-animation-duration: calc(1s * 3); + animation-duration: calc(1s * 3); + -webkit-animation-duration: calc(var(--animate-duration) * 3); + animation-duration: calc(var(--animate-duration) * 3); + } + +@media print, (prefers-reduced-motion: reduce) { + .animate__animated { + -webkit-animation-duration: 1ms !important; + animation-duration: 1ms !important; + -webkit-transition-duration: 1ms !important; + transition-duration: 1ms !important; + -webkit-animation-iteration-count: 1 !important; + animation-iteration-count: 1 !important; + } + + .animate__animated[class*='Out'] { + opacity: 0; + } +} +/* Attention seekers */ +@-webkit-keyframes bounce { + from, 20%, 53%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 40%, 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); + transform: translate3d(0, -30px, 0) scaleY(1.1); + } + + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); + transform: translate3d(0, 0, 0) scaleY(0.95); + } + + 90% { + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); + transform: translate3d(0, -4px, 0) scaleY(1.02); + } +} + +@keyframes bounce { + from, 20%, 53%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 40%, 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); + transform: translate3d(0, -30px, 0) scaleY(1.1); + } + + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); + transform: translate3d(0, -15px, 0) scaleY(1.05); + } + + 80% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); + transform: translate3d(0, 0, 0) scaleY(0.95); + } + + 90% { + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); + transform: translate3d(0, -4px, 0) scaleY(1.02); + } +} + +.animate__bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} + +@-webkit-keyframes flash { + from, 50%, to { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +@keyframes flash { + from, 50%, to { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +.animate__flash { + -webkit-animation-name: flash; + animation-name: flash; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes pulse { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes pulse { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.animate__pulse { + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.animate__rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand; +} + +@-webkit-keyframes shakeX { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shakeX { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.animate__shakeX { + -webkit-animation-name: shakeX; + animation-name: shakeX; +} + +@-webkit-keyframes shakeY { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } +} + +@keyframes shakeY { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } +} + +.animate__shakeY { + -webkit-animation-name: shakeY; + animation-name: shakeY; +} + +@-webkit-keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } + + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } + + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.animate__headShake { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-name: headShake; + animation-name: headShake; +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } +} + +.animate__swing { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes tada { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes tada { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.animate__tada { + -webkit-animation-name: tada; + animation-name: tada; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes wobble { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes wobble { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} + +@-webkit-keyframes jello { + from, 11.1%, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +@keyframes jello { + from, 11.1%, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +.animate__jello { + -webkit-animation-name: jello; + animation-name: jello; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes heartBeat { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 14% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 28% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 42% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 70% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes heartBeat { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 14% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 28% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 42% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 70% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.animate__heartBeat { + -webkit-animation-name: heartBeat; + animation-name: heartBeat; + -webkit-animation-duration: calc(1s * 1.3); + animation-duration: calc(1s * 1.3); + -webkit-animation-duration: calc(var(--animate-duration) * 1.3); + animation-duration: calc(var(--animate-duration) * 1.3); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +/* Back entrances */ +@-webkit-keyframes backInDown { + 0% { + -webkit-transform: translateY(-1200px) scale(0.7); + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +@keyframes backInDown { + 0% { + -webkit-transform: translateY(-1200px) scale(0.7); + transform: translateY(-1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +.animate__backInDown { + -webkit-animation-name: backInDown; + animation-name: backInDown; +} + +@-webkit-keyframes backInLeft { + 0% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +@keyframes backInLeft { + 0% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +.animate__backInLeft { + -webkit-animation-name: backInLeft; + animation-name: backInLeft; +} + +@-webkit-keyframes backInRight { + 0% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +@keyframes backInRight { + 0% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +.animate__backInRight { + -webkit-animation-name: backInRight; + animation-name: backInRight; +} + +@-webkit-keyframes backInUp { + 0% { + -webkit-transform: translateY(1200px) scale(0.7); + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +@keyframes backInUp { + 0% { + -webkit-transform: translateY(1200px) scale(0.7); + transform: translateY(1200px) scale(0.7); + opacity: 0.7; + } + + 80% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +.animate__backInUp { + -webkit-animation-name: backInUp; + animation-name: backInUp; +} +/* Back exists */ +@-webkit-keyframes backOutDown { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(700px) scale(0.7); + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} + +@keyframes backOutDown { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(700px) scale(0.7); + transform: translateY(700px) scale(0.7); + opacity: 0.7; + } +} + +.animate__backOutDown { + -webkit-animation-name: backOutDown; + animation-name: backOutDown; +} + +@-webkit-keyframes backOutLeft { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} + +@keyframes backOutLeft { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(-2000px) scale(0.7); + transform: translateX(-2000px) scale(0.7); + opacity: 0.7; + } +} + +.animate__backOutLeft { + -webkit-animation-name: backOutLeft; + animation-name: backOutLeft; +} + +@-webkit-keyframes backOutRight { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} + +@keyframes backOutRight { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateX(0px) scale(0.7); + transform: translateX(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateX(2000px) scale(0.7); + transform: translateX(2000px) scale(0.7); + opacity: 0.7; + } +} + +.animate__backOutRight { + -webkit-animation-name: backOutRight; + animation-name: backOutRight; +} + +@-webkit-keyframes backOutUp { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(-700px) scale(0.7); + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} + +@keyframes backOutUp { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 20% { + -webkit-transform: translateY(0px) scale(0.7); + transform: translateY(0px) scale(0.7); + opacity: 0.7; + } + + 100% { + -webkit-transform: translateY(-700px) scale(0.7); + transform: translateY(-700px) scale(0.7); + opacity: 0.7; + } +} + +.animate__backOutUp { + -webkit-animation-name: backOutUp; + animation-name: backOutUp; +} +/* Bouncing entrances */ +@-webkit-keyframes bounceIn { + from, 20%, 40%, 60%, 80%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + + to { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes bounceIn { + from, 20%, 40%, 60%, 80%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + + to { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.animate__bounceIn { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); + -webkit-animation-name: bounceIn; + animation-name: bounceIn; +} + +@-webkit-keyframes bounceInDown { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); + transform: translate3d(0, -3000px, 0) scaleY(3); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); + transform: translate3d(0, 25px, 0) scaleY(0.9); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); + transform: translate3d(0, -10px, 0) scaleY(0.95); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); + transform: translate3d(0, 5px, 0) scaleY(0.985); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInDown { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); + transform: translate3d(0, -3000px, 0) scaleY(3); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); + transform: translate3d(0, 25px, 0) scaleY(0.9); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); + transform: translate3d(0, -10px, 0) scaleY(0.95); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); + transform: translate3d(0, 5px, 0) scaleY(0.985); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; +} + +@-webkit-keyframes bounceInLeft { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); + transform: translate3d(-3000px, 0, 0) scaleX(3); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); + transform: translate3d(25px, 0, 0) scaleX(1); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); + transform: translate3d(-10px, 0, 0) scaleX(0.98); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); + transform: translate3d(5px, 0, 0) scaleX(0.995); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInLeft { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); + transform: translate3d(-3000px, 0, 0) scaleX(3); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); + transform: translate3d(25px, 0, 0) scaleX(1); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); + transform: translate3d(-10px, 0, 0) scaleX(0.98); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); + transform: translate3d(5px, 0, 0) scaleX(0.995); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} + +@-webkit-keyframes bounceInRight { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); + transform: translate3d(3000px, 0, 0) scaleX(3); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); + transform: translate3d(-25px, 0, 0) scaleX(1); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); + transform: translate3d(10px, 0, 0) scaleX(0.98); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); + transform: translate3d(-5px, 0, 0) scaleX(0.995); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInRight { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); + transform: translate3d(3000px, 0, 0) scaleX(3); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); + transform: translate3d(-25px, 0, 0) scaleX(1); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); + transform: translate3d(10px, 0, 0) scaleX(0.98); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); + transform: translate3d(-5px, 0, 0) scaleX(0.995); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; +} + +@-webkit-keyframes bounceInUp { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); + transform: translate3d(0, 3000px, 0) scaleY(5); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); + transform: translate3d(0, 10px, 0) scaleY(0.95); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); + transform: translate3d(0, -5px, 0) scaleY(0.985); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes bounceInUp { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + from { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); + transform: translate3d(0, 3000px, 0) scaleY(5); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); + transform: translate3d(0, 10px, 0) scaleY(0.95); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); + transform: translate3d(0, -5px, 0) scaleY(0.985); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; +} +/* Bouncing exits */ +@-webkit-keyframes bounceOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} + +@keyframes bounceOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} + +.animate__bounceOut { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); + -webkit-animation-name: bounceOut; + animation-name: bounceOut; +} + +@-webkit-keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); + transform: translate3d(0, 10px, 0) scaleY(0.985); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); + transform: translate3d(0, 2000px, 0) scaleY(3); + } +} + +@keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); + transform: translate3d(0, 10px, 0) scaleY(0.985); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); + transform: translate3d(0, -20px, 0) scaleY(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); + transform: translate3d(0, 2000px, 0) scaleY(3); + } +} + +.animate__bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} + +@-webkit-keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); + transform: translate3d(20px, 0, 0) scaleX(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); + transform: translate3d(-2000px, 0, 0) scaleX(2); + } +} + +@keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); + transform: translate3d(20px, 0, 0) scaleX(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); + transform: translate3d(-2000px, 0, 0) scaleX(2); + } +} + +.animate__bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} + +@-webkit-keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); + transform: translate3d(-20px, 0, 0) scaleX(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); + transform: translate3d(2000px, 0, 0) scaleX(2); + } +} + +@keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); + transform: translate3d(-20px, 0, 0) scaleX(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); + transform: translate3d(2000px, 0, 0) scaleX(2); + } +} + +.animate__bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} + +@-webkit-keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); + transform: translate3d(0, -10px, 0) scaleY(0.985); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); + transform: translate3d(0, 20px, 0) scaleY(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); + transform: translate3d(0, -2000px, 0) scaleY(3); + } +} + +@keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); + transform: translate3d(0, -10px, 0) scaleY(0.985); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); + transform: translate3d(0, 20px, 0) scaleY(0.9); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); + transform: translate3d(0, -2000px, 0) scaleY(3); + } +} + +.animate__bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} +/* Fading entrances */ +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.animate__fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@-webkit-keyframes fadeInDownBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInDownBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} + +@-webkit-keyframes fadeInLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} + +@-webkit-keyframes fadeInLeftBig { + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInLeftBig { + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} + +@-webkit-keyframes fadeInRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} + +@-webkit-keyframes fadeInRightBig { + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInRightBig { + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} + +@-webkit-keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} + +@-webkit-keyframes fadeInUpBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInUpBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} + +@-webkit-keyframes fadeInTopLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInTopLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInTopLeft { + -webkit-animation-name: fadeInTopLeft; + animation-name: fadeInTopLeft; +} + +@-webkit-keyframes fadeInTopRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInTopRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInTopRight { + -webkit-animation-name: fadeInTopRight; + animation-name: fadeInTopRight; +} + +@-webkit-keyframes fadeInBottomLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInBottomLeft { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInBottomLeft { + -webkit-animation-name: fadeInBottomLeft; + animation-name: fadeInBottomLeft; +} + +@-webkit-keyframes fadeInBottomRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeInBottomRight { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__fadeInBottomRight { + -webkit-animation-name: fadeInBottomRight; + animation-name: fadeInBottomRight; +} +/* Fading exits */ +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.animate__fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.animate__fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutDownBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@keyframes fadeOutDownBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +.animate__fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} + +@-webkit-keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +.animate__fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} + +@-webkit-keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +.animate__fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} + +@-webkit-keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +.animate__fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +@-webkit-keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +@keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +.animate__fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} + +@-webkit-keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.animate__fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +@-webkit-keyframes fadeOutUpBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes fadeOutUpBig { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +.animate__fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} + +@-webkit-keyframes fadeOutTopLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } +} + +@keyframes fadeOutTopLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, -100%, 0); + transform: translate3d(-100%, -100%, 0); + } +} + +.animate__fadeOutTopLeft { + -webkit-animation-name: fadeOutTopLeft; + animation-name: fadeOutTopLeft; +} + +@-webkit-keyframes fadeOutTopRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } +} + +@keyframes fadeOutTopRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, -100%, 0); + transform: translate3d(100%, -100%, 0); + } +} + +.animate__fadeOutTopRight { + -webkit-animation-name: fadeOutTopRight; + animation-name: fadeOutTopRight; +} + +@-webkit-keyframes fadeOutBottomRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } +} + +@keyframes fadeOutBottomRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 100%, 0); + transform: translate3d(100%, 100%, 0); + } +} + +.animate__fadeOutBottomRight { + -webkit-animation-name: fadeOutBottomRight; + animation-name: fadeOutBottomRight; +} + +@-webkit-keyframes fadeOutBottomLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } +} + +@keyframes fadeOutBottomLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 100%, 0); + transform: translate3d(-100%, 100%, 0); + } +} + +.animate__fadeOutBottomLeft { + -webkit-animation-name: fadeOutBottomLeft; + animation-name: fadeOutBottomLeft; +} +/* Flippers */ +@-webkit-keyframes flip { + from { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + to { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +@keyframes flip { + from { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + to { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +.animate__animated.animate__flip { + -webkit-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip; +} + +@-webkit-keyframes flipInX { + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +@keyframes flipInX { + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +.animate__flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; +} + +@-webkit-keyframes flipInY { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +@keyframes flipInY { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} + +.animate__flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; +} + +@-webkit-keyframes flipOutX { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +.animate__flipOutX { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@-webkit-keyframes flipOutY { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +@keyframes flipOutY { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +.animate__flipOutY { + -webkit-animation-duration: calc(1s * 0.75); + animation-duration: calc(1s * 0.75); + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); + animation-duration: calc(var(--animate-duration) * 0.75); + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; +} +/* Lightspeed */ +@-webkit-keyframes lightSpeedInRight { + from { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes lightSpeedInRight { + from { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__lightSpeedInRight { + -webkit-animation-name: lightSpeedInRight; + animation-name: lightSpeedInRight; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +@-webkit-keyframes lightSpeedInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(5deg); + transform: skewX(5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes lightSpeedInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); + transform: translate3d(-100%, 0, 0) skewX(30deg); + opacity: 0; + } + + 60% { + -webkit-transform: skewX(-20deg); + transform: skewX(-20deg); + opacity: 1; + } + + 80% { + -webkit-transform: skewX(5deg); + transform: skewX(5deg); + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__lightSpeedInLeft { + -webkit-animation-name: lightSpeedInLeft; + animation-name: lightSpeedInLeft; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +@-webkit-keyframes lightSpeedOutRight { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +@keyframes lightSpeedOutRight { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +.animate__lightSpeedOutRight { + -webkit-animation-name: lightSpeedOutRight; + animation-name: lightSpeedOutRight; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +@-webkit-keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} + +@keyframes lightSpeedOutLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); + transform: translate3d(-100%, 0, 0) skewX(-30deg); + opacity: 0; + } +} + +.animate__lightSpeedOutLeft { + -webkit-animation-name: lightSpeedOutLeft; + animation-name: lightSpeedOutLeft; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +/* Rotating entrances */ +@-webkit-keyframes rotateIn { + from { + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateIn { + from { + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.animate__rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes rotateInDownLeft { + from { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + from { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.animate__rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} + +@-webkit-keyframes rotateInDownRight { + from { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInDownRight { + from { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.animate__rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} + +@-webkit-keyframes rotateInUpLeft { + from { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + from { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.animate__rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} + +@-webkit-keyframes rotateInUpRight { + from { + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rotateInUpRight { + from { + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +.animate__rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} +/* Rotating exits */ +@-webkit-keyframes rotateOut { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +.animate__rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes rotateOutDownLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +.animate__rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} + +@-webkit-keyframes rotateOutDownRight { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.animate__rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} + +@-webkit-keyframes rotateOutUpLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.animate__rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} + +@-webkit-keyframes rotateOutUpRight { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + from { + opacity: 1; + } + + to { + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +.animate__rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} +/* Specials */ +@-webkit-keyframes hinge { + 0% { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +@keyframes hinge { + 0% { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +.animate__hinge { + -webkit-animation-duration: calc(1s * 2); + animation-duration: calc(1s * 2); + -webkit-animation-duration: calc(var(--animate-duration) * 2); + animation-duration: calc(var(--animate-duration) * 2); + -webkit-animation-name: hinge; + animation-name: hinge; + -webkit-transform-origin: top left; + transform-origin: top left; +} + +@-webkit-keyframes jackInTheBox { + from { + opacity: 0; + -webkit-transform: scale(0.1) rotate(30deg); + transform: scale(0.1) rotate(30deg); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + } + + 50% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 70% { + -webkit-transform: rotate(3deg); + transform: rotate(3deg); + } + + to { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes jackInTheBox { + from { + opacity: 0; + -webkit-transform: scale(0.1) rotate(30deg); + transform: scale(0.1) rotate(30deg); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + } + + 50% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 70% { + -webkit-transform: rotate(3deg); + transform: rotate(3deg); + } + + to { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.animate__jackInTheBox { + -webkit-animation-name: jackInTheBox; + animation-name: jackInTheBox; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes rollIn { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes rollIn { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes rollOut { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +@keyframes rollOut { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +.animate__rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; +} +/* Zooming entrances */ +@-webkit-keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 50% { + opacity: 1; + } +} + +.animate__zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} + +@-webkit-keyframes zoomInDown { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInDown { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.animate__zoomInDown { + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown; +} + +@-webkit-keyframes zoomInLeft { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInLeft { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.animate__zoomInLeft { + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft; +} + +@-webkit-keyframes zoomInRight { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInRight { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.animate__zoomInRight { + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight; +} + +@-webkit-keyframes zoomInUp { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomInUp { + from { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.animate__zoomInUp { + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp; +} +/* Zooming exits */ +@-webkit-keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + to { + opacity: 0; + } +} + +@keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + to { + opacity: 0; + } +} + +.animate__zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} + +@-webkit-keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.animate__zoomOutDown { + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} + +@-webkit-keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); + } +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); + } +} + +.animate__zoomOutLeft { + -webkit-animation-name: zoomOutLeft; + animation-name: zoomOutLeft; + -webkit-transform-origin: left center; + transform-origin: left center; +} + +@-webkit-keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); + } +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); + } +} + +.animate__zoomOutRight { + -webkit-animation-name: zoomOutRight; + animation-name: zoomOutRight; + -webkit-transform-origin: right center; + transform-origin: right center; +} + +@-webkit-keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + to { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} + +.animate__zoomOutUp { + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +/* Sliding entrances */ +@-webkit-keyframes slideInDown { + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInDown { + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +@-webkit-keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} + +@-webkit-keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +@-webkit-keyframes slideInUp { + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInUp { + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.animate__slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; +} +/* Sliding exits */ +@-webkit-keyframes slideOutDown { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes slideOutDown { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.animate__slideOutDown { + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; +} + +@-webkit-keyframes slideOutLeft { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes slideOutLeft { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +.animate__slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} + +@-webkit-keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +.animate__slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +@-webkit-keyframes slideOutUp { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes slideOutUp { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.animate__slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} diff --git a/TIAMWebApp/Client/Program.cs b/TIAMWebApp/Client/Program.cs index 6e7f1e17..09a316fa 100644 --- a/TIAMWebApp/Client/Program.cs +++ b/TIAMWebApp/Client/Program.cs @@ -1,4 +1,5 @@ using AyCode.Interfaces.StorageHandlers; +using BlazorAnimation; using Blazored.LocalStorage; using DevExpress.Blazor; using Microsoft.AspNetCore.Components.Web; @@ -37,4 +38,5 @@ builder.Services.AddSingleton(x => new ResourceManager("TIAMWebApp.Client.Resour builder.Services.AddSingleton(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5); +builder.Services.Configure(Guid.NewGuid().ToString(), c => { }); await builder.Build().RunAsync(); diff --git a/TIAMWebApp/Client/Services/UserDataServiceWeb.cs b/TIAMWebApp/Client/Services/UserDataServiceWeb.cs index 1908a823..b111caf0 100644 --- a/TIAMWebApp/Client/Services/UserDataServiceWeb.cs +++ b/TIAMWebApp/Client/Services/UserDataServiceWeb.cs @@ -36,6 +36,8 @@ namespace TIAMWebApp.Client.Services } + + public async Task IsLoggedInAsync(Guid id) { //api call to get user diff --git a/TIAMWebApp/Client/wwwroot/index.html b/TIAMWebApp/Client/wwwroot/index.html index 71820179..64ba09ee 100644 --- a/TIAMWebApp/Client/wwwroot/index.html +++ b/TIAMWebApp/Client/wwwroot/index.html @@ -13,6 +13,7 @@ + @@ -33,7 +34,8 @@ Reload 🗙
    - + +