sass-site/source/assets/sass/components/_pop-stripe.scss

36 lines
1.0 KiB
SCSS
Raw Normal View History

2023-01-12 20:54:24 +01:00
@use 'sass:math';
@use 'sass:list';
@use 'sass:meta';
@use '../functions';
@use '../config/color/brand';
2023-01-12 19:19:42 +01:00
$sl-colors: brand.$sl-color--hopbush brand.$sl-color--bouquet
brand.$sl-color--venus brand.$sl-color--patina brand.$sl-color--nebula
brand.$sl-color--white brand.$sl-color--dawn-pink brand.$sl-color--wafer
brand.$sl-color--iron brand.$sl-color--regent-grey brand.$sl-color--pale-sky
brand.$sl-color--midnight-blue;
2023-01-06 22:40:29 +01:00
@function stripes($position, $sl-colors) {
2023-01-09 20:10:02 +01:00
$sl-colors: if(
2023-01-12 19:19:42 +01:00
meta.type-of($sl-colors) != 'list',
2023-01-09 20:10:02 +01:00
compact($sl-colors),
$sl-colors
);
2023-01-12 19:19:42 +01:00
$gradient: ();
$width: math.div(100%, list.length($sl-colors));
2023-01-06 22:40:29 +01:00
2023-01-12 19:19:42 +01:00
@for $i from 1 through list.length($sl-colors) {
$pop: list.nth($sl-colors, $i);
2023-01-09 20:10:02 +01:00
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
2023-01-12 19:19:42 +01:00
$gradient: list.join($gradient, $new, comma);
2023-01-06 22:40:29 +01:00
}
@return linear-gradient($position, $gradient);
}
.sl-c-pop-stripe {
2023-01-12 19:19:42 +01:00
height: functions.sl-px-to-rem(4px);
2023-01-06 22:40:29 +01:00
background-image: stripes((to right), ($sl-colors));
background-size: 100%;
}