From 9cfbc56c0a202a6cbc9ec5f92aa6ef6e8244ee57 Mon Sep 17 00:00:00 2001
From: Marco 'Lubber' Wienkoop <c64@lubber.de>
Date: Sat, 13 May 2023 16:35:15 +0200
Subject: [PATCH] feat(checkbox): invisible variant for text only

Added an invisible variant to checkbox which allows to use text- or image-only check/radioboxes which are styled by using any other component for the checkbox's label tag like button, message or segment

icons, emojis or flag only need the image class for the label tag. A classic "ui image" works as well
compact invisible keeps the width to the content
---
 src/definitions/modules/checkbox.less         | 66 +++++++++++++++++--
 .../default/globals/variation.variables       |  1 +
 src/themes/default/modules/checkbox.variables | 12 ++++
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
index 78d7b6fbac..9c7d932cad 100755
--- a/src/definitions/modules/checkbox.less
+++ b/src/definitions/modules/checkbox.less
@@ -56,11 +56,14 @@
     cursor: auto;
     position: relative;
     display: block;
-    padding-left: @labelDistance;
     outline: none;
     font-size: @labelFontSize;
 }
 
+.ui.checkbox:not(.invisible) label {
+    padding-left: @labelDistance;
+}
+
 .ui.checkbox label::before {
     position: absolute;
     top: 0;
@@ -130,8 +133,8 @@
     background: @checkboxHoverBackground;
     border-color: @checkboxHoverBorderColor;
 }
-.ui.checkbox label:hover,
-.ui.checkbox + label:hover {
+.ui.checkbox:not(.invisible) label:hover,
+.ui.checkbox:not(.invisible) + label:hover {
     color: @labelHoverColor;
 }
 
@@ -146,7 +149,7 @@
 .ui.checkbox label:active::after {
     color: @checkboxPressedColor;
 }
-.ui.checkbox input:active ~ label {
+.ui.checkbox:not(.invisible) input:active ~ label {
     color: @labelPressedColor;
 }
 
@@ -161,7 +164,7 @@
 .ui.checkbox input:focus ~ label::after {
     color: @checkboxFocusCheckColor;
 }
-.ui.checkbox input:focus ~ label {
+.ui.checkbox:not(.invisible) input:focus ~ label {
     color: @labelFocusColor;
 }
 
@@ -652,6 +655,59 @@
         }
     }
 }
+& when (@variationCheckboxInvisible) {
+    /* --------------
+         Invisible
+    --------------- */
+
+    .ui.invisible.checkbox {
+        &:not(.compact) {
+            display: block;
+        }
+        & input {
+            left: -99999px;
+            position: absolute;
+        }
+        & label::before,
+        & label::after {
+            display: none;
+        }
+        & label {
+            transition: @invisibleCheckboxLabelTransition;
+        }
+    }
+    .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) {
+        & + label {
+            background: @invisibleCheckboxBackground;
+            border-color: @invisibleCheckboxBorderColor;
+            box-shadow: @invisibleCheckboxBoxShadow;
+            color: @invisibleCheckboxColor;
+        }
+        &:not(:hover):focus + label:not(.image) {
+            box-shadow: @invisibleCheckboxFocusBoxShadow;
+        }
+        & + label.image,
+        .basic& + label {
+            box-shadow: none;
+        }
+    }
+
+    .ui.invisible.checkbox input:not(:checked) {
+        & + label.image {
+            opacity: @invisibleCheckboxImageOpacityUnchecked;
+            filter: @invisibleCheckboxImageFilterUnchecked;
+        }
+        &:not(:hover):focus + label.image {
+            opacity: @invisibleCheckboxImageOpacityFocus;
+        }
+        & when (@variationCheckboxDisabled) {
+            &[disabled] + label.image,
+            .disabled& + label.image {
+                opacity: @invisibleCheckboxImageOpacityUncheckedDisabled;
+            }
+        }
+    }
+}
 
 /* --------------------
         Size
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 81ee2b6749..31fb202680 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -512,6 +512,7 @@
 @variationCheckboxDisabled: true;
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
+@variationCheckboxInvisible: true;
 @variationCheckboxRadio: true;
 @variationCheckboxSlider: true;
 @variationCheckboxToggle: true;
diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
index ade25f3daf..bb264d6326 100644
--- a/src/themes/default/modules/checkbox.variables
+++ b/src/themes/default/modules/checkbox.variables
@@ -190,6 +190,18 @@
       Variations
 -------------------- */
 
+/* Invisible */
+@invisibleCheckboxLabelTransition: all @defaultDuration @defaultEasing;
+@invisibleCheckboxBackground: transparent;
+@invisibleCheckboxBorderColor: transparent;
+@invisibleCheckboxColor: inherit;
+@invisibleCheckboxBoxShadow: 0 0 0 @borderWidth @borderColor inset;
+@invisibleCheckboxFocusBoxShadow: 0 0 0 @borderWidth @selectedBorderColor inset;
+@invisibleCheckboxImageOpacityUnchecked: 0.5;
+@invisibleCheckboxImageOpacityUncheckedDisabled: @invisibleCheckboxImageOpacityUnchecked * @disabledCheckboxOpacity;
+@invisibleCheckboxImageOpacityFocus: 0.75;
+@invisibleCheckboxImageFilterUnchecked: grayscale(1);
+
 /* Inverted */
 @checkboxInvertedHoverBackground: @black;