Skip to main contentAzure DevOps
infsoft-dev
/
WPE Libraries
/
Repos
/
Commits
/
Sign in to your account
Sign in
WPE Libraries
Overview
ReposFilesCommitsBranchesTagsPull requests
Pipelines
add buttons
Browse Files
387b04a3
Simon Liebers
committed Nov 7, 2023
main
succeeded
Files
Details
20 changed files
WPE.App.Shared.BaseComponents
Pages/Buttons
ButtonCircleInterlaced40.razor
+
ButtonCircleInterlaced40.razor.css
+
ButtonCircleOutline32.razor
+
ButtonCircleOutline32.razor.css
+
ButtonCircleShadow40.razor
+
ButtonCircleShadow40.razor.css
+
ButtonCircleTransparent32.razor
ButtonDay.razor
+
ButtonDay.razor.css
+
ButtonFlyout.razor
+
ButtonFlyout.razor.css
+
ButtonPill.razor
+
ButtonPill.razor.css
+
ButtonSquareTransparent34.razor
+
ButtonSquareTransparent34.razor.css
+
ButtonTabbar.razor
+
ButtonTabbar.razor.css
+
ButtonToggleSwitch.razor
+
ButtonToggleSwitch.razor.css
+
WPE.App.Shared.BaseComponents.csproj
ButtonCircleInterlaced40.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleInterlaced40.razor+28
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleInterlaced40.razor
View
Add comment 1 Plus  @{
Add comment 2 Plus   string btnClass = "btn-circle";
Add comment 3 Plus   btnClass += Active ? " active" : " inactive";
Add comment 4 Plus  }
Add comment 5 Plus  
Add comment 6 Plus  @* Figma Component: button/circle-interlaced-40px *@
Add comment 7 Plus  <div class="@btnClass" @onclick="OnClick">
Add comment 8 Plus   <i class="icon-@Icon" />
Add comment 9 Plus  </div>
Add comment 10 Plus  
Add comment 11 Plus  @code {
Add comment 12 Plus   [Parameter]
Add comment 13 Plus   public EventCallback Click { get; set; }
Add comment 14 Plus  
Add comment 15 Plus   [Parameter]
Add comment 16 Plus   public string Icon { get; set; } = "";
Add comment 17 Plus  
Add comment 18 Plus   [Parameter]
Add comment 19 Plus   public bool Active { get; set; } = true;
Add comment 20 Plus  
Add comment 21 Plus   private void OnClick()
Add comment 22 Plus   {
Add comment 23 Plus   if (!Active) return;
Add comment 24 Plus  
Add comment 25 Plus   _ = Click.InvokeAsync();
Add comment 26 Plus   }
Add comment 27 Plus  }
Add comment 28 Plus  
ButtonCircleInterlaced40.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleInterlaced40.razor.css+42
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleInterlaced40.razor.css
View
Add comment 1 Plus  .btn-circle {
Add comment 2 Plus   position: relative;
Add comment 3 Plus   display: flex;
Add comment 4 Plus   width: 40px;
Add comment 5 Plus   height: 40px;
Add comment 6 Plus   justify-content: center;
Add comment 7 Plus   align-items: center;
Add comment 8 Plus   flex-shrink: 0;
Add comment 9 Plus   border-radius: 50%;
Add comment 10 Plus   border: 1px solid #EEE;
Add comment 11 Plus   background: #FFF;
Add comment 12 Plus   transition: .2s;
Add comment 13 Plus  }
Add comment 14 Plus  
Add comment 15 Plus   .btn-circle > i {
Add comment 16 Plus   font-size: 16px;
Add comment 17 Plus   color: #333;
Add comment 18 Plus   }
Add comment 19 Plus  
Add comment 20 Plus   .btn-circle.active {
Add comment 21 Plus   cursor: pointer;
Add comment 22 Plus   }
Add comment 23 Plus  
Add comment 24 Plus   .btn-circle.active:hover {
Add comment 25 Plus   opacity: .5;
Add comment 26 Plus   border: 1px solid #EEE;
Add comment 27 Plus   background: #EEE;
Add comment 28 Plus   }
Add comment 29 Plus  
Add comment 30 Plus   .btn-circle.active:active {
Add comment 31 Plus   opacity: 1;
Add comment 32 Plus   border: 1px solid #666;
Add comment 33 Plus   background: #EEE;
Add comment 34 Plus   transition: 0s;
Add comment 35 Plus   }
Add comment 36 Plus  
Add comment 37 Plus   .btn-circle.inactive {
Add comment 38 Plus   opacity: .2;
Add comment 39 Plus   background: #FFF;
Add comment 40 Plus   border: 1px solid #FFF;
Add comment 41 Plus   }
Add comment 42 Plus  
ButtonCircleOutline32.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleOutline32.razor+28
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleOutline32.razor
View
Add comment 1 Plus  @{
Add comment 2 Plus   string btnClass = "btn-circle";
Add comment 3 Plus   btnClass += Active ? " active" : " inactive";
Add comment 4 Plus  }
Add comment 5 Plus  
Add comment 6 Plus  @* Figma Component: button/circle-outline-32px *@
Add comment 7 Plus  <div class="@btnClass" @onclick="OnClick">
Add comment 8 Plus   <i class="icon-@Icon" />
Add comment 9 Plus  </div>
Add comment 10 Plus  
Add comment 11 Plus  @code {
Add comment 12 Plus   [Parameter]
Add comment 13 Plus   public EventCallback Click { get; set; }
Add comment 14 Plus  
Add comment 15 Plus   [Parameter]
Add comment 16 Plus   public string Icon { get; set; } = "";
Add comment 17 Plus  
Add comment 18 Plus   [Parameter]
Add comment 19 Plus   public bool Active { get; set; } = true;
Add comment 20 Plus  
Add comment 21 Plus   private void OnClick()
Add comment 22 Plus   {
Add comment 23 Plus   if (!Active) return;
Add comment 24 Plus  
Add comment 25 Plus   _ = Click.InvokeAsync();
Add comment 26 Plus   }
Add comment 27 Plus  }
Add comment 28 Plus  
ButtonCircleOutline32.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleOutline32.razor.css+43
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleOutline32.razor.css
View
Add comment 1 Plus  .btn-circle {
Add comment 2 Plus   position: relative;
Add comment 3 Plus   display: flex;
Add comment 4 Plus   width: 32px;
Add comment 5 Plus   height: 32px;
Add comment 6 Plus   justify-content: center;
Add comment 7 Plus   align-items: center;
Add comment 8 Plus   flex-shrink: 0;
Add comment 9 Plus   border-radius: 50%;
Add comment 10 Plus   background: transparent;
Add comment 11 Plus   border: 1px solid #CCC;
Add comment 12 Plus   transition: .2s;
Add comment 13 Plus  }
Add comment 14 Plus  
Add comment 15 Plus   .btn-circle > i {
Add comment 16 Plus   font-size: 16px;
Add comment 17 Plus   color: var(--primary);
Add comment 18 Plus   }
Add comment 19 Plus  
Add comment 20 Plus   .btn-circle.active {
Add comment 21 Plus   cursor: pointer;
Add comment 22 Plus   }
Add comment 23 Plus  
Add comment 24 Plus   .btn-circle.active:hover {
Add comment 25 Plus   border: 1px solid #CCC;
Add comment 26 Plus   background: #EEE;
Add comment 27 Plus   }
Add comment 28 Plus  
Add comment 29 Plus   .btn-circle.active:active {
Add comment 30 Plus   border: 1px solid #666;
Add comment 31 Plus   background: #EEE;
Add comment 32 Plus   transition: 0s;
Add comment 33 Plus   }
Add comment 34 Plus  
Add comment 35 Plus   .btn-circle.inactive {
Add comment 36 Plus   border: 1px solid transparent;
Add comment 37 Plus   opacity: .2;
Add comment 38 Plus   }
Add comment 39 Plus  
Add comment 40 Plus   .btn-circle.inactive > i {
Add comment 41 Plus   color: #000;
Add comment 42 Plus   }
Add comment 43 Plus  
ButtonCircleShadow40.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleShadow40.razor+28
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleShadow40.razor
View
Add comment 1 Plus  @{
Add comment 2 Plus   string btnClass = "btn-circle";
Add comment 3 Plus   btnClass += Active ? " active" : " inactive";
Add comment 4 Plus  }
Add comment 5 Plus  
Add comment 6 Plus  @* Figma Component: button/circle-shadow-40px *@
Add comment 7 Plus  <div class="@btnClass" @onclick="OnClick">
Add comment 8 Plus   <i class="icon-@Icon" />
Add comment 9 Plus  </div>
Add comment 10 Plus  
Add comment 11 Plus  @code {
Add comment 12 Plus   [Parameter]
Add comment 13 Plus   public EventCallback Click { get; set; }
Add comment 14 Plus  
Add comment 15 Plus   [Parameter]
Add comment 16 Plus   public string Icon { get; set; } = "";
Add comment 17 Plus  
Add comment 18 Plus   [Parameter]
Add comment 19 Plus   public bool Active { get; set; } = true;
Add comment 20 Plus  
Add comment 21 Plus   private void OnClick()
Add comment 22 Plus   {
Add comment 23 Plus   if (!Active) return;
Add comment 24 Plus  
Add comment 25 Plus   _ = Click.InvokeAsync();
Add comment 26 Plus   }
Add comment 27 Plus  }
Add comment 28 Plus  
ButtonCircleShadow40.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleShadow40.razor.css+40
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleShadow40.razor.css
View
Add comment 1 Plus  .btn-circle {
Add comment 2 Plus   position: relative;
Add comment 3 Plus   display: flex;
Add comment 4 Plus   width: 40px;
Add comment 5 Plus   height: 40px;
Add comment 6 Plus   justify-content: center;
Add comment 7 Plus   align-items: center;
Add comment 8 Plus   flex-shrink: 0;
Add comment 9 Plus   border-radius: 50%;
Add comment 10 Plus   background: transparent;
Add comment 11 Plus   transition: .2s;
Add comment 12 Plus   border: 1px solid #FFF;
Add comment 13 Plus   background: #FFF;
Add comment 14 Plus   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
Add comment 15 Plus  }
Add comment 16 Plus  
Add comment 17 Plus   .btn-circle > i {
Add comment 18 Plus   font-size: 16px;
Add comment 19 Plus   color: #333;
Add comment 20 Plus   }
Add comment 21 Plus  
Add comment 22 Plus   .btn-circle.active {
Add comment 23 Plus   cursor: pointer;
Add comment 24 Plus   }
Add comment 25 Plus  
Add comment 26 Plus   .btn-circle.active:hover {
Add comment 27 Plus   background: #EEE;
Add comment 28 Plus   border: 1px solid #EEE;
Add comment 29 Plus   }
Add comment 30 Plus  
Add comment 31 Plus   .btn-circle.active:active {
Add comment 32 Plus   background: #EEE;
Add comment 33 Plus   border: 1px solid #666;
Add comment 34 Plus   transition: 0s;
Add comment 35 Plus   }
Add comment 36 Plus  
Add comment 37 Plus   .btn-circle.inactive {
Add comment 38 Plus   opacity: .2;
Add comment 39 Plus   }
Add comment 40 Plus  
ButtonCircleTransparent32.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleTransparent32.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonCircleTransparent32.razor
View
ButtonDay.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonDay.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonDay.razor
View
ButtonDay.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonDay.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonDay.razor.css
View
ButtonFlyout.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonFlyout.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonFlyout.razor
View
ButtonFlyout.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonFlyout.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonFlyout.razor.css
View
ButtonPill.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPill.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPill.razor
View
ButtonPill.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPill.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonPill.razor.css
View
ButtonSquareTransparent34.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonSquareTransparent34.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonSquareTransparent34.razor
View
ButtonSquareTransparent34.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonSquareTransparent34.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonSquareTransparent34.razor.css
View
ButtonTabbar.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonTabbar.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonTabbar.razor
View
ButtonTabbar.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonTabbar.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonTabbar.razor.css
View
ButtonToggleSwitch.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonToggleSwitch.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonToggleSwitch.razor
View
ButtonToggleSwitch.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonToggleSwitch.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonToggleSwitch.razor.css
View
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj
View