Stylabilla

1.1 #Behaviours.animation Animation

Animations Fading content animation Gray background animation

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.1.2 #Behaviours.animation.fading-content Fading content animation

Predefined and reusable animations, useful for fade content that are going to be animated on income/outcome.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded

Markup

<div class="sb-fading-content sb-overflow-y-auto" aria-labelledby="fading-content-content" data-kss-animation-switch="sb-fading-content--show,sb-fading-content--hidden" data-kss-animation-name="Fading content show/hidden">
  content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded ___ content to be faded
</div>

Source: layout/_animation.scss, line 54

1.1.3 #Behaviours.animation.gray-background Gray background animation

Predefined and reusable animations, useful for animated a loading element.

Browser support: IE11+, Safari6+, Firefox30+, Chrome30+

Markup

<div class="sb-icon-group--s sb-icon-group--full-width sb-container--centered sb-border-radius-m sb-animation--loading"/>

Source: layout/_animation.scss, line 85

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

1.3 #Behaviours.hovers Hovers

Hide child

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+

Hidden until hover or focus

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