[rating-bar] initial commit

*add rating bar component

src/components/mdRatingBar/index.js

@@ -0,0 +1,8 @@
+import mdRatingBar from './mdRatingBar.vue';
+import mdRatingBarTheme from './mdRatingBar.theme';
+
+export default function install(Vue) {
+  Vue.component('md-rating-bar', mdRatingBar);
+
+  Vue.material.styles.push(mdRatingBarTheme);
+}

src/components/mdRatingBar/mdRatingBar.scss

@@ -0,0 +1,31 @@
+@import '../../core/stylesheets/variables.scss';
+
+$button-radius: 2px;
+
+.md-rating-bar {
+  width: auto;
+  display: flex;
+  color: rgba(#000, .3);
+  width: fit-content;
+
+  > .front-stars {
+    overflow-x: hidden;
+    display: inherit;
+  }
+
+  > .back-stars {
+    &:not([disabled]) {
+      &:hover{
+        background-color: rgba(#999, .2);
+        text-decoration: none;
+      }
+    }
+  }
+
+  > .back-stars, > .front-stars {
+    > .md-icon {
+      margin: 0;
+      white-space: nowrap;
+    }
+  }
+}

src/components/mdRatingBar/mdRatingBar.theme

@@ -0,0 +1,3 @@
+.THEME_NAME {
+
+}

src/components/mdRatingBar/mdRatingBar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="md-rating-bar" :class="[themeClass]" :disabled="disabled">
+    <div class="back-stars" :disabled="disabled">
+      <md-icon v-for="i in numStars">star</md-icon>
+    </div>
+    <div class="front-stars" :style="frontStarsStyle">
+      <md-icon v-for="i in numStars" class="md-accent">star</md-icon>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./mdRatingBar.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  let iconSize = 24;//size of each icon from rating bar in pixels
+
+  export default {
+    props: {
+      numStars: {
+        type: Number,
+        default: 5
+      },
+      rating: {
+        type: Number,
+        default: 0
+      },
+      disabled: Boolean
+    },
+    mixins: [theme],
+    computed: {
+      frontStarsStyle() {
+        return {
+          width: 100 * this.rating + '%',
+          'margin-left': -iconSize * this.numStars + 'px'
+        };
+      }
+    }
+  };
+</script>

src/index.js

@@ -18,6 +18,7 @@ import MdList from './components/mdList';
 import MdMenu from './components/mdMenu';
 import MdProgress from './components/mdProgress';
 import MdRadio from './components/mdRadio';
+import MdRatingBar from './components/mdRatingBar';
 import MdSelect from './components/mdSelect';
 import MdSidenav from './components/mdSidenav';
 import MdSnackbar from './components/mdSnackbar';
@@ -52,6 +53,7 @@ const options = {
   MdMenu,
   MdProgress,
   MdRadio,
+  MdRatingBar,
   MdSelect,
   MdSidenav,
   MdSnackbar,