Behaviors

Behaviors are special sets of classes that require more than one element. Each behavior consists of at least one trigger and at least one target.

Behaviors enable functionality that would otherwise require complex css or custom javascript. Behaviors are also contextually aware and may change according to the type of screen being used. For example, a hover trigger will have different effects on a touchscreen vs a regular monitor.

Behavior Classes

The trigger class of a behavior must be applied to a parent element of a trigger and the target class must be applied to a child element to apply the behavior

Trigger Class Target Class Effect
.sme-behavior-hover-trigger
.sme-behavior-hover-target-show
.sme-behavior-hover-target-hide
Shows the target only when the trigger element is hovered (or focused)
Hides the target only when the trigger element is hovered (or focused)

User Select Classes

Try to select the text below to see how each class behaves

sme-user-select-all - select everything

sme-user-select-auto - let the browser decide

sme-user-select-contain - selection contained within element bounds

sme-user-select-none - don't allow any selection

sme-user-select-text - select only text

Cursor Classes

Put your cursor over each class to see the different cursor options

sme-cursor-alias

sme-cursor-all-scroll

sme-cursor-auto

sme-cursor-cell

sme-cursor-context-menu

sme-cursor-col-resize

sme-cursor-copy

sme-cursor-crosshair

sme-cursor-default

sme-cursor-e-resize

sme-cursor-ew-resize

sme-cursor-grab

sme-cursor-grabbing

sme-cursor-help

sme-cursor-move

sme-cursor-n-resize

sme-cursor-ne-resize

sme-cursor-nesw-resize

sme-cursor-ns-resize

sme-cursor-nw-resize

sme-cursor-nwse-resize

sme-cursor-no-drop

sme-cursor-none

sme-cursor-not-allowed

sme-cursor-pointer

sme-cursor-progress

sme-cursor-row-resize

sme-cursor-s-resize

sme-cursor-se-resize

sme-cursor-sw-resize

sme-cursor-text

sme-cursor-url

sme-cursor-w-resize

sme-cursor-wait

sme-cursor-zoom-in

sme-cursor-zoom-out