Ultima: Problem in <p:selectBooleanCheckbox /> CSS when used with itemLabel

[roabol]

I found a problem using the <p:selectBooleanCheckbox component, when used with itemLabel. Notice in the image that the component's border follows the checkbox's label. How can I remove the border that accompanies the itemLabel and leave it just in the checkbox square?

<p:selectBooleanCheckbox itemLabel="Abrir nova guia" value="#{paginaView.entity.abrirNovaGuia}" />

This happens when I click on the component. I noticed this in theme ultima and barcelona.

[melloware]

What version of PF and what version of your themes?

cc @jepsar i know he uses the Ultima theme as well.

[jepsar]

We use Diamond 🙂

[melloware]

@roabol I am not seeing the issue here: https://www.primefaces.org/ultima/uikit/input.xhtml on the Ultima showcase?

[roabol]

@melloware, I'm using version 13.0.7 of PF and version 7.0.0 of ultima.

You don't see the problem in the ultima showcase, because there is no p:selectBooleanCheckbox component, just p:selectManyCheckbox

[melloware]

@roabol are you on the Discord channel? If so send me a DM i think I can help.

[roabol]

@melloware

I created a user https://discord.com/. My username is roabol_br, but I'm not familiar with it.

[melloware]

For anyone else coming here in the future the trick is to edit this file \src\main\webapp\resources\layout\styles\theme\extensions\_checkbox.scss

And comment out the following SCSS...

    &:has(:not(.ui-state-disabled).ui-state-hover) {
      // box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
    }

    &:has(:not(.ui-state-disabled).ui-state-focus) {
      // box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
    }

    &:has(.ui-state-active) {
      &:has(:not(.ui-state-disabled).ui-state-hover) {
        // box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .04);
      }
  
      &:has(:not(.ui-state-disabled).ui-state-focus) {
        // box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .12);
      }
    }