فئات CSS

توفر NGSurvey مجموعة واسعة من فئات CSS التي يمكن استخدامها لتخصيص تخطيط نماذجك بالكامل.

أدناه قائمة بجميع الفئات التي يستخدمها ngSurvey لعرض واجهة المستخدم والتي يمكنك إعادة استخدامها لتخصيصها.

أغلفة / حاويات

/*
  هيكل نموذج الاستبيان، تُطبق هذه الفئة مباشرة على 
  عنصر html body 
  */
  .ngs-survey-body {}
  
  /*
  غلاف يحتفظ بصفحة نموذج الاستبيان
  */
  .ngs-survey__wrapper {}
  

محتوى الصفحة

/*
  حاوية صفحة لرأس الاستبيان / الأسئلة / التذييل 
  */
  .ngs-survey__page {}
  
  /*
  تُطبق إذا تم اختيار لغة RTL من قبل المستجيب 
  */
  .ngs-survey__page--rtl {}
  
  /*
  تحتوي على محتوى الصفحة (الأسئلة أو رسالة الشكر (.ngs-survey__thanks-page-message))
  */
  .ngs-survey__page-content-container {}
  
  /*
  تنسيق افتراضي لرسالة الشكر 
  */
 .ngs-survey__thanks-page-message {}

  /*
  تُعيَّن إذا تم عرض رأس على الاستبيان (مثال: رأس لاختيار اللغة)
  */
  .ngs-survey__page-content-container--header {}
  
  /*
  تُعيَّن إذا كان الرأس مخفيًا في الاستبيان (مثال: رأس لاختيار اللغة)
  */
  .ngs-survey__page-content-container--no-header {}
  
  /*
  حاوية تذييل تحتوي على الأزرار، التقدم، إلخ.
  */
  .ngs-survey__page-footer {}
  
  /*
  حاوية تذييل للإجراءات (أزرار)
  */
  .ngs-survey__page-footer-actions-container {}
  
  /*
  حاوية أزرار التذييل (إرسال، حفظ التقدم، إلخ.)
  */
  .ngs-survey__page-footer-actions-container button {}
  
  /*
  غلاف حول شريط التقدم أو الصفحة الحالية / إجمالي صفحات الاستبيان
  */
  .ngs-survey__page-footer-progress-wrapper {}
  
  
  /*
  يسمح رأس الصفحة بتعيين الخلفية العلوية الموجودة 
  خلف صفحة النموذج التي تحتوي على الأسئلة
  */
  .ngs-survey__page-header {}
  
  /*
  عنصر اختيار قائمة منسدلة للغات إذا تم تمكين تعدد اللغات 
  */
  .ngs-header__language-select-wrapper {}
  

الأزرار

/*
  أزرار النماذج مثل إرسال، حفظ التقدم، إلخ. 
  ملاحظة: لا يؤثر على الأزرار القائمة على الاختيار المستخدمة 
  داخل نموذج الاستبيان كإجابات
  */
  .ngs-survey__button {}
  
  .ngs-survey__button:hover:enabled {}
  
  .ngs-survey__button:active:enabled {}
  
  .ngs-survey__button:disabled {}  

مُتنقّل الصفحات

/*
  مُتنقّل الصفحات العلوي إذا كانت تنقل الصفحات
  مُمكّنة
  */
  .ngs-survey__page-navigator {}
  
  /*
  تُطبق على علامات تبويب المُتنقّل التي 
  لديها إجابات غير صحيحة في صفحتها
  */
  .ngs-survey__page-navigator--invalid {}
  
  /*
  تُطبق على علامات تبويب المُتنقّل التي
  وهي معطلة حاليًا بسبب Skip / تفرع شرطي 
  rules
  */
  .ngs-survey__page-navigator--disabled {}
  
  /*
  حاوية علامات تبويب مُتنقّل الصفحات
  */
  .ngs-survey__page-navigator .mat-tab-links {}
  
  /*
  علامة تبويب مُتنقّل الصفحات
  */
  .ngs-survey__page-navigator .mat-tab-link {}
  

