Interactions

Pointer, selection, float, clearfix, and stretched-link escape hatches. All classes use !important — interaction helpers exist to override component-level styling regardless of source order.

How it works

  • .is-clickable sets cursor: pointer for non-button click targets (rows, cards, custom widgets) so the affordance matches a real button.
  • .is-unselectable sets user-select: none for drag handles, icons, and other UI chrome that shouldn't grab text selection.
  • .is-clearfix is the classic micro-clearfix (::after { clear: both }) for containers that mix floated and non-floated children. Kept for legacy markup and third-party widgets; new layouts should use flex or grid.
  • .is-pulled-left / .is-pulled-right apply float: left / float: right. Same caveat: prefer flex/grid for new work.
  • .is-stretched-link expands a ::after pseudo to fill the nearest positioned ancestor, turning the entire parent into a click target. The parent must declare position: relative (or any other non-static value) or the pseudo escapes to the viewport.

Live

.is-clickable and .is-unselectable

Hover me
Cannot select this text 
<div style="display: flex; gap: 1rem; align-items: center;">
<div class="is-clickable" style="padding: 0.5rem 1rem; background: var(--kc-primary-bg); color: var(--kc-primary-fg);">Hover me</div>
<span class="is-unselectable" style="padding: 0.5rem 1rem; background: var(--kc-default-bg); color: var(--kc-default-fg); border: 1px solid currentColor;">Cannot select this text</span>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-interactions')
);
Playground

.is-pulled-left / .is-pulled-right + .is-clearfix

Left Right 
<div class="is-clearfix" style="border: 1px dashed var(--kc-default-fg); padding: 0.5rem;">
<span class="is-pulled-left" style="padding: 0.3rem 0.6rem; background: var(--kc-warning-bg); color: var(--kc-warning-fg);">Left</span>
<span class="is-pulled-right" style="padding: 0.3rem 0.6rem; background: var(--kc-success-bg); color: var(--kc-success-fg);">Right</span>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-interactions')
);
Playground

.is-stretched-link — whole card is clickable

Stretched anchor

Click anywhere on this card — the pseudo-element fills the whole positioned ancestor.

<article class="card" style="position: relative; max-width: 18rem;">
<div class="card-content">
  <h4 class="title"><a href="#stretched" class="is-stretched-link">Stretched anchor</a></h4>
  <p>Click anywhere on this card — the pseudo-element fills the whole positioned ancestor.</p>
</div>
</article>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-interactions', 'module-card')
);
Playground

Markup

markup
<!-- Cursor cue on a non-button click target -->
<div class="is-clickable">Open details</div>

<!-- Prevent text selection on a drag handle -->
<span class="is-unselectable">::</span>

<!-- Legacy clearfix on a float container -->
<div class="is-clearfix">
  <img class="is-pulled-left" src="..." alt="" />
  <p>Wrapped copy.</p>
</div>

<!-- Whole card becomes a click target (parent must be position: relative) -->
<article class="card" style="position: relative;">
  <h3><a href="/post" class="is-stretched-link">Post title</a></h3>
  <p>Click anywhere on the card.</p>
</article>

Variables

VariableDefaultNotes
None — every selector and value is hardcoded. Toggle the whole module with $feature-helper-interactions.

Override example

app.scss
@use '@adnap/krysalicss/helper/interactions';

Tokens consumed

None — purely structurel.