@blexar/framework/src/components/progress.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.progress
  position: relative
  height: 1.2em
  width: 100%
  background-color: $light
  border-radius: 10em
  margin-bottom: 2em
  font-size: $font-tiny

.progress-icon
  position: relative
  display: flex
  justify-content: center
  align-items: center
  z-index: 1
  border-radius: 10em
  border: 2px solid $white
  padding: $padding
  width: 3em
  height: 3em
  transform: translateY(-0.9em)
  // generate color modifiers
  for color in $modifiers-color
    $accent = lookup('$' + color)
    $text = isLight(color) ? $black : $white
    &.is-{color}
      background: $accent
      color: $text
      _icon-color: $text
.progress-bar
  position: absolute
  top: 0
  {$dir-start}: 0
  display: flex
  align-items: center
  justify-content: center
  height: 100%
  border-radius: 10em
  background-color: $primary
  color: $white

  // generate color modifiers
  for color in $modifiers-color
    $accent = lookup('$' + color)
    $text = isLight(color) ? $black : $white
    &.is-{color}
      background: $accent
      color: $text