شريط التقدم

/*
  حاوية التقدم 
  */
  .ngs-survey__progress {}
  
  /*
  نص حاوية التقدم إذا كان التقدم
  معروضًا كنص (مثال: أرقام الصفحات)
  */
  .ngs-survey__progress-text {}
  
  /*
  حاوية شريط التقدم
  */
  .ngs-survey__progress-bar {}
  
  /*
  تقدم شريط التقدم الفعلي
  */
  .ngs-survey__progress-bar span {}
  
  /*
  حاوية نسبة التقدم
  */
  .ngs-survey__progress-bar-percentage {}
  
  /*
  تسمية نص نسبة التقدم
  */
  .ngs-survey__progress-bar-percentage-label {}
    

الأسئلة

 /*
  حاوية السؤال وإجاباته
  */
  .ngs-question__container {}
  
  /*
  حاوية السؤال التي تحتوي على جميع الإجابات
  لاحظ أن ngSurvey يضيف أيضًا تلقائيًا
  نوع السؤال كاسم فئة، مثال لسؤال اختيار واحد 
  سيكون المُحدد "ngs-question ngs-question-single" أو
  "ngs-question ngs-question-multi" للاختيارات المتعددة.
  */
  .ngs-question {}
  
  /*
  نوع عرض السؤال. يُعلمنا 
  كيف يتم عرض السؤال ويسمح لنا بتنسيق 
  السؤال بناءً على نوع العرض الحالي. 
  سيتم استبدال X في اسم الفئة بواحد من قيم 
  العرض التالية.

  Standard = 0      // تمكين العرض القياسي مثال: عندما يملأ المستخدم نموذجًا
  DesignTime = 1    // تمكين وضع التصميم مثال: في مُنشئ النموذج 
  EditDefaults = 2, // تمكين تحرير القيم الافتراضية للإجابات
  ReadOnly = 3,			// تمكين وضع العرض للقراءة فقط عند تعبئة المستخدم للنموذج (هل يجب استبداله بالطباعة على الويب؟)
  Disabled = 4, 		// تمكين وضع التعطيل لعرض التحكم بعناصر معطلة
  Edit = 5, 				// تمكين وضع التحرير على عناصر التحكم مثال: عندما يحرر المسؤول إجابات المستخدم
  WebPrint = 6,			// تمكين الطباعة على الويب
  Preview = 7,			// تمكين وضع المعاينة
  Static = 8,       // يتم عرض العناصر بشكل ثابت من مجموعات
  Add = 9,					// تمكين الإضافة عندما يضيف المسؤول مستجيبًا
  EditStyle = 10    // تحرير نمط النموذج */
 .ngs-question--render-modeX {}

  /*
   مساعد يمكن تعيينه من صفحة إعدادات كل سؤال 
   لمحاذاة نص السؤال في الوسط
  */
  .ngs-question--centered {}
  
  /*
  تُطبق إذا كانت أي إجابة للسؤال غير صحيحة أو إذا كان 
  السؤال مطلوبًا ولم يتم الإجابة عليه
  */
  .ngs-question--invalid {}
  
  
  /*
  حاوية الإجابات التي ستُطبق فقط إذا 
  تم تعيين السؤال لعرض الإجابات أفقيًا
  */
  .ngs-question__rows {}
  
  /*
  حاوية الإجابات التي ستُطبق فقط إذا 
  تم تعيين السؤال لعرض الإجابات أفقيًا
  يمكن استخدام فئة الالتفاف مثلًا في
  استعلام وسائط منفصل لالتفاف محتوى flex box إذا 
  لم تكن الشاشة كبيرة بما يكفي لعرض جميع الإجابات في 
  صف واحد
  */
  .ngs-question__rows--wrapped {}
  
  /*
  تُستخدم إذا تم عرض الإجابات أفقيًا وإذا كان 
  يجب أن تكون مسافات الإجابات متساوية عبر الشاشة
  */
  .ngs-question__rows-items--grown {}
  
  /*
  غلاف حول صف إجابات السؤال
  */
  .ngs-question__answer-wrapper {}
  
  /*
  حاوية صف الإجابة إذا عُرضت في الوضع الأفقي
  */
  .ngs-question__row {}
  
  /*
  حاوية "نص" السؤال
  */
  .ngs-question__header {}
  
  /*
  "نص" السؤال 
  */
  .ngs-question__header p {}
  

أسئلة جدوليّة

/*
  حاوية سؤال جدولي لصفوفه وأعمدته
  */
  .ngs-matrix-question {}
  
  /*
  رأس السؤال الجدولي لنص السؤال ونص الأعمدة
  */
  .ngs-matrix-question__header {}
  
  /*
  تُستخدم لوصف رأس المصفوفة
  */
  .ngs-matrix-question__header-label-cell {}
  
  /*
  رأس عمود المصفوفة
  */
  .ngs-matrix-question__header-column-cell {}
  
  /*
  حاوية صفوف المصفوفة
  */
  .ngs-matrix-question__rows {}
  
  /*
  حاوية صف مفرد تحتوي على نص السؤال الفرعي وإجاباته
  */
  .ngs-matrix-question__row {}
  
  /*
  صف بديل
  */
  .ngs-matrix-question__row--odd {}
  
  /*
  صف غير صالح إذا كانت أي إجابات للسؤال الفرعي غير صحيحة
  */
  .ngs-matrix-question__row--invalid {}
  
  /*
  نص السؤال الفرعي في الصف
  */
  .ngs-matrix-question__label-cell {}
  
  /*
  إجابات السؤال الفرعي في الصف
  */
  .ngs-matrix-question__answer-cell {}
  
  /*
  رأس ثابت، يُستخدم لأسئلة المصفوفة التي
  تم طيّها
  */
  .ngs-question__header-stick {}
  
  /*
  حاوية التوسيع التي تتيح للمستجيب
  طيّ أو توسيع المصفوفة عند التشغيل على
  دقات شاشة منخفضة
  */
  .ngs-question__expandable-action-container {}
    

أقسام السؤال

/*
  قسم سؤال فردي يحتوي على إجابات السؤال
  */
  .ngs-question__section {}
  
  /*
  تُطبق إذا كانت أي إجابة في القسم غير صحيحة
  */
  .ngs-question__section--invalid {}
  
  /*
  تُطبق عند اختيار إجابة قائمة على الاختيار
  داخل قسم السؤال. 
  */
  .ngs-question__section--selected {}
  
  /*
  حاوية للسؤال داخل القسم. تحتوي على 
  السؤال الفعلي (radio، checkbox، matrix، إلخ.)
  */
  .ngs-question__section-wrapper-js {}
  
  /*
  حاوية أيقونات إجراءات القسم (إضافة / حذف)
  */
  .ngs-question__section-toolbar {}
  
  /*
  أيقونات إضافة / حذف لإدارة قسم
  */
  .ngs-question__section-icon {}
  
  .ngs-question__section-icon:hover:not(.off) {}
  
  /*
  تُطبق إذا تم الوصول إلى حدود القسم
  */
  .ngs-question__section-icon--off {}
    

الإجابات

/*
  حاوية لنوع الإجابة. 
  ملاحظة: يضيف ngSurvey تلقائيًا الفئة التالية 
  لتحديد الإجابات التي لديها أي تقييم / وزن معيّن 
  لها مثال: ngs-question__answer rating-weight-3 
  إذا تم تعيين وزن تقييم قدره 3 للإجابة
  */
  .ngs-question__answer {}
  
  /*
  غلاف صورة الإجابة
  */
  .ngs-question__answer-image-wrapper {}
  
  /*
  صورة تُعرض بدل التسمية
  إذا تم اختيار صورة كإجابة
  */
  .ngs-question__answer-image {}
  
  
  /*
  تُطبق إذا لم يتم تحديد صورة الإجابة
  */
  .ngs-question__answer-image--unselected {}
  
  .ngs-question__answer-image--unselected:hover {}
  
  /*
  تُطبق إذا تم تحديد صورة الإجابة
  */
  .ngs-question__answer-image--selected {}
  
  /*
  تُطبق إذا كانت صورة الإجابة معطلة 
  ولا يمكن تحديدها
  */
  .ngs-question__answer-image--disabled {}
  
  /*
  نوع قائمة منسدلة للإجابة
  */
  .ngs-question__answer-select {}
  
  /*
  إجابات قائمة على الحقل
  */
  .ngs-question__answer-field {}
  
  .ngs-question__answer-field:focus {}
  
  /*
  فئات يضيفها Angular إذا كان الحقل غير صالح وتم لمسه
  */
  .ngs-question__answer-field.ng-invalid.ng-touched {}
  
  .ngs-question__answer-field.ng-invalid.ng-touched:focus {}
  
  /*
  تُطبق إذا كان الحقل مخفيًا
  */
  .ngs-question__answer-field--transparent {}
  
  /*
  إذا تم تعيين عرض الإجابات ليكون
  كأزرار بدل مربعات الاختيار / أزرار الاختيار
  */
  .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 {}
  
  /*
  حاوية إجابة التصنيف بالنجوم
  */
  .ngs-question__answer-star-graphic {}
  
  /*
  نجمة SVG، وهي الطريقة الافتراضية لإنشاء النجوم
  */
  .ngs-question__answer-star-graphic-vector {}
  
  /*
  تُطبق إذا تم اختيار صورة للإجابة
  */
  .ngs-question__answer-star-graphic-image {}
  
  /*
  تُطبق إذا تم تحديد النجمة
  */
  .ngs-question__answer-star-graphic--shining {}  

تسميات الإجابات

  /*
  عنصر التسمية للإجابة
  */
  .ngs-question__answer-label {}

  /*
  نص تسمية الإجابة
  */
  .ngs-question__answer-label-text {}

  /*
  نص تسمية الإجابة معروض داخل span 
  إذا لم يتم تعيين html كنص
  */
  .ngs-question__answer-label-text--plain {}

  /*
  نص تسمية الإجابة معروض داخل div 
  إذا تم تعيين html كنص
  */
  .ngs-question__answer-label-text--rich {}

  /*
  تُطبق إذا كان نص التسمية فارغًا
  */
  .ngs-question__answer-label--unset {}

  /*
  تُطبق إذا كان نص التسمية فارغًا
  */
  .ngs-question__answer-label--unset {}

  /*
  تُطبق إذا كانت التسمية عبارة عن صورة
  */
  .ngs-question__answer-label--imaged {}

  /*
  تُطبق إذا عُرضت التسمية داخل خلية مصفوفة
  */
  .ngs-question__answer-label--in-cell {}  

المنزلقات

  /*
  منزلق أفقي يُستخدم للتقييم
  */
  .mat-slider-horizontal {}
  
  /*
  المقابض الخاصة بالمنزلق
  */
  .mat-accent .mat-slider-thumb,
  .mat-accent .mat-slider-thumb-label,
  .mat-accent .mat-slider-track-fill {}

الترتيب

 /*
  حاوية صندوق تحتوي على صف الترتيب
  */
  .ngs-question__answer-ranking-box {}
  
  /*
  ترتيب التصنيف
  */
  .ngs-question__answer-ranking-box-order {}
  
  /*
  تسمية التصنيف
  */
  .ngs-question__answer-ranking-label {}
   

