9 changed files
WPE.App.Shared.BaseComponents | ||
Pages | ||
Animations | ||
BubbleLoading.razor.css | ||
Buttons | ||
ButtonAction.razor + | ||
ButtonAction.razor.css + | ||
ButtonCards.razor + | ||
ButtonCards.razor.css + | ||
ButtonGhost.razor + | ||
ButtonGhost.razor.css + | ||
ButtonVoucher.razor.css | ||
WPE.App.Shared.BaseComponents.csproj | ||
BubbleLoading.razor.css
/WPE.App.Shared.BaseComponents/Pages/Animations/BubbleLoading.razor.css-2+3/WPE.App.Shared.BaseComponents/Pages/Animations/BubbleLoading.razor.css
Add comment 1 .bubblingG {
Add comment 2 position: relative;
Add comment 3 text-align: center;
Add comment 4 Minus width: 40px;
Add comment 5 Minus height: 15px;
Add comment 4 Plus flex-shrink: 0;
Add comment 5 Plus width: 32px;
Add comment 6 Plus height: 14px;
Add comment 6 7 --bubbleColor: #FFF;
Add comment 7 8 }
Add comment 8 9
ButtonAction.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonAction.razor+57/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonAction.razor
Add comment 1 Plus @using Infsoft.WPE.App.Shared.BaseComponents.Models.Text;
Add comment 2 Plus @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Animations
Add comment 3 Plus @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Text
Add comment 4 Plus
Add comment 5 Plus @{
Add comment 6 Plus string btnText = Pending ? PendingText : Text;
Add comment 7 Plus btnText = Pending && MouseOverButton ? CancelText : btnText;
Add comment 8 Plus
Add comment 9 Plus string btnClass = "btn-action";
Add comment 10 Plus btnClass += Pending ? " pending" : "";
Add comment 11 Plus btnClass += MouseOverButton ? " mouseover" : "";
Add comment 12 Plus btnClass += FixedWidth ? " fixed-width" : "";
Add comment 13 Plus btnClass += Selected ? " selected" : "";
Add comment 14 Plus }
Add comment 15 Plus
Add comment 16 Plus @* Figma Component: button/action *@
Add comment 17 Plus <div class="@btnClass" @onclick="Click" @onmouseenter="() => ToggleMouseOverButton(true)" @onmouseleave="() => ToggleMouseOverButton(false)">
Add comment 18 Plus @if (Pending)
Add comment 19 Plus {
Add comment 20 Plus <BubbleLoading />
Add comment 21 Plus }
Add comment 22 Plus <Text_Uppercase Type="TextType.TextS">
Add comment 23 Plus <div class="btn-text">@btnText</div>
Add comment 24 Plus </Text_Uppercase>
Add comment 25 Plus </div>
Add comment 26 Plus
Add comment 27 Plus @code {
Add comment 28 Plus [Parameter]
Add comment 29 Plus public string Text { get; set; } = string.Empty;
Add comment 30 Plus
Add comment 31 Plus [Parameter]
Add comment 32 Plus public string PendingText { get; set; } = string.Empty;
Add comment 33 Plus
Add comment 34 Plus [Parameter]
Add comment 35 Plus public string CancelText { get; set; } = string.Empty;
Add comment 36 Plus
Add comment 37 Plus [Parameter]
Add comment 38 Plus public bool Selected { get; set; } = false;
Add comment 39 Plus
Add comment 40 Plus [Parameter]
Add comment 41 Plus public bool Pending { get; set; } = false;
Add comment 42 Plus
Add comment 43 Plus [Parameter]
Add comment 44 Plus public bool FixedWidth { get; set; } = true;
Add comment 45 Plus
Add comment 46 Plus [Parameter]
Add comment 47 Plus public EventCallback Click { get; set; }
Add comment 48 Plus
Add comment 49 Plus private bool MouseOverButton = false;
Add comment 50 Plus
Add comment 51 Plus public void ToggleMouseOverButton(bool mouseOver)
Add comment 52 Plus {
Add comment 53 Plus MouseOverButton = mouseOver;
Add comment 54 Plus this.StateHasChanged();
Add comment 55 Plus }
Add comment 56 Plus }
Add comment 57 Plus
ButtonAction.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonAction.razor.css+64/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonAction.razor.css
Add comment 1 Plus .btn-action {
Add comment 2 Plus position: relative;
Add comment 3 Plus display: flex;
Add comment 4 Plus padding: 9px 24px;
Add comment 5 Plus justify-content: center;
Add comment 6 Plus align-items: center;
Add comment 7 Plus justify-content: center;
Add comment 8 Plus flex-shrink: 0;
Add comment 9 Plus cursor: pointer;
Add comment 10 Plus transition: .2s;
Add comment 11 Plus gap: 10px;
Add comment 12 Plus }
Add comment 13 Plus
Add comment 14 Plus .btn-action .btn-text {
Add comment 15 Plus color: var(--primaryWcag);
Add comment 16 Plus text-align: center;
Add comment 17 Plus }
Add comment 18 Plus
Add comment 19 Plus .btn-action.fixed-width {
Add comment 20 Plus width: 134px;
Add comment 21 Plus justify-content: center;
Add comment 22 Plus }
Add comment 23 Plus
Add comment 24 Plus .btn-action.pending {
Add comment 25 Plus height: 52px;
Add comment 26 Plus }
Add comment 27 Plus
Add comment 28 Plus .btn-action:not(.pending) {
Add comment 29 Plus border-radius: 4px;
Add comment 30 Plus border: 2px solid #D9D9D9;
Add comment 31 Plus background: #FFF;
Add comment 32 Plus }
Add comment 33 Plus
Add comment 34 Plus .btn-action:not(.pending):hover {
Add comment 35 Plus border: 1px solid #808080;
Add comment 36 Plus background: #FFF;
Add comment 37 Plus }
Add comment 38 Plus
Add comment 39 Plus .btn-action:not(.pending):active {
Add comment 40 Plus border: 1px solid #666;
Add comment 41 Plus background: #EEE;
Add comment 42 Plus transition: 0s;
Add comment 43 Plus }
Add comment 44 Plus
Add comment 45 Plus .btn-action:not(.pending).selected {
Add comment 46 Plus border: 2px solid var(--primary);
Add comment 47 Plus background: #FFF;
Add comment 48 Plus }
Add comment 49 Plus
Add comment 50 Plus .btn-action.pending {
Add comment 51 Plus border: 1px dashed #808080;
Add comment 52 Plus background: transparent;
Add comment 53 Plus }
Add comment 54 Plus
Add comment 55 Plus .btn-action.pending:hover {
Add comment 56 Plus border: 1px solid #808080;
Add comment 57 Plus background: #FFF;
Add comment 58 Plus }
Add comment 59 Plus
Add comment 60 Plus .btn-action.pending:active {
Add comment 61 Plus border: 1px solid #666;
Add comment 62 Plus background: #EEE
Add comment 63 Plus }
Add comment 64 Plus
ButtonCards.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor
ButtonCards.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor.css/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor.css
ButtonGhost.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonGhost.razor/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonGhost.razor
ButtonGhost.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonGhost.razor.css/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonGhost.razor.css
ButtonVoucher.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonVoucher.razor.css/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonVoucher.razor.css
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj