refactor static assets, css to scss

index.html

@@ -4,9 +4,6 @@
     <meta charset="utf-8">
     <title>Vue Select | VueJS Select2/Chosen Component</title>
 
-    <link rel="stylesheet" href="static/prism.css">
-    <link rel="stylesheet" href="static/octicons.css">
-
     <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono" rel="stylesheet" type="text/css">
     <link href="//fonts.googleapis.com/css?family=Dosis:300&amp;text=Vue Select" rel="stylesheet" type="text/css">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
@@ -14,7 +11,8 @@
     <meta name="title" content="Vue Select | VueJS Select2/Chosen Component">
     <meta name="description" content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
 
-    <link rel="icon" href="static/img/vue-logo.png" type="image/x-icon">
+    <link rel="icon" href="static/static/vue-logo.png" type="image/png">
+
     <meta name="description" content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
     <meta property="og:title" content="Vue Select | VueJS Select2/Chosen Component">
     <meta property="og:site_name" content="Vue Select | VueJS Select2/Chosen Component">
@@ -36,7 +34,5 @@
       ga('create', 'UA-12818324-8', 'auto');
       ga('send', 'pageview');
     </script>
-    <script src="static/js/prism.js"></script>
-    <!--<script src="dist/build.js"></script>-->
   </body>
 </html>

package.json

@@ -5,6 +5,7 @@
   "author": "Jeff Sagal <sagalbot@gmail.com>",
   "private": false,
   "main": "src/components/Select.vue",
+  "license": "MIT",
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
@@ -53,6 +54,7 @@
     "node-sass": "^3.7.0",
     "ora": "^0.2.0",
     "phantomjs-prebuilt": "^2.1.3",
+    "prismjs": "^1.5.0",
     "sass-loader": "^3.2.0",
     "shelljs": "^0.7.0",
     "url-loader": "^0.5.7",

src/assets/scss/_cyan_theme.scss

@@ -0,0 +1,33 @@
+@import 'variables';
+
+#v-select {
+  max-width: 500px;
+  margin: 0 auto;
+  .dropdown-toggle {
+    background: #fff;
+    border-color: rgba(82, 166, 183, 0.39);
+  }
+  .selected-tag {
+    color: #147688;
+    background-color: #d7f3f9;
+    border-color: #91ddec;
+    .close {
+      color: #147688;
+      opacity: .5;
+    }
+  }
+  &.dropdown.open .dropdown-toggle,
+  &.dropdown.open .dropdown-menu,
+  &.dropdown.open .open-indicator:before {
+    border-color: #4CC3D9;
+  }
+  .active a {
+    background: rgba(50,50,50,.1);
+    color: #333;
+  }
+  &.dropdown .highlight a,
+  &.dropdown li:hover a {
+    background: #4CC3D9;
+    color: #fff;
+  }
+}

src/assets/scss/_octicons.scss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'octicons';
-  src: url('fonts/octicons.eot?#iefix') format('embedded-opentype'),
-       url('fonts/octicons.woff') format('woff'),
-       url('fonts/octicons.ttf') format('truetype'),
-       url('fonts/octicons.svg#octicons') format('svg');
+  src: url('./assets/fonts/octicons.eot?#iefix') format('embedded-opentype'),
+  url('./assets/fonts/octicons.woff') format('woff'),
+  url('./assets/fonts/octicons.ttf') format('truetype'),
+  url('./assets/fonts/octicons.svg#octicons') format('svg');
   font-weight: normal;
   font-style: normal;
 }

src/components/Code.vue

@@ -3,6 +3,12 @@
 </template>
 
 <script type="text/babel">
+  /**
+   * Note that this file (and anything other than src/components/Select.vue)
+   * has nothing to do with how you use vue-select. These files are used
+   * for the demo site at http://sagalbot.github.io/vue-select/. They'll
+   * be moved out of this repo in the very near future to avoid confusion.
+   */
   export default {
     props: ['lang'],
     computed: {

src/components/Install.vue

@@ -135,6 +135,12 @@
 </style>
 
 <script>
+  /**
+   * Note that this file (and anything other than src/components/Select.vue)
+   * has nothing to do with how you use vue-select. These files are used
+   * for the demo site at http://sagalbot.github.io/vue-select/. They'll
+   * be moved out of this repo in the very near future to avoid confusion.
+   */
   import countries from '../countries/advanced'
   import simple from '../countries/simple'
   import vSelect from './Select.vue'

src/components/Params.vue

@@ -95,5 +95,11 @@
 </template>
 
 <script>
+    /**
+     * Note that this file (and anything other than src/components/Select.vue)
+     * has nothing to do with how you use vue-select. These files are used
+     * for the demo site at http://sagalbot.github.io/vue-select/. They'll
+     * be moved out of this repo in the very near future to avoid confusion.
+     */
   export default {}
 </script>

src/components/snippets/InstallSnippet.vue

@@ -24,6 +24,12 @@
 </pre>
 </template>
 <script type="text/babel">
+  /**
+   * Note that this file (and anything other than src/components/Select.vue)
+   * has nothing to do with how you use vue-select. These files are used
+   * for the demo site at http://sagalbot.github.io/vue-select/. They'll
+   * be moved out of this repo in the very near future to avoid confusion.
+   */
 import vCode from '../Code.vue'
 export default {
   components: {vCode}

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './vuex/store'
+import 'prismjs'
 
-Vue.config.debug = true
+// Vue.config.debug = true
+Vue.config.devtools = true
 
 /* eslint-disable no-new */
 new Vue({