davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Added optional ::selection styling for .window-body children

Browse Source
This commit is contained in:
Vincent Langlois
2024-04-28 12:47:14 -04:00
parent ffa29f4cd9
commit b962b24162
2 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/index.html.ejs
View File

@@ -740,6 +740,29 @@
</div>
</div>
`) %>
<p>
To apply custom selection styling to children of a <code>window-body</code> element, you can add the optional <code>color-highlight</code> class. Note that overriding selection styling may impact <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns">accessibility</a>, so use at your own discretion.
</p>
<%- example(`
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">A Window With Stuff In It</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p class="color-highlight">You can highlight me and a custom <code>::selection</code> styling will be present!</p>
<p> I have no custom <code>::selection</code> styling</p>
</div>
</div>
`) %>
</div>
</section>