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;
}

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

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

.py-status-circle-green {

  &:before {
    @include py-status-circle;
    background-color: $status-green;
  }
}

.py-status-circle-orange {

  &:before {
    @include py-status-circle;
    background-color: $status-yellow;
  }
}

.py-status-circle-negative {

  &:before {
    @include py-status-circle;
    background-color: $negative-txt;
  }
}

.py-status-circle-blue {

  &:before {
    @include py-status-circle;
    background-color: $action-blue;
  }
}

.py-status-circle-red {

  &:before {
    @include py-status-circle;
    background-color: $status-red;
  }
}

.py-status-circle-gray {

  &:before {
    @include py-status-circle;
    background-color: $status-gray;
  }
}

//================classes for Bagle================
.py-status-bagel-green {

  &:before {
    @include py-status-bagel;
    border-color: $status-green;
  }
}

.py-status-bagel-orange {

  &:before {
    @include py-status-bagel;
    border-color: $status-yellow;
  }
}

.py-status-bagel-negative {

  &:before {
    @include py-status-bagel;
    border-color: $negative-txt;
  }
}

.py-status-bagel-blue {

  &:before {
    @include py-status-bagel;
    border-color: $action-blue;
  }
}

.py-status-bagel-red {

  &:before {
    @include py-status-bagel;
    border-color: $status-red;
  }
}

.py-status-bagel-gray {

  &:before {
    @include py-status-bagel;
    border-color: $status-gray;
  }
}

SassMeister-output.css

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

.py-status-circle-orange:before {
  content: '';
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: "yellow";
}

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

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

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

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

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

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

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

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

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

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