الوصول إلى لون الفئة في SCSS

الدعم
1

مرحبًا،

هذه هي محاولتي الأولى لإنشاء سمة مخصصة، لذا أرجو تفهّمي.

أحاول تخصيص صفحة قائمة التصنيفات، بحيث تبدو على هذا النحو:

image
image614×319 40.7 KB

الفكرة هي إزالة الحد الأيسر وإضافة “أقراص” (pills).
كود SCSS لإضافة الأقراص سهل نسبيًا:

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

لكنني غير قادر على الوصول إلى لون التصنيف المتاح هنا: discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

هل توجد طريقة سهلة للوصول إلى هذا اللون من خلال CSS؟

2

في الوقت الحالي، لا توجد طريقة سهلة للقيام بذلك.

ما يمكننا فعله هو نقل هذه الألوان إلى خصائص CSS المخصصة بدلاً من تعيينها مضمنة، مما سيجعل الألوان قابلة للوصول بسهولة في أي ملف CSS/SCSS. لا أعرف متى سنتمكن من تنفيذ ذلك، لكنني سأحتفظ به في قائمة المهام الخاصة بي.

3

هذا سيكون رائعًا :slight_smile:
بالمناسبة، هل توجد طريقة أخرى لتحقيق العرض الذي أريده؟
لقد قرأت أنه يمكنني تجاوز القوالب لأجزاء محددة من Discourse. ما ملف القالب الذي يجب تجاوزه، وكيف يمكنني فعل ذلك في سُمعي المخصص؟

4

الحل المؤقت الحالي الخاص بي هو تجاوز قالب components/parent-category-row.أقوم بإضافة عنصر div إضافي كما يلي:

{{#unless noCategoryStyle}}
<div class="pill" style="background-color:#{{category.color}}"></div>
{{/unless}}

image
image1153×653 49 KB

أود تجنب تجاوز القوالب لأنها قد تتغير في المستقبل.

@awesomerobot سيكون وجود طريقة مدمجة للوصول إلى لون الفئة أمرًا رائعًا :slight_smile:

5

@tjot،

من الممكن القيام بحيلة CSS باستخدام حدود العنصر الزائف ::after للحصول على التأثير الذي تريده.

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;

        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }
    }
}

image
image1080×738 130 KB

لاحظ أنني طبقت النمط مباشرة على عنصر h3 الخاص بالعنوان لأنه ابن مباشر لـ td الذي تم تطبيق النمط المضمن عليه. لذا، إذا تخلص القالب منه في أي وقت، فسيتعين عليك تعديل CSS الخاص بك.

ولكن يمكنك تخطي تجاوز components/parent-category-row كما أردت.