CSS-Scheibo - CSS Framework

Interactiviy

Source: _objects.scss, line 1592

Cursor

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for controlling the cursor style when hovering over an element. The cursor are define in the _settings.scss

<insert-markup>9.1-</insert-markup>
Klick here
.cursor-auto
auto
<insert-markup>9.1-0</insert-markup>
Klick here
.cursor-default
default
<insert-markup>9.1-1</insert-markup>
Klick here
.cursor-pointer
pointer
<insert-markup>9.1-2</insert-markup>
Klick here
.cursor-wait
wait
<insert-markup>9.1-3</insert-markup>
Klick here
Markup 
  <div class="[modifier class] p-2 text-white bg-cinnabar">Klick here</div>
Source: _objects.scss, line 1598

Pointer Events

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for controlling whether an element responds to pointer events.

<insert-markup>9.2-</insert-markup>
Klick here
.pointer-events-auto
auto
<insert-markup>9.2-0</insert-markup>
Klick here
.pointer-events-none
none
<insert-markup>9.2-1</insert-markup>
Klick here
.pointer-events-visiblepainted
visiblePainted
<insert-markup>9.2-2</insert-markup>
Klick here
.pointer-events-visiblefill
visibleFill
<insert-markup>9.2-3</insert-markup>
Klick here
.pointer-events-visiblestroke
visibleStroke
<insert-markup>9.2-4</insert-markup>
Klick here
.pointer-events-visible
visible
<insert-markup>9.2-5</insert-markup>
Klick here
.pointer-events-painted
painted
<insert-markup>9.2-6</insert-markup>
Klick here
.pointer-events-fill
fill
<insert-markup>9.2-7</insert-markup>
Klick here
.pointer-events-stroke
stroke
<insert-markup>9.2-8</insert-markup>
Klick here
.pointer-events-all
all
<insert-markup>9.2-9</insert-markup>
Klick here
.pointer-events-inherit
inherit
<insert-markup>9.2-10</insert-markup>
Klick here
.pointer-events-initial
initial
<insert-markup>9.2-11</insert-markup>
Klick here
.pointer-events-unset
unset
<insert-markup>9.2-12</insert-markup>
Klick here
Markup 
  <div class="[modifier class] p-2 text-white bg-cinnabar">Klick here</div>
Source: _objects.scss, line 1623

Resize

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for controlling how an element can be resized.

<insert-markup>9.3-</insert-markup>
.resize-none
none
<insert-markup>9.3-0</insert-markup>
.resize-both
both
<insert-markup>9.3-1</insert-markup>
.resize-horizontal
horizontal
<insert-markup>9.3-2</insert-markup>
.resize-vertical
vertical
<insert-markup>9.3-3</insert-markup>
.resize-block
block
<insert-markup>9.3-4</insert-markup>
.resize-inline
inline
<insert-markup>9.3-5</insert-markup>
.resize-inherit
inherit
<insert-markup>9.3-6</insert-markup>
.resize-initial
initial
<insert-markup>9.3-7</insert-markup>
.resize-unset
unset
<insert-markup>9.3-8</insert-markup>
Markup 
  <textarea class="[modifier class]">Type some text here.</textarea>
Source: _objects.scss, line 1713

User Select

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for controlling whether the user can select text in an element.

<insert-markup>9.4-</insert-markup>

Copy me.

.select-none
none
<insert-markup>9.4-0</insert-markup>

Copy me.

.select-auto
auto
<insert-markup>9.4-1</insert-markup>

Copy me.

.select-text
text
<insert-markup>9.4-2</insert-markup>

Copy me.

.select-contain
contain
<insert-markup>9.4-3</insert-markup>

Copy me.

.select-all
all
<insert-markup>9.4-4</insert-markup>

Copy me.

.select-inherit
inherit
<insert-markup>9.4-5</insert-markup>

Copy me.

.select-initial
initial
<insert-markup>9.4-6</insert-markup>

Copy me.

.select-unset
unset
<insert-markup>9.4-7</insert-markup>

Copy me.

Markup 
  <div class="[modifier class]"><p>Copy me.</p></div>
Source: _objects.scss, line 1779