CSS-Klassen

NGSurvey stellt eine breite Palette von CSS-Klassen zur Verfügung, die verwendet werden können, um das Layout Ihrer Formulare vollständig anzupassen.

Unten finden Sie eine Liste aller von ngSurvey verwendeten Klassen zur Anzeige der Benutzeroberfläche, die Sie zur Anpassung wiederverwenden können.

Wrapper / Container

/*
  Der Hauptbereich des Umfrageformulars, diese Klasse wird direkt an 
  das HTML-Body-Element 
  */
  .ngs-survey-body {}
  
  /*
  Wrapper, der die Formularseite der Umfrage enthält
  */
  .ngs-survey__wrapper {}
  

Seiteninhalt

/*
  Seitencontainer für Umfrage-Header / Fragen / Footer 
  */
  .ngs-survey__page {}
  
  /*
  Wird angewendet, wenn eine RTL-Sprache vom Befragten ausgewählt wurde 
  */
  .ngs-survey__page--rtl {}
  
  /*
  Enthält den Seiteninhalt (Fragen oder Dankesnachricht(.ngs-survey__thanks-page-message))
  */
  .ngs-survey__page-content-container {}
  
  /*
  Standardformatierung der Dankeseite 
  */
 .ngs-survey__thanks-page-message {}

  /*
  Festgelegt, wenn ein Header auf der Umfrage angezeigt wird (z. B. Header für die Sprachauswahl)
  */
  .ngs-survey__page-content-container--header {}
  
  /*
  Festgelegt, wenn der Header auf der Umfrage ausgeblendet ist (z. B. Header für die Sprachauswahl)
  */
  .ngs-survey__page-content-container--no-header {}
  
  /*
  Footer-Container, der Schaltflächen, Fortschritt usw. enthält.
  */
  .ngs-survey__page-footer {}
  
  /*
  Footer-Container für Aktionen (Schaltflächen)
  */
  .ngs-survey__page-footer-actions-container {}
  
  /*
  Footer-Container-Schaltflächen (Absenden, Fortschritt speichern etc.)
  */
  .ngs-survey__page-footer-actions-container button {}
  
  /*
  Wrapper um die Fortschrittsanzeige oder aktuelle Seite / Gesamtseiten der Umfrage
  */
  .ngs-survey__page-footer-progress-wrapper {}
  
  
  /*
  Der Seiten-Header erlaubt das Festlegen des oberen Hintergrunds, der sich 
  hinter der Formularseite mit den Fragen befindet
  */
  .ngs-survey__page-header {}
  
  /*
  Select-Steuerelement für die Sprachauswahl, falls Mehrsprachigkeit aktiviert ist 
  */
  .ngs-header__language-select-wrapper {}
  

Schaltflächen

/*
  Schaltflächen des Formulars wie Absenden, Fortschritt speichern etc. 
  Hinweis: Dies betrifft nicht auswahlbasierte Schaltflächen, die als 
  Antworten innerhalb des Umfrageformulars verwendet werden
  */
  .ngs-survey__button {}
  
  .ngs-survey__button:hover:enabled {}
  
  .ngs-survey__button:active:enabled {}
  
  .ngs-survey__button:disabled {}  

Seiten-Navigator

/*
  Oberer Seiten-Navigator, falls Seitennavigation
  aktiviert wurde
  */
  .ngs-survey__page-navigator {}
  
  /*
  Wird auf die Tabs des Navigators angewendet, die 
  auf ihrer Seite ungültige Antworten haben
  */
  .ngs-survey__page-navigator--invalid {}
  
  /*
  Wird auf die Tabs des Navigators angewendet, die
  sind derzeit aufgrund von Skip / Verzweigungs- 
  Regeln deaktiviert
  */
  .ngs-survey__page-navigator--disabled {}
  
  /*
  Container der Tabs des Seiten-Navigators
  */
  .ngs-survey__page-navigator .mat-tab-links {}
  
  /*
  Tab des Seiten-Navigators
  */
  .ngs-survey__page-navigator .mat-tab-link {}
  

Fortschrittsbalken

