feat(experimental): Button add manual :checked appearance (#7034)

taiga-family · Mar 20, 2024 · 5a2f1c3 · 5a2f1c3
1 parent fd7464f
commit 5a2f1c3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less
@@ -17,7 +17,8 @@
         box-shadow: inset 0 0 0 1px var(--tui-base-06);
     });
 
-    &:checked {
+    &:checked,
+    &._checked {
         box-shadow: inset 0 0 0 2px var(--tui-primary);
 
         .appearance-hover({

diff --git a/projects/demo/src/modules/experimental/button/examples/2/index.html b/projects/demo/src/modules/experimental/button/examples/2/index.html
@@ -40,6 +40,13 @@
     Outline
 </button>
 
+<button
+    appearance="whiteblock"
+    tuiButton
+>
+    Whiteblock
+</button>
+
 <button
     appearance="opposite"
     tuiButton
@@ -60,3 +67,27 @@
 >
     Floating
 </button>
+
+<p>
+    Use
+    <code>_checked</code>
+    class to emulate
+    <code>:checked</code>
+    CSS state for whiteblock/outline appearance:
+</p>
+
+<button
+    appearance="outline"
+    tuiButton
+    class="_checked"
+>
+    Outline
+</button>
+
+<button
+    appearance="whiteblock"
+    tuiButton
+    class="_checked"
+>
+    Whiteblock
+</button>