definicao de layout

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;