Source: layout/_animation.scss, line 1
1.1.1 #Behaviours.animation.animations Animations
A small collection of predefined and reusable animations, useful for loading spinners, validations states etc.
Animations with * use transition.
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
Default styling
Weeee
sb-animation--hover-lift
move up
Weeee
sb-animation--hover-detach
move up and adds drop shadow
Weeee
sb-animation--spin
continuous rotation
Weeee
Markup
<div class="sb-padding [modifier class] sb-justify-content-center sb-align-items-center sb-flex" style="width: 80px; border-radius:50%; background-color: #008aab; width: 75px; height: 75px; color: #fff;">
Weeee
</div>
Source: layout/_animation.scss, line 5
1.2 #Behaviours.cursors Cursors
Cursor util classes.
Browser support: IE6+, Safari5+, Firefox4+, Chrome5+
Default styling
Hover me
.sb-cursor
Default cursor
Hover me
.sb-cursor-pointer
Pointer cursor
Hover me
.sb-cursor-not-allowed
Action not allowed cursor
Hover me
Markup
<div class="[modifier class]">
Hover me
</div>
Source: trumps/_cursor.scss, line 1
Source: trumps/_hovers.scss, line 1
1.3.1 #Behaviours.hovers.hide-child Hide child
Put the hide-child class on a parent element and any nested element with the child class will be hidden and displayed on hover or focus.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<div class="sb-hide-child">
<div class="sb-child"> Hidden until hover or focus </div>
<div class="sb-child"> Hidden until hover or focus </div>
<div class="sb-child"> Hidden until hover or focus </div>
<div class="sb-child"> Hidden until hover or focus </div>
</div>
Source: trumps/_hovers.scss, line 5