primary button add darkmode
ad149cd7
Simon Liebers
committed
succeeded
3 changed files
ButtonPrimary.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPrimary.razor-1+5
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPrimary.razor
Add comment 1 @using Infsoft.WPE.App.Shared.BaseComponents.Models.Buttons;
Add comment 2 @using Infsoft.WPE.App.Shared.BaseComponents.Models.General;
Add comment 3 Plus  @using Infsoft.WPE.App.Shared.BaseComponents.Models.Text;
Add comment 3 4 @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Animations
Add comment 5 Plus  @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Text
Add comment 4 6
Add comment 5 7 @{
Add comment 6 8 string btnStyle = GetStyle();
Add comment 14 16 {
Add comment 15 17 <i class="icon-@Icon" />
Add comment 16 18 }
Add comment 17 Minus   <span>@Text</span>
Add comment 19 Plus   <Text_Uppercase Type="TextType.TextM">
Add comment 20 Plus   <span class="btn-text">@Text</span>
Add comment 21 Plus   </Text_Uppercase>
Add comment 18 22 }
Add comment 19 23 else
Add comment 20 24 {
ButtonPrimary.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPrimary.razor.css-13+43
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPrimary.razor.css
Add comment 22 height: 36px;
Add comment 23 }
Add comment 24
Add comment 25 Minus   .button-primary > span {
Add comment 26 Minus   position: relative;
Add comment 27 Minus   color: inherit;
Add comment 28 Minus   font-size: 14px;
Add comment 29 Minus   font-weight: 700;
Add comment 30 Minus   line-height: 20px;
Add comment 31 Minus   text-transform: uppercase;
Add comment 32 Minus   }
Add comment 33 Minus  
Add comment 34 25 .button-primary > i {
Add comment 35 26 position: relative;
Add comment 36 27 font-size: 16px;
Add comment 41 32 cursor: pointer;
Add comment 42 33 }
Add comment 43 34
Add comment 44 Minus   .button-primary::before {
Add comment 35 Plus   /*Light*/
Add comment 36 Plus   .button-primary.light .btn-text {
Add comment 37 Plus   color: #FFF;
Add comment 38 Plus   }
Add comment 39 Plus  
Add comment 40 Plus   .button-primary.light::before {
Add comment 45 41 position: absolute;
Add comment 46 42 inset: 0;
Add comment 47 43 border-radius: inherit;
Add comment 51 47 background: #000;
Add comment 52 48 }
Add comment 53 49
Add comment 54 Minus   .button-primary.active:hover::before {
Add comment 50 Plus   .button-primary.light.active:hover::before {
Add comment 55 51 opacity: .1;
Add comment 56 52 }
Add comment 57 53
Add comment 58 Minus   .button-primary.active:active::before {
Add comment 54 Plus   .button-primary.light.active:active::before {
Add comment 59 55 opacity: .2;
Add comment 60 56 transition: 0s;
Add comment 61 57 }
Add comment 62 58
Add comment 63 Minus   .button-primary.inactive {
Add comment 59 Plus   .button-primary.light.inactive {
Add comment 64 60 background: #E6E6E6;
Add comment 65 61 color: #9A9A9A;
Add comment 66 62 }
Add comment 63 Plus  
Add comment 64 Plus   .button-primary.light.inactive .btn-text {
Add comment 65 Plus   color: #9A9A9A;
Add comment 66 Plus   }
Add comment 67 Plus  
Add comment 68 Plus   /*Dark*/
Add comment 69 Plus   .button-primary.dark.active {
Add comment 70 Plus   background: var(--primary-on-dark);
Add comment 71 Plus   border: 1px solid var(--primary-on-dark);
Add comment 72 Plus   color: #000;
Add comment 73 Plus   }
Add comment 74 Plus  
Add comment 75 Plus   .button-primary.dark.active .btn-text {
Add comment 76 Plus   color: #000;
Add comment 77 Plus   }
Add comment 78 Plus  
Add comment 79 Plus   .button-primary.dark.active:hover {
Add comment 80 Plus   background: var(--primary-on-dark);
Add comment 81 Plus   border: 1px solid #000;
Add comment 82 Plus   }
Add comment 83 Plus  
Add comment 84 Plus   .button-primary.dark.active:active {
Add comment 85 Plus   background: var(--primary-on-dark);
Add comment 86 Plus   border: 1px solid #000;
Add comment 87 Plus   }
Add comment 88 Plus  
Add comment 89 Plus   .button-primary.dark.inactive {
Add comment 90 Plus   background: #333;
Add comment 91 Plus   color: #9A9A9A;
Add comment 92 Plus   }
Add comment 93 Plus  
Add comment 94 Plus   .button-primary.dark.inactive .btn-text {
Add comment 95 Plus   color: #9A9A9A;
Add comment 96 Plus   }
Add comment 67 97
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.13</Version>
Add comment 18 Plus   <Version>0.0.14</Version>
Add comment 19 <WarningsAsErrors>RZ10012</WarningsAsErrors>
Add comment 20 </PropertyGroup>
Add comment 21