Update css2 pseudo-elements to css3 versions (#11424)

[msynk]

closes #11424

Summary by CodeRabbit

• Style
  • Updated all CSS selectors for pseudo-elements from single-colon (e.g., :before, :after) to double-colon syntax (e.g., ::before, ::after) across components and demo styles to align with modern CSS standards. No visual or behavioral changes for end-users.

[coderabbitai]

Walkthrough

Project-wide SCSS updates replace legacy CSS2 pseudo-elements :before/:after with CSS3 ::before/::after across components, extras, and demo samples. No property/value changes or public API impacts are included.

Changes

Cohort / File(s)	Summary of changes
Extras - DataGrid & Icons src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.scss, src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss	Switched :before to ::before in paginator controls and extras icon glyphs.
Core Icons src/BlazorUI/Bit.BlazorUI/Styles/fabric.mdl2.bit.blazoui.scss	Replaced :before with ::before across bit-icon selectors.
Inputs src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss, src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss	Updated inner/indicator pseudo-elements from :before/:after to ::before/::after.
Navs - Pivot src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss	Replaced &:before with &::before in selected/edge states.
Progress - Loading animations src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/* (DualRing, Heart, Hourglass, Roller, Spinner)	Converted :after/:before to ::after/::before across loading indicators.
Demo - CircularTimePicker .../CircularTimePicker/BitCircularTimePickerDemo.razor.samples.cs, .../CircularTimePicker/BitCircularTimePickerDemo.razor.scss	Changed .custom-class selectors from *:after to *::after.
Demo - DatePicker .../DatePicker/BitDatePickerDemo.razor.samples.cs, .../DatePicker/BitDatePickerDemo.razor.scss	Updated *:after to *::after in deep-scoped styles and samples.
Demo - DateRangePicker .../DateRangePicker/BitDateRangePickerDemo.razor.samples.cs, .../DateRangePicker/BitDateRangePickerDemo.razor.scss	Adjusted selectors to use ::after.
Demo - Dropdown .../Dropdown/BitDropdownDemo.razor.scss, .../Dropdown/_BitDropdownCustomDemo.razor.samples.cs, .../Dropdown/_BitDropdownItemDemo.razor.samples.cs, .../Dropdown/_BitDropdownOptionDemo.razor.samples.cs	Replaced .custom-container:after with .custom-container::after (and similar combined selectors).
Demo - TimePicker .../TimePicker/BitTimePickerDemo.razor.samples.cs, .../TimePicker/BitTimePickerDemo.razor.scss	Changed *:after to *::after in custom-class selectors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I twitch my ears at double dots,
Hop-hop through styles in tidy slots.
Before and after, neat and clean,
Colons paired like peas in green.
The gardens load, the spinners spin—
With ::magic, reviews begin! 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues Check	✅ Passed	Based on the provided file summaries, the changes consistently replace :before and :after with ::before and ::after across component SCSS files and demo samples, which aligns with the objective of Issue #11424 and the PR description claiming to close that issue; no functional or public API changes are indicated.
Out of Scope Changes Check	✅ Passed	All listed edits are limited to stylesheet selector syntax updates and sample style strings; the raw summaries show no modifications to application logic, public APIs, or unrelated files, so I find no out-of-scope changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The pull request title "Update css2 pseudo-elements to css3 versions (#11424)" accurately and concisely summarizes the primary change—replacing :before/:after with ::before/::after across the BlazorUI styles—and aligns with the PR objectives and modified files. It is a short, single-sentence description that communicates the main intent to reviewers scanning the project history.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss (1)

83-95: Convert remaining single‑colon pseudo‑elements to double‑colon (::before/::after)

Found leftover single‑colon pseudo‑elements — update project SCSS and decide how to handle vendor CSS:

• Project: src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.scss:67 — change &:before → &::before.
• Vendor: src/BlazorUI/Bit.BlazorUI.Extras/wwwroot/quilljs/quill.snow-2.0.3.css:8 — contains :before occurrences.
• Vendor: src/BlazorUI/Bit.BlazorUI.Extras/wwwroot/quilljs/quill.bubble-2.0.3.css:8 — contains :before occurrences.

Action: fix the project file now; for vendor files either update upstream, patch the local copy, or document/accept the exception.

🧹 Nitpick comments (2)

src/BlazorUI/Bit.BlazorUI/Styles/fabric.mdl2.bit.blazoui.scss (1)

16-40: Prevent regressions with a lint rule

Consider enforcing double-colon pseudo-elements via stylelint.

Add (or update) stylelint config:

{
  "rules": {
    "selector-pseudo-element-colon-notation": "double"
  }
}

src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitRollerLoading.scss (1)

16-25: Consistent ::after across roller variants

Correct, consistent updates for base and ch1–ch8 overrides.

Consider generating the position overrides via a small SCSS map/mixin to reduce repetition for top/left pairs.

Also applies to: 31-34, 40-43, 49-52, 58-61, 67-70, 76-79, 85-88, 94-97

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 8b97e71 and c81f199.

📒 Files selected for processing (23)

• src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss (3 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitDualRingLoading.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitHeartLoading.scss (2 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitHourglassLoading.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitRollerLoading.scss (9 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitSpinnerLoading.scss (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Styles/fabric.mdl2.bit.blazoui.scss (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.scss (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.scss (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build and test

🔇 Additional comments (22)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.samples.cs (1)

213-215: LGTM: switched to CSS3 ::after.

Selector update is correct and consistent with the PR goals.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss (1)

45-47: LGTM: ::after migration within ::deep scope.

Accurate and aligns with the CSS3 pseudo-element standard.

src/BlazorUI/Bit.BlazorUI/Styles/fabric.mdl2.bit.blazoui.scss (1)

16-40: LGTM: icon glyph selectors use ::before.

Update is correct; no glyph content changes observed.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs (1)

1225-1227: LGTM: .custom-container ::after updated.

Matches project-wide convention; safe change.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs (1)

877-879: LGTM: ::after pseudo-element syntax.

Change is correct and behavior-preserving.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs (1)

160-162: LGTM: migrated to ::after.

Consistent with the SCSS counterpart and PR objective.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs (2)

141-143: LGTM: ::after syntax adoption.

Correct and consistent with the rest of the PR.

---

81-88: Potential model mismatch in validation sample

The form binds to formValidationTimePickerModel.Time, but this file defines FormValidationTimePickerModel with a Date property, while the instance type is FormValidationCircularTimePickerModel. Please confirm intended type/property.

src/BlazorUI/Bit.BlazorUI.Extras/Styles/fabric.mdl2.bit.blazoui.extras.scss (1)

16-19: LGTM: extras icon classes now use ::before.

Accurate selector modernization; glyph codes unchanged.

src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitDualRingLoading.scss (1)

10-20: Switch to ::after is correct

Matches the rest of the loading components; no side effects expected.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs (1)

821-823: Demo CSS updated to ::after — OK

Sample string content updated correctly; quoting remains valid in the verbatim string.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.scss (1)

26-28: Deep selector uses ::after — OK

Standards-compliant, preserves prior behavior.

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.scss (1)

39-46: Icon glyphs now on ::before — correct

No change to content codes or font family; behavior unchanged.

Also applies to: 48-55

src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitHeartLoading.scss (1)

23-31: Heart loader pseudo-elements switched to ::before/::after — good

Aligns with CSS3 notation; layout/animation remain intact.

Also applies to: 33-36, 38-41

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.scss (1)

48-50: Demo deep selector updated to ::after — good

Consistent with the rest of the PR.

src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitSpinnerLoading.scss (1)

16-26: Approve — ::after modernized; repo scan clean

Confirmed src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitSpinnerLoading.scss uses ::after; scan found no remaining single-colon :before/:after or accidental ::pseudo-classes. Optional: enable stylelint rule "selector-pseudo-element-colon-notation": "double".

src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitHourglassLoading.scss (1)

11-22: Switched to ::after — LGTM

Selector modernization only; animation unaffected.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss (1)

33-36: Use of ::after in grouped selector — LGTM

Keeps specificity identical; no side effects expected.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss (1)

31-39: Inverted state ::before/::after updates — LGTM

Matches other blocks already on double‑colon.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss (1)

149-151: ::before on indicator icon — LGTM

No change in rendering or variables.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.scss (1)

30-33: Demo CSS switched to ::after — LGTM

Keeps sample consistent with library styles.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.samples.cs (1)

148-150: Embedded CSS selector updated to ::after — LGTM

Sample code mirrors SCSS changes.