استایل stateها و بخش‌های المان (Styling Element States & Parts)

Bricks به شما اجازه می‌دهد بسته به state المان (مثل :hover یا لینک :visited) با pseudo-class استایل متفاوت اعمال کنید.

همچنین با pseudo-element روی بخش خاص المان — مثل ::first-letter یا ::first-line.

ویدیوی زیر کار با pseudo-class و pseudo-element در Bricks (1.3.5+) و افزودن keyword سفارشی را نشان می‌دهد:

YouTube ↗

کار با pseudo-class و pseudo-element در Bricks

نکته

Pseudo-class و pseudo-element هنگام ویرایش المان، theme styles و page settings در دسترس است.

ویرایش state یا بخش خاص المان

روی آیکون «cursor» در نوار ابزار سازنده کلیک کنید تا منوی pseudo-class toggle شود:

روی text input کلیک کنید تا همه pseudo-class و pseudo-element نمایش داده شود:

ساخت pseudo-class و pseudo-element سفارشی

به‌طور پیش‌فرض Bricks :hover، :active و :focus را نشان می‌دهد؛ می‌توانید pseudo-class یا pseudo-element دیگر اضافه کنید.

pseudo-class یا pseudo-element را تایپ کنید (مثل :visited) و Enter بزنید یا آیکون save:

ویرایش استایل state یا بخش

آیکون «cursor» را بزنید، داخل input کلیک کنید و pseudo-class یا -element موردنظر را انتخاب کنید.

pseudo keyword «active» highlight می‌شود. آیکون «cursor» toolbar هم highlight — یعنی استایل pseudo-class یا pseudo-element را ویرایش می‌کنید.

از این نقطه تغییر کنترل‌های style فقط روی pseudo فعال اثر دارد. پس از اتمام «x» داخل input را بزنید تا selection state پاک شود.

سپس input نشان می‌دهد چند pseudo-class یا pseudo-element برای این المان یا theme style پیکربندی شده:

برای پاک کردن استایل pseudo، dropdown را باز کنید — dot indicator برای stateهای دارای استایل. روی dot کلیک کنید:

حذف pseudo keyword

pseudo-class یا pseudo-element سفارشی (غیر از پیش‌فرض Bricks) را حذف کنید.

منوی pseudo-class را باز کنید، dropdown را باز کنید، روی keyword hover و آیکون «bin» را بزنید.

نکته

حذف pseudo-class یا pseudo-element آن را globally حذف می‌کند و ممکن است المان‌ها یا theme styleهای دیگر که از آن state یا part استفاده کرده‌اند تحت تأثیر قرار گیرند.

مثال ۱: استایل child class وقتی parent hover است

Div با Heading؛ heading کلاس text--blue با رنگ آبی دارد. می‌خواهید هنگام hover Div رنگ heading عوض شود.

1. padding مثلاً 40px دور Div
2. Div را انتخاب کنید
3. آیکون «States (pseudo-classes)»
4. در input field
5. :hover .text--blue تایپ و Enter یا Save
6. با Div انتخاب‌شده STYLE → TYPOGRAPHY → Color → رنگ دلخواه

ذخیره و frontend را بررسی کنید. hover Div باید رنگ heading را عوض کند.

منابع (فهرست pseudo keyword):

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements