<commit_before>@import "../pui-variables";
@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';

/*doc
---
title: Traffic Lights
name: traffic_lights
parent: console
---

Traffic lights are used to show the status of the application. "On" is used for active applications, "off" for inactive, and "loading" for when the status is still loading.

```html_example_table
<h3>On</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light">
    <i class="fa fa-circle"></i>
    5
  </li>
  <li class="gray-light">
    <i class="fa fa-circle"></i>
    1
  </li>
  <li class="red-light">
    <i class="fa fa-circle"></i>
    8
  </li>
</ul>

<h3>Off</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light off">
    <i class="fa fa-circle"></i>
  </li>
  <li class="gray-light off">
    <i class="fa fa-circle"></i>
  </li>
  <li class="red-light off">
    <i class="fa fa-circle"></i>
  </li>
</ul>

<h3>Loading</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light off loading-green">
    <i class="fa fa-circle"></i>
  </li>
  <li class="gray-light off loading-gray">
    <i class="fa fa-circle"></i>
  </li>
  <li class="red-light off loading-red">
    <i class="fa fa-circle"></i>
  </li>
</ul>
```

*/

@-webkit-keyframes loadingFade {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

@-moz-keyframes loadingFade {
  0% { opacity: 0.2;}
  50% { opacity: 1; }
  100% { opacity: 0.2;}
}

@keyframes loadingFade {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2;}
}

.traffic-lights {
  margin: 0;
  line-height: 1.3em;

  i {
   @extend .mrm;
  }

  .fa {
    font-size: 12px;
  }

  .off i {
    opacity: 0.4;
  }

  .green-light {
    i {
      transition: opacity 1500ms ease-out;
      color: $traffic-light-running-color;
    }
  }

  .gray-light {
    i {
      transition: opacity 1500ms ease-out;
      color: $traffic-light-stopped-color;
    }
  }

  .red-light {
    i {<commit_msg>chore(traffic-lights): remove use of external @extend in scss file [#91865936]<commit_after>@import "../pui-variables";
@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';

/*doc
---
title: Traffic Lights
name: traffic_lights
parent: console
---

Traffic lights are used to show the status of the application. "On" is used for active applications, "off" for inactive, and "loading" for when the status is still loading.

```html_example_table
<h3>On</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light">
    <i class="fa fa-circle"></i>
    5
  </li>
  <li class="gray-light">
    <i class="fa fa-circle"></i>
    1
  </li>
  <li class="red-light">
    <i class="fa fa-circle"></i>
    8
  </li>
</ul>

<h3>Off</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light off">
    <i class="fa fa-circle"></i>
  </li>
  <li class="gray-light off">
    <i class="fa fa-circle"></i>
  </li>
  <li class="red-light off">
    <i class="fa fa-circle"></i>
  </li>
</ul>

<h3>Loading</h3>
<ul class="traffic-lights list-unstyled mvm">
  <li class="green-light off loading-green">
    <i class="fa fa-circle"></i>
  </li>
  <li class="gray-light off loading-gray">
    <i class="fa fa-circle"></i>
  </li>
  <li class="red-light off loading-red">
    <i class="fa fa-circle"></i>
  </li>
</ul>
```

*/

@-webkit-keyframes loadingFade {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

@-moz-keyframes loadingFade {
  0% { opacity: 0.2;}
  50% { opacity: 1; }
  100% { opacity: 0.2;}
}

@keyframes loadingFade {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2;}
}

.traffic-lights {
  margin: 0;
  line-height: 1.3em;

  i {
   margin-right: $whitespace-m;
  }

  .fa {
    font-size: 12px;
  }

  .off i {
    opacity: 0.4;
  }

  .green-light {
    i {
      transition: opacity 1500ms ease-out;
      color: $traffic-light-running-color;
    }
  }

  .gray-light {
    i {
      transition: opacity 1500ms ease-out;
      color: $traffic-light-stopped-color;
    }
  }

  .red-light {
    i {
{'fraction_non_alphanumeric': 0.19418886198547217, 'fraction_numerical': 0.02953995157384988, 'mean_word_length': 2.7283393501805056, 'pattern_counts': {'":': 0, '<': 99, '<?xml version=': 0, '>': 99, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1790370', 'n_tokens_mistral': 1713, 'n_tokens_neox': 1623, 'n_words': 393}