Breaking News: Grepper is joining You.com. Read the official announcement!

scss color loop

Sachin Lalge answered on June 27, 2022 Popularity 6/10 Helpfulness 4/10

answer scss color loop

scss color loop

Comment

$alarmRgb: 255, 213, 0;
$infoRgb: 25, 97, 166;
$warnRgb: 240, 111, 50;
$errorRgb: 228, 35, 38;
$successRgb: 0, 149, 52;

$pulseList:(
  alarm: $alarmRgb,
  info: $infoRgb,
  warn:  $warnRgb,
  error: $errorRgb,
  success: $successRgb
);

@each $key, $val in $pulseList {
  @keyframes pulse-#{$key}  {
    0% {
      box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0.7);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(unquote(#{$val}), 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0);
    }
  }
}

Popularity 6/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link