سؤال عن التركيز الافتراضي في Mixins

الدعم
1

مرحبًا،

يحتوي نمط التركيز الموحد في آخر تحديث على مزيج جديد يضيف إطارًا حول حقول الإدخال والاختيارات وغيرها. هذا ممتاز لإمكانية الوصول، لكننا نستخدم border-radius: 4px في حقول الإدخال. هل من الممكن تجاوز المزيجات أو إضافة border-radius: 0 إلى ملف core mixins.scss الرئيسي، بحيث يتغير الـ border-radius من 4px إلى 0 عند التركيز؟

على اليسار الشكل الحالي، وعلى اليمين الشكل بعد تطبيق border-radius: 0 :arrow_down:

Screenshot 2021-02-04 at 15.22.25
Screenshot 2021-02-04 at 15.22.25143×131 1.53 KB
Screenshot 2021-02-04 at 15.22.45
Screenshot 2021-02-04 at 15.22.45151×130 1.29 KB

شكرًا لك! :slight_smile:

@mixin default-focus() {
  border-color: var(--tertiary);
+ border-radius: 0;
  outline: 1px solid var(--tertiary);
  outline-offset: 0;
}
4

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

6

آه، فهمت. أعتقد أن أفضل حل لك هو معالجة هذا في سمة (theme) الخاصة بك، لأن النواة (core) قد حددت بالفعل الحدود إلى 0 لجميع عناصر الإدخال:

لذلك، في سمة (theme) الخاصة بك، يمكنك تجاوز زاوية نصف القطر (border-radius) لعنصر الإدخال عند التركيز في نفس المكان الذي تقوم فيه حاليًا بتعيينه إلى قيمة.

إذا كنت ترغب في الحفاظ على الزوايا الدائرية عند التركيز، يمكنك أيضًا القيام بذلك على النحو التالي:

input {
  border-radius: 4px;
  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--tertiary);
  }
}

(لا يمكن لخاصية المخطط (outline) أن يكون لها زوايا دائرية، لذا فإن الكود أعلاه يتحول إلى استخدام ظل صلب لاستبداله.)

7

شكرًا جزيلاً لك! :slight_smile: سأقوم بذلك. لدي سؤال آخر… أليس من الممارسات السيئة تعطيل المخطط؟ أعني لأسباب تتعلق بإمكانية الوصول.

8

أعتقد أن هذا مقبول نظرًا لأنك ستستخدم شيئًا آخر لتنسيق العنصر في التركيز.