Exemple de notation CSS

Cet exemple montre comment personnaliser les réponses de rating question activée.

Cet exemple définit une classe CSS nommée my-rating-style. Vous pouvez définir cette nouvelle classe dans le propriétés de la question des questions qui doivent utiliser ce style.

Une fois que vous avez configuré la classe sur vos questions, le code suivant sera utilisé pour appliquer différentes couleurs en fonction de la valeur de notation (rating) de chaque réponse de question.

Les classes des réponses sont générées en utilisant le format suivant où answerratingvalue sera remplacé par la valeur de notation réelle définie du propriétés de la réponse:

.ngs-question__answer.rating-weight-answerratingvalue

Voici le code CSS complet qui générera différentes couleurs pour les boutons radio ou les cases à cocher en fonction des valeurs de notation des réponses.

/*
 Définit une bordure, une couleur de fond et une couleur de texte basées sur la notation de la réponse
*/

.my-rating-style .ngs-question__answer.rating-weight-0 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-0 .ngs-question__answer-selection-button{
    background-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-0 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-0 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-0 .mat-radio-outer-circle{
    border-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-0 .ngs-question__answer-label{
    color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-1 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-1 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button{
    background-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-1 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-1 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-1 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-1 .mat-radio-outer-circle{
    border-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-1 .ngs-question__answer-label{
    color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-2 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-2 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button{
    background-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-2 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-2 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-2 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-2 .mat-radio-outer-circle{
    border-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-2 .ngs-question__answer-label{
    color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-3 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-3 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button{
    background-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-3 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-3 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-3 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-3 .mat-radio-outer-circle{
    border-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-3 .ngs-question__answer-label{
    color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-4 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-4 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button{
    background-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-4 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-4 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-4 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-4 .mat-radio-outer-circle{
    border-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-4 .ngs-question__answer-label{
    color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-5 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-5 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button{
    background-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-5 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-5 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-5 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-5 .mat-radio-outer-circle{
    border-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-5 .ngs-question__answer-label{
    color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-6 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-6 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-6 .ngs-question__answer-selection-button{
    background-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-6 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-6 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-6 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-6 .mat-radio-outer-circle{
    border-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-6 .ngs-question__answer-label{
    color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-7 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-7 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-7 .ngs-question__answer-selection-button{
    background-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-7 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-7 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-7 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-7 .mat-radio-outer-circle{
    border-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-7 .ngs-question__answer-label{
    color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-8 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-8 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-8 .ngs-question__answer-selection-button{
    background-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-8 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-8 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-8 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-8 .mat-radio-outer-circle{
    border-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-8 .ngs-question__answer-label{
    color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-9 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-9 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-9 .ngs-question__answer-selection-button{
    background-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-9 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-9 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-9 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-9 .mat-radio-outer-circle{
    border-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-9 .ngs-question__answer-label{
    color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-10 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-10 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-10 .ngs-question__answer-selection-button{
    background-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-10 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-10 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-10 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-10 .mat-radio-outer-circle{
    border-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-10 .ngs-question__answer-label{
    color:#1eaa59
}

/*
 Grisera les réponses de notation non sélectionnées
*/
.my-rating-style .ngs-matrix-question__row--selected .ngs-question__answer-selection:not(.ngs-question__answer-selection--selected),.ngs-question-rating .ngs-question__section--selected .ngs-question__answer-selection:not(.ngs-question__answer-selection--selected){
    opacity:.5;
    color:#dadada;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%)
}
.my-rating-style .ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),.ngs-question-rating .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected){
    opacity:.8;
    color:#dadada;
    background-color:#bebebe!important;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%)
}