Mixin Sass para bocadillos (bubbles) con CSS

See the Pen ByOwPy by lureka (@lureka) on CodePen.

Como últimamente estoy utilizando en mis proyectos indicadores tipo “bocadillos” de comic (bubbles), he montado un pequeño mixin para reutilizarlo que os comparto a continuación.

A este mixin lo bautizamos como “bubble”, para qué complicarnos, al que le pasamos 4 variables:

 @mixin bubble($location, $with, $length, $color) {
 ...
}

  • $location: que pueden ser top, left, right, bottom
  • $with: Ancho en cualquier unidad (px, em, rem…)
  • $length: Largo en cualquier unidad (px, em, rem…)
  • $color: Que normalmente es el mismo que el del panel que decora.

Como quería hacer algo muy genérico no he metido parámetros para el panel, sólo para el triangulito indicador.

@mixin bubble($location, $with, $length, $color) {
        position: relative;
	&:after{
		content: '';
		position: absolute;
		border-style: solid;
		z-index: 1;
	@if $location == 'left' {
		border-width: $with $length $with 0;
		border-color: transparent $color;
		left: -1 * $length;
		top: 50%;
		margin-top: -1 * $with;
	}@else if $location == 'right' {
		border-width: $with 0 $with $length;
		border-color: transparent $color;
		right: -1 * $length;
		top: 50%;
		margin-top: -1 * $with;
	}@else if $location == 'bottom' {
		border-width: $length $with 0;
		border-color: $color transparent;
		bottom: -1 * $length;
		left: 50%;
		margin-left: -1 * $with;
	}@else{ // top
		border-width: 0 $with $length;
		border-color: $color transparent;
		top: -1 * $length;
		left: 50%;
		margin-left: -1 * $with;
	}
	display: block;
	width: 0;
	z-index: 1;
	}
}

Para utilizarlo sólo tenemos que incluirlo en el panel contenedor:

.bubble-top{
  background-color:#024959;
  color:#fff;
	@include bubble(top, 1em, 1em, #024959);
}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *