كيف يمكنني إزالة تأثير تدرج الزر؟

مطور
1

مرحباً!

الليلة الماضية كنت أفكر في تقديم طلب سحب (PR) لجعل تأثير النقر على الأزرار اختياريًا عبر إعداد. أعتقد شخصيًا أنه يبدو سيئًا للغاية، ولكن من المحتمل أن يكون هناك أشخاص يحبونه حقًا.
هذا ما أعنيه، يمكنك رؤيته عن طريق النقر مع الاستمرار على معظم الأزرار.
image
يبدو أسوأ على بعض الأزرار؛
image

لا أعتقد أن الفريق يتطلع إلى إزالته تمامًا، لذلك كنت سأبحث في إنشاء إعداد للموقع، ثم الوصول إليه عبر ملف SCSS الخاص بالأزرار.

لا أعتقد أن هناك ملفًا سهلًا لإنشاء إعداد وإعطائه خاصية. هل يوجد؟ إذا لم يكن كذلك، كيف أفعل ذلك ثم أحصل عليه في ملف SCSS؟

شكرًا على أي مساعدة!

2

أليس هذا شيئًا يمكن الكتابة فوقه عبر مكون سمة؟

3 إعجابات
3

أعتقد أنني نسيت المكونات لهذه المشكلة على وجه التحديد ههه\n\nولكن بالنسبة للمستقبل، هل من الممكن إنشاء إعدادات؟ سأقوم بإصلاح المشكلة من جانبي بعد قليل\n\nتعديل: لقد حاولت إصلاحها من جانبي ولم تنجح.

4

أهلاً،

إذا فهمت بشكل صحيح، فهذه هي حالة :active الخاصة بالزر التي تريد تغييرها.

يوجد مزيج linear-gradient للانتقال اللوني.

linear-gradient يُستخدم عندما يكون الزر نشطًا. كما ترى في buttons.css

هذا كله هو مزيج الزر الافتراضي.

وتتغير متغيرات الألوان فقط في الأزرار الأخرى مثل .btn-primary وما يليها:

لذلك، يمكنك تجاوز مخرجات مزيج linear-gradient عن طريق استهداف الفئات active.

شيء كهذا يجب أن يعمل. :slightly_smiling_face:

يجب علينا استهداف فئات أنواع الأزرار لأن متغيرات الألوان مختلفة لذلك لا يمكننا استهدافها بشكل عام.

// الزر الافتراضي

.btn {
  &:active,
  &.btn-active {
    background-image: none;
    border-bottom-color: transparent;
    background-color: var(--primary-medium);
  }
  
  // الزر الأساسي

  &.btn-primary {
    &:active,
    &.btn-active {
      background-color: var(--tertiary-hover);
    }
  }
  
  // زر الخطر و ✘

  &.btn-danger,
  &.cancel {
    &:active,
    &.btn-active {
      background-color: var(--danger-hover);
    }
  }
  
  // زر ✔

  &.ok {
    &:active,
    &.btn-active {
      background-color: var(--success-hover);
    }
  }
}

قبل

بعد

5 إعجابات
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.