Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

$white     : #fff;
$black     : #0b0b0b;
$grey      : #797e83;
$teal      : #52bab3;
$green     : #5ece7f;
$red       : #e67478;
$orange    : #ff784f;
$purple    : #9279c3;
$blue      : #39add1;

$themes__ui: (
  default : $teal,
  success : $green,
  error   : $red,
  warning : $orange,
  info    : $purple
);

@mixin ui-colors($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      background-color: $color;
    }
  }
}

.progbar, 
.btn,
.tooltip {
  @include ui-colors($themes__ui);
}


%default {
  &-input {
    border: 1px solid #ccc;
    background-color: transparentize(white, 0.5);
  }
}

.header {
  background-color: black;
  &-search {
    font-size: 1.3em;
    &__input {
      @extend %default-input;
      &:hover, &--selected {
        @extend %default-input;
        border-color: green;
      }
    }
  }
}

SassMeister-output.css

.progbar--default,
.btn--default,
.tooltip--default {
  background-color: #52bab3;
}
.progbar--success,
.btn--success,
.tooltip--success {
  background-color: #5ece7f;
}
.progbar--error,
.btn--error,
.tooltip--error {
  background-color: #e67478;
}
.progbar--warning,
.btn--warning,
.tooltip--warning {
  background-color: #ff784f;
}
.progbar--info,
.btn--info,
.tooltip--info {
  background-color: #9279c3;
}

.header-search__input, .header-search__input:hover, .header-search__input--selected {
  border: 1px solid #ccc;
  background-color: rgba(255, 255, 255, 0.5);
}

.header {
  background-color: black;
}
.header-search {
  font-size: 1.3em;
}
.header-search__input:hover, .header-search__input--selected {
  border-color: green;
}