├── .gitignore
├── logo.png
├── vue-poll-example.jpg
├── .babelrc
├── src
    ├── plugin.js
    └── Poll.vue
├── LICENCE
├── package.json
├── webpack.config.js
├── index.html
├── README.md
└── dist
    ├── vue-poll.min.js
    └── vue-poll.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | /package-lock.json
4 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ppietris/vue-poll/HEAD/logo.png


--------------------------------------------------------------------------------
/vue-poll-example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ppietris/vue-poll/HEAD/vue-poll-example.jpg


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
1 | import Poll from './Poll.vue';
2 | 
3 | module.exports = {
4 |   install: function (Vue, options) {
5 |     Vue.component('vue-poll', Poll);
6 |   }
7 | };


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-poll",
 3 |   "version": "0.1.9",
 4 |   "description": "A Vue JS poll component",
 5 |   "main": "dist/vue-poll.js",
 6 |   "scripts": {
 7 |     "build": "rimraf ./dist && webpack --config ./webpack.config.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/ppietris/vue-poll.git"
12 |   },
13 |   "keywords": [
14 |     "vue.js",
15 |     "vue-poll.js",
16 |     "vue",
17 |     "votes",
18 |     "vote",
19 |     "poll",
20 |     "opinion polling"
21 |   ],
22 |   "author": "ppietris",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/ppietris/vue-poll/issues"
26 |   },
27 |   "homepage": "https://github.com/ppietris/vue-poll#readme",
28 |   "devDependencies": {
29 |     "babel-core": "^6.10.4",
30 |     "babel-loader": "^6.4.1",
31 |     "babel-plugin-transform-runtime": "^6.9.0",
32 |     "babel-preset-es2015": "^6.9.0",
33 |     "babel-preset-stage-2": "^6.11.0",
34 |     "babel-runtime": "^6.9.2",
35 |     "css-loader": "^0.28.11",
36 |     "rimraf": "^2.7.1",
37 |     "vue": "^2.7.16",
38 |     "vue-html-loader": "^1.2.3",
39 |     "vue-loader": "^11.3.4",
40 |     "vue-style-loader": "^2.0.5",
41 |     "vue-template-compiler": "^2.2.1",
42 |     "webpack": "1.13.1",
43 |     "webpack-merge": "^4.2.2"
44 |   }
45 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const merge = require('webpack-merge');
 3 | const path = require('path');
 4 | 
 5 | var config = {
 6 |   output: {
 7 |     path: path.resolve(__dirname + '/dist/'),
 8 |   },
 9 |   module: {
10 |     loaders: [
11 |       {
12 |         test: /\.js$/,
13 |         loader: 'babel',
14 |         include: __dirname,
15 |         exclude: /node_modules/
16 |       },
17 |       {
18 |         test: /\.vue$/,
19 |         loader: 'vue'
20 |       },
21 |       {
22 |         test: /\.css$/,
23 |         loader: 'style!less!css'
24 |       }
25 |     ]
26 |   },
27 |   externals: {
28 |     moment: 'moment'
29 |   },
30 |   plugins: [
31 |     new webpack.optimize.UglifyJsPlugin( {
32 |       minimize : true,
33 |       sourceMap : false,
34 |       mangle: true,
35 |       compress: {
36 |         warnings: false
37 |       }
38 |     } )
39 |   ]
40 | };
41 | 
42 | 
43 | module.exports = [
44 |   merge(config, {
45 |     entry: path.resolve(__dirname + '/src/plugin.js'),
46 |     output: {
47 |       filename: 'vue-poll.min.js',
48 |       libraryTarget: 'window',
49 |       library: 'VuePoll',
50 |     }
51 |   }),
52 |   merge(config, {
53 |     entry: path.resolve(__dirname + '/src/Poll.vue'),
54 |     output: {
55 |       filename: 'vue-poll.js',
56 |       libraryTarget: 'umd',
57 |       library: 'vue-poll',
58 |       umdNamedDefine: true
59 |     }
60 |   })
61 | ];
62 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="utf-8">
  6 | 
  7 |     <title>Vue-poll Example</title>
  8 |     <meta name="description" content="A vue-poll example">
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     
 11 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 12 |     <style>
 13 |         body{
 14 |           font-family: 'Avenir', Helvetica, Arial, sans-serif;
 15 |           -webkit-font-smoothing: antialiased;
 16 |           -moz-osx-font-smoothing: grayscale;          
 17 |         }
 18 |         .cnt, .logo-cnt{
 19 |             margin: 0 auto;
 20 |             max-width: 500px;
 21 |         }
 22 |         .logo-cnt{
 23 |             border-bottom: 1px solid #2c3e50;
 24 |             margin-bottom: 40px;
 25 |         }
 26 |         h1{
 27 |             text-align: center;
 28 |             font-size: 35px;
 29 |             margin: 10px 0 40px;
 30 |             color: #2c3e50;
 31 |         }
 32 |         .logo{
 33 |             display: block;
 34 |             margin: 0 auto;
 35 |         }
 36 | 		@media screen and (max-width:767px){
 37 | 			.logo{
 38 | 				max-width: 100px
 39 | 			}
 40 | 		}
 41 | 		.links-cnt{
 42 | 			text-align: center;
 43 | 			margin-top: 40px;
 44 | 		}
 45 | 		.links-cnt .link{
 46 | 			color: #2c3e50;
 47 | 			text-decoration: none;
 48 | 		}
 49 |     </style>
 50 |     
 51 | </head>
 52 | <body>
 53 |    
 54 |     <div id="app">
 55 |         <div class="logo-cnt">
 56 |             <img src="logo.png" class="logo" alt="vue-logo"/>
 57 |             <h1>Vue-poll Example</h1>
 58 |         </div>
 59 |         
 60 |         <div class="cnt">
 61 |             <vue-poll v-bind="options" @addvote="addVote"/>
 62 |         </div>
 63 |         
 64 |         <div class="links-cnt">
 65 |         	<a href="https://github.com/ppietris/vue-poll" target="_blank" class="link fab fa-github fa-2x"></a>
 66 |         </div>
 67 |     </div>
 68 |     
 69 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
 70 |     <script src="https://unpkg.com/vue-poll/dist/vue-poll.min.js"></script>
 71 |     
 72 |     <script>
 73 |         
 74 |         Vue.use(VuePoll)
 75 |         
 76 |         new Vue({
 77 |             el: '#app',
 78 |             data: function(){
 79 |                 return {
 80 |                     options: {
 81 |                         question: 'What\'s your favourite <strong>JS</strong> framework?',
 82 |                         answers: [
 83 |                             { value: 1, text: 'Vue', votes: 53 },
 84 |                             { value: 2, text: 'React', votes: 35 },
 85 |                             { value: 3, text: 'Angular', votes: 30 },
 86 |                             { value: 4, text: 'Other', votes: 10 } 
 87 |                         ],
 88 |                         finalResults: false,
 89 |                         showResults: false,
 90 |                         multiple: false,
 91 | 						customId: 1
 92 |                     }
 93 |                 }
 94 |             },
 95 |             methods: {
 96 |                 addVote: function(obj){
 97 |                     console.log('You voted ' + obj.value + '!');
 98 |                 }
 99 |             }
100 |         })
101 |     </script>
102 | </body>
103 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue-poll
  2 | 
  3 | A Twitter-like vote component, made with Vue.js 2
  4 | 
  5 | [DEMO](https://ppietris.github.io/vue-poll/index.html)
  6 | 
  7 | <p align="center">
  8 |   <img src="https://github.com/ppietris/vue-poll/blob/master/vue-poll-example.jpg?raw=true" alt="Vue-poll example image"/>
  9 | </p>
 10 | 
 11 | ## Prerequisites
 12 | - [Vue.js 2](https://vuejs.org/)
 13 | 
 14 | ## Installing
 15 | 
 16 | Using npm:
 17 | 
 18 | ```bash
 19 | $ npm install vue-poll
 20 | ```
 21 | 
 22 | Using cdn:
 23 | 
 24 | ```html
 25 | <script src="https://unpkg.com/vue-poll/dist/vue-poll.min.js"></script>
 26 | ```
 27 | 
 28 | 
 29 | 
 30 | ### Example (NPM)
 31 | 
 32 | Define `vue-poll` component markup inside your custom component.
 33 | 
 34 | For example in your `my-poll.vue`:
 35 | 
 36 | ```html
 37 | <template>
 38 |     <div>
 39 |         <vue-poll v-bind="options" @addvote="addVote"/>
 40 |     </div>
 41 | </template>
 42 | 
 43 | <script> 
 44 |     
 45 |     import VuePoll from 'vue-poll'
 46 |     
 47 |     export default {        
 48 |         data() {
 49 |             return {
 50 |                 options: {
 51 |                     question: 'What\'s your favourite <strong>JS</strong> framework?',
 52 |                     answers: [
 53 |                         { value: 1, text: 'Vue', votes: 53 },
 54 |                         { value: 2, text: 'React', votes: 35 },
 55 |                         { value: 3, text: 'Angular', votes: 30 },
 56 |                         { value: 4, text: 'Other', votes: 10 } 
 57 |                     ]
 58 |                 }
 59 |             }
 60 |         },
 61 |         components: {
 62 |             VuePoll
 63 |         },
 64 |         methods: {
 65 |             addVote(obj){
 66 |                 console.log('You voted ' + obj.value + '!');
 67 |             }
 68 |         }
 69 |     }
 70 | </script>
 71 | ```
 72 | ### Example (CDN)
 73 | 
 74 | ```html
 75 | <body>
 76 |     <div id="app">
 77 |         <vue-poll v-bind="options" @addvote="addVote"/>
 78 |     </div>
 79 | 
 80 |     <script src="https://unpkg.com/vue-poll/dist/vue-poll.min.js"></script>
 81 |     <script> 
 82 | 
 83 |         Vue.use(VuePoll);
 84 | 
 85 |         new Vue({
 86 |             el: '#app'
 87 |             data: function() {
 88 |                 return {
 89 |                     options: {
 90 |                         question: 'What\'s your favourite <strong>JS</strong> framework?',
 91 |                         answers: [
 92 |                             { value: 1, text: 'Vue', votes: 53 },
 93 |                             { value: 2, text: 'React', votes: 35 },
 94 |                             { value: 3, text: 'Angular', votes: 30 },
 95 |                             { value: 4, text: 'Other', votes: 10 } 
 96 |                         ]
 97 |                     }
 98 |                 }
 99 |             },
100 |             methods: {
101 |                 addVote: function(obj){
102 |                     console.log('You voted ' + obj.value + '!');
103 |                 }
104 |             }
105 |         });
106 |     </script>
107 | </body>
108 | ```
109 | ## Options
110 | 
111 | - #### question (required) (string-html)
112 |   The question of the poll. 
113 | 
114 | - #### answers (required) (array)
115 |   An array of the answers of the poll. 
116 | 
117 |   **value (required) (integer)**
118 |   A unique value for each answer
119 |   
120 |   **text (required) (string-html)**
121 |   Answer's text
122 |   
123 |   **votes (required) (integer)**
124 |   Answer's votes
125 |   
126 |   **selected (required when multiple is true) (boolean)**
127 |   Selected state of the answer
128 |   
129 |   **custom_class (optional) (string)**
130 |   Custom css class for the answer element
131 | 
132 | 
133 | - #### showResults (optional) (boolean) (default: false)
134 |   Set this to true to skip the voting and show the results of the poll
135 |   
136 | - #### finalResults (optional) (boolean) (default: false)
137 |   Set this to true to skip the voting and show the results of the poll. Winner will be highlighted
138 | 
139 | - #### multiple (optional) (boolean) (default: false)
140 |   Set this to true for multiple voting
141 |   
142 | - #### submitButtonText (optional) (string) (default: Submit)
143 |   Text of the multiple voting submit button
144 | 
145 | - #### customId (optional) (number)
146 |   A custom id that will be returned on the addvote method
147 | 
148 | ## Methods
149 | 
150 | - #### addvote (returns object)
151 |   Callback on add vote. It returns an object that includes: answer's value, answer's votes, total poll's votes and the custom id 
152 | 
153 | ## License
154 | MIT license
155 | 


--------------------------------------------------------------------------------
/dist/vue-poll.min.js:
--------------------------------------------------------------------------------
1 | window.VuePoll=function(t){function e(s){if(n[s])return n[s].exports;var o=n[s]={exports:{},id:s,loaded:!1};return t[s].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}var o=n(1),r=s(o);t.exports={install:function(t,e){t.component("vue-poll",r["default"])}}},function(t,e,n){n(2);var s=n(7)(n(8),n(9),null,null);t.exports=s.exports},function(t,e,n){var s=n(3);"string"==typeof s&&(s=[[t.id,s,""]]),s.locals&&(t.exports=s.locals);n(5)("23f7b8d6",s,!0)},function(t,e,n){e=t.exports=n(4)(!1),e.push([t.id,'.vue-poll{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}.vue-poll .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vue-poll .qst{font-weight:400}.vue-poll .ans-cnt{margin:20px 0}.vue-poll .ans-cnt .ans{position:relative;margin-top:10px}.vue-poll .ans-cnt .ans:first-child{margin-top:0}.vue-poll .ans-cnt .ans-no-vote{text-align:center;border:2px solid #77c7f7;box-sizing:border-box;border-radius:5px;cursor:pointer;padding:5px 0;transition:background .2s ease-in-out;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out}.vue-poll .ans-cnt .ans-no-vote .txt{color:#77c7f7;transition:color .2s ease-in-out;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out}.vue-poll .ans-cnt .ans-no-vote.active{background:#77c7f7}.vue-poll .ans-cnt .ans-no-vote.active .txt{color:#fff}.vue-poll .ans-cnt .ans-voted{padding:5px 0}.vue-poll .ans-cnt .ans-voted .percent,.vue-poll .ans-cnt .ans-voted .txt{position:relative;z-index:1}.vue-poll .ans-cnt .ans-voted .percent{font-weight:700;min-width:51px;display:inline-block;margin:0 10px}.vue-poll .ans-cnt .ans-voted.selected .txt:after{content:"\\2714";margin-left:10px}.vue-poll .ans-cnt .ans .bg{position:absolute;width:0;top:0;left:0;bottom:0;z-index:0;background-color:#e1e8ed;border-top-left-radius:5px;border-bottom-left-radius:5px;transition:all .3s cubic-bezier(.5,1.2,.5,1.2);-webkit-transition:all .3s cubic-bezier(.5,1.2,.5,1.2);-moz-transition:all .3s cubic-bezier(.5,1.2,.5,1.2)}.vue-poll .ans-cnt .ans .bg.selected{background-color:#77c7f7}.vue-poll .votes{font-size:14px;color:#8899a6}.vue-poll .submit{display:block;text-align:center;margin:0 auto;max-width:80px;text-decoration:none;background-color:#41b882;color:#fff;padding:10px 25px;border-radius:5px}',""])},function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var r=s(o),a=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[n].concat(a).concat([r]).join("\n")}return[n].join("\n")}function s(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,"+e;return"/*# "+n+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var s=n(e,t);return e[2]?"@media "+e[2]+"{"+s+"}":s}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var s={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(s[r]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&s[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){function s(t){for(var e=0;e<t.length;e++){var n=t[e],s=u[n.id];if(s){s.refs++;for(var o=0;o<s.parts.length;o++)s.parts[o](n.parts[o]);for(;o<n.parts.length;o++)s.parts.push(r(n.parts[o]));s.parts.length>n.parts.length&&(s.parts.length=n.parts.length)}else{for(var a=[],o=0;o<n.parts.length;o++)a.push(r(n.parts[o]));u[n.id]={id:n.id,refs:1,parts:a}}}}function o(){var t=document.createElement("style");return t.type="text/css",d.appendChild(t),t}function r(t){var e,n,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(v)return h;s.parentNode.removeChild(s)}if(m){var r=f++;s=p||(p=o()),e=a.bind(null,s,r,!1),n=a.bind(null,s,r,!0)}else s=o(),e=i.bind(null,s),n=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else n()}}function a(t,e,n,s){var o=n?"":s.css;if(t.styleSheet)t.styleSheet.cssText=b(e,o);else{var r=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}function i(t,e){var n=e.css,s=e.media,o=e.sourceMap;if(s&&t.setAttribute("media",s),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var l="undefined"!=typeof document,c=n(6),u={},d=l&&(document.head||document.getElementsByTagName("head")[0]),p=null,f=0,v=!1,h=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n){v=n;var o=c(t,e);return s(o),function(e){for(var n=[],r=0;r<o.length;r++){var a=o[r],i=u[a.id];i.refs--,n.push(i)}e?(o=c(t,e),s(o)):o=[];for(var r=0;r<n.length;r++){var i=n[r];if(0===i.refs){for(var l=0;l<i.parts.length;l++)i.parts[l]();delete u[i.id]}}}};var b=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var n=[],s={},o=0;o<e.length;o++){var r=e[o],a=r[0],i=r[1],l=r[2],c=r[3],u={id:t+":"+o,css:i,media:l,sourceMap:c};s[a]?s[a].parts.push(u):n.push(s[a]={id:a,parts:[u]})}return n}},function(t,e){t.exports=function(t,e,n,s){var o,r=t=t||{},a=typeof t["default"];"object"!==a&&"function"!==a||(o=t,r=t["default"]);var i="function"==typeof r?r.options:r;if(e&&(i.render=e.render,i.staticRenderFns=e.staticRenderFns),n&&(i._scopeId=n),s){var l=Object.create(i.computed||null);Object.keys(s).forEach(function(t){var e=s[t];l[t]=function(){return e}}),i.computed=l}return{esModule:o,exports:r,options:i}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={name:"Poll",props:{question:{type:String,required:!0},answers:{type:Array,required:!0},showResults:{type:Boolean,"default":!1},showTotalVotes:{type:Boolean,"default":!0},finalResults:{type:Boolean,"default":!1},multiple:{type:Boolean,"default":!1},submitButtonText:{type:String,"default":"Submit"},customId:{type:Number,"default":0}},data:function(){return{visibleResults:JSON.parse(this.showResults)}},computed:{totalVotes:function n(){var n=0;return this.answers.filter(function(t){!isNaN(t.votes)&&t.votes>0&&(n+=parseInt(t.votes))}),n},totalVotesFormatted:function(){return this.totalVotes.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")},mostVotes:function(){var t=0;return this.answers.filter(function(e){!isNaN(e.votes)&&e.votes>0&&e.votes>=t&&(t=e.votes)}),t},calcAnswers:function(){var t=this;return 0===this.totalVotes?this.answers.map(function(t){return t.percent="0%",t}):this.answers.filter(function(e){return!isNaN(e.votes)&&e.votes>0?e.percent=Math.round(parseInt(e.votes)/t.totalVotes*100)+"%":e.percent="0%",e})},totalSelections:function(){return this.calcAnswers.filter(function(t){return t.selected}).length}},methods:{handleMultiple:function(){var t=[];this.calcAnswers.filter(function(e){e.selected&&(e.votes++,t.push({value:e.value,votes:e.votes}))}),this.visibleResults=!0;var e={arSelected:t,totalVotes:this.totalVotes};this.customId&&(e.customId=this.customId),this.$emit("addvote",e)},handleVote:function(t){if(this.multiple)return void 0===t.selected&&console.log("Please add 'selected: false' on the answer object"),void(t.selected=!t.selected);t.votes++,t.selected=!0,this.visibleResults=!0;var e={value:t.value,votes:t.votes,totalVotes:this.totalVotes};this.customId&&(e.customId=this.customId),this.$emit("addvote",e)}}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-poll"},[n("h3",{staticClass:"qst",domProps:{innerHTML:t._s(t.question)}}),t._v(" "),n("div",{staticClass:"ans-cnt"},t._l(t.calcAnswers,function(e,s){var o;return n("div",{key:s,"class":(o={ans:!0},o[e.custom_class]=e.custom_class,o)},[t.finalResults?[n("div",{staticClass:"ans-voted final"},[e.percent?n("span",{staticClass:"percent",domProps:{textContent:t._s(e.percent)}}):t._e(),t._v(" "),n("span",{staticClass:"txt",domProps:{innerHTML:t._s(e.text)}})]),t._v(" "),n("span",{"class":{bg:!0,selected:t.mostVotes==e.votes},style:{width:e.percent}})]:[t.visibleResults?n("div",{"class":{"ans-voted":!0,selected:e.selected}},[e.percent?n("span",{staticClass:"percent",domProps:{textContent:t._s(e.percent)}}):t._e(),t._v(" "),n("span",{staticClass:"txt",domProps:{innerHTML:t._s(e.text)}})]):n("div",{"class":{"ans-no-vote noselect":!0,active:e.selected},on:{click:function(n){return n.preventDefault(),t.handleVote(e)}}},[n("span",{staticClass:"txt",domProps:{innerHTML:t._s(e.text)}})]),t._v(" "),n("span",{staticClass:"bg",style:{width:t.visibleResults?e.percent:"0%"}})]],2)}),0),t._v(" "),t.showTotalVotes&&(t.visibleResults||t.finalResults)?n("div",{staticClass:"votes",domProps:{textContent:t._s(t.totalVotesFormatted+" votes")}}):t._e(),t._v(" "),!t.finalResults&&!t.visibleResults&&t.multiple&&t.totalSelections>0?[n("a",{staticClass:"submit",attrs:{href:"#"},domProps:{textContent:t._s(t.submitButtonText)},on:{click:function(e){return e.preventDefault(),t.handleMultiple.apply(null,arguments)}}})]:t._e()],2)},staticRenderFns:[]}}]);


--------------------------------------------------------------------------------
/dist/vue-poll.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue-poll",[],e):"object"==typeof exports?exports["vue-poll"]=e():t["vue-poll"]=e()}(this,function(){return function(t){function e(s){if(n[s])return n[s].exports;var o=n[s]={exports:{},id:s,loaded:!1};return t[s].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){n(1);var s=n(6)(n(7),n(8),null,null);t.exports=s.exports},function(t,e,n){var s=n(2);"string"==typeof s&&(s=[[t.id,s,""]]),s.locals&&(t.exports=s.locals);n(4)("23f7b8d6",s,!0)},function(t,e,n){e=t.exports=n(3)(!1),e.push([t.id,'.vue-poll{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}.vue-poll .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vue-poll .qst{font-weight:400}.vue-poll .ans-cnt{margin:20px 0}.vue-poll .ans-cnt .ans{position:relative;margin-top:10px}.vue-poll .ans-cnt .ans:first-child{margin-top:0}.vue-poll .ans-cnt .ans-no-vote{text-align:center;border:2px solid #77c7f7;box-sizing:border-box;border-radius:5px;cursor:pointer;padding:5px 0;transition:background .2s ease-in-out;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out}.vue-poll .ans-cnt .ans-no-vote .txt{color:#77c7f7;transition:color .2s ease-in-out;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out}.vue-poll .ans-cnt .ans-no-vote.active{background:#77c7f7}.vue-poll .ans-cnt .ans-no-vote.active .txt{color:#fff}.vue-poll .ans-cnt .ans-voted{padding:5px 0}.vue-poll .ans-cnt .ans-voted .percent,.vue-poll .ans-cnt .ans-voted .txt{position:relative;z-index:1}.vue-poll .ans-cnt .ans-voted .percent{font-weight:700;min-width:51px;display:inline-block;margin:0 10px}.vue-poll .ans-cnt .ans-voted.selected .txt:after{content:"\\2714";margin-left:10px}.vue-poll .ans-cnt .ans .bg{position:absolute;width:0;top:0;left:0;bottom:0;z-index:0;background-color:#e1e8ed;border-top-left-radius:5px;border-bottom-left-radius:5px;transition:all .3s cubic-bezier(.5,1.2,.5,1.2);-webkit-transition:all .3s cubic-bezier(.5,1.2,.5,1.2);-moz-transition:all .3s cubic-bezier(.5,1.2,.5,1.2)}.vue-poll .ans-cnt .ans .bg.selected{background-color:#77c7f7}.vue-poll .votes{font-size:14px;color:#8899a6}.vue-poll .submit{display:block;text-align:center;margin:0 auto;max-width:80px;text-decoration:none;background-color:#41b882;color:#fff;padding:10px 25px;border-radius:5px}',""])},function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var r=s(o),a=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[n].concat(a).concat([r]).join("\n")}return[n].join("\n")}function s(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,"+e;return"/*# "+n+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var s=n(e,t);return e[2]?"@media "+e[2]+"{"+s+"}":s}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var s={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(s[r]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&s[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){function s(t){for(var e=0;e<t.length;e++){var n=t[e],s=u[n.id];if(s){s.refs++;for(var o=0;o<s.parts.length;o++)s.parts[o](n.parts[o]);for(;o<n.parts.length;o++)s.parts.push(r(n.parts[o]));s.parts.length>n.parts.length&&(s.parts.length=n.parts.length)}else{for(var a=[],o=0;o<n.parts.length;o++)a.push(r(n.parts[o]));u[n.id]={id:n.id,refs:1,parts:a}}}}function o(){var t=document.createElement("style");return t.type="text/css",p.appendChild(t),t}function r(t){var e,n,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(v)return h;s.parentNode.removeChild(s)}if(m){var r=f++;s=d||(d=o()),e=a.bind(null,s,r,!1),n=a.bind(null,s,r,!0)}else s=o(),e=i.bind(null,s),n=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else n()}}function a(t,e,n,s){var o=n?"":s.css;if(t.styleSheet)t.styleSheet.cssText=b(e,o);else{var r=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}function i(t,e){var n=e.css,s=e.media,o=e.sourceMap;if(s&&t.setAttribute("media",s),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var l="undefined"!=typeof document,c=n(5),u={},p=l&&(document.head||document.getElementsByTagName("head")[0]),d=null,f=0,v=!1,h=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n){v=n;var o=c(t,e);return s(o),function(e){for(var n=[],r=0;r<o.length;r++){var a=o[r],i=u[a.id];i.refs--,n.push(i)}e?(o=c(t,e),s(o)):o=[];for(var r=0;r<n.length;r++){var i=n[r];if(0===i.refs){for(var l=0;l<i.parts.length;l++)i.parts[l]();delete u[i.id]}}}};var b=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var n=[],s={},o=0;o<e.length;o++){var r=e[o],a=r[0],i=r[1],l=r[2],c=r[3],u={id:t+":"+o,css:i,media:l,sourceMap:c};s[a]?s[a].parts.push(u):n.push(s[a]={id:a,parts:[u]})}return n}},function(t,e){t.exports=function(t,e,n,s){var o,r=t=t||{},a=typeof t["default"];"object"!==a&&"function"!==a||(o=t,r=t["default"]);var i="function"==typeof r?r.options:r;if(e&&(i.render=e.render,i.staticRenderFns=e.staticRenderFns),n&&(i._scopeId=n),s){var l=Object.create(i.computed||null);Object.keys(s).forEach(function(t){var e=s[t];l[t]=function(){return e}}),i.computed=l}return{esModule:o,exports:r,options:i}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={name:"Poll",props:{question:{type:String,required:!0},answers:{type:Array,required:!0},showResults:{type:Boolean,"default":!1},showTotalVotes:{type:Boolean,"default":!0},finalResults:{type:Boolean,"default":!1},multiple:{type:Boolean,"default":!1},submitButtonText:{type:String,"default":"Submit"},customId:{type:Number,"default":0}},data:function(){return{visibleResults:JSON.parse(this.showResults)}},computed:{totalVotes:function n(){var n=0;return this.answers.filter(function(t){!isNaN(t.votes)&&t.votes>0&&(n+=parseInt(t.votes))}),n},totalVotesFormatted:function(){return this.totalVotes.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")},mostVotes:function(){var t=0;return this.answers.filter(function(e){!isNaN(e.votes)&&e.votes>0&&e.votes>=t&&(t=e.votes)}),t},calcAnswers:function(){var t=this;return 0===this.totalVotes?this.answers.map(function(t){return t.percent="0%",t}):this.answers.filter(function(e){return!isNaN(e.votes)&&e.votes>0?e.percent=Math.round(parseInt(e.votes)/t.totalVotes*100)+"%":e.percent="0%",e})},totalSelections:function(){return this.calcAnswers.filter(function(t){return t.selected}).length}},methods:{handleMultiple:function(){var t=[];this.calcAnswers.filter(function(e){e.selected&&(e.votes++,t.push({value:e.value,votes:e.votes}))}),this.visibleResults=!0;var e={arSelected:t,totalVotes:this.totalVotes};this.customId&&(e.customId=this.customId),this.$emit("addvote",e)},handleVote:function(t){if(this.multiple)return void 0===t.selected&&console.log("Please add 'selected: false' on the answer object"),void(t.selected=!t.selected);t.votes++,t.selected=!0,this.visibleResults=!0;var e={value:t.value,votes:t.votes,totalVotes:this.totalVotes};this.customId&&(e.customId=this.customId),this.$emit("addvote",e)}}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-poll"},[n("h3",{staticClass:"qst",domProps:{innerHTML:t._s(t.question)}}),t._v(" "),n("div",{staticClass:"ans-cnt"},t._l(t.calcAnswers,function(e,s){var o;return n("div",{key:s,"class":(o={ans:!0},o[e.custom_class]=e.custom_class,o)},[t.finalResults?[n("div",{staticClass:"ans-voted final"},[e.percent?n("span",{staticClass:"percent",domProps:{textContent:t._s(e.percent)}}):t._e(),t._v(" "),n("span",{staticClass:"txt",domProps:{innerHTML:t._s(e.text)}})]),t._v(" "),n("span",{"class":{bg:!0,selected:t.mostVotes==e.votes},style:{width:e.percent}})]:[t.visibleResults?n("div",{"class":{"ans-voted":!0,selected:e.selected}},[e.percent?n("span",{staticClass:"percent",domProps:{textContent:t._s(e.percent)}}):t._e(),t._v(" "),n("span",{staticClass:"txt",domProps:{innerHTML:t._s(e.text)}})]):n("div",{"class":{"ans-no-vote noselect":!0,active:e.selected},on:{click:function(n){return n.preventDefault(),t.handleVote(e)}}},[n("span",{staticClass:"txt",domProps:{innerHTML:t._s(e.text)}})]),t._v(" "),n("span",{staticClass:"bg",style:{width:t.visibleResults?e.percent:"0%"}})]],2)}),0),t._v(" "),t.showTotalVotes&&(t.visibleResults||t.finalResults)?n("div",{staticClass:"votes",domProps:{textContent:t._s(t.totalVotesFormatted+" votes")}}):t._e(),t._v(" "),!t.finalResults&&!t.visibleResults&&t.multiple&&t.totalSelections>0?[n("a",{staticClass:"submit",attrs:{href:"#"},domProps:{textContent:t._s(t.submitButtonText)},on:{click:function(e){return e.preventDefault(),t.handleMultiple.apply(null,arguments)}}})]:t._e()],2)},staticRenderFns:[]}}])});


--------------------------------------------------------------------------------
/src/Poll.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="vue-poll">
  3 |         <h3 class="qst" v-html="question"></h3>
  4 |         <div class="ans-cnt">
  5 |             <div v-for="(a,index) in calcAnswers" :key="index" :class="{ ans: true, [a.custom_class]: (a.custom_class) }">
  6 |                 
  7 |                 <template v-if="!finalResults">
  8 |                     
  9 |                     <div v-if="!visibleResults" :class="{ 'ans-no-vote noselect': true, active: a.selected }" @click.prevent="handleVote(a)" >
 10 |                         <span class="txt" v-html="a.text"></span>
 11 |                     </div>      
 12 |                     <div v-else :class="{ 'ans-voted': true, selected: a.selected }" >
 13 |                         <span v-if="a.percent" class="percent" v-text="a.percent"></span>                  
 14 |                         <span class="txt" v-html="a.text"></span>                                       
 15 |                     </div>
 16 | 
 17 |                     <span class="bg" :style="{ width: visibleResults ? a.percent : '0%' }"></span>
 18 |                 </template>
 19 |                 <template v-else>
 20 |                     <div class="ans-voted final">
 21 |                         <span v-if="a.percent" class="percent" v-text="a.percent"></span>                  
 22 |                         <span class="txt" v-html="a.text"></span>                                       
 23 |                     </div>
 24 |                     <span :class="{ bg: true, selected: mostVotes == a.votes }" :style="{ width: a.percent }"></span>
 25 |                 </template>
 26 |                 
 27 |             </div>
 28 |         </div>
 29 |         <div class="votes" v-if="showTotalVotes && (visibleResults || finalResults)" v-text="totalVotesFormatted + ' votes'"></div>
 30 |         
 31 |         <template v-if="!finalResults && !visibleResults && multiple && totalSelections > 0">
 32 |              <a href="#" @click.prevent="handleMultiple" class="submit" v-text="submitButtonText"></a>
 33 |         </template>
 34 |        
 35 |     </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | 
 40 |     export default{
 41 |         name: 'Poll',
 42 |         props: {
 43 |             question: {
 44 |                 type: String,
 45 |                 required: true
 46 |             },
 47 |             answers: {
 48 |                 type: Array,
 49 |                 required: true
 50 |             },
 51 |             showResults: {
 52 |                 type: Boolean,
 53 |                 default: false
 54 |             },
 55 |             showTotalVotes: {
 56 |                 type: Boolean,
 57 |                 default: true
 58 |             },
 59 |             finalResults: {
 60 |                 type: Boolean,
 61 |                 default: false
 62 |             },
 63 |             multiple: {
 64 |                 type: Boolean,
 65 |                 default: false
 66 |             },
 67 |             submitButtonText: {
 68 |                 type: String,
 69 |                 default: 'Submit'
 70 |             },
 71 |             customId: {
 72 |                 type: Number,
 73 |                 default: 0
 74 |             }
 75 |         },
 76 |         data(){
 77 |             return{
 78 |                 visibleResults: JSON.parse(this.showResults)
 79 |             }
 80 |         },
 81 |         computed: {           
 82 |             totalVotes(){
 83 |                 let totalVotes = 0
 84 |                 this.answers.filter(a=>{
 85 |                     if (!isNaN(a.votes) && a.votes > 0)
 86 |                         totalVotes += parseInt(a.votes)
 87 |                 })
 88 |                 return totalVotes
 89 |             },  
 90 |             totalVotesFormatted(){
 91 |                  return this.totalVotes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 92 |             },
 93 |             mostVotes(){
 94 |                 let max = 0
 95 |                 this.answers.filter(a=>{
 96 |                     if (!isNaN(a.votes) && a.votes > 0 && a.votes >= max)
 97 |                         max = a.votes
 98 |                 })
 99 |                 
100 |                 return max
101 |             },
102 |             calcAnswers(){
103 |                                
104 |                 if (this.totalVotes === 0)
105 |                     return this.answers.map(a=>{
106 |                         a.percent = '0%'
107 |                         return a
108 |                     })                    
109 |                 
110 |                 //Calculate percent
111 |                 return this.answers.filter(a=>{
112 |                     if (!isNaN(a.votes) && a.votes > 0)
113 |                         a.percent = ( Math.round( (parseInt(a.votes)/this.totalVotes ) * 100) ) + '%'
114 |                     else
115 |                         a.percent =  '0%'
116 |                                         
117 |                     return a
118 |                 })
119 |             },
120 |             totalSelections(){
121 |                 return this.calcAnswers.filter(a => a.selected).length
122 |             }
123 |         },
124 |         methods: {
125 |             handleMultiple(){
126 |                 
127 |                 let arSelected = []
128 |                 this.calcAnswers.filter(a=>{
129 |                     if (a.selected){
130 |                         a.votes++
131 |                         arSelected.push({ value: a.value, votes: a.votes })
132 |                     }
133 |                 })
134 |                 
135 |                 this.visibleResults = true
136 |                 
137 |                 let obj =  { arSelected: arSelected , totalVotes: this.totalVotes }
138 |                 
139 |                 if (this.customId)
140 | 					obj.customId = this.customId
141 |                 
142 |                 this.$emit('addvote', obj)
143 |             },
144 |             handleVote(a){ //Callback
145 |                 
146 |                 if (this.multiple){
147 |                     
148 |                     if (a.selected === undefined)
149 |                         console.log("Please add 'selected: false' on the answer object")
150 |                                         
151 |                     a.selected = !a.selected
152 |                     return
153 |                 }
154 |                 
155 |                 a.votes++
156 |                 a.selected = true
157 |                 this.visibleResults = true
158 |                                 
159 |                 let obj = { value: a.value, votes: a.votes, totalVotes: this.totalVotes }
160 | 				
161 | 				if (this.customId)
162 | 					obj.customId = this.customId
163 | 				
164 |                 this.$emit('addvote', obj)
165 |             }
166 |         }
167 |     }
168 | 
169 | </script>
170 | 
171 | <style>
172 |     .vue-poll{        
173 |       font-family: 'Avenir', Helvetica, Arial, sans-serif;
174 |       -webkit-font-smoothing: antialiased;
175 |       -moz-osx-font-smoothing: grayscale;
176 |       color: #2c3e50;
177 |     }
178 |     
179 |     .vue-poll .noselect {
180 |         -webkit-touch-callout: none;
181 |         -webkit-user-select: none;
182 |         -khtml-user-select: none;
183 |         -moz-user-select: none;
184 |         -ms-user-select: none;
185 |         user-select: none;
186 |     }
187 |     
188 |     .vue-poll .qst{
189 |         font-weight: normal;
190 |     }
191 |     .vue-poll .ans-cnt{
192 |          margin: 20px 0;   
193 |     }
194 |     .vue-poll .ans-cnt .ans{
195 |         position: relative;
196 |         margin-top: 10px;
197 |     }
198 |     .vue-poll .ans-cnt .ans:first-child{
199 |         margin-top: 0;
200 |     }
201 |     
202 |     .vue-poll .ans-cnt .ans-no-vote{
203 |         text-align: center;
204 |         border: 2px solid #77C7F7;
205 |         box-sizing: border-box;
206 |         border-radius: 5px;
207 |         cursor:pointer; 
208 |         padding: 5px 0; 
209 |         transition: background .2s ease-in-out;
210 |         -webkit-transition: background .2s ease-in-out;
211 |         -moz-transition: background .2s ease-in-out;
212 |     }
213 |     
214 |     .vue-poll .ans-cnt .ans-no-vote .txt{
215 |         color: #77C7F7;
216 |         transition: color .2s ease-in-out;
217 |         -webkit-transition: color .2s ease-in-out;
218 |         -moz-transition: color .2s ease-in-out;
219 |     }
220 |     
221 |     .vue-poll .ans-cnt .ans-no-vote.active{
222 |         background: #77C7F7;
223 |     }
224 |     
225 |     .vue-poll .ans-cnt .ans-no-vote.active .txt{
226 |         color: #fff;
227 |     }
228 |     
229 |     .vue-poll .ans-cnt .ans-voted{
230 |         padding: 5px 0;
231 |     }
232 |     
233 |     .vue-poll .ans-cnt .ans-voted .percent,
234 |     .vue-poll .ans-cnt .ans-voted .txt{
235 |         position: relative;
236 |         z-index: 1;
237 |     }
238 |     .vue-poll .ans-cnt .ans-voted .percent{
239 |         font-weight: bold;
240 |         min-width: 51px;
241 |         display: inline-block;
242 |         margin:0 10px;
243 |     }
244 | 	
245 | 	.vue-poll .ans-cnt .ans-voted.selected .txt:after{
246 | 		content:'✔';
247 | 		margin-left: 10px;
248 | 	}
249 |            
250 |     .vue-poll .ans-cnt .ans .bg{
251 |         position: absolute;
252 |         width: 0%;
253 |         top: 0;
254 |         left: 0;
255 |         bottom: 0;
256 |         z-index: 0;
257 |         background-color: #E1E8ED;
258 |         border-top-left-radius: 5px;
259 |         border-bottom-left-radius: 5px;
260 |         transition: all .3s cubic-bezier(0.5,1.2,.5,1.2);
261 |         -webkit-transition: all .3s cubic-bezier(0.5,1.2,.5,1.2);
262 |         -moz-transition: all .3s cubic-bezier(0.5,1.2,.5,1.2);
263 |     }
264 |     
265 |     .vue-poll .ans-cnt .ans .bg.selected{
266 |         background-color: #77C7F7;
267 |     }
268 |     
269 |     .vue-poll .votes{
270 |         font-size: 14px;
271 |         color:#8899A6
272 |     }
273 |     
274 |     .vue-poll .submit{
275 |         display: block;
276 |         text-align: center;
277 |         margin: 0 auto;
278 |         max-width: 80px;
279 |         text-decoration: none;
280 |         background-color: #41b882;
281 |         color:#fff;
282 |         padding: 10px 25px;
283 |         border-radius: 5px;
284 |         
285 |     }
286 | </style>


--------------------------------------------------------------------------------