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.
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)
|
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
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-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