├── src
    ├── css
    │   ├── _theme.css
    │   ├── card.css
    │   ├── index.css
    │   ├── _variables.css
    │   ├── tabs.css
    │   ├── navbar.css
    │   ├── button.css
    │   ├── radio.css
    │   ├── _ios.css
    │   └── _android.css
    ├── ui
    │   ├── GeoCard.vue
    │   ├── ProgressButton.vue
    │   ├── MenuButton.vue
    │   ├── RangeSlider.vue
    │   ├── Toggle.vue
    │   └── Avatar.vue
    ├── view
    │   ├── List.vue
    │   ├── Nav.vue
    │   ├── Tabs.vue
    │   ├── Scroll.vue
    │   ├── SideMenus.vue
    │   └── Overlay.vue
    └── index.js
├── .gitignore
├── app.js
├── variables.js
├── README.md
├── package.json
└── webpack.config.js


/src/css/_theme.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/css/card.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/ui/GeoCard.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/view/List.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/view/Nav.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/view/Tabs.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | dist/
4 | public/
5 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var Vue = require('vue')
2 | Vue.use(require('./src/'))
3 | window.Vue = Vue
4 | 


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
1 | @import "_variables.css";
2 | @import "button.css";
3 | @import "radio.css";
4 | @import "navbar.css";
5 | @import "tabs.css";
6 | 
7 | @import "_android.css";
8 | @import "_ios.css";
9 | 


--------------------------------------------------------------------------------
/src/css/_variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 |   --vui-green: #42b983;
3 |   --ios-green: #4cd964;
4 |   --ios-blue: #027AFB;
5 |   --android-green: #009A57;
6 |   --menu-button-color: #666;
7 |   --range-slider-color: #027AFB;
8 | }
9 | 


--------------------------------------------------------------------------------
/variables.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   'vui-green': '#42b983',
3 |   'menu-button-color': '#666',
4 |   'range-slider-color': '#027AFB',
5 |   'ios-green': '#4cd964',
6 |   'ios-blue': '#027AFB',
7 |   'android-green': '#009A57',
8 | }
9 | 


--------------------------------------------------------------------------------
/src/css/tabs.css:
--------------------------------------------------------------------------------
 1 | .v-tabs {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   color: #454545;
 5 |   background: #f7f7f7;
 6 |   border-top: 1px solid #ddd;
 7 |   height: 49px;
 8 |   line-height: 49px;
 9 | }
