mirror of
https://github.com/status-im/nft-faucet.git
synced 2025-02-23 12:08:32 +00:00
Add Checkmark component
This commit is contained in:
parent
f002c87a62
commit
06ccd776f1
5
NftFaucetRadzen/Components/Checkmark.razor
Normal file
5
NftFaucetRadzen/Components/Checkmark.razor
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<span class="checkmark" style=@(AnchorToTopRightCorner ? "position: absolute; top: 1em; right: 1em;" : string.Empty)>
|
||||||
|
<div class="checkmark_circle"></div>
|
||||||
|
<div class="checkmark_stem"></div>
|
||||||
|
<div class="checkmark_kick"></div>
|
||||||
|
</span>
|
8
NftFaucetRadzen/Components/Checkmark.razor.cs
Normal file
8
NftFaucetRadzen/Components/Checkmark.razor.cs
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace NftFaucetRadzen.Components;
|
||||||
|
|
||||||
|
public partial class Checkmark
|
||||||
|
{
|
||||||
|
[Parameter] public bool AnchorToTopRightCorner { get; set; }
|
||||||
|
}
|
@ -6,6 +6,7 @@
|
|||||||
<div class="d-flex flex-row align-items-center">
|
<div class="d-flex flex-row align-items-center">
|
||||||
<RadzenImage Path=@("./images/" + (network.ImageName ?? "ethereum.svg")) Class="float-left mr-3" Style="width: 80px; height: 80px; margin-right: 1em;" />
|
<RadzenImage Path=@("./images/" + (network.ImageName ?? "ethereum.svg")) Class="float-left mr-3" Style="width: 80px; height: 80px; margin-right: 1em;" />
|
||||||
<div>
|
<div>
|
||||||
|
<Checkmark AnchorToTopRightCorner="true" />
|
||||||
<h4 class="mb-0">@network.Name</h4>
|
<h4 class="mb-0">@network.Name</h4>
|
||||||
@if (network.ChainId.HasValue)
|
@if (network.ChainId.HasValue)
|
||||||
{
|
{
|
||||||
|
@ -6,5 +6,4 @@ namespace NftFaucetRadzen.Components;
|
|||||||
public partial class NetworkList
|
public partial class NetworkList
|
||||||
{
|
{
|
||||||
[Parameter] public NetworkModel[] Data { get; set; }
|
[Parameter] public NetworkModel[] Data { get; set; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -75,3 +75,40 @@ a, .btn-link {
|
|||||||
.non-supported-container {
|
.non-supported-container {
|
||||||
background-color: #dfdfdf !important;
|
background-color: #dfdfdf !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
display:inline-block;
|
||||||
|
width: 22px;
|
||||||
|
height:22px;
|
||||||
|
-ms-transform: rotate(45deg); /* IE 9 */
|
||||||
|
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark_circle {
|
||||||
|
position: absolute;
|
||||||
|
width:22px;
|
||||||
|
height:22px;
|
||||||
|
background-color: green;
|
||||||
|
border-radius:11px;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark_stem {
|
||||||
|
position: absolute;
|
||||||
|
width:3px;
|
||||||
|
height:9px;
|
||||||
|
background-color:#fff;
|
||||||
|
left:11px;
|
||||||
|
top:6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark_kick {
|
||||||
|
position: absolute;
|
||||||
|
width:3px;
|
||||||
|
height:3px;
|
||||||
|
background-color:#fff;
|
||||||
|
left:8px;
|
||||||
|
top:12px;
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user