/*
  Fortschrittscontainer 
  */
  .ngs-survey__progress {}
  
  /*
  Fortschrittscontainer-Text, falls der Fortschritt
  als Text angezeigt wird (z. B. Seitenzahlen)
  */
  .ngs-survey__progress-text {}
  
  /*
  Container des Fortschrittsbalkens
  */
  .ngs-survey__progress-bar {}
  
  /*
  Tatsächlicher Fortschritt des Fortschrittsbalkens
  */
  .ngs-survey__progress-bar span {}
  
  /*
  Fortschrittsprozent-Container
  */
  .ngs-survey__progress-bar-percentage {}
  
  /*
  Textbeschriftung des Prozent-Containers
  */
  .ngs-survey__progress-bar-percentage-label {}
    

Fragen

 /*
  Container der Frage und ihrer Antworten
  */
  .ngs-question__container {}
  
  /*
  Fragen-Container, der alle Antworten enthält
  Beachten Sie, dass ngSurvey automatisch auch den Fragetyp
  als Klasse hinzufügt, z. B. für eine Einfachauswahlfrage wäre 
  der Selektor "ngs-question ngs-question-single" oder
  "ngs-question ngs-question-multi" für Mehrfachauswahlen.
  */
  .ngs-question {}
  
  /*
  Rendering-Typ der Frage. Gibt an, 
  wie die Frage gerendert wird und erlaubt uns, 
  die Frage je nach aktuellem Rendering-Typ zu stylen. 
  X im Klassennamen wird durch einen der folgenden 
  Rendering-Werte ersetzt.

  Standard = 0      // Standard-Rendering aktivieren, z. B. wenn ein Benutzer ein Formular ausfüllt
  DesignTime = 1    // Design-Time aktivieren, z. B. im Form Builder 
  EditDefaults = 2, // Bearbeitung von Standardwerten der Antworten erlauben
  ReadOnly = 3,			// Read-Only-Modus-Rendering aktivieren, wenn ein Benutzer das Formular ausfüllt (sollte ggf. durch WebPrint ersetzt werden?)
  Disabled = 4, 		// Deaktivierten Modus aktivieren, um Steuerung mit deaktivierten Elementen darzustellen
  Edit = 5, 				// Edit-Modus für Controls aktivieren, z. B. wenn ein Admin die Antworten eines Benutzers bearbeitet
  WebPrint = 6,			// Web-Druck aktivieren
  Preview = 7,			// Vorschau-Modus aktivieren,
  Static = 8,       // Elemente werden statisch aus Sammlungen gerendert
  Add = 9,					// Hinzufügen aktivieren, wenn ein Admin einen Befragten hinzufügt
  EditStyle = 10    // Bearbeitung des Formularstils */
 .ngs-question--render-modeX {}

  /*
   Hilfsklasse, die in den Einstellungen jeder Frage zugewiesen werden kann, 
   um den Fragetext zu zentrieren
  */
  .ngs-question--centered {}
  
  /*
  Wird angewendet, wenn eine Antwort der Frage ungültig ist oder wenn 
  die Frage erforderlich ist und nicht beantwortet wurde
  */
  .ngs-question--invalid {}
  
  
  /*
  Antwort-Container, der nur angewendet wird, wenn die 
  Frage so eingestellt ist, dass die Antworten horizontal gerendert werden
  */
  .ngs-question__rows {}
  
  /*
  Antwort-Container, der nur angewendet wird, wenn die 
  Frage so eingestellt ist, dass die Antworten horizontal gerendert werden
  Die wrapped-Klasse kann z. B. in einer separaten
  Media-Query verwendet werden, um den Inhalt der Flex-Box umzubrechen, wenn 
  der Bildschirm nicht groß genug ist, um alle Antworten in 
  einer Reihe anzuzeigen
  */
  .ngs-question__rows--wrapped {}
  
  /*
  Wird verwendet, wenn Antworten horizontal gerendert werden und wenn 
  der Abstand der Antworten über den Bildschirm gleichmäßig sein soll
  */
  .ngs-question__rows-items--grown {}
  
  /*
  Wrapper um die Antwortreihe der Frage
  */
  .ngs-question__answer-wrapper {}
  
  /*
  Antwortreihen-Container, wenn im horizontalen Modus gerendert
  */
  .ngs-question__row {}
  
  /*
  Container des Frage-„Textes“
  */
  .ngs-question__header {}
  
  /*
  Frage-„Text“ 
  */
  .ngs-question__header p {}
  

