5 changed files
WPE.App.Shared.BaseComponents | ||
Pages/Buttons | ||
ButtonLocation.razor + | ||
ButtonLocation.razor.css + | ||
ButtonScrollHorizontal.razor + | ||
ButtonScrollHorizontal.razor.css + | ||
WPE.App.Shared.BaseComponents.csproj | ||
ButtonLocation.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonLocation.razor+22/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonLocation.razor
Add comment 1 Plus @using Infsoft.WPE.App.Shared.BaseComponents.Models.Text;
Add comment 2 Plus @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Text
Add comment 3 Plus
Add comment 4 Plus <div class="btn-location" @onclick="Click">
Add comment 5 Plus <img src="@Image" />
Add comment 6 Plus <div class="overlay" />
Add comment 7 Plus <Text_Bold Color="#FFF"
Add comment 8 Plus Type="TextType.TitleL"
Add comment 9 Plus Style="text-shadow: 0px 2px 4px var(--background1); z-index: 1;">@Text</Text_Bold>
Add comment 10 Plus </div>
Add comment 11 Plus
Add comment 12 Plus @code {
Add comment 13 Plus [Parameter]
Add comment 14 Plus public string Image { get; set; } = string.Empty;
Add comment 15 Plus
Add comment 16 Plus [Parameter]
Add comment 17 Plus public string Text { get; set; } = string.Empty;
Add comment 18 Plus
Add comment 19 Plus [Parameter]
Add comment 20 Plus public EventCallback Click { get; set; }
Add comment 21 Plus }
Add comment 22 Plus
ButtonLocation.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonLocation.razor.css+51/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonLocation.razor.css
Add comment 1 Plus .btn-location {
Add comment 2 Plus position: relative;
Add comment 3 Plus width: 100%;
Add comment 4 Plus height: 100%;
Add comment 5 Plus border-radius: 14px;
Add comment 6 Plus padding: 0 36px 22px 36px;
Add comment 7 Plus position: relative;
Add comment 8 Plus display: flex;
Add comment 9 Plus align-items: flex-end;
Add comment 10 Plus cursor: pointer;
Add comment 11 Plus }
Add comment 12 Plus
Add comment 13 Plus .btn-location > .overlay {
Add comment 14 Plus position: absolute;
Add comment 15 Plus left: 0;
Add comment 16 Plus bottom: 0;
Add comment 17 Plus right: 0;
Add comment 18 Plus height: 81px;
Add comment 19 Plus border-radius: 0px 0px 14px 14px;
Add comment 20 Plus background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0.67%, rgba(0, 0, 0, 0.35) 100%);
Add comment 21 Plus }
Add comment 22 Plus
Add comment 23 Plus .btn-location > img {
Add comment 24 Plus position: absolute;
Add comment 25 Plus left: 0;
Add comment 26 Plus top: 0;
Add comment 27 Plus height: 100%;
Add comment 28 Plus width: 100%;
Add comment 29 Plus object-fit: cover;
Add comment 30 Plus border-radius: inherit;
Add comment 31 Plus }
Add comment 32 Plus
Add comment 33 Plus .btn-location::after {
Add comment 34 Plus position: absolute;
Add comment 35 Plus inset: 0;
Add comment 36 Plus border-radius: inherit;
Add comment 37 Plus opacity: 0;
Add comment 38 Plus background: var(--primary);
Add comment 39 Plus transition: .2s;
Add comment 40 Plus content: '';
Add comment 41 Plus }
Add comment 42 Plus
Add comment 43 Plus .btn-location:hover::after {
Add comment 44 Plus opacity: 0.25;
Add comment 45 Plus }
Add comment 46 Plus
Add comment 47 Plus .btn-location:active::after {
Add comment 48 Plus opacity: 0.65;
Add comment 49 Plus transition: 0s;
Add comment 50 Plus }
Add comment 51 Plus
ButtonScrollHorizontal.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonScrollHorizontal.razor+21/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonScrollHorizontal.razor
Add comment 1 Plus <div class="btn-scroll-horizontal @Direction.ToString().ToLower()" @onclick="Click">
Add comment 2 Plus <div class="inner">
Add comment 3 Plus <i class="@Icon" />
Add comment 4 Plus </div>
Add comment 5 Plus </div>
Add comment 6 Plus
Add comment 7 Plus @code {
Add comment 8 Plus public enum ButtonHorizontalDirection
Add comment 9 Plus {
Add comment 10 Plus Left, Right
Add comment 11 Plus }
Add comment 12 Plus
Add comment 13 Plus [Parameter]
Add comment 14 Plus public ButtonHorizontalDirection Direction { get; set; } = ButtonHorizontalDirection.Left;
Add comment 15 Plus
Add comment 16 Plus [Parameter]
Add comment 17 Plus public EventCallback Click { get; set; }
Add comment 18 Plus
Add comment 19 Plus private string Icon => $"icon-chevron-{Direction.ToString().ToLower()}-9x15";
Add comment 20 Plus }
Add comment 21 Plus
ButtonScrollHorizontal.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonScrollHorizontal.razor.css+55/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonScrollHorizontal.razor.css
Add comment 1 Plus .btn-scroll-horizontal {
Add comment 2 Plus position: relative;
Add comment 3 Plus width: 54px;
Add comment 4 Plus height: 116px;
Add comment 5 Plus cursor: pointer;
Add comment 6 Plus backdrop-filter: blur(1.5px);
Add comment 7 Plus }
Add comment 8 Plus
Add comment 9 Plus .btn-scroll-horizontal::before {
Add comment 10 Plus position: absolute;
Add comment 11 Plus inset: 0;
Add comment 12 Plus outline-color: #959595;
Add comment 13 Plus outline-style: solid;
Add comment 14 Plus outline-width: 1px;
Add comment 15 Plus opacity: 0.5;
Add comment 16 Plus background: #FFF;
Add comment 17 Plus border: 2px solid #FFF;
Add comment 18 Plus border-radius: inherit;
Add comment 19 Plus transition: .2s;
Add comment 20 Plus content: '';
Add comment 21 Plus }
Add comment 22 Plus
Add comment 23 Plus .btn-scroll-horizontal.left {
Add comment 24 Plus border-radius: 0px 12px 12px 0px;
Add comment 25 Plus }
Add comment 26 Plus
Add comment 27 Plus .btn-scroll-horizontal.right {
Add comment 28 Plus border-radius: 12px 0px 0px 12px;
Add comment 29 Plus }
Add comment 30 Plus
Add comment 31 Plus .btn-scroll-horizontal .inner {
Add comment 32 Plus position: relative;
Add comment 33 Plus width: 100%;
Add comment 34 Plus height: 100%;
Add comment 35 Plus display: grid;
Add comment 36 Plus place-items: center;
Add comment 37 Plus }
Add comment 38 Plus
Add comment 39 Plus .btn-scroll-horizontal .inner > i {
Add comment 40 Plus color: #000;
Add comment 41 Plus font-size: 23px;
Add comment 42 Plus }
Add comment 43 Plus
Add comment 44 Plus .btn-scroll-horizontal:hover::before {
Add comment 45 Plus background: #CCC;
Add comment 46 Plus border: 2px solid #FFF;
Add comment 47 Plus }
Add comment 48 Plus
Add comment 49 Plus .btn-scroll-horizontal:active::before {
Add comment 50 Plus background: #808080;
Add comment 51 Plus border: 2px solid #FFF;
Add comment 52 Plus outline-width: 2px;
Add comment 53 Plus transition: 0s;
Add comment 54 Plus }
Add comment 55 Plus
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj-1+1/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj
Add comment 15 <PackageIcon>icon.png</PackageIcon>
Add comment 16 <PackageReadmeFile>ReadMe.md</PackageReadmeFile>
Add comment 17 <PackageTags>WPE;Workplace Experience;Blazor;MAUI;infsoft</PackageTags>
Add comment 18 Minus <Version>0.0.30</Version>
Add comment 18 Plus <Version>0.0.31</Version>
Add comment 19 <WarningsAsErrors>RZ10012</WarningsAsErrors>
Add comment 20 </PropertyGroup>
Add comment 21