From 33438ac951430fa370965b42a3d98a54e704ab01 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Tue, 3 Oct 2023 16:41:58 +1100
Subject: AclDialog

---
 Pages/Component/AclActionSwitch.razor.css | 48 +++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 Pages/Component/AclActionSwitch.razor.css

(limited to 'Pages/Component/AclActionSwitch.razor.css')

diff --git a/Pages/Component/AclActionSwitch.razor.css b/Pages/Component/AclActionSwitch.razor.css
new file mode 100644
index 0000000..e9de5a2
--- /dev/null
+++ b/Pages/Component/AclActionSwitch.razor.css
@@ -0,0 +1,48 @@
+div.outer {
+  align-items:    center;
+  border-radius:  10px;
+  border:         1px solid var(--color-aclaction-deny);
+  cursor:         pointer;
+  display:        flex;
+  flex-direction: row;
+  height:         20px;
+  position:       relative;
+  transition:     border-color 0.1s linear;
+  user-select:    none;
+  width:          min-content;
+}
+
+div.inner {
+  background:    var(--color-aclaction-deny);
+  border-radius: 8px;
+  height:        calc(100% - 2px);
+  left:          1px;
+  position:      absolute;
+  top:           1px;
+  transition:    left 0.1s linear, background 0.1s linear;
+  width:         calc(50% - 2px);
+  z-index:       1;
+}
+
+div.outer p {
+  color:       white;
+  font-family: 'Trebuchet MS';
+  font-size:   8pt;
+  text-align:  center;
+  transition:  color 0.1s linear;
+  width:       50px;
+  z-index:     2;
+}
+
+input:checked + div.outer {
+  border-color: var(--color-aclaction-allow);
+}
+
+input:checked + div.outer > div.inner {
+  background: var(--color-aclaction-allow);
+  left:       calc(50% + 1px);
+}
+
+input:checked + div.outer p:nth-child(2) {
+    color: black;
+}
\ No newline at end of file
-- 
cgit v1.3