مجموع ثابت

  /*
  غلاف شريط تقدم المجموع الثابت
  */
  .ngs-question__answer-constant-sum-progress-wrapper {}
  

سؤال NPS

/*
  حاوية سؤال nps
  */
  .ngs-question-nps {}
    
  
  /*
  رأس يحتوي على نصي Not at all likely و Extremely likely
  */
  .ngs-question-nps__header {}
  
  /*
  نص الرأس على اليمين (likely)
  */
  .ngs-question-nps__header-likely {}
  
  /*
  صندوق اختيار إجابة NPS
  */
  .ngs-question-nps .ngs-question__answer-nps-selection {}
  
  /*
  تُطبق إذا كان صندوق اختيار إجابة NPS معطّلًا
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--disabled {}
  
  /*
  تُطبق إذا كان صندوق اختيار إجابة NPS محددًا
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--selected {}
  
  /*
  إطفاء صناديق اختيار إجابة nps إذا تم تحديد إجابة على السؤال
  وليست تلك الإجابة هي المحددة
  */
  .ngs-question-nps .ngs-question__section--selected .ngs-question__answer-nps-selection:not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  يُطبق تأثير التحويم فقط إذا لم يكن معطّلًا أو محددًا بالفعل 
  */
  .ngs-question-nps .ngs-question__answer-nps-selection:hover:not(.ngs-question__answer-nps-selection--disabled):not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  يطبق الفئة بناءً على قيمة درجة NPS
  */
  .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 {}
  
  /*
  فئة مساعدة تُضاف إلى خصائص فئة CSS الخاصة بالسؤال لعرض 
  الإجابات بلون أحادي  
  */
  .ngs-question-nps--monochrome .ngs-question__answer-nps-selection {}
  
  /*
  صناديق اختيار NPS التي تُعد Detractors بوزن 0-6
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--detractors {}
  
  /*
  صناديق اختيار NPS التي تُعد Passives بوزن 7-8
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--passives {}
  
  /*
  صناديق اختيار NPS التي تُعد Promoters بوزن 9-10
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--promoters {}
    

سؤال CEST / CSAT

  /*
  حاوية الإجابات
  */
  .ngs-question-ces .ngs-question__answer,
  .ngs-question-csat .ngs-question__answer {}
  
  /*
  حاوية صفوف الإجابات، افتراضياً يوجد استعلام وسائط
  تم ضبطه للتبديل من عمود / إلى صف
  اعتمادًا على دقة شاشة المستخدم. انظر القيم أدناه
  */
  .ngs-question-ces .ngs-question__rows--wrapped,
  .ngs-question-csat .ngs-question__rows--wrapped {
    /*  التبديل إلى وضع العمود وعرض جميع الإجابات حسب العمود    
  §    flex-flow: column; 
      flex-wrap: nowrap; 
  */
  }
  
  /*
  التبديل إلى وضع الصف وعرض جميع الإجابات في صف واحد
  */
  @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;
    }
  }
  
  /*
  زر اختيار الإجابة
  */
  .ngs-question-ces .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-selection-button {}
  
  
  /*
  تُطبق على زر اختيار أسئلة ces/csat غير المحددة
  */
  .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) {}
  
  
  /*
  مساعد أحادي اللون يمكن تطبيقه من اسم فئة CSS في إعدادات السؤال
  */
  .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 يُطبّق بناءً على قيمة الوزن
  */
  .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 يُطبّق بناءً على قيمة الوزن
  */
  .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 {}
  
  /*
  صورة إجابة csat غير المحددة داخل سؤال حيث 
  تم تحديد إجابة. تُستخدم "لإطفاء" الإجابات
  التي لم يتم تحديدها 
  */
  .ngs-question-csat .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected),
  
  /*
  صورة إجابة csat غير المحددة داخل سؤال csat قائم على الصور حيث 
  تم تحديد إجابة. تُستخدم "لإطفاء" الإجابات
  التي لم يتم تحديدها 
  */
  .ngs-question-csat-image .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected) {}
  
  /*
  صورة إجابة سؤال csat / csat image
  */
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-image,
  .ngs-question-csat-image .ngs-question__answer .ngs-question__answer-image {}
  
  /*
  يستخدم CSAT الافتراضي 3 أو صورتين فقط (وجوه مبتسمة، إبهام). تُطبق الفئات بناءً على
  وزن التقييم
  */
  .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 {}
  
  
  /*
  صور إجابات csat المحددة. تُطبق الفئات بناءً على
  وزن التقييم
  */
  .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 {}
  
  /*
  أزرار اختيار إجابات CSAT المحددة. تُطبق الفئات بناءً على
  وزن التقييم
  */
  .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,
  