Matrixfragen

/*
  Matrixfragen-Container für Zeilen und Spalten
  */
  .ngs-matrix-question {}
  
  /*
  Matrix-Header für Fragetext und Spaltentext
  */
  .ngs-matrix-question__header {}
  
  /*
  Wird für Matrix-Header-Beschreibungen verwendet
  */
  .ngs-matrix-question__header-label-cell {}
  
  /*
  Matrix-Spalten-Header
  */
  .ngs-matrix-question__header-column-cell {}
  
  /*
  Matrix-Zeilen-Container
  */
  .ngs-matrix-question__rows {}
  
  /*
  Einzelner Reihen-Container, der Kindfrage-Text und deren Antworten enthält
  */
  .ngs-matrix-question__row {}
  
  /*
  Alternierende Reihe
  */
  .ngs-matrix-question__row--odd {}
  
  /*
  Ungültige Reihe, falls Antworten der Kindfrage ungültig sind
  */
  .ngs-matrix-question__row--invalid {}
  
  /*
  Kindfrage-Text der Reihe
  */
  .ngs-matrix-question__label-cell {}
  
  /*
  Antworten der Kindfrage in der Reihe
  */
  .ngs-matrix-question__answer-cell {}
  
  /*
  Sticky-Header, verwendet für Matrixfragen, die
  zusammengeklappt wurden
  */
  .ngs-question__header-stick {}
  
  /*
  Expand-Container, der dem Befragten erlaubt,
  eine Matrix zu kollabieren oder zu erweitern, wenn sie
  bei niedrigen Auflösungen ausgeführt wird
  */
  .ngs-question__expandable-action-container {}
    

Fragenabschnitte

/*
  Einzelner Fragenabschnitt, der die Antworten der Frage enthält
  */
  .ngs-question__section {}
  
  /*
  Wird angewendet, wenn eine Antwort des Abschnitts ungültig ist
  */
  .ngs-question__section--invalid {}
  
  /*
  Wird angewendet, wenn eine auswahlbasierte Antwort innerhalb des
  Fragenabschnitts ausgewählt wurde. 
  */
  .ngs-question__section--selected {}
  
  /*
  Container für die Abschnittsfrage. Enthält 
  die eigentliche Frage (radio, checkbox, matrix etc.)
  */
  .ngs-question__section-wrapper-js {}
  
  /*
  Container der Aktionssymbole des Abschnitts (Hinzufügen / Löschen)
  */
  .ngs-question__section-toolbar {}
  
  /*
  Hinzufügen / Löschen-Symbole zur Verwaltung eines Abschnitts
  */
  .ngs-question__section-icon {}
  
  .ngs-question__section-icon:hover:not(.off) {}
  
  /*
  Wird angewendet, wenn Abschnittsgrenzen erreicht wurden
  */
  .ngs-question__section-icon--off {}
    

Antworten

