Angular Rating

by AntonLapshin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<div class="rating">
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <ol class="fill" style="width:50%">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.rating {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  min-width: 80px;
  ol {
    padding: 0;
    margin: 0;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    li {
      display: inline-block;
      font-size: 20px;
      height: 25px;
      position: relative;
      width: 16px;
      &:before {
        color: #34495e;
        content: "\2605";
        line-height: 1.2em;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
      }
    }
    &.fill {
      position: absolute;
      left: 0;
      top: 0;
      li:before {
        color: #f1c40f;
      }
    }
  }
}

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.env = 'development';
less.refreshStyles();