scss color_loops.scss

Posted 2021-05-18

// color palette.
$white: #ffffff;
$grey: #ccc;
$greyblue: #5C6F7B;
$blackblue: #162934;
$lightblue: #29AAE2;
$darkblue: #006FAB;
$lightgreen: #B1BA1D;
$darkgreen: #8D8A00;
$brightred: #C4122F;
$darkred: #891F02;
$brick: #B94A48;
$lightpurple: #5E2351;
$darkpurple: #492D3C;
$lightorange: #F59F1A;
$darkorange: #D06F19;
$lightpink: #C9006B;
$maroon: #7C0040;

// some specific colors from the palette.
$chart-colors: (
  $lightpink,
  $blackblue,
  $maroon,
  $darkgreen,
  $darkpurple,
  $darkred,
  $darkorange,
  $maroon,
  $blackblue,
  $brick,
  $lightgreen,
  $brightred );

// get the length of the palette for the @for loop.
$chart-color-count: length($chart-colors);


@mixin chart-colors($type) {
  @if $type == svg {
    @for $i from 1 through $chart-color-count {
      $current-color: nth($chart-colors, $i);
      &:nth-of-type(#{$i}) { fill: rgba($current-color, .7); }
    }//@for
  }//@if

  @if $type == element {
    @for $i from 1 through $chart-color-count {
      $current-color: nth($chart-colors, $i);
      &:nth-of-type(#{$i}) .skill-bar { background: rgba($current-color, .7); }
    }//@for
  }//@if
}//@mixin