_top-balloon()

  • /src/css/core/abstract/_balloon.scss

Abstract top balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-top-balloon {
  @include _top-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-top-balloon">
  ...
</div>

_right-balloon()

  • /src/css/core/abstract/_balloon.scss

Abstract right balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-right-balloon {
  @include _right-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-right-balloon">
  ...
</div>

_bottom-balloon()

  • /src/css/core/abstract/_balloon.scss

Abstract bottom balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-bottom-balloon {
  @include _bottom-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-bottom-balloon">
  ...
</div>

_left-balloon()

  • /src/css/core/abstract/_balloon.scss

Abstract left balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-left-balloon {
  @include _left-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-left-balloon">
  ...
</div>