From a357bec1831611758a19bf23ff0fa5a5fe99ca52 Mon Sep 17 00:00:00 2001
From: TheArcaneBrony <myrainbowdash949@gmail.com>
Date: Sun, 28 May 2023 11:30:53 +0200
Subject: Add changes

---
 .../Shared/SimpleComponents/ToggleSlider.razor     | 70 ++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor

(limited to 'MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor')

diff --git a/MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor b/MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor
new file mode 100644
index 0000000..49a363d
--- /dev/null
+++ b/MatrixRoomUtils.Web/Shared/SimpleComponents/ToggleSlider.razor
@@ -0,0 +1,70 @@
+<input type="checkbox"/><span>@ChildContent</span>
+
+<div class="container">
+    <label class="switch" for="checkbox">
+        <input type="checkbox" id="checkbox" @bind="Value"/>
+        <div class="slider round"></div>
+    </label>
+</div>
+
+<style>
+    .switch {
+      display: inline-block;
+      height: 16px;
+      position: relative;
+      width: 32px;
+    }
+    
+    .switch input {
+      display:none;
+    }
+    
+    .slider {
+      background-color: #ccc;
+      bottom: 0;
+      cursor: pointer;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      background-color: #fff;
+      bottom: -5px;
+      content: "";
+      height: 26px;
+      left: -8px;
+      position: absolute;
+      transition: .4s;
+      width: 26px;
+    }
+    
+    input:checked + .slider {
+      background-color: #66bb6a;
+    }
+    
+    input:checked + .slider:before {
+      transform: translateX(24px);
+    }
+    
+    .slider.round {
+      border-radius: 24px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+</style>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+    
+    [Parameter]
+    public bool Value { get; set; }
+    [Parameter]
+    public EventCallback<bool> ValueChanged { get; set; }
+    
+}
\ No newline at end of file
-- 
cgit 1.5.1