// +balloon-tale(top red 12px 16px 1px, null, null) =balloon-tale($tale, $tale-position-manual: null, $tale-border: null) // $tale $tale-direction: optional_nth($tale, 1) $tale-color: optional_nth($tale, 2) $tale-width: optional_nth($tale, 3, 0) $tale-height: optional_nth($tale, 4, 0) $parent-boder-width: optional_nth($tale, 5, 0) //$tale-position-manual $tale-position-manual-direction1: optional_nth($tale-position-manual, 1) $tale-position-manual-value1: optional_nth($tale-position-manual, 2) $tale-position-manual-direction2: optional_nth($tale-position-manual, 3) $tale-position-manual-value2: optional_nth($tale-position-manual, 4) //$tale-border $tale-border-color: optional_nth($tale-border, 1) &:#{if($tale-border, after, before)} position: absolute content: "" display: block +border(all, solid transparent) +border(horizontal, $tale-width) +border(vertical, $tale-height) +border(reverse($tale-direction), $tale-color) @if position_vertical($tale-direction) // 矢印の向きが上下 +rem($tale-direction, $tale-height*2*-1 - if($tale-border, 0, $parent-boder-width)) @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_vertical($tale-position-manual-direction1)) // manual が 一つだけ指定 上下方向 の場合 left: 50% +rem('margin-left', $tale-width*-1) @if $tale-position-manual $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2) @each $key, $value in $tale-position-manuals @if position_horizontal($key) // manual が left or right の場合 +rem($key, $value - if($tale-border, 0, $parent-boder-width)) @else if $tale-direction == $key // 矢印の向きと manual で指定する方向が同じ場合 +rem($key, $value - $tale-height - if($tale-border, 0, $parent-boder-width)) @else if reverse($tale-direction) == $key // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合 +rem($key, $value - if($tale-border, 0, $parent-boder-width)) @if position_horizontal($tale-direction) // 矢印の向きが左右 +rem($tale-direction, $tale-width*2*-1 - if($tale-border, 0, $parent-boder-width)) @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_horizontal($tale-position-manual-direction1)) // manual が 一つだけ指定 上下方向 の場合 top: 50% +rem('margin-top', $tale-height*-1) @if $tale-position-manual $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2) @each $key, $value in $tale-position-manuals @if position_vertical($key) // manual が top or bottom の場合 +rem($key, $value) @else if $tale-direction == $key // 矢印の向きと manual で指定する方向が同じ場合 +rem($key, $value - $tale-width - if($tale-border, 0, $parent-boder-width)) @else if reverse($tale-direction) == $key // 左向き矢印 で manual が right の場合 or 右向き矢印 で manual が left の場合 +rem($key, $value - if($tale-border, 0, $parent-boder-width)) @if $tale-border // tale border があるとき - 以下 tale-border の設定 &:before $tale-border-width: $tale-width + round($parent-boder-width*1.5) $tale-border-height: $tale-height + round($parent-boder-width*1.5) position: absolute content: "" display: block +border(all, solid transparent) +border(horizontal, $tale-border-width) +border(vertical, $tale-border-height) +border(reverse($tale-direction), $tale-border-color) @if position_vertical($tale-direction) // 矢印の向きが上下 +rem($tale-direction, $tale-border-height*2*-1) @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_vertical($tale-position-manual-direction1)) // manual なし もしくは 一つだけ指定 上下方向 の場合 left: 50% +rem('margin-left', $tale-border-width*-1) @if $tale-position-manual $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2) @each $key, $value in $tale-position-manuals @if position_horizontal($key) // manual が left or right の場合 +rem($key, $value - $parent-boder-width*1.5) @else if $tale-direction == $key // 矢印の向きと manual で指定する方向が同じ場合 +rem($key, $value - $tale-height - $parent-boder-width*3) @else if reverse($tale-direction) == $key // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合 +rem($key, $value) @if position_horizontal($tale-direction) // 矢印の向きが左右 +rem($tale-direction, $tale-border-width*2*-1) @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_horizontal($tale-position-manual-direction1)) // manual なし もしくは 一つだけ指定 左右方向 の場合 top: 50% +rem('margin-top', $tale-border-height*-1) @if $tale-position-manual $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2) @each $key, $value in $tale-position-manuals @if position_vertical($key) // manual が top or bottom の場合 +rem($key, $value - $parent-boder-width*1.5) @else if $tale-direction == $key // 矢印の向きと manual で指定する方向が同じ場合 +rem($key, $value - $tale-width - $parent-boder-width*3) @else if reverse($tale-direction) == $key // 左向き矢印 で manual が right の場合 or 右向き矢印 で manual が left の場合 +rem($key, $value)