10 | .v-tabs .v-tabs_item {
11 |   flex: 1 1 0;
12 |   overflow: hidden;
13 |   white-space: nowrap;
14 |   color: inherit;
15 |   font-size: 14px;
16 |   font-weight: 400;
17 |   text-decoration: none;
18 |   text-align: center;
19 |   height: 100%;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/css/navbar.css:
--------------------------------------------------------------------------------
 1 | .v-navbar {
 2 |   display: flex;
 3 |   padding: 5px;
 4 |   border-top: 1px solid transparent;
 5 |   border-bottom: 1px solid #ddd;
 6 |   line-height: 43px;
 7 |   justify-content: space-between;
 8 |   align-content: center;
 9 | }
10 | .v-navbar .v-navbar_title {
11 |   flex: 1;
12 |   text-align: center;
13 |   align-items: center;
14 |   font-size: 17px;
15 |   font-weight: 500;
16 | }
17 | .v-navbar .v-navbar_left {
18 |   align-items: flex-start;
19 |   margin: auto;
20 | }
21 | .v-navbar .v-navbar_right {
22 |   align-items: flex-end;
23 |   margin: auto;
24 | }
25 | .v-navbar .v-button {
26 |   padding: 4px 12px;
27 |   font-weight: 400;
28 |   -webkit-font-smoothing: initial;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var Avatar = require('./ui/Avatar.vue')
 3 | var Toggle = require('./ui/Toggle.vue')
 4 | var MenuButton = require('./ui/MenuButton.vue')
 5 | var ProgressButton = require('./ui/ProgressButton.vue')
 6 | var RangeSlider = require('./ui/RangeSlider.vue')
 7 | 
 8 | var Scroll = require('./view/Scroll.vue')
 9 | var SideMenus = require('./view/SideMenus.vue')
10 | 
11 | exports.install = function(Vue) {
12 |   // register ui components
13 |   Vue.component('vui-avatar', Avatar)
14 |   Vue.component('vui-toggle', Toggle)
15 |   Vue.component('vui-menu-button', MenuButton)
16 |   Vue.component('vui-progress-button', ProgressButton)
17 |   Vue.component('vui-range-slider', RangeSlider)
18 | 
19 |   // register views
20 |   Vue.component('vui-scroll', Scroll)
21 |   Vue.component('vui-side-menus', SideMenus)
22 | }
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VUI
 2 | 
 3 | A UI framework for mobile, built with Vue.
 4 | 
 5 | [![Donate lepture](https://img.shields.io/badge/donate-lepture-green.svg)](https://lepture.herokuapp.com/?amount=1000&reason=lepture%2Fvui)
 6 | 
 7 | 
 8 | ## Design Pattern
 9 | 
10 | VUI provides components that look like native UI in iOS, Android and
11 | Windows UI. However, VUI will not build those animations as in Material
12 | design.
13 | 
14 | 
15 | ## Development
16 | 
17 | Clone site for preview:
18 | 
19 |     $ git clone git@github.com:vui/vui.github.io.git public
20 | 
21 | Generate site in `public` directory with `jekyll`:
22 | 
23 |     $ cd public
24 |     $ jekyll build -w
25 | 
26 | Serve assets with webpack dev server:
27 | 
28 |     $ npm start
29 | 
30 | Now visit `http://localhost:9090/ui/index.html`. **Don't forget /index.html**.
31 | 


--------------------------------------------------------------------------------
/src/css/button.css:
--------------------------------------------------------------------------------
 1 | .v-button, button.v-button, a.v-button {
 2 |   display: inline-block;
 3 |   background-color: white;
 4 |   border: 1px solid #ddd;
 5 |   border-radius: 3px;
 6 |   color: #999;
 7 |   padding: 6px 12px;
 8 |   font: 600 normal 13px/24px sans-serif;
 9 |   cursor: pointer;
10 |   text-decoration: none;
11 |   outline: none;
12 |   box-sizing: border-box;
13 |   text-align: center;
14 | }
15 | .v-button {
16 |   margin: 4px 2px;
17 | }
18 | .v-button:hover {
19 |   opacity: 0.8;
20 | }
21 | .v-button:active {
22 |   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08) inset, 0 0 4px rgba(0, 0, 0, 0.1) inset;
23 | }
24 | .v-button[disabled],
25 | .v-button[disabled]:hover {
26 |   opacity: 0.68;
27 |   cursor: not-allowed;
28 | }
29 | .v-button[disabled]:active {
30 |   box-shadow: none;
31 | }
32 | .v-button.v-button--primary {
33 |   background-color: var(--vui-green);
34 |   color: white;
35 |   border-color: transparent;
36 | }
37 | .v-button.v-button--block {
38 |   display: block;
39 |   width: 100%;
40 |   margin: 10px 0;
41 | }
42 | 


--------------------------------------------------------------------------------
/src/css/radio.css:
--------------------------------------------------------------------------------
 1 | label.v-radio,
 2 | .v-radio label {
 3 |   -webkit-tap-highlight-color: transparent;
 4 | }
 5 | .v-radio {
 6 |   vertical-align: middle;
 7 | }
 8 | .v-radio input {
 9 |   -webkit-appearance: none;
10 |   margin: 0 8px 0 2px;
11 |   line-height: 1;
12 |   outline: none;
13 |   border: none;
14 |   background: none;
15 |   vertical-align: middle;
16 | }
17 | .v-radio input:before {
18 |   position: relative;
19 |   display: inline-block;
20 |   content: '';
21 |   width: 1em;
22 |   height: 0.4em;
23 |   border: 2px solid #666;
24 |   border-top: 0;
25 |   border-right: 0;
26 |   transform: rotate3d(0, 0, 1, -45deg) translate3d(4px, 0, 0);
27 |   opacity: 0.18;
28 | }
29 | .v-radio input:checked:before {
30 |   opacity: 1;
31 | }
32 | 
33 | /* radio group */
34 | ul.v-radio {
35 |   list-style-type: none;
36 |   padding: 0;
37 |   margin: 0;
38 | }
39 | .v-radio li {
40 |   border-bottom: 1px solid #ddd;
41 |   margin-left: 2em;
42 |   padding: 0.6em 0 0.4em;
43 | }
44 | .v-radio li:last-of-type {
45 |   border-bottom: 0;
46 | }
47 | .v-radio li input {
48 |   margin-left: -2.2em;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/ui/ProgressButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="v-progress-button v-button" :disabled="disabled">
 3 |     <span class="v-progress-button_progress" :style="{width: width}"></span>
 4 |     <span class="v-progress-button_text"><slot></slot></span>
 5 |   </button>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     progress: {
12 |       type: String,
13 |     }
14 |   },
15 |   computed: {
16 |     disabled() {
17 |       if (this.width) {
18 |         return true
19 |       }
20 |       return false
21 |     },
22 |     width() {
23 |       var s = this.progress
24 |       if (!s || s === '0%' || s === '0') {
25 |         return
26 |       }
27 |       if (s[s.length - 1] === '%') {
28 |         return s
29 |       }
30 |       return parseInt(s, 10) + '%'
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style>
37 | .v-progress-button {
38 |   position: relative;
39 |   text-align: center;
40 | }
41 | .v-progress-button_progress {
42 |   position: absolute;
43 |   top: 0;
44 |   left: 0;
45 |   height: 100%;
46 |   background-color: rgba(0, 0, 0, 0.1);
47 |   transition: width 0.2s;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/view/Scroll.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="v-scroll-container">
 3 |   <div class="v-scroll">
 4 |     <slot></slot>
 5 |   </div>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import IScroll from 'iscroll'
11 | 
12 | export default {
13 |   props: {
14 |     scrollbars: Boolean,
15 |     direction: {
16 |       type: String,
17 |       default: 'y'
18 |     }
19 |   },
20 |   attached() {
21 |     var options = {
22 |       mouseWheel: true,
23 |     }
24 |     if (this.direction === 'x') {
25 |       options.scrollX = true
26 |     } else {
27 |       options.scrollY = true
28 |     }
29 |     if (this.scrollbars) {
30 |       options.scrollbars = true
31 |       options.fadeScrollbars = true
32 |     }
33 |     this._iscroll = new IScroll(this.$el, options)
34 |   },
35 |   detached() {
36 |     if (this._iscroll) {
37 |       this._iscroll.destroy()
38 |       this._iscroll = null
39 |     }
40 |   },
41 | }
42 | </script>
43 | 
44 | <style>
45 | .v-scroll-container {
46 |   position: relative;
47 |   width: 100%;
48 |   height: 100%;
49 | }
50 | .v-scroll {
51 |   position: absolute;
52 |   top: 0;
53 |   left: 0;
54 |   width: 100%;
55 |   z-index: 99;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vui",
 3 |   "version": "0.1.0-alpha1",
 4 |   "description": "UI framework for mobile built with vue.",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "start": "webpack-dev-server --inline --hot",
 8 |     "build": "NODE_ENV=production webpack --progress --hide-modules",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git://github.com/lepture/vui.git"
14 |   },
15 |   "keywords": [
16 |     "UI",
17 |     "Mobile",
18 |     "Vue"
19 |   ],
20 |   "author": "Hsiaoming Yang <me@lepture.com>",
21 |   "license": "MIT",
22 |   "devDependencies": {
23 |     "autoprefixer": "^6.3.1",
24 |     "babel-core": "^6.9.1",
25 |     "babel-loader": "^6.1.0",
26 |     "babel-plugin-transform-runtime": "^6.9.0",
27 |     "babel-preset-es2015": "^6.9.0",
28 |     "babel-runtime": "^6.9.2",
29 |     "css-loader": "^0.23.0",
30 |     "extract-text-webpack-plugin": "^1.0.1",
31 |     "postcss": "^5.0.14",
32 |     "postcss-css-variables": "^0.5.1",
33 |     "postcss-import": "^8.1.2",
34 |     "postcss-loader": "^0.9.1",
35 |     "vue": "^1.0.24",
36 |     "vue-hot-reload-api": "^1.3.2",
37 |     "vue-html-loader": "^1.1.0",
38 |     "vue-loader": "^8.5.2",
39 |     "vue-style-loader": "^1.0.0",
40 |     "webpack": "^1.13.1",
41 |     "webpack-dev-server": "^1.14.1"
42 |   },
43 |   "peerDependencies": {
44 |     "vue": "^1.0.7"
45 |   },
46 |   "dependencies": {
47 |     "iscroll": "^5.1.3",
48 |     "word-color": "^1.2.0"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/ui/MenuButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <button class="v-menu-button" :class="{'v-menu-button--checked':checked}" v-on:click.prevent="checked=!checked">
 3 |   <span><slot>Menu</slot></span>
 4 | </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     checked: {
11 |       type: Boolean,
12 |       default: false,
13 |     }
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | @import "_variables.css";
20 | button.v-menu-button {
21 |   position: relative;
22 |   border: none;
23 |   background-color: transparent;
24 |   cursor: pointer;
25 |   outline: none;
26 |   width: 2.5em;
27 |   height: 2em;
28 |   line-height: 1;
29 |   -webkit-tap-highlight-color: transparent;
30 | }
31 | button.v-menu-button:before,
32 | button.v-menu-button:after,
33 | button.v-menu-button > span {
34 |   position: absolute;
35 |   left: 0;
36 |   width: 100%;
37 |   height: 2px;
38 |   padding: 0;
39 |   margin: 0;
40 |   background: var(--menu-button-color);
41 | }
42 | button.v-menu-button:before,
43 | button.v-menu-button:after {
44 |   top: 50%;
45 |   content: '';
46 |   pointer-events: none;
47 |   transition: transform 0.25s;
48 |   transform-origin: 50% 50%;
49 | }
50 | button.v-menu-button:before {
51 |   transform: translate3d(0, -10px, 0);
52 | }
53 | button.v-menu-button:after {
54 |   transform: translate3d(0, 10px, 0);
55 | }
56 | button.v-menu-button > span {
57 |   overflow: hidden;
58 |   text-indent: 200%;
59 |   color: rgba(0, 0, 0, 0);
60 |   transition: opacity 0.25s;
61 | }
62 | button.v-menu-button--checked:before {
63 |   transform: rotate3d(0, 0, 1, 45deg);
64 | }
65 | button.v-menu-button--checked:after {
66 |   transform: rotate3d(0, 0, 1, -45deg);
67 | }
68 | button.v-menu-button--checked > span {
69 |   opacity: 0;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/view/SideMenus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="v-side-menus" :class="menuClass">
 3 |   <slot name="left-menu"></slot>
 4 |   <div class="v-side-menus_content">
 5 |     <slot></slot>
 6 |   </div>
 7 |   <slot name="right-menu"></slot>
 8 | </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: ['side'],
14 |   computed: {
15 |     menuClass() {
16 |       if (this.side === 'left' || this.side === 'right') {
17 |         return 'v-side-menus--' + this.side
18 |       }
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style>
25 | .v-side-menus {
26 |   position: relative;
27 |   width: 100%;
28 |   height: 100%;
29 | }
30 | .v-side-menus--left, .v-side-menus--right {
31 |   overflow: hidden;
32 | }
33 | .v-side-menus [slot=left-menu],
34 | .v-side-menus [slot=right-menu] {
35 |   position: absolute;
36 |   width: 275px;
37 |   height: 100%;
38 |   top: 0;
39 |   z-index: 1;
40 | }
41 | .v-side-menus [slot=left-menu] {
42 |   left: 0;
43 | }
44 | .v-side-menus [slot=right-menu] {
45 |   right: 0;
46 | }
47 | .v-side-menus .v-side-menus_content {
48 |   position: relative;
49 |   width: 100%;
50 |   height: 100%;
51 |   box-sizing: border-box;
52 |   transition: transform 0.15s;
53 |   background: white;
54 |   z-index: 99;
55 | }
56 | .v-side-menus--left .v-side-menus_content,
57 | .v-side-menus--right .v-side-menus_content {
58 |   position: fixed;
59 |   width: 100%;
60 |   perspective: 1000px;
61 | }
62 | .v-side-menus--left .v-side-menus_content {
63 |   transform: translate3d(275px, 0, 0);
64 |   box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1), -6px -6px 8px rgba(0, 0, 0, 0.05);
65 | }
66 | .v-side-menus--right .v-side-menus_content {
67 |   transform: translate3d(-275px, 0, 0);
68 |   box-shadow: 3px 0 6px rgba(0, 0, 0, 0.1), 6px 6px 8px rgba(0, 0, 0, 0.05);
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/ui/RangeSlider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="v-range-slider">
 3 |   <slot name="left"></slot>
 4 |   <input type="range" v-model="value" :min="min" :max="max" :step="step" :name="name">
 5 |   <slot name="right"></slot>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     min: {
13 |       type: Number,
14 |     },
15 |     max: {
16 |       type: Number,
17 |     },
18 |     step: {
19 |       type: Number,
20 |     },
21 |     name: {
22 |       type: String,
23 |     },
24 |     value: {
25 |       type: Number,
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style>
32 | @import "_variables.css";
33 | .v-range-slider {
34 |   display: flex;
35 |   align-items: center;
36 |   padding: 2px 11px;
37 | }
38 | .v-range-slider input[type=range] {
39 |   -webkit-appearance: none;
40 |   flex: 1;
41 |   display: block;
42 |   overflow: hidden;
43 |   margin: 5px 10px;
44 |   padding: 16px 1px 20px;
45 |   box-sizing: border-box;
46 |   outline: none;
47 |   -webkit-tap-highlight-color: transparent;
48 | }
49 | .v-range-slider input::-webkit-slider-runnable-track {
50 |   position: relative;
51 |   height: 2px;
52 |   background: #ddd;
53 |   border: none;
54 |   border-radius: 3px;
55 | }
56 | .v-range-slider input::-webkit-slider-thumb {
57 |   -webkit-appearance: none;
58 |   position: relative;
59 |   margin-top: -12px;
60 |   cursor: pointer;
61 |   width: 28px;
62 |   height: 28px;
63 |   border: 0;
64 |   border-radius: 50%;
65 |   background: white;
66 |   box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
67 | }
68 | .v-range-slider input::-webkit-slider-thumb:before {
69 |   position: absolute;
70 |   display: inline-block;
71 |   content: '';
72 |   top: 12px;
73 |   left: -2001px;
74 |   width: 2000px;
75 |   height: 2px;
76 |   background: var(--vui-green);
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/ui/Toggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <label class="v-toggle" :class="{'v-toggle--checked': checked}">
 3 |   <input type="checkbox" v-model="checked" :name="name">
 4 |   <span class="v-toggle_handle"></span>
 5 | </label>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     checked: {
12 |       type: Boolean,
13 |       default: false,
14 |     },
15 |     name: {
16 |       type: String,
17 |     },
18 |   }
19 | }
20 | </script>
21 | 
22 | <style>
23 | @import "_variables.css";
24 | label.v-toggle {
25 |   position: relative;
26 |   display: inline-block;
27 |   height: 31px;
28 |   width: 68px;
29 |   border-radius: 20px;
30 |   box-sizing: border-box;
31 |   background: #e6e6e6;
32 |   border: solid 2px #e6e6e6;
33 |   cursor: pointer;
34 |   vertical-align: middle;
35 |   pointer-events: auto;
36 |   -webkit-tap-highlight-color: transparent;
37 | }
38 | label.v-toggle input {
39 |   display: none;
40 | }
41 | label.v-toggle--checked.v-toggle {
42 |   background: var(--vui-green);
43 |   border-color: var(--vui-green);
44 | }
45 | .v-toggle .v-toggle_handle {
46 |   position: absolute;
47 |   left: 0;
48 |   top: 0;
49 |   display: inline-block;
50 |   background: white;
51 |   border-radius: 100%;
52 |   width: 27px;
53 |   height: 27px;
54 |   z-index: 99;
55 |   transition: transform 0.3s;
56 | }
57 | .v-toggle--checked .v-toggle_handle {
58 |   transform: translate3d(37px, 0, 0);
59 | }
60 | .v-toggle::before,
61 | .v-toggle::after {
62 |   position: absolute;
63 |   top: 0;
64 |   font-size: 12px;
65 |   line-height: 28px;
66 | }
67 | .v-toggle::before {
68 |   left: 5px;
69 |   content: 'ON';
70 |   color: white;
71 |   opacity: 0;
72 | }
73 | .v-toggle::after {
74 |   right: 5px;
75 |   content: 'OFF';
76 |   color: #666;
77 | }
78 | .v-toggle--checked.v-toggle::before {
79 |   opacity: 1;
80 | }
81 | .v-toggle--checked.v-toggle::after {
82 |   opacity: 0;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/css/_ios.css:
--------------------------------------------------------------------------------
 1 | /** Toggle */
 2 | .ios .v-toggle {
 3 |   width: 51px;
 4 | }
 5 | .ios .v-toggle--checked.v-toggle {
 6 |   background: var(--ios-green);
 7 |   border-color: var(--ios-green);
 8 | }
 9 | .ios .v-toggle .v-toggle_handle {
10 |   box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15);
11 | }
12 | .ios .v-toggle--checked .v-toggle_handle {
13 |   transform: translate3d(20px, 0, 0);
14 | }
15 | .ios .v-toggle:before {
16 |   content: '';
17 |   position: absolute;
18 |   display: block;
19 |   left: 0;
20 |   top: 0;
21 |   width: 100%;
22 |   height: 100%;
23 |   border-radius: 20px;
24 |   background: #e6e6e6;
25 |   transition: opacity 0.3s;
26 | }
27 | .ios .v-toggle--checked:before {
28 |   opacity: 0;
29 | }
30 | .ios .v-toggle:after {
31 |   content: '';
32 |   position: absolute;
33 |   display: block;
34 |   left: 0;
35 |   top: 0;
36 |   width: 100%;
37 |   height: 100%;
38 |   background: white;
39 |   border-radius: 20px;
40 |   transform: scale3d(1, 1, 1);
41 |   transition: transform 0.3s;
42 | }
43 | .ios .v-toggle--checked:after {
44 |   transform: scale3d(0, 0, 0);
45 |   opacity: 1;
46 | }
47 | 
48 | 
49 | /** Range Slider */
50 | .ios .v-range-slider input::-webkit-slider-runnable-track {
51 |   height: 1px;
52 | }
53 | .ios .v-range-slider input::-webkit-slider-thumb:before {
54 |   background: var(--ios-blue);
55 |   height: 1px;
56 | }
57 | .ios .v-range-slider input::-webkit-slider-thumb {
58 |   box-shadow: 0 0 1px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,0.2);
59 | }
60 | 
61 | /** Radio Group */
62 | .ios .v-radio input:before {
63 |   opacity: 0;
64 | }
65 | .ios .v-radio li {
66 |   border-bottom: 1px solid #ddd;
67 |   margin-left: 2em;
68 |   padding: 0.6em 0 0.4em;
69 | }
70 | .ios .v-radio li:last-of-type {
71 |   border-bottom: 0;
72 | }
73 | .ios .v-radio li input {
74 |   margin-left: -2.2em;
75 | }
76 | .ios .v-radio input:checked:before {
77 |   opacity: 1;
78 |   border-color: var(--ios-blue);
79 | }
80 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack')
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 3 | 
 4 | var cssLoader = 'vue-style!css?sourceMap!postcss'
 5 | if (process.env.NODE_ENV === 'production') {
 6 |   cssLoader = ExtractTextPlugin.extract('vue-style', 'css?-reduceTransforms!postcss')
 7 | }
 8 | 
 9 | var contentBase = __dirname + '/public'
10 | var pkg = require('./package.json')
11 | 
12 | var plugins = [new webpack.DefinePlugin({
13 |   'process.env': {
14 |     NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
15 |   }
16 | })]
17 | 
18 | 
19 | var options = {
20 |   entry: {
21 |     app: [
22 |       './app.js',
23 |       './src/css/index.css'
24 |     ],
25 |   },
26 | 
27 |   output: {
28 |     path: contentBase + '/assets',
29 |     filename: 'app.js',
30 |   },
31 | 
32 |   module: {
33 |     loaders: [
34 |       {test: /\.vue$/, loader: 'vue'},
35 |       {test: /\.css$/, loader: cssLoader},
36 |     ]
37 |   },
38 | 
39 |   vue: {
40 |     loaders: {
41 |       css: cssLoader,
42 |     }
43 |   },
44 | 
45 |   postcss: function (pack) {
46 |     // use webpack context
47 |     return [
48 |       require('postcss-import')({path: './src/css', addDependencyTo: pack}),
49 |       require('postcss-css-variables'),
50 |       require('autoprefixer'),
51 |     ]
52 |   },
53 | 
54 |   devServer: {
55 |     contentBase: contentBase + '/_site',
56 |     publicPath: '/assets/',
57 |     host: '0.0.0.0',
58 |   },
59 | 
60 |   plugins: plugins,
61 | 
62 |   devtool: 'source-map',
63 | }
64 | 
65 | if (process.env.NODE_ENV === 'production') {
66 |   options.entry.vendor = Object.keys(pkg.dependencies)
67 |   plugins.push(new ExtractTextPlugin('app.css', {disable: false}))
68 |   plugins.push(new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"))
69 |   plugins.push(new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}))
70 |   plugins.push(new webpack.optimize.OccurenceOrderPlugin())
71 |   options.plugins = plugins
72 | }
73 | 
74 | module.exports = options
75 | 


--------------------------------------------------------------------------------
/src/ui/Avatar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <span class="v-avatar" :style="styleSize" :class="{'v-avatar--image': image}" :aria-label="alt">
  3 |     <span class="v-avatar_text" v-text="name" :style="{background: bg, color: fg}"></span>
  4 |   </span>
  5 | </template>
  6 | 
  7 | <script>
  8 | import wc from "word-color"
  9 | var failed = {}
 10 | 
 11 | export default {
 12 |   props: {
 13 |     alt: {
 14 |       type: String,
 15 |     },
 16 |     src: {
 17 |       type: String,
 18 |     },
 19 |     size: {
 20 |       type: String,
 21 |     }
 22 |   },
 23 |   data() {
 24 |     return {image: false}
 25 |   },
 26 |   computed: {
 27 |     bg() {
 28 |       if (!this.alt) {
 29 |         return 'black'
 30 |       }
 31 |       return wc(this.alt)
 32 |     },
 33 |     fg() {
 34 |       if (!this.alt) {
 35 |         return 'black'
 36 |       }
 37 |       var bg = wc.rgb(this.alt)
 38 |       if ((bg[0] * 299 + bg[1] * 587 + bg[2] * 144) > 200000) {
 39 |         return 'black'
 40 |       }
 41 |       return 'white'
 42 |     },
 43 |     name() {
 44 |       if (!this.alt) {
 45 |         return ''
 46 |       }
 47 |       return this.alt.charAt(0).toUpperCase()
 48 |     },
 49 |     styleSize() {
 50 |       if (!this.size) return
 51 | 
 52 |       var px = this.size + 'px'
 53 |       return {
 54 |         'width': px,
 55 |         'height': px,
 56 |         'line-height': px,
 57 |         'font-size': this.size / 2 + 'px',
 58 |       }
 59 |     }
 60 |   },
 61 |   ready() {
 62 |     if (!this.src) return
 63 | 
 64 |     // load failed
 65 |     var key = 'v-avatar:' + this.src
 66 |     if (failed[key]) return
 67 | 
 68 |     var img = new Image()
 69 |     img.src = this.src
 70 |     img.alt = this.alt
 71 | 
 72 |     var me = this;
 73 |     img.onload = function() {
 74 |       me.image = true
 75 |       me.$el.appendChild(img)
 76 |     }
 77 |     img.onerror = function() {
 78 |       failed[key] = 1
 79 |     }
 80 |   }
 81 | }
 82 | </script>
 83 | 
 84 | <style>
 85 | .v-avatar {
 86 |   display: inline-block;
 87 |   text-align: center;
 88 |   vertical-align: middle;
 89 |   width: 48px;
 90 |   height: 48px;
 91 |   border-radius: 50%;
 92 |   overflow: hidden;
 93 |   font: 300 normal 24px/48px sans-serif;
 94 | }
 95 | .v-avatar--squared {
 96 |   border-radius: 2px;
 97 | }
 98 | .v-avatar .v-avatar_text {
 99 |   display: inline-block;
100 |   width: 100%;
101 |   height: 100%;
102 |   user-select: none;
103 | }
104 | .v-avatar img {
105 |   display: inline-block;
106 |   width: 100%;
107 |   height: 100%;
108 | }
109 | .v-avatar--image .v-avatar_text {
110 |   display: none;
111 | }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/view/Overlay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="overlay">
  3 |     <div class="overlay_mask" @click="show=false"></div>
  4 |     <button class="overlay_close" aria-label="Close" @click="show=false">
  5 |       <svg viewBox="0 0 40 40" tabindex="-1">
  6 |         <circle cx="20" cy="20" r="18"  stroke="#ccc" stroke-width="1" fill-opacity="0"/>
  7 |         <line x1="15" y1="15" x2="25" y2="25" stroke="#dadada" stroke-width="2"/>
  8 |         <line x1="15" y1="25" x2="25" y2="15" stroke="#dadada" stroke-width="2"/>
  9 |       </svg>
 10 |     </button>
 11 |     <div class="overlay_content">
 12 |       <slot name="overlay-hide"></slot>
 13 |       <slot></slot>
 14 |     </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   props: {
 21 |   show: {
 22 |       twoWay: true
 23 |     }
 24 |   },
 25 |   methods: {
 26 |     open() {
 27 |       var el = document.querySelector('html')
 28 |       el.classList.add('overlay--open')
 29 |     },
 30 |     close() {
 31 |       var el = document.querySelector('html')
 32 |       el.classList.remove('overlay--open')
 33 |     },
 34 |   },
 35 |   ready() {
 36 |     if (this.show) {
 37 |       this.open()
 38 |     }
 39 |   },
 40 |   detached() {
 41 |     this.close()
 42 |   },
 43 |   watch: {
 44 |     'show': function(val) {
 45 |       if (val) {
 46 |         this.open()
 47 |       } else {
 48 |         this.close()
 49 |       }
 50 |     }
 51 |   }
 52 | }
 53 | </script>
 54 | 
 55 | <style>
 56 | .overlay {
 57 |   position: fixed;
 58 |   display: none;
 59 |   justify-content: center;
 60 |   left: 0;
 61 |   top: 0;
 62 |   right: 0;
 63 |   bottom: 0;
 64 |   background-color: rgba(255, 255, 255, 0.95);
 65 |   z-index: 9999;
 66 | }
 67 | .overlay--open,
 68 | .overlay--open body {
 69 |   overflow: hidden;
 70 | }
 71 | .overlay--open .overlay {
 72 |   display: flex;
 73 | }
 74 | .overlay_mask {
 75 |   position: absolute;
 76 |   left: 0;
 77 |   top: 0;
 78 |   width: 100%;
 79 |   height: 100%;
 80 |   z-index: 10;
 81 |   cursor: pointer;
 82 | }
 83 | .overlay_content {
 84 |   position: relative;
 85 |   max-width: 860px;
 86 |   height: 100%;
 87 |   z-index: 22;
 88 |   flex: 1;
 89 | }
 90 | button.overlay_close {
 91 |   position: absolute;
 92 |   display: block;
 93 |   border: none;
 94 |   background: none;
 95 |   top: 20px;
 96 |   right: 30px;
 97 |   width: 60px;
 98 |   height: 60px;
 99 |   z-index: 99;
100 |   cursor: pointer;
101 |   outline: none;
102 |   animation: fade-in 1s cubic-bezier(1, 0.06, 0.74, 1);
103 |   -webkit-tap-highlight-color: rgba(0,0,0,0);
104 | }
105 | button.overlay_close svg {
106 |   width: 40px;
107 |   height: 40px;
108 |   outline: none;
109 | }
110 | @media (max-width: 680px) {
111 |   .overlay button.overlay_close {
112 |     right: 20px;
113 |   }
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/css/_android.css:
--------------------------------------------------------------------------------
  1 | /** Toggle */
  2 | .android .v-toggle,
  3 | .android .v-toggle.v-toggle--checked {
  4 |   border: 0;
  5 |   background: transparent;
  6 |   width: 44px;
  7 | }
  8 | .android .v-toggle::before {
  9 |   content: '';
 10 |   position: absolute;
 11 |   left: 0;
 12 |   top: 4px;
 13 |   width: 100%;
 14 |   height: 14px;
 15 |   border-radius: 10px;
 16 |   background: rgba(0, 0, 0, 0.2);
 17 |   opacity: 1;
 18 |   transition: background 0.15s;
 19 | }
 20 | .android .v-toggle--checked::before {
 21 |   background: rgba(0, 154, 87, 0.5);
 22 | }
 23 | .android .v-toggle::after {
 24 |   display: none;
 25 | }
 26 | .android .v-toggle .v-toggle_handle {
 27 |   width: 22px;
 28 |   height: 22px;
 29 |   background: #f0f0f0;
 30 |   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
 31 |   transition-duration: .15s;
 32 | }
 33 | .android .v-toggle--checked .v-toggle_handle {
 34 |   transform: translate3d(22px, 0, 0);
 35 |   background: var(--android-green);
 36 | }
 37 | .android .v-toggle .v-toggle_handle::before {
 38 |   display: block;
 39 |   width: 22px;
 40 |   height: 22px;
 41 |   border-radius: 50%;
 42 |   content: '';
 43 |   background: rgba(0, 0, 0, 0);
 44 |   transform: scale3d(1, 1, 1);
 45 |   transition: transform .15s;
 46 | }
 47 | .android .v-toggle:active .v-toggle_handle::before {
 48 |   background: rgba(0, 0, 0, 0.2);
 49 |   transform: scale3d(2.8, 2.8, 2.8);
 50 | }
 51 | .android .v-toggle--checked:active .v-toggle_handle::before {
 52 |   background: rgba(0, 154, 87, 0.2);
 53 | }
 54 | 
 55 | /** Range Slider */
 56 | .android .v-range-slider input::-webkit-slider-thumb:before {
 57 |   background: var(--android-green);
 58 |   top: 9px;
 59 | }
 60 | .android .v-range-slider input::-webkit-slider-thumb {
 61 |   background: var(--android-green);
 62 |   border: 0;
 63 |   box-shadow: none;
 64 |   width: 22px;
 65 |   height: 22px;
 66 |   margin-top: -9px;
 67 | }
 68 | 
 69 | /** Radio */
 70 | .android .v-radio input {
 71 |   position: relative;
 72 | }
 73 | .android .v-radio input:before {
 74 |   position: static;
 75 |   content: '';
 76 |   width: 10px;
 77 |   height: 10px;
 78 |   border-radius: 50%;
 79 |   background: var(--android-green);
 80 |   opacity: 1;
 81 |   transform: scale3d(0, 0, 0);
 82 |   box-shadow: none;
 83 |   border: 0;
 84 |   transition: transform 0.15s;
 85 | }
 86 | .android .v-radio input:after {
 87 |   position: absolute;
 88 |   top: -4px;
 89 |   left: -4px;
 90 |   display: block;
 91 |   content: '';
 92 |   width: 18px;
 93 |   height: 18px;
 94 |   border: 2px solid #5a5a5a;
 95 |   border-radius: 50%;
 96 |   box-sizing: border-box;
 97 |   transition: background 0.1s;
 98 | }
 99 | .android .v-radio input:checked:before {
100 |   transform: scale3d(1, 1, 1);
101 | }
102 | .android .v-radio input:checked:after {
103 |   border-color: var(--android-green);
104 | }
105 | .android .v-radio li {
106 |   border: none;
107 | }
108 | 


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