Styling 'custom:fold-entity-row' - Removing div.divider and leveling ha-svg-icon

Share your Projects! Dashboards & Frontend
1

Hi there,

I was wondering if anyone has managed to style the ‘custom:fold-entity-row’ successfully?

I’m attempting to remove the ‘div.divider’ which I’ve done successfully however I’m struggling with getting the ‘ha-svg-icon’ level with the title of the card.

Even with the divider removed I find that the ha-svg-icon drops and looks out of place as shown in the screenshot.

image

Here is what I’ve got so far …

type: entities
icon: 'mdi:home-floor-g'
style:
  '#states':
    $: null
    fold-entity-row:
      $:
        '#head':
          hui-section-row:
            $: |
              .divider {
                opacity: 0 !important;
              }
              .label {
                opacity: 0 !important;
              } 
title: Ground Floor Sensors
entities:
  - type: 'custom:fold-entity-row'
    head:
      type: section
      label: null
    entities:
      - type: 'custom:text-divider-row'
        text: Door Sensors
      - entity: binary_sensor.openclose_26
        secondary_info: last-changed
      - entity: binary_sensor.openclose_30
        secondary_info: last-changed
      - entity: binary_sensor.openclose_20
        secondary_info: last-changed
      - entity: binary_sensor.openclose_19
        secondary_info: last-changed
      - type: 'custom:text-divider-row'
        text: PIR Motion
      - entity: binary_sensor.ground_hallway