Mobile First BASE: Hinweis bei leerer Quickfilter-Liste über CSS-Content ausgeben.

19. Apr 2017

Beim Ausführen des Quickfilters wird im Listenelement das Attribut data-numbervisible gesetzt, welches sich wiederum nutzen lässt, um eine Meldung auszugeben, falls keine Einträge dem Filter entsprechen.

Durch der Einsatz des @at-root Anweisung, ist der Selektor innerhalb der Variante selbst definierbar.

Mit Hilfe der @at-root Anweisung wird die Ausgabe abhängig vom Data-Attribut ausgegeben


.listDefault_var25900 {
  ...

  @at-root .elementList[data-numbervisible='0'] #{&} {    
    &:before {
      content:'Keine Einträge vorhanden';
      display:block;
      padding:1rem;
    }
  }

  ...
}