الأخطاء

  /*
  حاوية مربع رسالة الخطأ
  */
  .ngs-survey__error-message {}
  
  /*
  فئة تُستخدم لعرض المثلث الصغير في
  أسفل رسالة الخطأ
  */
  .ngs-survey__error-message--bottom:before {}
  
  /*
  
  فئة تُستخدم لعرض المثلث الصغير في
  أعلى رسالة الخطأ
  */
  .ngs-survey__error-message--top:before {}
    

الأمان

  /*
  شاشة تفويض Auth0
  */
  .ngs-survey__auth0-authorize {}    

Google Material

الفئات التالية ستتجاوز مكوّن google material الافتراضي المستخدم في نماذج ngsurvey. القائمة غير شاملة إذ تسرد فقط ما يتم تجاوزه بواسطة ngSurvey، ويمكنك بالطبع أيضًا تجاوز أي فئات مكونات Material قياسية غير المدرجة أدناه

  /*
  الحاوية الخارجية لإجابة مربع الاختيار
  */
  .ngs-survey .mat-checkbox-layout {}
  
  /*
  يعرّف محتوى الإجابات القائمة على مربع الاختيار
  */
  .ngs-survey .mat-checkbox-inner-container {}
  
  /*
  خلفية حاوية مربع الاختيار المعطّل
  */
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {}
  
  /*
  يعرّف حاوية دائرة زر الاختيار
  */
  .ngs-survey .mat-radio-inner-circle {}
  
  /*
  يعرّف حاوية الدائرة الخارجية لزر الاختيار
  ويجب تعيين الزر المحدد باستخدام background-color و border-color
  */
  .ngs-survey .mat-radio-outer-circle {}
  
  /*
  يعرّف الدائرة الخارجية لزر الاختيار "المحدد" الذي ليس معطّلًا
  */
  .ngs-survey .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled) {}
  
  /*
  يعرّف الدائرة الداخلية لزر الاختيار "المحدد" الذي ليس معطّلًا
  */
  .ngs-survey .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled) {}
  
  /*
  يعرّف سهم تحديد مربع الاختيار "المحدد"
  */
  .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) {}
  
  
  /*
  الدائرة الخارجية لزر الاختيار المعطّل
  */
  .ngs-survey .mat-radio-disabled .mat-radio-outer-circle {}
  
  /*
  الدائرة الداخلية لزر الاختيار المعطّل
  */
  .ngs-survey .mat-radio-disabled .mat-radio-inner-circle,
  .ngs-survey .mat-radio-disabled .mat-radio-ripple .mat-ripple-element {}
  
  
  /*
  شريط تقدم Material المستخدم لإجماليات المجموع الثابت
  */
  .ngs-survey .mat-progress-overflow .mat-progress-bar-fill::after {}
  
  /*
  شريط تقدم Material المستخدم لإجماليات المجموع الثابت
  */
  .ngs-survey .mat-progress-bar-fill::after {}
  
  .ngs-survey .mat-progress-bar-buffer {}
  
  .ngs-survey .mat-progress-bar-background {}