4 changed files
WPE.App.Shared.BaseComponents | ||
Pages/Buttons | ||
ButtonAction.razor.css | ||
ButtonCards.razor | ||
ButtonCards.razor.css | ||
WPE.App.Shared.BaseComponents.csproj | ||
ButtonAction.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonAction.razor.css/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonAction.razor.css
ButtonCards.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor-32/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor
Add comment 1 Minus @{
Add comment 2 Minus string btnClass = "btn-cards";
Add comment 3 Minus btnClass += Active ? " active" : " inactive";
Add comment 4 Minus }
Add comment 5 Minus
Add comment 6 Minus @* Figma Component: button/cards *@
Add comment 7 Minus <div class="btn-cards-wrapper">
Add comment 8 Minus <div class="@btnClass" @onclick="OnClick">
Add comment 9 Minus <i class="icon-@Icon" />
Add comment 10 Minus </div>
Add comment 11 Minus </div>
Add comment 12 Minus
Add comment 13 Minus
Add comment 14 Minus @code {
Add comment 15 Minus [Parameter]
Add comment 16 Minus public string Icon { get; set; } = string.Empty;
Add comment 17 Minus
Add comment 18 Minus [Parameter]
Add comment 19 Minus public EventCallback Click { get; set; }
Add comment 20 Minus
Add comment 21 Minus [Parameter]
Add comment 22 Minus public bool Active { get; set; } = true;
Add comment 23 Minus
Add comment 24 Minus private void OnClick()
Add comment 25 Minus {
Add comment 26 Minus if (!Active)
Add comment 27 Minus return;
Add comment 28 Minus
Add comment 29 Minus _ = Click.InvokeAsync();
Add comment 30 Minus }
Add comment 31 Minus }
Add comment 32 Minus
ButtonCards.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor.css-62/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCards.razor.css
Add comment 1 Minus .btn-cards-wrapper {
Add comment 2 Minus position: relative;
Add comment 3 Minus height: 44px;
Add comment 4 Minus flex-shrink: 0;
Add comment 5 Minus display: flex;
Add comment 6 Minus gap: 1px;
Add comment 7 Minus }
Add comment 8 Minus
Add comment 9 Minus .btn-cards-wrapper::before {
Add comment 10 Minus position: relative;
Add comment 11 Minus height: 100%;
Add comment 12 Minus width: 1px;
Add comment 13 Minus background: #F2F2F2;
Add comment 14 Minus content: '';
Add comment 15 Minus }
Add comment 16 Minus
Add comment 17 Minus .btn-cards-wrapper .btn-cards {
Add comment 18 Minus position: relative;
Add comment 19 Minus height: 100%;
Add comment 20 Minus aspect-ratio: 1;
Add comment 21 Minus display: grid;
Add comment 22 Minus place-items: center;
Add comment 23 Minus transition: .2s;
Add comment 24 Minus }
Add comment 25 Minus
Add comment 26 Minus .btn-cards-wrapper .btn-cards > i {
Add comment 27 Minus font-size: 15px;
Add comment 28 Minus }
Add comment 29 Minus
Add comment 30 Minus .btn-cards-wrapper .btn-cards:active {
Add comment 31 Minus transition: 0s;
Add comment 32 Minus }
Add comment 33 Minus
Add comment 34 Minus .btn-cards-wrapper .btn-cards.inactive {
Add comment 35 Minus background: #FFF;
Add comment 36 Minus }
Add comment 37 Minus
Add comment 38 Minus .btn-cards-wrapper .btn-cards.inactive > i {
Add comment 39 Minus color: #000000;
Add comment 40 Minus opacity: 0.15;
Add comment 41 Minus }
Add comment 42 Minus
Add comment 43 Minus .btn-cards-wrapper .btn-cards.active {
Add comment 44 Minus cursor: pointer;
Add comment 45 Minus background: #FFF;
Add comment 46 Minus }
Add comment 47 Minus
Add comment 48 Minus .btn-cards-wrapper .btn-cards.active > i {
Add comment 49 Minus color: var(--primary);
Add comment 50 Minus }
Add comment 51 Minus
Add comment 52 Minus .btn-cards-wrapper .btn-cards.active:hover {
Add comment 53 Minus border-radius: 0px 20px 0px 0px;
Add comment 54 Minus border: 1px solid #CCC;
Add comment 55 Minus background: #FFF;
Add comment 56 Minus }
Add comment 57 Minus
Add comment 58 Minus .btn-cards-wrapper .btn-cards.active:active {
Add comment 59 Minus background: #EEE;
Add comment 60 Minus border: 1px solid #EEE;
Add comment 61 Minus }
Add comment 62 Minus
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj