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

Author: lubber-de

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

src/themes/default/globals/variation.variables

@@ -512,6 +512,7 @@
 @variationCheckboxDisabled: true;
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
+@variationCheckboxInvisible: true;
 @variationCheckboxRadio: true;
 @variationCheckboxSlider: true;
 @variationCheckboxToggle: true;

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;