definicao de layout

public/assets/scss/rating/_examples.scss

@@ -0,0 +1,191 @@
+@import "variables";
+
+/* Center ratings in container */
+.rating-container{
+    // padding:20px;
+}
+.box-example-1to10 .br-wrapper {
+    width: 210px;
+    position: absolute;
+    margin: 0px 0 0 -105px;
+    left: 50%;
+}
+
+.box-example-movie .br-wrapper {
+    width: 250px;
+    position: absolute;
+    margin: 0px 0 0 -125px;
+    left: 50%;
+}
+
+.box-example-square .br-wrapper {
+    width: 190px;
+    position: absolute;
+    margin: 0px 0 0 -95px;
+    left: 50%;
+}
+
+.box-example-pill .br-wrapper {
+    width: 232px;
+    position: absolute;
+    margin: 0px 0 0 -116px;
+    left: 50%;
+}
+
+.box-example-reversed .br-wrapper {
+    padding-top: 1.3em;
+    width: 356px;
+    position: absolute;
+    margin: 0px 0 0 -178px;
+    left: 50%;
+}
+
+.box-example-horizontal .br-wrapper {
+    width: 120px;
+    position: absolute;
+    margin: 0px 0 0 -60px;
+    left: 50%;
+}
+
+/* Display star ratings */
+
+.star-ratings {
+    h1 {
+        font-size: 1.5em;
+        line-height: 2;
+        margin-top: 3em;
+        color: $textColor;
+    }
+
+    p {
+        margin-bottom: 3em;
+        line-height: 1.2;
+    }
+
+    h1, p {
+        text-align: center;
+    }
+
+    .stars {
+        width: 205px;
+        text-align:center;
+        .title {
+            font-size:14px;
+            color:#cccccc;
+            line-height:3;
+            font-weight:600;
+        }
+
+        select {
+            width: 120px;
+            font-size: 16px;
+        }
+    }
+
+    .stars-example-fontawesome,
+    .stars-example-css,
+    .stars-example-bootstrap {
+        float: left;
+    }
+
+    .stars-example-fontawesome-o {
+        // width: 200px;
+
+        select {
+            width: 200px;
+        }
+    }
+}
+
+.start-ratings-main {
+    margin-bottom: 3em;
+}
+
+/* Boxes */
+
+.box {
+    width: 100%;
+    float: left;
+    margin: 1em 0;
+
+    .box-header {
+        text-align: center;
+        font-weight: 400;
+        padding: .5em 0;
+    }
+
+    .box-body {
+        padding-top: 2em;
+        height: 85px;
+
+        /* rating widgets will be absolutely centered relative to box body */
+        position: relative;
+    }
+
+    select {
+        width: 120px;
+        margin: 10px auto 0 auto;
+        display: block;
+        font-size: 16px;
+    }
+}
+
+.box-large {
+    .box-body {
+        padding-top: 2em;
+        height: 120px;
+    }
+}
+
+@mixin box-color($color){
+    .box-header {
+        background-color: $color;
+        color: white;
+    }
+
+    .box-body {
+        background-color: white;
+        border: 2px solid lighten($color, 15%);
+        border-top: 0;
+    }
+}
+
+.box-orange {
+    @include box-color($orangeColor);
+}
+
+.box-green {
+    @include box-color($greenColor);
+}
+
+.box-blue {
+    @include box-color($blueColor);
+}
+
+@media print {
+    .star-ratings {
+        h1 {
+            color: black;
+        }
+
+        .stars {
+            .title {
+                color: black;
+            }
+        }
+    }
+
+    .box-orange,
+    .box-green,
+    .box-blue {
+        .box-header {
+            background-color: transparent;
+            color: black;
+        }
+
+        .box-body {
+            background-color: transparent;
+            border: none;
+        }
+    }
+}

public/assets/scss/rating/_main.scss