/*
  Container für den Antworttyp. 
  Hinweis: ngSurvey fügt automatisch die folgende Klasse hinzu, um 
  Antworten zu identifizieren, denen eine Bewertung / Gewichtung zugewiesen wurde 
  z. B. ngs-question__answer rating-weight-3 
  wenn einer Antwort eine Bewertungsgewichtung von 3 zugewiesen wurde
  */
  .ngs-question__answer {}
  
  /*
  Wrapper des Antwortbildes
  */
  .ngs-question__answer-image-wrapper {}
  
  /*
  Bild, das anstelle des Labels angezeigt wird
  wenn ein Bild als Antwort ausgewählt wurde
  */
  .ngs-question__answer-image {}
  
  
  /*
  Wird angewendet, wenn die Bildantwort nicht ausgewählt ist
  */
  .ngs-question__answer-image--unselected {}
  
  .ngs-question__answer-image--unselected:hover {}
  
  /*
  Wird angewendet, wenn die Bildantwort ausgewählt wurde
  */
  .ngs-question__answer-image--selected {}
  
  /*
  Wird angewendet, wenn das Antwortbild deaktiviert ist und 
  nicht ausgewählt werden kann
  */
  .ngs-question__answer-image--disabled {}
  
  /*
  Antwort-Dropdown-Listen-Typ
  */
  .ngs-question__answer-select {}
  
  /*
  Feldbasierte Antworten
  */
  .ngs-question__answer-field {}
  
  .ngs-question__answer-field:focus {}
  
  /*
  Von Angular hinzugefügte Klassen, wenn Feld ungültig und berührt ist
  */
  .ngs-question__answer-field.ng-invalid.ng-touched {}
  
  .ngs-question__answer-field.ng-invalid.ng-touched:focus {}
  
  /*
  Wird angewendet, wenn das Feld ausgeblendet ist
  */
  .ngs-question__answer-field--transparent {}
  
  /*
  Wenn Antworten so eingestellt wurden, dass sie als
  Schaltfläche anstelle von Kontrollkästchen / Optionsfeldern gerendert werden
  */
  .ngs-question__answer-selection-button {}
  
  .ngs-question__answer-selection-button:hover:not(.ngs-question__answer-selection-button--disabled):not(.ngs-question__answer-selection-button--selected) {}
  
  .ngs-question__answer-selection-button--disabled {}
  
  .ngs-question__answer-selection-button--selected {}
  
  /*
  Sterne-Bewertungs-Antwort-Container
  */
  .ngs-question__answer-star-graphic {}
  
  /*
  SVG-Stern, dies ist der Standardweg zur Erzeugung von Sternen
  */
  .ngs-question__answer-star-graphic-vector {}
  
  /*
  Wird angewendet, wenn ein Bild für die Antwort gewählt wurde
  */
  .ngs-question__answer-star-graphic-image {}
  
  /*
  Wird angewendet, wenn ein Stern ausgewählt wurde
  */
  .ngs-question__answer-star-graphic--shining {}  

Antwort-Labels

  /*
  Label-Element der Antwort
  */
  .ngs-question__answer-label {}

  /*
  Label-Text der Antwort
  */
  .ngs-question__answer-label-text {}

  /*
  Label-Text der Antwort, gerendert in einem span 
  wenn kein HTML als Text gesetzt wurde
  */
  .ngs-question__answer-label-text--plain {}

  /*
  Label-Text der Antwort, gerendert in einem div 
  wenn HTML als Text gesetzt wurde
  */
  .ngs-question__answer-label-text--rich {}

  /*
  Wird angewendet, wenn der Label-Text leer ist
  */
  .ngs-question__answer-label--unset {}

  /*
  Wird angewendet, wenn der Label-Text leer ist
  */
  .ngs-question__answer-label--unset {}

  /*
  Wird angewendet, wenn das Label ein Bild ist
  */
  .ngs-question__answer-label--imaged {}

  /*
  Wird angewendet, wenn das Label innerhalb einer Matrixzelle gerendert wird
  */
  .ngs-question__answer-label--in-cell {}  

Slider

  /*
  Horizontaler Slider, verwendet für Bewertungen
  */
  .mat-slider-horizontal {}
  
  /*
  Thumbs des Sliders
  */
  .mat-accent .mat-slider-thumb,
  .mat-accent .mat-slider-thumb-label,
  .mat-accent .mat-slider-track-fill {}

Ranking

 /*
  Box-Container, der die Ranking-Reihe enthält
  */
  .ngs-question__answer-ranking-box {}
  
  /*
  Reihenfolge des Rankings
  */
  .ngs-question__answer-ranking-box-order {}
  
  /*
  Label des Rankings
  */
  .ngs-question__answer-ranking-label {}
   

Konstanter Betrag

  /*
  Wrapper des Fortschrittsbalkens für Constant-Sum
  */
  .ngs-question__answer-constant-sum-progress-wrapper {}
  

NPS-Frage

