Interface
Text-selection, pointer-events, scrolling overflow and focus styles.
Text Selection
.slt-none |
Disables text selection |
Pointer Events
.ptr-auto |
Enables pointer events |
.ptr-none |
Disables pointer events |
Learn more about pointer events.
.scr-x |
Scroll overflow horizontally (left/right) |
.scr-y |
Scoll overflow vertically (top/bottom) |
Focus
Use .focus to add the default focus styling (like on text inputs). Use .tabFocus or .tabFocus-inset to add an animated and prominent focus style. YOI applies these stylings whenever an element gets focus from a tab-key press.
.focus |
… |
.tabFocus |
… |
.tabFocus-inset |
… |
<!-- example -->
<div class="br-all m-b-6 p-4 bg-base-25 focus">focus</div>
<div class="br-all m-b-6 p-4 bg-base-25 tabFocus">tabFocus</div>
<div class="br-all p-4 bg-base-25 tabFocus-inset">tabFocus-inset</div>
Source Files
utilities/interface.less