@@ -0,0 +1,311 @@
+@import "variables.scss";
+@import "mixins.scss";
+.antennaio {
+    @include retina-image('../img/antenna.png', '../img/antenna$2x.png', 60px, 60px);
+    background-repeat: no-repeat;
+    color: lighten($textColor, 35%);
+    width: 280px;
+    height: 60px;
+    display: block;
+    margin: auto;
+    font-weight: 400;
+    font-size: 0.6em; /* 12px */
+    line-height: 5.5;
+    letter-spacing: 2px;
+    margin-bottom: 7em;
+
+    -webkit-transition: color  2s;
+    transition: color  2s;
+
+    &:hover {
+        color: $textColor;
+    }
+
+    span {
+        padding: 0 0 0 70px;
+    }
+}
+
+.bars {
+    @include retina-image('../img/bars.png', '../img/bars$2x.png', 80px, 80px);
+    width: 80px;
+    height: 80px;
+    display: block;
+    margin: auto;
+}
+
+.section-intro {
+    text-align: center;
+    margin: 3em 0 4em 0;
+    max-height: 9999px; /* no font boosting please */
+
+    h1 {
+        line-height: 2.4;
+    }
+
+    p {
+        max-width: 560px;
+        margin: auto;
+    }
+
+    p.tagline {
+        font-size: 0.8em; /* 16px */
+        color: lighten($textColor, 20%);
+        margin-bottom: 3em;
+    }
+}
+
+.section-examples {
+    position: relative;
+    background: $backgroundColor;
+}
+
+.section-docs {
+    margin: 3em 0;
+}
+
+@mixin coloredDocs($color){
+    header {
+        background: $color;
+    }
+
+    strong {
+        color: $color;
+    }
+
+    a {
+        color: $color;
+
+        &:hover {
+            color: darken($color, 20%);
+        }
+    }
+
+    pre {
+        background: white;
+        border-left: 2px solid $color;
+        padding: 0 2em;
+    }
+
+    code {
+        font-family: $fontFamilyMonospaced;
+        font-size: 0.9em; /* 18px */
+        color: $color;
+    }
+}
+
+.docs {
+    width: 800px;
+    margin: auto;
+    max-height: 9999px; /* no font boosting please */
+    .how-to-use, .callbacks, .download {
+        @include coloredDocs($blueColor);
+    }
+
+    .configuration, .faq {
+        @include coloredDocs($greenColor);
+    }
+
+    .license, .methods {
+        @include coloredDocs($orangeColor);
+    }
+
+    .instructions {
+        padding: 2em 3em;
+        background: $backgroundColor;
+    }
+
+    .faq {
+        p {
+            margin: 0 0 .5em 0;
+        }
+
+        .question {
+            margin-bottom: 2em;
+        }
+
+        .question:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.controls {
+    position: absolute;
+    top: -23px;
+    left: 50%;
+    margin-left: -190px;
+
+    a {
+        display: block;
+        width: 150px;
+        background-color: $greenColor;
+        color: white;
+        float: left;
+        padding: .3em 1em .5em 1em;
+        text-decoration: none;
+        text-align: center;
+        font-weight: 400;
+
+        -webkit-transition: background-color  2s;
+        transition: background-color  2s;
+
+        &:hover {
+            background-color: darken($greenColor, 5%);
+        }
+
+        &:focus {
+            color: lighten($greenColor, 30%);
+            background-color: darken($greenColor, 25%);
+        }
+    }
+
+    a.rating-enable {
+        -webkit-border-top-left-radius: 999px;
+        -webkit-border-bottom-left-radius: 999px;
+        -moz-border-radius-topleft: 999px;
+        -moz-border-radius-bottomleft: 999px;
+        border-top-left-radius: 999px;
+        border-bottom-left-radius: 999px;
+    }
+
+    a.rating-disable {
+        -webkit-border-top-right-radius: 999px;
+        -webkit-border-bottom-right-radius: 999px;
+        -moz-border-radius-topright: 999px;
+        -moz-border-radius-bottomright: 999px;
+        border-top-right-radius: 999px;
+        border-bottom-right-radius: 999px;
+    }
+
+    a:last-child {
+        border-left: 0;
+    }
+
+    a.deactivated {
+        background: darken($greenColor, 15%);
+        color: white;
+    }
+}
+
+/* ==========================================================================
+   Media Queries
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+
+}
+
+@media print {
+    .controls,
+    .github,
+    .antennaio {
+        display: none;
+    }
+
+    .section-intro {
+        margin: 1em 0 2em 0;
+
+        p.tagline {
+            color: black;
+        }
+    }
+
+    .section-examples {
+        background: transparent;
+
+        .examples {
+            padding: 1em 0;
+        }
+    }
+
+    .section-docs {
+        margin: 1em 0;
+    }
+
+    .docs {
+        .how-to-use,
+        .callbacks,
+        .download,
+        .configuration,
+        .faq,
+        .license,
+        .methods {
+            a {
+                color: black;
+                text-decoration: none;
+
+                &:hover {
+                    color: black;
+                }
+            }
+
+            header {
+                background: transparent;
+                color: black;
+            }
+
+            code, strong {
+                color: black;
+            }
+
+            pre {
+                border: none;
+                padding: 0;
+            }
+
+            .instructions {
+                background: transparent;
+            }
+        }
+    }
+
+}
+
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.clearfix {
+    *zoom: 1;
+}

public/assets/scss/rating/_mixins.scss

@@ -0,0 +1,15 @@
+// Retina image
+@mixin retina-image($file-1x, $file-2x, $width-1x, $height-1x){
+    background-image: url("${file-1x}");
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (   min--moz-device-pixel-ratio: 2),
+    only screen and (     -o-min-device-pixel-ratio: 2/1),
+    only screen and (        min-device-pixel-ratio: 2),
+    only screen and (                min-resolution: 192dpi),
+    only screen and (                min-resolution: 2dppx) {
+        background-image: url("${file-2x}");
+        background-size: $width-1x $height-1x;
+    }
+}

public/assets/scss/rating/_rating-theme.scss

@@ -0,0 +1,12 @@
+@import "rating-theme/fontawesome-stars";
+@import "rating-theme/bars-1to10";
+@import "rating-theme/bars-horizontal";
+@import "rating-theme/bars-movie";
+@import "rating-theme/bars-pill";
+@import "rating-theme/bars-reversed";
+@import "rating-theme/bars-square";
+@import "rating-theme/bootstrap-stars";
+@import "rating-theme/css-stars";
+@import "rating-theme/fontawesome-stars-o";
+
+

public/assets/scss/rating/_variables.scss

@@ -0,0 +1,12 @@
+$fontFamily: "Lato", sans-serif;
+$fontFamilyMonospaced: "Source Code Pro", sans-serif;
+
+// Colors
+$textColor: #757575;
+$headerColor: #2d2d2d;
+$backgroundColor: #f8f8f8;
+$orangeColor: #EDB867;
+$greenColor: #50E3C2;
+$blueColor: #4278F5;
+$greyColor: #b4b4b4;
+$redColor: #f7605a;

public/assets/scss/rating/rating-theme/_bars-1to10.scss

@@ -0,0 +1,74 @@
+@import "variables";
+@import "mixins";
+.br-theme-bars-1to10 {
+
+  .br-widget {
+    height: 50px;
+    white-space: nowrap;
+
+    a {
+      display: block;
+      width: 12px;
+      padding: 5px 0;
+      height: 28px;
+      float: left;
+      background-color: rgba($primary-color,0.2);
+      margin: 1px;
+      text-align: center;
+
+      &.br-active,
+      &.br-selected {
+        background-color: $primary-color;
+      }
+    }
+
+    .br-current-rating {
+      font-size: 20px;
+      line-height: 1.8;
+      float: left;
+      padding: 0 20px 0 20px;
+      color: $primary-color;
+      font-weight: 400;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+
+      &.br-active, &.br-selected {
+        background-color: lighten($primary-color, 10%);
+      }
+    }
+
+    .br-current-rating {
+      color: lighten($primary-color, 10%);
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bars-1to10 {
+
+    .br-widget {
+      a {
+        border: 1px solid lighten(black, 70%);
+        background: white;
+        height: 38px;
+        @include box-sizing(border-box);
+
+        &.br-active,
+        &.br-selected {
+          border: 1px solid black;
+          background: white;
+        }
+      }
+
+      .br-current-rating {
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_bars-horizontal.scss

@@ -0,0 +1,69 @@
+@import "variables";
+@import "mixins";
+
+.br-theme-bars-horizontal {
+
+  .br-widget {
+    width: 120px;
+    white-space: nowrap;
+    a {
+      display: block;
+      width: 120px;
+      height: 5px;     
+      background-color: rgba($primary-color,0.2);
+      margin: 1px;
+      &.br-active,
+      &.br-selected {
+        background-color: $primary-color;
+      }
+    }
+
+    .br-current-rating {
+      width: 120px;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 2;
+      text-align: center;
+      color: $primary-color;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+
+      &.br-active, &.br-selected {
+        background-color: lighten($primary-color, 10%);
+      }
+    }
+
+    .br-current-rating {
+      color: lighten($primary-color, 10%);
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bars-horizontal {
+
+    .br-widget {
+      a {
+        border: 1px solid lighten(black, 70%);
+        background: white;
+        @include box-sizing(border-box);
+
+        &.br-active,
+        &.br-selected {
+          border: 1px solid black;
+          background: white;
+        }
+      }
+
+      .br-current-rating {
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_bars-movie.scss

@@ -0,0 +1,73 @@
+@import "variables";
+@import "mixins";
+@import "../../theme/variables";
+
+.br-theme-bars-movie {
+
+  .br-widget {
+    height: 50px;
+    white-space: nowrap;
+    a {
+      display: block;
+      width: 60px;
+      height: 8px;
+      float: left;
+      background-color: rgba($primary-color,0.2);
+      margin: 1px;
+
+      &.br-active,
+      &.br-selected {
+        background-color: $primary-color;
+      }
+    }
+
+    .br-current-rating {
+      clear: both;
+      width: 240px;
+      text-align: center;
+      font-weight:600;
+      display: block;
+      padding: .5em 0;
+      color: $primary-color;     
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+
+      &.br-active, &.br-selected {
+        background-color: lighten($primary-color, 10%);
+      }
+    }
+
+    .br-current-rating {
+      color: lighten($primary-color, 10%);
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bars-movie {
+
+    .br-widget {
+      a {
+        border: 1px solid lighten(black, 70%);
+        background: white;
+        @include box-sizing(border-box);
+
+        &.br-active,
+        &.br-selected {
+          border: 1px solid black;
+          background: white;
+        }
+      }
+
+      .br-current-rating {
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_bars-pill.scss

@@ -0,0 +1,83 @@
+@import "variables";
+@import "mixins";
+@import "../../theme/variables";
+
+.br-theme-bars-pill {
+
+  .br-widget {
+    white-space: nowrap;
+
+    a {
+      padding: 7px 15px;
+      background-color: rgba($primary-color,0.2);
+      color: $primary-color;
+      text-decoration: none;
+      font-size: 13px;
+      line-height: 3;
+      text-align: center;
+      font-weight: 400;
+
+      &:first-child {
+        -webkit-border-top-left-radius: 999px;
+        -webkit-border-bottom-left-radius: 999px;
+        -moz-border-radius-topleft: 999px;
+        -moz-border-radius-bottomleft: 999px;
+        border-top-left-radius: 999px;
+        border-bottom-left-radius: 999px;
+      }
+
+      &:last-child {
+        -webkit-border-top-right-radius: 999px;
+        -webkit-border-bottom-right-radius: 999px;
+        -moz-border-radius-topright: 999px;
+        -moz-border-radius-bottomright: 999px;
+        border-top-right-radius: 999px;
+        border-bottom-right-radius: 999px;
+      }
+
+      &.br-active,
+      &.br-selected {
+        background-color: $primary-color;
+        color: white;
+      }
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+
+      &.br-active, &.br-selected {
+        background-color: lighten($primary-color, 10%);
+      }
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bars-pill {
+
+    .br-widget {
+      a {
+        border: 1px solid lighten(black, 70%);
+        border-left: none;
+        background: white;
+        @include box-sizing(border-box);
+
+        &.br-active,
+        &.br-selected {
+          border: 1px solid black;
+          border-left: none;
+          background: white;
+          color: black;
+        }
+      }
+
+      a:first-child {
+        border-left: 1px solid black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_bars-reversed.scss

@@ -0,0 +1,78 @@
+@import "variables";
+@import "mixins";
+
+.br-theme-bars-reversed {
+
+  .br-widget {
+    height: 25px;
+    white-space: nowrap;
+
+    a {
+      display: block;
+      width: 22px;
+      height: 22px;
+      float: left;     
+      background-color: rgba($primary-color,0.2);
+      margin: 1px;
+      font-size: 15px;
+      font-weight: 400;
+      line-height: 1.4;
+      color: $primary-color;
+      text-align: center;
+
+      &.br-active,
+      &.br-selected {
+        background-color: $primary-color;
+        color: white;
+      }
+    }
+
+    .br-current-rating {
+      line-height: 1.3;
+      float:left;
+      padding:0 20px 0 20px;
+      color:$primary-color;
+      font-size:16px;
+      font-weight:600;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+
+      &.br-active, &.br-selected {
+        background-color: lighten($primary-color, 10%);
+      }
+    }
+
+    .br-current-rating {
+      color: lighten($primary-color, 10%);
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bars-reversed {
+
+    .br-widget {
+      a {
+        border: 1px solid lighten(black, 70%);
+        background: white;
+        @include box-sizing(border-box);
+
+        &.br-active,
+        &.br-selected {
+          border: 1px solid black;
+          background: white;
+        }
+      }
+
+      .br-current-rating {
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_bars-square.scss

@@ -0,0 +1,73 @@
+@import "variables";
+@import "mixins";
+@import "../../theme/variables";
+
+.br-theme-bars-square {
+
+  .br-widget {
+    height: 40px;
+    white-space: nowrap;
+
+    a {
+      display: block;
+      width: 30px;
+      height: 30px;
+      float: left;
+      border: 2px solid rgba($primary-color,0.2);
+      background-color: white;
+      margin: 2px;
+      text-decoration: none;
+      font-size: 14px;
+      line-height: 1.8;
+      text-align: center;
+      color: lighten($primary-color, 20%);
+      font-weight: 600;
+      &.br-active,
+      &.br-selected {
+        border: 2px solid $primary-color;
+        color: $primary-color;
+      }
+    }
+
+    .br-current-rating {
+      clear: both;
+      width: 330px;
+      text-align: center;
+      font-weight: 600;
+      display: block;
+      padding: .5em 0;
+      color: #646464;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+
+      &.br-active, &.br-selected {
+        border: 2px solid $primary-color;
+        color: lighten($primary-color, 10%);
+      }
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bars-square {
+
+    .br-widget {
+      a {
+        border: 2px solid lighten(black, 70%);
+        color: lighten(black, 70%);
+
+        &.br-active,
+        &.br-selected {
+          border: 2px solid black;
+          color: black;
+        }
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_bootstrap-stars.scss

@@ -0,0 +1,60 @@
+@import "variables";
+
+.br-theme-bootstrap-stars {
+
+  .br-widget {
+    height: 28px;
+    white-space: nowrap;
+  
+    a {
+      font: normal normal normal 18px/1 'Glyphicons Halflings';
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      text-decoration: none;
+      margin-right: 2px;
+    }
+
+    a:after {
+      content: '\e006';
+      color: $star-default;
+    }
+
+    a.br-active:after {
+      color: $star-active;
+    }
+
+    a.br-selected:after {
+      color: $star-selected;
+    }
+
+    .br-current-rating {
+      display: none;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-bootstrap-stars {
+
+    .br-widget {
+      a:after {
+        content: '\e007';
+        color: black;
+      }
+
+      a.br-active:after,
+      a.br-selected:after {
+        content: '\e006';
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_css-stars.scss

@@ -0,0 +1,61 @@
+@import "variables.scss";
+
+.br-theme-css-stars {
+
+  .br-widget {
+    height: 28px;
+    white-space: nowrap;
+
+    a {
+      text-decoration: none;
+      height: 18px;
+      width: 18px;
+      float: left;
+      font-size: 23px;
+      margin-right: 5px;
+    }
+
+    a:after {
+      content: "\2605";
+      color: $star-default;
+    }
+
+    a.br-active:after {
+      color: $star-active;
+    }
+
+    a.br-selected:after {
+      color: $star-selected;
+    }
+
+    .br-current-rating {
+      display: none;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-css-stars {
+
+    .br-widget {
+      a:after {
+        content: "\2606";
+        color: black;
+      }
+
+      a.br-active:after,
+      a.br-selected:after {
+        content: "\2605";
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_fontawesome-stars-o.scss

@@ -0,0 +1,84 @@
+@import "variables";
+@import "../../theme/variables";
+
+.br-theme-fontawesome-stars-o {
+
+  .br-widget {
+    height: 28px;
+    white-space: nowrap;
+  
+    a {
+      font: normal normal normal 20px/1 FontAwesome;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      text-decoration: none;
+      margin-right: 2px;
+    }
+
+    a:after {
+      content: '\f006';
+      color: $star-default;
+    }
+
+    a.br-active:after {
+      content: '\f005';
+      color: $primary-color;
+    }
+
+    a.br-selected:after {
+      content: '\f005';
+      color: $primary-color;
+    }
+
+    a.br-fractional:after {
+      content: '\f123';
+      color: $primary-color;
+    }
+
+    .br-current-rating {
+      display: none;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+    }
+  }
+
+  .br-reverse {
+    a.br-fractional {
+      display: inline-block;
+      transform: scaleX(-1);
+      -moz-transform: scaleX(-1);
+      -webkit-transform: scaleX(-1);
+      filter: FlipH;
+      -ms-filter: "FlipH";
+    }    
+  }
+
+}
+
+@media print {
+  .br-theme-fontawesome-stars-o {
+
+    .br-widget {
+      a:after {
+        content: '\f006';
+        color: black;
+      }
+
+      a.br-active:after,
+      a.br-selected:after {
+        content: '\f005';
+        color: black;
+      }
+
+      a.br-fractional:after {
+        content: '\f123';
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_fontawesome-stars.scss

@@ -0,0 +1,60 @@
+@import "variables";
+@import "../../theme/variables";
+
+.br-theme-fontawesome-stars {
+
+  .br-widget {
+    height: 28px;
+    white-space: nowrap;
+  
+    a {
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      text-decoration: none;
+      margin-right: 2px;
+    }
+
+    a:after {
+      content: '\f005';
+      color: $star-default;
+    }
+
+    a.br-active:after {
+      color: $primary-color;
+    }
+
+    a.br-selected:after {
+      color: $primary-color;
+    }
+
+    .br-current-rating {
+      display: none;
+    }
+  }
+
+  .br-readonly {
+    a {
+      cursor: default;
+    }
+  }
+
+}
+
+@media print {
+  .br-theme-fontawesome-stars {
+
+    .br-widget {
+      a:after {
+        content: '\f006';
+        color: black;
+      }
+
+      a.br-active:after,
+      a.br-selected:after {
+        content: '\f005';
+        color: black;
+      }
+    }
+
+  }
+}

public/assets/scss/rating/rating-theme/_mixins.scss

@@ -0,0 +1,6 @@
+// Box sizing
+@mixin box-sizing($type: border-box){
+    -webkit-box-sizing: $type;
+    -moz-box-sizing:    $type;
+    box-sizing:         $type;
+}

public/assets/scss/rating/rating-theme/_variables.scss

@@ -0,0 +1,9 @@
+// Bars
+$orange-color: #EDB867;
+$green-color: #50E3C2;
+$blue-color: #4278F5;
+
+// Stars
+$star-default: #d2d2d2;
+$star-active: #EDB867;
+$star-selected: #EDB867;