/*
  Container der NPS-Frage
  */
  .ngs-question-nps {}
    
  
  /*
  Header, der den Text "Not at all likely" und "Extremely likely" hält
  */
  .ngs-question-nps__header {}
  
  /*
  Rechter Likely-Header-Text
  */
  .ngs-question-nps__header-likely {}
  
  /*
  NPS-Antwort-Auswahlfeld
  */
  .ngs-question-nps .ngs-question__answer-nps-selection {}
  
  /*
  Wird angewendet, wenn das NPS-Auswahlfeld deaktiviert ist
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--disabled {}
  
  /*
  Wird angewendet, wenn das NPS-Auswahlfeld ausgewählt ist
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--selected {}
  
  /*
  Schaltet das NPS-Auswahlfeld aus, wenn eine Antwort auf der Frage ausgewählt wurde
  und es nicht jene Antwort ist, die ausgewählt wurde
  */
  .ngs-question-nps .ngs-question__section--selected .ngs-question__answer-nps-selection:not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  Effekt beim Hover nur, wenn es nicht deaktiviert oder bereits ausgewählt ist 
  */
  .ngs-question-nps .ngs-question__answer-nps-selection:hover:not(.ngs-question__answer-nps-selection--disabled):not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  Wendet die Klasse abhängig vom NPS-Score-Wert an
  */
  .ngs-question-nps .ngs-question__answer.rating-weight-0 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-1 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-2 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-3 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-4 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-5 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-6 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-7 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-8 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-9 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-10 .ngs-question__answer-nps-selection {}
  
  /*
  Hilfsklasse, die den Frage-CSS-Klassen hinzugefügt wird, um 
  Antworten einfarbig (monochrom) darzustellen  
  */
  .ngs-question-nps--monochrome .ngs-question__answer-nps-selection {}
  
  /*
  NPS-Auswahlfelder, die Detractors (Gewicht 0–6) sind
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--detractors {}
  
  /*
  NPS-Auswahlfelder, die Passives (Gewicht 7–8) sind
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--passives {}
  
  /*
  NPS-Auswahlfelder, die Promoters (Gewicht 9–10) sind
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--promoters {}
    

CEST / CSAT-Frage

  /*
  Container der Antworten
  */
  .ngs-question-ces .ngs-question__answer,
  .ngs-question-csat .ngs-question__answer {}
  
  /*
  Container der Antwortreihen, standardmäßig wurde eine Media-Query
  eingerichtet, um von Spalte auf Reihe umzuschalten
  abhängig von den Benutzerauflösungen. Siehe untenstehende Werte
  */
  .ngs-question-ces .ngs-question__rows--wrapped,
  .ngs-question-csat .ngs-question__rows--wrapped {
    /* Wechsel zur Spalten-Anordnung und Anzeige aller Antworten pro Spalte    
  §    flex-flow: column; 
      flex-wrap: nowrap; 
  */
  }
  
  /*
  Wechsel zur Reihen-Anordnung und Anzeige aller Antworten in einer Reihe
  */
  @media screen and (min-width: 960px) {
  
    .ngs-question-ces .ngs-question__rows--wrapped,
    .ngs-question-csat .ngs-question__rows--wrapped {
      flex-flow: row;
      flex-wrap: wrap;
    }
  }
  
  /*
  Antwort-Auswahl-Schaltfläche
  */
  .ngs-question-ces .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-selection-button {}
  
  
  /*
  Wird auf CES/CSAT-Auswahl-Schaltflächen angewendet, die nicht ausgewählt sind
  */
  .ngs-question-ces .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
  .ngs-question-ces.ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
  .ngs-question-csat .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
  .ngs-question-csat.ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected) {}
  
  
  /*
  Monochrome-Hilfsklasse, die über den CSS-Klassennamen der Frage angewendet werden kann
  */
  .ngs-question-ces--monochrome .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat--monochrome .ngs-question__answer .ngs-question__answer-selection-button {}
  
  /*
  CES-Antwort-Auswahl-Schaltfläche, angewendet basierend auf ihrem Gewicht
  */
  .ngs-question-ces .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-6 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-7 .ngs-question__answer-selection-button {}
  
  /*
  CSAT-Antwort-Auswahl-Schaltfläche, angewendet basierend auf ihrem Gewicht
  */
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
  
  /*
  Nicht ausgewähltes CSAT-Antwortbild innerhalb einer Frage, in der 
  eine Antwort ausgewählt wurde. Wird verwendet, um Antworten "auszuschalten",
  die nicht ausgewählt wurden 
  */
  .ngs-question-csat .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected),
  
  /*
  Nicht ausgewähltes CSAT-Antwortbild innerhalb einer CSAT-Bildfrage, in der 
  eine Antwort ausgewählt wurde. Wird verwendet, um Antworten "auszuschalten",
  die nicht ausgewählt wurden 
  */
  .ngs-question-csat-image .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected) {}
  
  /*
  CSAT / CSAT-Bild Frage Antwortbild
  */
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-image,
  .ngs-question-csat-image .ngs-question__answer .ngs-question__answer-image {}
  
  /*
  Standard-CSAT verwendet nur 3 oder 2 Bilder (Smilies, Thumbs). Klassen werden basierend auf ihrer
  Bewertungsgewichtung angewendet
  */
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-image,
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-image,
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-image,
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-image {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-image {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-image {}
  
  
  /*
  Ausgewählte CSAT-Antwortbilder. Klassen werden basierend auf ihrer
  Bewertungsgewichtung angewendet
  */
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-image--selected,
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-image--selected,
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-image--selected,
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-image--selected {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-image--selected {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-image--selected {}
  
  /*
  Ausgewählte CSAT-Antwort-Auswahl-Schaltflächen. Klassen werden basierend auf ihrer
  Bewertungsgewichtung angewendet
  */
  .ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button,
  

Errors

  /*
  Fehlermeldungs-Box-Container
  */
  .ngs-survey__error-message {}
  
  /*
  Klasse, die das kleine Dreieck am
  unteren Rand der Fehlermeldung anzeigt
  */
  .ngs-survey__error-message--bottom:before {}
  
  /*
  
  Klasse, die das kleine Dreieck am
  oberer Rand der Fehlermeldung
  */
  .ngs-survey__error-message--top:before {}
    

Sicherheit

  /*
  Auth0-Autorisierungsbildschirm
  */
  .ngs-survey__auth0-authorize {}    

Google Material

Die folgenden Klassen überschreiben die Standard-Google-Material-Komponenten, die in ngSurvey-Formularen verwendet werden. Die Liste ist nicht vollständig, da sie nur diejenigen auflistet, die von ngSurvey überschrieben werden; Sie können natürlich auch jede Standard-Material-Komponente überschreiben, die unten nicht aufgeführt ist.

  /*
  Äußerer Container der Checkbox-Antwort
  */
  .ngs-survey .mat-checkbox-layout {}
  
  /*
  Definiert den Inhalt der checkbox-basierten Antworten
  */
  .ngs-survey .mat-checkbox-inner-container {}
  
  /*
  Hintergrund des deaktivierten Checkbox-Containers
  */
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {}
  
  /*
  Definiert den Container des Kreis-Elements der Radiobuttons
  */
  .ngs-survey .mat-radio-inner-circle {}
  
  /*
  Definiert den Container des äußeren Kreises des Radiobuttons
  und ausgewählte Buttons müssen über background-color und border-color gesetzt werden
  */
  .ngs-survey .mat-radio-outer-circle {}
  
  /*
  Definiert den "checked" äußeren Kreis des Radiobuttons, der nicht deaktiviert ist
  */
  .ngs-survey .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled) {}
  
  /*
  Definiert den "checked" inneren Kreis des Radiobuttons, der nicht deaktiviert ist
  */
  .ngs-survey .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled) {}
  
  /*
  Definiert den Haken der ausgewählten Checkbox
  */
  .ngs-survey .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),
  .ngs-survey .mat-checkbox-indeterminate.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled) {}
  
  
  /*
  Deaktivierter äußerer Kreis des Radiobuttons
  */
  .ngs-survey .mat-radio-disabled .mat-radio-outer-circle {}
  
  /*
  Deaktivierter innerer Kreis des Radiobuttons
  */
  .ngs-survey .mat-radio-disabled .mat-radio-inner-circle,
  .ngs-survey .mat-radio-disabled .mat-radio-ripple .mat-ripple-element {}
  
  
  /*
  Material-Fortschrittsbalken, verwendet für Constant-Sum-Gesamtwerte
  */
  .ngs-survey .mat-progress-overflow .mat-progress-bar-fill::after {}
  
  /*
  Material-Fortschrittsbalken, verwendet für Constant-Sum-Gesamtwerte
  */
  .ngs-survey .mat-progress-bar-fill::after {}
  
  .ngs-survey .mat-progress-bar-buffer {}
  
  .ngs-survey .mat-progress-bar-background {}