Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$status-green: 'green';
$status-yellow: 'yellow';
$negative-txt: 'negative';
$action-blue: 'blue';
$status-red: 'red';
$status-gray: 'gray';



@mixin py-status-base {
  content: '';
  display: inline-block;
  margin-right: 10px;
}

.py-status-circle {
  @include py-status-base;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.py-status-bagel {
  @include py-status-base;
  width: 12px;
  height: 12px;
  margin-bottom: -1px;
  border-radius: 6px;
  border: 3px solid;
}

.py-status-green {

  &:before {
    background-color: $status-green;
  }
}

.py-status-orange {

  &:before {
    background-color: $status-yellow;
  }
}

.py-status-negative {

  &:before {
    background-color: $negative-txt;
  }
}

.py-status-blue {

  &:before {
    background-color: $action-blue;
  }
}

.py-status-red {

  &:before {
    background-color: $status-red;
  }
}

.py-status-gray {

  &:before {
    background-color: $status-gray;
  }
}

SassMeister-output.css

.py-status-circle {
  content: '';
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.py-status-bagel {
  content: '';
  display: inline-block;
  margin-right: 10px;
  width: 12px;
  height: 12px;
  margin-bottom: -1px;
  border-radius: 6px;
  border: 3px solid;
}

.py-status-green:before {
  background-color: "green";
}

.py-status-orange:before {
  background-color: "yellow";
}

.py-status-negative:before {
  background-color: "negative";
}

.py-status-blue:before {
  background-color: "blue";
}

.py-status-red:before {
  background-color: "red";
}

.py-status-gray:before {
  background-color: "gray";
}